Alignment within a DIV - Using CSS

[Felipe Ramalho]

Example Below.

 

-------------------------------

Within Div Menu

Put a <ul> within each <li> put a picture.

But The images are not centered within DIV MENU

I need the images in Centralized Mid DIV menu.

HTML

        <ul>	<li><a href=""><img src="Photo1.png" width="80%";></a></li>	<li><a href=""><img src="Photo2.png" width="80%";></a></li>	<li><a href=""><img src="Photo3.png" width="80%";></a></li>	<li><a href=""><img src="Photo4.png" width="80%";></a></li>	</ul>

CSS

#container{	width:97%;	max-width:960px;	min-width:800px;	margin:1em auto;	background-color:#EBC79E;} #menu{	width:10%; height:50%;	background-color:#238E68; border:2px solid; border-radius:5px;	position:absolute; top:20%; left:0%;}ul {list-style-type:none;}

I need this picture in the middle of Centralized <div id = "MENU">

[davej]

You are concerned about the mid-banner? You want this to be a foreground or background image?

[dsonesuk]

Since hes stated the left #menu i should have thought he want images in that centralized horizontal AND vertical align is the question? if it is just horizontal make the ALL UL and child elements block and us margin: 0 auto

[MarkT]

I would say, if yuo want images on top, use z-index.

 

 

Else, i would use padding, and fix it that way, utilising the auto capability.

[Felipe Ramalho]

You are concerned about the mid-banner? You want this to be a foreground or background image?

In truth there.

You helped me in Ultimo Topic, and he answers some of this Topic!

/ * To Align Image in Menu Mode * /

# menu {text-align: center;}

Since hes stated the left #menu i should have thought he want images in that centralized horizontal AND vertical align is the question? if it is just horizontal make the ALL UL and child elements block and us margin: 0 auto

dsonesuk You said to do so!

HTML '' Source ''

<ul>

<li> <a href=""> <img src="Photo1.png" width="80%";> </ a> </ li>

<li> <a href=""> <img src="Photo2.png" width="80%";> </ a> </ li>

<li> <a href=""> <img src="Photo3.png" width="80%";> </ a> </ li>

<li> <a href=""> <img src="Photo4.png" width="80%";> </ a> </ li>

</ ul>

Css '' Source ''

 

ul{ margin:0 auto; text-align: center;}

 

That would be a Friend?

 

 

I would say, if yuo want images on top, use z-index.

 

 

Else, i would use padding, and fix it that way, utilising the auto capability.

Article About Z-index would Below this?

http://www.w3schools.com/cssref/pr_pos_z-index.asp

But the layout and all Created with%

Z-index Method Works Well in Responsive Layout?

------------------------------------

Friend another problem I've been having and Foot.

How do I let him in the Final of the page.

CSS Soruce Foot

# foot {width: 100%; height: 15%;

background-color: # 4A766E; border: 2px solid;

position: absolute, top: 80%; left: 0%;}

If I put Border: 2px; it does not get stuck in the bottom of the page it rises and leaves blank space at the bottom of the page.

Can I use border: 2%? or that element should be used cm pixel?

I am not able to leave the foot stuck in the Final of the page.

Thanks for the Help Friends, I am awaiting =)

[davej]

Ok, I'm confused on your status here. Please post your code and also an image or diagram showing what you want.

 

In your original diagram I do not understand what is foreground and what is background.

 

If you want a responsive design then try to use % wherever it makes sense.