I have a grid of products four wide
http://jsfiddle.net/QpX4f/4/
Why won't margin:0 auto; on the product images centering them? And why aren't those view buttons inline?
http://jsfiddle.net/QpX4f/5/
Note that i'm not sure what you're trying to achieve with the blue bg but it appears to be the exact same size at the product image... i've just placed it exactly behind the product image, move as you please
edit :: I'll add my two cents to give you some pointers so you can learn.
A few notes, your CSS could use some real organization. This smashing article is great for learning about css.
Next, you're using floats all over the place and I'm not sure why. Float only the elements you need to which is your container for each production.
For the bg image, you just need to actually set its coords to center it, also, the floating if the product image inside the link was messing up its position, and your margins were taking it out of center.
The view button is unnecessarily wrapped in a p tag, which does nothing.
In my opinion your markup is extremely bloated. You should start with simple cases and only add declarations when you see fit. Lean CSS is often much easier to debug than bloated. (as with any code really)
Also, using a tool like Firebug or Web Inspector will really help you see how your css declarations actually affect the positioning of elements.
answering your new question
your margin:0 auto was most likely messed up by the floats. This would would if it was using a normal inline display with not float. The view buttons were inline, they were just pushed down according to the content above, to take it out of this display mode I made it position:absolute (note you have to position the parent relative) and just set it to be at the bottom left.
Here you go: http://jsfiddle.net/gVLXV/
So...
ul.display li .image { background: url(http://propono.co.uk/image-shadow.png) no-repeat top center; } /* Added top and center to the background. */
ul.thumb_view li .image { padding:0 0 0 8px; }
Related
I'm brand new to coding, and realize there is probably a very simple solution to my problem. I have imported Photoshop slices into Dreamweaver by using absolute positioning for each slice within a DIV #container (which is how I have been instructed by my professor.)
http://s1292.photobucket.com/user/ajp2487/media/Screen%20Shot%202015-04-10%20at%209.04.27%20AM_zpsbaeyzcdf.png.html
I want to create a horizontal navigation via CSS (blue text) over the placeholder slice (light gray text). To do so, I created an DIV ul li for the links.
http://i1292.photobucket.com/albums/b578/ajp2487/ss_zpswqnc75pl.png~original
I realize that you supposedly cannot float an element when absolute positioning is in play. However, when I remove absolute positioning, try relative positiong, etc. from .nav, ul, the ul disappears (probably behind the slices) and shifts my existing slices. When I do use absolute positioning, the float left command is rendered useless. Right now everything is as it should be, except that I need the ul to flow horizontally, not vertically!
There has to be an simple solution to this; I'm ready to tear my hair out and any help would be appreciated. Please answer in as simple terms as possible!
display: inline-block; will also do the job if you cannot use floats. Does it not work if you put the float on the li?
nav li {
display: inline-block;
}
Here is an example:
http://codepen.io/anon/pen/xboPxB
Another few things to note (though I completely understand the requirements of using Dreamweaver and doing things in a bizarre way due to coursework), position: absolute; can be dangerous and layout breaking, as I'm sure you are discovering; though I won't go into this unless you have any questions as you mention it is due to your instructor.
Line-height should really be unitless - think of it as line-height * font size. If your font size is 20px (or 1em) and line-height needs to come out as 40px (or 2em), then line-height is 2.
I hope I've understood and answered your question correctly! Please let me know if you are still stuck :)
Hy there. I'm macking an HTML/CSS tutorial and I'm facing some problems with positioning and those stuff. I got 3 stacked elements at my header and want them to be at the very center.
So I try something like this:
.container {
margin: 0 auto;
width: 940px;
}
at my CSS code, and add this class to those elements. It is recognizing the comands, since it moved a bit. But not the way I expected:
It remanied at the left, just a few more steps to the right. Funny part is: if I put something like
.container {
margin: auto 50% auto 50%;
width: 940px;
}
it's behavior is:
it GETS centered, but extends the screen lenght and put a scrolling bar. Why? Shoudln't both those options center my elements? What can I do to achieve my goal? I would appreciate an answer so much, since I get a lot of difficulties when trying to understand this part.
In your first example, the element is centered fine - it's just still 940 pixels wide, nearly the entire browser, thus not really far from the left edge. If you want to center its contained elements as well, just add text-align:center to it.
To see better what's happening, consider temporarily adding a background:red to the element and a lot will be clearer. It makes learning CSS tons easier to actually see the 'boxes' of the box model doing their job.
In your second example you appear to be confusing the order of values of the margin declaration. You're actually giving it a left and right margin of 50%, putting its left edge indeed right in the center. The 940 pixels width then make it stretch off to the right, still 940px wide, causing the scrollbar.
.container { text-align:center }
Give it a shot.
This would be straight forward to solve if you added your html as well.
CSs for rate box:
.rating-input {
font-size: 25px;
position:relative;
left:101%;
}
Button:
.custom-input-button {
text-align: center;
position:absolute;
left:64.4%;
top:12.1%;
}
image :
<img src="https://graph.facebook.com/<?php echo $user_id; ?>/picture?type=large"
style ="position:relative; top:-46px; left:0px;"/>
It gives different look in chrome and firefox:
Firefox:
In chrome bookmark menu is not open. The change in spacing is due to that?
I am frustrated changing the positions, but problem does not solved.
I agree that your not giving us enough code to really give you a good response to.
If this helps at all, when I do custom form boxes as such, I wrap them in a div to start off with. Then define my widths/heights, and do a left float. This might be a deprecated method, and there may be a better way to do it, but this has always worked for me so I still tend to do it.
That should keep your elements all at the top, then you could do a clear:both, and float your rating system to the right? Just an idea.
Just to sum up conversation in comments.
You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers.
Quick example of what babbling about in upper paragraph
jsfiddle.net/Driveash/qgbLB
You can also make extra css for specific browser.
Are left and margin-left the same?
Left and margin-left could do the same thing but they are not the same. Left is for positioned element (as absolute, relative, fixed). If you don't have positioned element then you want to use margin-left.
add z-index:-999; to the image so it doesn't sit in front of the green banner
Issue
I need to vertically center the order_form div (light gray) and keep it on the very right side of each of the product boxes on our website. The div's height is non-fixed, and can occasionally fill most of its allowed vertical space (which is 160px because of the product image). The picture div vertical-aligns perfectly. I made an example out of one product box and simplified it as much as possible while leaving its html intact.
Here's a jsfiddle displaying the problem (sorry for the lack of images!)
I realize there are a lot of posts on this topic; I've read many of them. I've tried everything I could think of, and everything I have found in all the articles, solved questions, even every little clue I've found over the past three+ hours. Nothing has worked.
I'm completely lost on how to solve this, and I'm sorely tempted to change the picture and order_form divs to a table just for the sake of aligning ._.
Help?
Several things I've tried:
display: table-cell; vertical-align:middle; on the order_form div, and adding display:table to its parent.
The above with display:table on an added wrapper div instead.
adding a wrapper div and using margin + negative margin.
display:table-cell; vertical-align:middle; and adding a wrapper div with left:160px; display:table. The wrapper div's width is never correct, breaking the order_form.
vertical-align:middle on the order_form and having height equal to line-height on its container
several other approaches i do not remember
saying please.
Asides
I need this to be functional on somewhat older browsers (ex: IE8), without using any javascript.
Background info: I've recently started working on our site and, among other things, I've since converted all the product boxes from tables to divs and cleaned up the css a bit. The problem is the tables, being tables, handled the aligning really well...
Also: The next step is to convert the buttons from images to prettyful css links so they scale nicely along with the text (and ditch the table there, too). Don't dock me points for what I haven't touched yet!
If I understand the question rightly, one option would be to set div.order_form to display: table; height: 160px; and then create a div inside that (wrapping around all its content) and give that inner div display: table-cell. That still requires the use of the absolute positioning, which isn't ideal, but it does work.
If you want this on old browsers too..
wanna use some jquery scripts?
The height will auto adjust depending on your order_form height.
See DEMO on jsfiddle http://jsfiddle.net/kdNnw/
JQUERY
$(document).ready(function() {
// get dynamic height of order_form and calsulate margin-top css
var ver_top = ( 160 - $('.order_form').height()) / 2;
$('.order_form').css( "margin-top", ver_top+'px' );
});
I've been trying to learn some basic CSS/HTML by making myself a static web page. At the bottom of the page I want to show a few 32x32 image icons of websites I go to.
I want to display them inline and put them in the center of the page. Right now I have 3 icons so I created a block of width 96 (= 32x3) and simply center the container block.
However I think there's a good chance that I'll need to add more icons to the list, which means every time a new icon is added, I need to recalculate the width of the container block. I'm wondering if there is a rule in CSS that would save me from doing that?
For example I could simply do text-align: center for text field regardless of how many words I put in there. Is there something similar for image blocks?
Thanks so much!
UPDATE
As in cbp's answer, text-align actually also works for img tags. Thanks for pointing that out!
However (sorry for not having made it clear before), I didn't really use the <img> but rather <a> with CSS setting their background images. So I guess two follow-up questions:
1) Does text-align: center still apply here?
2) Is it preferable to use <a> (with CSS background-image) over raw HTML <img>? Any advantage to use either?
Thanks again!
By default text-align: center will have the same effect on images as it does on text, as img tags have display: inline by default.
So you can make the element that contains your imgs have width: 100%, then give it text-align: center.
Give Display:inline-block to your icon <a> Tag. Write like this:
.icon{
width:30px;
height:30px;
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;/*For IE7*/
}
.parent{text-align:center;}
Check this http://jsbin.com/epusop/edit#html,live
text-align is a bit of a misnomer, as it doesn't act on just text. So, yes, you could just use text-align:center on the containing element for your images.
Sitepoint reference: text-align
you can use padding and margins in % from there parent elements.