i have a problem with z-index on my webpage, i need move shopping bottons to the top -100px but when i try it the button loose the actions not work anymore, i try to use z-index: 99999 but not work too, i need some help! here my page link limitx.panamerik.net
----IMAGES-----
This is the real image:
I need make this:
You're using top value in negative that means there could be problems with the followings:
the parent div is set to overflow:hidden; and don't show the element i.e. hide the element going behind the parent div. (remove overflow:hidden from the parent)
z-index value is not working? You didn't explicitly declared the position. (set position:relative or absolute)
UPDATE: After looking at your screen shots again I realized that you want to display the button to the right of the product images. I'm not sure if this is a good idea, because this theme is meant to be responsive.
But if you really, really, really want to do this then you may try to add the following <CSS> to your custom.css file:
#media only screen and (min-width: 768px) {
.products-grid .actions {
margin: 0;
position: absolute;
top: 100px;
right: -25px;
}
.owl-wrapper {
z-index: 1;
}
.slider-arrows1 .owl-controls .owl-buttons .owl-prev, .slider-arrows1 .owl-controls .owl-buttons .owl-next {
z-index: 2;
}
}
This will work as you can see in the screen shot below, when hovering the button.
I have added #media only screen and (min-width: 768px) because of the responsive nature of the theme. Otherwise, when the browser viewport gets smaller, the buttons would overlap the image. You may want to play a little with this setting and should test it on some mobile devices too.
To learn more about this see this question.
EDIT: I'll leave my original answer below, just in case this may
helpful to someone else in the future...
I see that you use Infortis Ultimo theme, which is a great choice. I don't think you should use <CSS> to move the button. It is better to move the entire <div class="actions"></div> to the top.
The result will look like this:
You can do this by making some changes to the following file:
app/design/frontend/ultimo/default/template/catalog/product/list.phtml
Somewhere around lines 273 to 289 (depending on the themes version) you will find the code for this:
<div class="actions clearer<?php echo $actionsClasses; ?>">
....
</div> <!-- end: actions -->
Note: It is best to first copy the entire list.phtml file to your own sub-theme
and make the changes there.
In your sub-themes list.phtml file just cut the section I mentioned above and move it up to somewhere around line 216 of the file.
Paste it right after the beginning of the <list class="item"> element and before the <div class="product-image-wrapper"....>, just like this:
<li class="item">
<!-- PUT THE CODE HERE -->
<div class="product-image-wrapper" style="max-width:<?php echo $imgWidth; ?>px;">
Also don't forget to add this in your custom.css style sheet:
.products-grid .actions {
margin: 0 0 10px;
}
This should do the trick for you!
Related
I wrote a little program in angular using an ui-select element. The problem is that the search bar is really too long and I didn't find how to reduce it. Usually, we have some "width" properties that you can change for that but the css code is too complicated and I didn't find how to manage that. What I want to do is to save three bars at the same line.
I copied the sample from the official page of the ui-select, so it contains a lot of things in css that I didn't understand and I don't know much about css or bootstrap...
The style element in the index.html is this one :
<style>
body {
padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
</head>
And they included a huge select.css file in their sample that you can find in my plunker : http://plnkr.co/edit/kuryoI5osBtRihYAeoVH?p=preview
Can you show me how can I reduce the width of th search bar?
Can you PLEASE show me how to remove all the unecessary line from the select.css included in the plunker that are not used in my example ?? I don't know how can I do that efficiently. I'm afraid to delete important elements and I really got lost in that huge css file.
Thank you in advance !
Edited 2 (How to use the col-xx-nn) properties with bootstrap
The xx indicates in which view you want the property to be applied:
xs : extra-small devices
sm: small devices
md: medium devices
lg: lg devices
The nn indicates how many column the element will occupy (total is 12). Please see http://getbootstrap.com/getting-started/ for reading the full docuemntation.
And this is how your code would be...
<div class="row">
<!--First ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
<!--Second ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
<!--Third ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
</div>
Edited
Include a custom css and put these rules. Make sure to include this after the ui-select css files in order to overwrite its rules:
.ui-select-container {
max-width: 200px; /*put the desired width here!*/
}
.ui-select-bootstrap > .ui-select-match > .btn {
max-width: 200px; /*put the desired width here!*/
}
.ui-select-bootstrap > .ui-select-choices {
max-width: 200px; /*put the desired width here!*/
overflow-x: scroll;
}
.ui-select-container .form-control {
max-width: 200px; /*put the desired width here!*/
}
Check this working plunker http://plnkr.co/edit/GN8i5PeFebS7Bo04GiUt?p=preview
In this plunker the rules are in myOwnCss.css file and I needed to add another custom rule in order to get this done properly because some of the other default styling of the ui-select. See below
/**some additional styling in order to get
the demonstration working properly (very possibly not needed for you)*/
.ui-select-bootstrap .ui-select-choices-row.active > a {
color: black;
background-color: white;
}
Important!:
Please, be aware that if you have an option with a name too long (it
takes more than you desired width, 200px in this case) it won't be
show completely in the selected option, and besides you have to
scroll over the x axis in order to read it completely in the dropdown
list.
When you create a ui-select item, it will generate a div for all its content, and with three bars, all those divs will probably be shown, one below the others. (TIP: you can solve this using bootstrap classes: col-md-4 for every div which wraps every ui-select)
I'm doing a site for my uncle and I have a slight issue. When I visit it on a mobile, the Logo, site title, and navigation bar are all mushed together.
Here's what it looks like here.
How can I change this in CSS? I've looked all over, and I didn't find any answers. I've tried changing the #Media CSS part on style.css
You could try doing:
margin: 20px;
That should create a gap between the logo and the title should be farther apart. Also if you could include some code in your posts that would be great.
Since the site is currently down and there is no code what so ever, I can at least help you out with how to apply media queries.
#media (max-width: 480px) {
.<yourimg>: <your styling>;
}
This will allow whatever you are styling to be applied on screen that are LESS than 480px wide. You are obviously allowed to put in the desired width you want. This is but an example :)
You can read all about media queries here
Hope this helped a bit :)
// Marc Hjorth
i use this:
<div class="col m12 s12 l8 offset-l2"> </div>
which sets the width of the div based on the size of the screen viewing it, making it easy to design a mobile site without having to design two separate sites.
for example, i'd make a container around certain area, set it as a row with a div and then use columns which change based on screen size
<div class="sections-container">
<section id="our-vision" class="section">
<div class="row">
<a name="our-vision"></a>
<div class="col m12 s12 l8 offset-l2">
</div>
</div>
</section>
</div>
I had quick look at the website.
There is an issue with an empty side bar that pushes the navigation down.
The sidebar with the following id:
id="sidebar-header"
You should try to disable the sidebar in your theme if you don't need it.
or you can add a simple css rule to your stylesheet to not display it:
#sidebar-header { display: none; }
to move the mobile menu you can edit this style rule in style.css on line 2795:
#screen and (max-width: 760) {
...
#access {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
padding: 0;
background: none;
box-shadow: none;
}
...
}
Edit the top and left properties there (add some pixel values like: top: 70px; for example)
I hope this helps.
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
I'm putting together some Responsive CSS for a website I'm building and I'm curious if I can use CSS to force images to render as alt text instead of images. We are displaying the logos of cosponsors but because of their variable size it's hard to fit them confidently into the responsive design. For that reason we'd like to store the company name as alt text and render that instead. Of course we could place the name in a separate element and toggle the visibility using CSS but using alt text seems DRYer.
You could store that in a data-attribute rather than the alt text, and then do something like this:
<span class='responsive' data-alt='foo'>
<img src='http://www.ponyfoo.com/img/thumbnail.png' alt='' />
</span>
#media only screen and (max-width: 300px) {
.responsive:before {
content: attr(data-alt);
}
.responsive img {
display: none;
}
}
The reason you can't do this just with CSS and an img tag is that img tags is because they are replaced elements, which means pseudo doesn't work with them, and therefore, using :before doesn't work with them.
Another approach, taking this into account would be the following:
<span class='responsive'>foo</span>
.responsive {
background-image: url('http://www.ponyfoo.com/img/thumbnail.png');
text-indent: -9999em;
overflow: hidden;
width: 180px;
height: 180px;
display: block;
}
#media only screen and (max-width: 300px) {
.responsive {
background-image: none;
text-indent: initial;
overflow: initial;
}
}
If you ask me, I like the second approach a lot more.
Went with:
<div class="cobranding">
<span>Brought to you by</span>
<span class="sponsor">Joe Shmoe Inc.</span>
<img src="img/graphics/joe_shmoe_logo.jpg">
</div>
Using CSS to toggle the visibility of the img or the "sponsor" based on responsive breakpoints.
Both of Nico's approaches look good. The only hiccup is that these cosponsor logos are going to be added via a CMS so I want to steer away from any solution involving case-by-case CSS (:before or background-image). For the sake of time I went ahead with the two element strategy above.
(answered for any others looking for a solution)
Important aside:
Remember the purpose of alt: to display meaningful ALTERNATIVE information (if the image doesn't load).
- so any implementation should not break that... (bad for accessibility & SEO).
That said...
If the image doesn't load, the alt will be displayed. So (untested) but you could try messing up the src attribute by javascript... this should cause the browser to display the alt since the image wont load.
- you might find this approach along with lazyload useful.
Also to note: a broken img doesn't behave like an image, so you can apply a img:before css rule (and use content: attr(alt) )
http://buttonspace.com/
I want to put equal space between the 4 buttons at the top, but I'm having trouble. At first the "social-buttons" id was in a DIV floating left, but that caused the slider to get pushed to the right.
So I changed everything to and now the padding style doesn't seem to have any effect.
I then tried adding "display: inline-block;" since I read that from another StackOverflow question but that didn't help.
Here's the current code (ignore the PHP):
<!-- Social Buttons -->
<span id="social-buttons">
<fb:like href="<?php echo $url; ?>" send="false" layout="box_count" width="60" show_faces="false" font="verdana" class="fb-like"></fb:like>
Tweet<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<g:plusone size="tall" callback="callback" href="<?php echo $url; ?>" class="google-plus-one"></g:plusone>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php echo $url; ?>"></script>
</span>
<!-- End Social Buttons -->
#social-buttons { display: inline-block; padding: 0 0 0 100px; }
.fb-like { padding: 3px 0 0 0; border:none; overflow:hidden; width:60px; height:90px; }
.twitter-share-button { padding: 6px 0 0 0; }
.google-plus-one { display: inline-block; padding: 0 0 0 10px; }
Any ideas? Ideally I want the best suggestion to not only space the buttons evenly, but to use proper code for putting the buttons on that header bar in the first place ;) I'm sure my code could use lots of improvement.
Updated:
Something like this:
http://jsfiddle.net/MjFmN/1/
#social-buttons div,
#social-buttons iframe {
float:left !important;
display:inline-block !important;
margin:0 10px 0 0 !important;
border:none;
overflow:hidden;
}
.fb-like {
width:50px!important;
}
Please note that the Google+ button doesn't appear in the Fiddle. I did test it with the actual Google+ html that the script generates and it appears to work for me on Firefox8, Window 7.
You can leave the HTML you have like it is now for this to work.
Another edit:
Just tried it in IE9, for some reason the FaceBook button displays in my local language causing the width to change and thus you only see part of the image ( overflow:hidden and all that ). If you can force a language setting on the FaceBook button this is solvable, but I have no experience with it to say if that is or isn't possible.
http://forum.developers.facebook.net/viewtopic.php?id=58989 seems to have some tips on how to do that.
This is not really the answer, but might help a bit down the road:
No block elements in inline elements (you have the and inside it some divs etc. make it a div).
Validation:
try fixing the validation (though most of it is probably the fb stuff):
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbuttonspace.com%2F
Try reducing the problem to the bare minimum. Eg. make a page with just the header part in it. and remove as much html as you can, with the error still there. then try to fix it from there. sometimes it's hard to see if the problem is really an issue from some faulty css/html before it.
The different boxes are styled differently (or at least they have different classes etc.) Try unifying it. Thought maybe the boxes are made with some javascript (I'm not sure, I haven't used thoses boxes before)?
Try doing this, with just some colored divs and see if you can make them be padded properly, then switch to the social buttons one by one.
I hope this can help you get started.
Edit: I think the problem is the FB button... try removing that or looking at the .fb_iframe_widget class there.