CSS - Centering Ul Images Inside Div Without Float !

sure i read an article on this somewhere but cant remember where, the problem is this

Code:

<div class="floated and cleared right">
stuff
</div>

<div class="fixed width" >
<img class="floated left">
lots of text
<div>

related to my previous layout post. the problem is that the img (infact any floated element, cleared or not) falls below the right floated div! (red box in attatched gif)

if i float and clear the first div left then the img is in the correct place within it but the div itseld drops below the right floated div

help!

My page has:
1) a left-sidebar which goes from the top-left corner and stretches down
2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page
3) a main content which covers the rest of the page

I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is.

currently my css rules a

Code:

#topBar {
   position: absolute;
   height:15%;
   text-align: center;
   left:30%;
   margin:0px auto;
}

the xhtml source code for the topBar and image is:

Code:

<div id="topBar">
   <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p>
</div>

(the image id is just concerned with the size of the image at this time)

any suggestions as to how to I can have the image centered within the <div>?

some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try:

Code:

<div id="topBar">
   <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p>
</div> 

or

Code:

<div id="topBar" align="center">
   <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p>
</div>

Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error.
For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document!

Hey guys, Im having a bit of a confusing problem at the moment, im trying to center my navigation menu inside my fixed width.


This is how it currently looks like:



Im trying to center it so it doesnt matter how many <li>'s there are it will still be centered.

Here is my HTML:

PHP Code:
<center>
<div class="main_menu">
    <ul>
    <li> <a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li> <a href="#">Portfolio</a></li>
    <li> <a href="#">Portfolio</a></li>
    <li> <a href="#">Portfolio</a></li>
    </ul>
</div>
</center> 





And here is my CSS:
Code:

.main_menu
{
	border:1px solid;
	width:898px;
	margin-bottom:5px;
	background-color:#333333;
	height:30px;
	line-height:30px;
	color:#000000;
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
        text-align: center;	
}
.main_menu ul
{
        position:relative;
        text-align: center;
        margin: 0 auto;
	list-style:none;
	cursor:pointer;
}
.main_menu ul li
{
        list-style-position:inside;
        cursor:pointer;
        text-align: center;
	padding:0;
	margin:0;
	float:left;
	background:#333333;
}
.main_menu ul li a
{
        cursor:pointer;
        text-align: center;
	color:#FFF;
	display:block;
	text-decoration:none;
	padding:0 25px;
}
.main_menu ul li a:hover
{
        cursor:pointer;
        text-align: center;
	background:#3ea5ea;
	color:#000;
}

Ok so either I'm tired and not thinking straight or I'm going crazy... Never had this problem before... The top wrapper has a gap below it in IE6 so it's not flush with the middle wrapper... Any ideas... See my source code below... Thanks for the help.

PHP Code:
<style type="text/css">

/* Structure */
/*-------------------------------------------------------------------- */

#Container {
    position:relative;
    margin:0 auto;
    width:920px;
    height:auto;
    min-height:100%;
}

#LeftSection {
    float:left;
    display:block;
    width:400px;
    height:200px;
    margin:0 0 0 2px;
    padding: 0 0 0 0;
}

#RightSection {
    float:left;
    display:block;
    width:400px;
    margin:0 0 0 0;
    padding: 0 0 0 0;
    height:200px;
}

#GreenTop {
    float:left;
    display:block;
    width:399px;
    height:30px;
    margin:0 0 0 0;
    padding: 0 0 0 0;
    background-color:#bdcdba;
}

#GreenTitle {
    float:left;
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    width:100px;
    margin:0 0 0 0;
    padding:0 0 0 11px;
}

#InnerControls {
    float:left;
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    width:295px;
    height:auto !important;
    min-height:100%;
    margin:0 0 0 0;
    padding:0 0 0 0;
}

#innerContainer {
    float:left;
    display:block;
    width:295px;
    height:auto;
    margin:0 0 0 7px;
    padding:0 0 0 0;
}

/* Wraps */
/*-------------------------------------------------------------------- */

#wrapTop {
    float:left;
    margin:0 0 0 0;
    padding:0 0 0 0;
    clear:both;
    display:block;
    width:908px;
    height:3px;
    background-image:url(images/topWrapper.gif);
    background-repeat:no-repeat;
}

#wrapMiddle {
    float:left;
    margin:0 0 0 0;
    padding:0 0 0 0;
    clear:both;
    display:block;
    width:908px;
    height:auto;
    background-image:url(images/middleWrapper.gif);
    background-repeat:repeat-y;
}

#wrapBottom {
    float:left;
    margin:0 0 0 0;
    padding:0 0 0 0;
    clear:both;
    display:block;
    width:908px;
    height:3px;
    background-image:url(images/bottomWrapper.gif);
    background-repeat:no-repeat;
}

#wrapInnerTop {
    float:left;
    display:block;
    width:295px;
    height:3px;
    margin:0 0 0 0;
    padding:0 0 0 0;
    background-image:url(images/innerTopWrapper.gif);
    background-repeat:no-repeat;
}

#wrapInnerMiddle {
    float:left;
    display:block;
    width:295px;
    height:auto;
    margin:0 0 0 0;
    padding:0 0 0 0;
    background-image:url(images/innerMiddleWrapper.gif);
    background-repeat:repeat-y;
}

#wrapInnerBottom {
    float:left;
    display:block;
    width:295px;
    height:3px;
    margin:0 0 0 0;
    padding:0 0 0 0;
    background-image:url(images/innerBottomWrapper.gif);
    background-repeat:no-repeat;
}

</style>

<div id="Container">
    <div id="wrapTop"></div>
<!--// Start Auto-Middle Wrapper //--> 
    <div id="wrapMiddle">
        <div id="LeftSection">
            <div id="GreenTop">
                <div id="GreenTitle"><strong>Branch:</strong></div>
            </div>
            <div id="InnerControls">
                   <div id="wrapInnerTop"></div>
                <div id="wrapInnerMiddle">
                    <div id="innerContainer">TEST<br /> TEST<br /></div>
                </div>
                <div id="wrapInnerBottom"></div>
            </div>
        </div>
        <div id="RightSection"></div>
    </div>
<!--// End Auto-Middle Wrapper //--> 
    <div id="wrapBottom"></div>
</div> 

How do i center the image both horizontally and vertically....

I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags

I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag.

How can i align the image int he middle??

Damn another problem good thing you guys are so helpful....

What am I doing wrong here?

css
Code:

#footer{
	position:relative;
	z-index:-1;
	margin-top:-50px;
	background-color:#666666;
	width:100%;
	height:100px;
	margin-left:auto;
	margin-right:auto;
	border-top:#000000 10px solid;
}
#footer ul{
	position:absolute;
	padding:0px;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto; 
}
#footer li{
	display:inline;
	padding:0px;
	margin:0px;
}
#footer a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	
	border-right:#FFFFFF 1px solid;
}

html
Code:

<div id="footer">
	<ul>
    	<li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
        <li><a href="#">Nav 5</a></li>
        <li><a href="#">Nav 6</a></li>
        <li><a href="#">Nav 7</a></li>
    </ul>

</div>

Just can't seem to get the list centered inside the div

I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works.

Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ?


Thanks in advanced.

Hi. I'm new here as well with cSS. Hope someone can explain this to me...darn it...cSS can be frustrating.

Here is my CSS code for an external style sheet:

#header {
background-image: url(images/penpal-inner.jpg);
height: 168px;
background-repeat: no-repeat;
background-position: center top;
border-bottom: 20px blue solid;
width: 640px;}


Here is the xhmtl code:

<div id="header"></div>

Why won't my background image center horizontally? It stays to the left of the page. If I take out the width (640px), it will center, but than I have a problem with the bottom border. I want the border to be the same width as the image but it is the width of the entire page.

So with the width (640 px) in the #header rule, I have the border the same length as the image, but not centered.

Without the width, the image centers but the border is now longer than the image.


how do i get the image to center on the page horizontally and still keep the bottom border the same width as the image?

Help please.

thanks

Steve.

Thanks for taking the time to read my question.

I am having problems centering my navigation images below the event calendar on my page (link below).

I think I know why, but can't get around it.

In my general css page (http://www.pierced.ca/Pierced.css) I have the line Code:

img {float:left; margin:0; padding:0;}

. I don't know what it does exactly, someone on this forum told me to put it on my page. Without it, my top margins on all my pages don't work. I think it is this code that is affecting my nav images. without the Code:

td.centercalnav {
padding: 1% 0 0 44%;
}

which is in (http://www.pierced.ca/PiercedEvents.css) they center to the page, not the table row.

With the current code it looks kind of ok in Fire Fox, but worse in IE.

What can I do to center the nav images under the calendar.

Thanks again,

Brad





http://www.pierced.ca/pierced-events.htm

My CSS practice site (http://stallinswebdesign.com/vs/index.php) is coming along - no tables! - thanks to those of you who have helped along the way. I've used the float property to construct a 3-column site. Two short questions include:

1. I want to display a small image at the top of my middle column. When I drag from either side to make the browser window smaller, IE forces the image and everything below it to the bottom of the page. FF and Opera simply slide the side-column content under the image, which I much prefer. Is there a way to tell the image to stay at the top so that IE can't push it to the page bottom?

2. If you look, you will see that my site is designed with a narrow column on either side of the main wider column. It would look really great if I could occasionally split that center column into two equal-width columns. For example, if each line segment below represents a short paragraph or image, could I do the following when I've already designed the site with float and not the position property?

_____ _______________ ______
_____ _______________ ______
_____ _______ _______ ______
_____ _______ _______ ______
_____ _______________ ______
_____ _______ _______ ______
etc. etc...

Thank you all for your time.

I'm struggling to find the correct CSS to center a middle column between a left and right column. I need this functionality for a dynamic photo gallery (powered by JS). To put it simply, I need the shaded area to the left and right of an image to expand/contract dynamically based on whether or not the image in the middle is in landscape or portrait format. I've figured out how to hard code it based on orientation, but I need it to be dynamic instead since the JS I'm using isn't aware of the orientation of the image. Examples of what it looks like live are seen below:

Portrait Orientation

www. notcrappy .com/html/portrait/studio-portraits/index.shtml

Landscape Orientation

www. notcrappy .com/html/wedding/favorites/index.shtml

Here's is some simplified HTML that I'm currently using to present the images and with the left/right blue borders:

<div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-left-side">&nbsp;</div>

<div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-middle-position"><img src="images/01.jpg"/></div>

<div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-right-side">&nbsp;</div>

And here is the CSS I'm using to give them the correct spacing when the dimension is known.

.left-blank-middle-landscape-right-blank-left-side {
width: 179px;
background-color: #003366;
float: left;
height: 400px;
margin-right: 3px;
margin-bottom: 10px;
}

.left-blank-middle-landscape-right-blank-middle-position {
float: left;
height: 400px;
margin-bottom: 10px;
width: 600px;
}

.left-blank-middle-landscape-right-blank-right-side {
width: 179px;
background-color: #003366;
float: right;
height: 400px;
margin-left: 3px;
margin-bottom: 10px;
}


.left-blank-middle-portrait-right-blank-left-side {
width: 346px;
background-color: #003366;
float: left;
height: 400px;
margin-right: 3px;
margin-bottom: 10px;
}

.left-blank-middle-portrait-right-blank-middle-position {
float: left;
height: 400px;
margin-bottom: 10px;
width: 266px;
}

.left-blank-middle-portrait-right-blank-right-side {
width: 346px;
background-color: #003366;
float: right;
height: 400px;
margin-left: 3px;
margin-bottom: 10px;
}

Can anyone give me any pointers on what I need to do to make the CSS dynamic based on the orientation of the photos? Thanks so much for your help!

Hi

I'm having some problems with CSS and was hoping that somebody on here could help me.

Firstly despite having a container (wrap) div set to a padding of : 0px auto; the site is not centering.

Second none of my images are showing, I've attempted to add a background and header image but neither are showing.

I'm a little confused because the same methods work fine on my wordpress site.

Here is a link to the dev site;

C:\Users\Keith\Documents\Site\index.html

And below is the CSS code;

Code:

/* ------------------------------
HTML Redefine Tags
------------------------------ */
body {
	width: 100%;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
	background: url (img/background.jpg) no-repeat bottom;
}

input, form, textarea

h1, h2, h3, h4, h5, h6 {
	margin: 0; 
	padding: 0;
}

h1 {
	font-size: 18px;
}

h2 {
	font-size: 14px; 
	color: #999999;
}

h3 {
	font-size: 13px; 
	border-bottom: solid 1px #DEDEDE; 
	padding: 4px 0; 
	margin-bottom: 10px;
}

a:link, a:visited {
	color: #0033CC;
}

a:hover {
	text-decoration: none;
}


/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (780 pixel) */

#container {
	width: 1024px;
	background: #ececec; 
	margin: 0px auto;
}

#topbar {
	width: 1000px;
	height: 118px; 
	display: block; 
	background: url(img/header.png);
	float: left;
	position: relative
}

#navbar {
	width: auto; 
	display: block; 
	height: 28px;
}

#navbar a {
	heigth: 28px; 
	line-height: 28px; 
	padding: 0 8px; 
	display: inline;
}

#main {
	width: auto; 
	display: block; 
	padding: 10px 0;}

#column_left {
	width: 332px; 
	height: 387px;
	margin-right: 1px;
	margin-left: 13px; 
	background: #000;
	float: left;
}

#column_right {
	width: 332px;
	height: 387px; 
	margin-right: 1px;
	background: #000; 
	float: left;
}

#column_right_adsense {
	width: 332px;
	height: 387px;
	background: #000; 
	float: left;
}

div.spacer {
	clear: both; 
	height: 10px; 
	display: block;
}

#footer {
	width: 1000px;
	height: 150px; 
	display: block;
	margin: 0 13px; 
	padding: 10px 13px; 
	font-size: 11px;
	color: fff; 
	background: #737373;
}

Hello,

Thank you for reading my post

This is what I try to create.
A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered.
I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center.
The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width.

What I already got :
The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size.

I did try and search for several hours, but couldn't find a good solution.

Mainly my question would be, how I can shrink or grow an image without knowing his size.


Basicly my html code is

Code:

<div id="navBar">
  <div class="navElement" id="nav1">
	<img class="navImg" src="images/home.gif" />
  </div>
  <div class="navElement" id="navN">
	<img class="navImg" src="images/notHome.gif" />
  </div>
</div>

my latest css for unknown image size

Code:

#navBar { /* main page navigation container */
	height: 460px;
	width: 70px; /* 1. this will be dynamically set */
	left: 100px;
	top: 151px;
	position: absolute;
	visibility: visible;
	}
.navImg {
	height: auto;
	width: auto;
	/*	height: 60px;*/
	/*width: inherit;*/
	position: relative;
	top:0px;
margin:0 auto;
}
#navElement1 {
	position: relative;
	width: auto;
	height: 70Px;
	top:0px;
margin:0 3px;
	visibility: visible; }

With javascript I add a onclick event handler on each navImg wich trigger the action. This works to.

Please, Is someone willing to help with pointers.

Thanks in Advance
SC

Hi guys
I'm having a little problem with a <table> based website

Please check the following image



Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well...

Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs)

Thanks a lot in advance

When I am floating two containers or images my background color disappears. Why is that and what should I do instead?

Here is what I am doing:

<div class="contentWrapper">
<div class="content">

<div class="leftContent">
<img src="" alt="" />
</div> <!-- end leftContent -->


<div class="rightContent">
<img src="" alt="" />
</div> <!-- end rightContent -->


</div> <!-- end content -->
</div> <!-- end contentWrapper -->


Now the css:


.contentWrapper {
margin: 0;
padding: 0;
width: 100%;
}
.content {
margin: 0 auto;
padding: 0;
width: 960px;
background: #ccc;
}
.leftContent {
margin: 0;
padding: 0;
width: 450px;
float: left;
}
.leftContent img {
margin: 0;
padding: 0;
width: 200px;
height: 200px;
border: #000 solid 1px;
}
.rightContent {
margin: 0;
padding: 0;
width: 450px;
float: right;
}
.rightContent img {
margin: 0;
padding: 0;
width: 200px;
height: 200px;
border: #000 solid 1px;
}

Thanks!