I have a horizontal menu of 6 images, which i want to center on the absolute bottom of the page <div class="mymenu" > <img src="1.png" width="80" height="100" /> <img src="2.png" width="80" height="100" /> <img src="3.png" width="80" height="100" /> <img src="4.png" width="80" height="100" /> <img src="5.png" width="80" height="100" /> <img src="6.png" width="80" height="100" /> </div> Code (markup): Currently I'm using this CSS code to do that .mymenu { position:absolute; bottom:0px; width:500px; margin-left: auto; margin-right: auto; display: block; } Code (markup): While this seems to work for separate images when the class is added to the particular IMG tag, it doesnt seem to work for group of images. How to center on the absolute bottom whole group of images? Thank you!
.mymenu { position:absolute; text-align:center; bottom:0; width:100%; display: block; } Code (markup): That should do the job. Although if it's your navigation I don't recommend having it at the bottom of the page.
yes it did, thank you! I didnt even try with text-align, cause all the tutorials are saying how images should be centered with auto margins only the position is actually "fixed" so its like bottom panel navigation and is secondary menu
Silly tutorials, they're flat-out wrong. Images are inlines, and inlines can't be centered with auto-margins. Only by turning them into blocks can you use automargins. It's usually NICER to center them that way, but not in your situation. pmek's code: .mymenu { position:absolute; text-align:center; bottom:0; width:100%; display: block; } Code (markup): assuming there's still a single div with the class .mymenu, is making that div 100% wide and setting text-align on the parent who holds inlines like images makes all inlines inside (the images) centered. The "display: block;" is not necessary really since "position: absolute" puts things in block context anyway. And if this is on the div, it was a block to begin with.
there is one small problem though the width 100% makes everything below that layer to be not clickable, and the menu takes only 630px in the middle. When i set the width to 630px it goes to the left p.s. the position is fixed now
I noticed you have: <div class="mymenu" > <img src="1.png" width="80px" height="100px" /> etc... </div> WITHOUT specifying what 80 and 100 are...pixels perhaps? After fixing that, try: .mymenu { position:absolute; text-align:center; bottom:0; width:480px; height:100px; display: block; }
thanks, i've missed that cause as it seems Dreamweaver CS3 outputs the code that way, without specifying its PXs anyway i fixed that and tried the new css, but it still doesnt center
In HTML you do not state the unit, so actually dreambeaver was correct not to add them. Px is assumed by the browser. Is this still your current HTML? <div class="mymenu" > <img src="1.png" width="80" height="100" /> <img src="2.png" width="80" height="100" /> <img src="3.png" width="80" height="100" /> <img src="4.png" width="80" height="100" /> <img src="5.png" width="80" height="100" /> <img src="6.png" width="80" height="100" /> </div> Code (markup): and you are using pmek's CSS? .mymenu { position:absolute; text-align:center; bottom:0; width:100%; display: block; } Code (markup): ? Since position: aboslute bases itself on the nearest positioned ancestor it might be good to see a bit more of the page code. Also, since it's absolutely positioned, it's sitting over whatever's at the bottom of the (nearest positioned ancestor or viewport), you may need to add padding to whatever element is the positioned ancestor, to keep other stuff away from that area.
the position is fixed now and the sizes are slightly changed, here is the actual code .mymenu { position:fixed; text-align:center; bottom:15px; height:75px; width:490px; background:#161616; left:30%; /* this is a temporary fix, to kinda center it, till i find a clean solution :) */ border:1px dashed #FFFFFF; padding:3px; } .mymenu img:hover { border:1px dashed #FFFFFF; } Code (markup): and the images <div class="mymenu" > <img src="1.png" width="60" height="75" /> <img src="2.png" width="60" height="75" /> <img src="3.png" width="60" height="75" /> <img src="4.png" width="60" height="75" /> <img src="5.png" width="60" height="75" /> <img src="6.png" width="60" height="75" /> <img src="7.png" width="60" height="75" /> </div>
ok could you post an image of how you want this to look and act? Cause I think I'm missing how you want it. Keep the HTML how it is now, so I know what your code is.