CSS - Positioning Images With Css

I redid a webpage and I am not using table, everything displays properly except the last two images, one has different height... I need to align the last one on top.

Since I'm new to css, I don't know how I could do float:top;..

view what I'm talking about.

hopitel.com/temp/test.html
Thanks.

I have worked out a section banner. There is one for each section in a column of 4 or 5. The buttons on the left call a JavaScript that move DIVs up and down, reordering the content as the user wishes.

Anyway, I'm having trouble figuring out how to make the center section where the Title is, non-fixed (expand to fit the space). I'd like it to spread out to as wide as the container allows, minus the width of the left and right ends, of course.

See the actual thingy on a test page he Siliconsatan

Here's the styles:
Code:

<style type="text/css" media="all">
.col_tab_left {
position: relative;
width: 36px;
height: 30px;
left: 0px;
top: 0px;
background-image: url(./images/col_tab_left.gif);
}
.col_tab_middle {
width: 430px;
height: 30px;
position: absolute;
left: 36px;
top: 0px;
background-image: url(./images/col_tab_bg.gif);
text-align: center;
}
.col_tab_right {
width: 26px;
height: 30px;
position: absolute;
left: 466px;
top: 0px;
background-image: url(./images/col_tab_right.gif);
text-align: center;
}
.col_tab_title {
font-family: tahoma,verdana,arial,helvetica,sans-serif;
font-size: 10pt;
letter-spacing:  .05em;
color: #003366;
font-weight: bold;
line-height: 30px
}
.col_block_up {
width: 36px;
height: 30px;
border: 0px solid #003366;
left: 5px;
}
.col_block_down {
width: 36px;
height: 30px;
border: 0px solid #003366;
position: absolute;
left: 13px;
top: 0px;
}
.col_image {
position: relative;
display:block;
left: 6px;
top: 12px;
}	
</style>

Here's the html:
Code:

<div class="col_tab_left">
<div class="col_block_up">
<img onclick="MoveBlock('ys101','bizJournalCity','Up');" class="col_image" src="images/block_up2.gif" width="11" height="11" border="0" alt="" alt="Move section up" title="Move section up" style="cursor:pointer;" />
</div>	
<div class="col_block_down">
<img onclick="MoveBlock('ys101','bizJournalCity','Down');" class="col_image" src="images/block_down2.gif" width="11" height="11" border="0" alt="" alt="Move section down" title="Move section down" style="cursor:pointer;" />
</div>	
<div class="col_tab_middle"><span class="col_tab_title">Business Journal News</span></div>
<div class="col_tab_right"></div>
</div>

It looks like this:

I'm very new to css positioning so this might be an easy question...


What I'm trying to do happens to position properly in IE6 and Firefox like so:

http://whythrowchip.go.dyndns.org/atx1.jpg


But it doesn't come out properly in IE 5.X , it looks like this:

http://whythrowchip.go.dyndns.org/atx2.jpg


It's know it's probably not an IE 5.X quirk, I guess I'm not supplying the right information to tell it to stay where I want it...


So what's the best way with CSS to make a row of images that lines up side by side and won't break to the next line?


Here is my code now as it stands (I put in three dots in a row in a couple places so there wouldn't be quite so much code pasted here):

Code:

from main page:

<div id="wrapper">
<div id="top_banners"><img src="logo.jpg" width="391" height="106" border="0"><img........</div>
<div id="top_menu">img src="menu1.jpg" width="150" height="20" border="0"><img.........</div>
<div id="content">
<p>Some filler text in here</p>
<p>Some filler text in here</p>
</div>
</div>




entire external style sheet:

body{
background-color:#666666;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper{
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
background-color: #EAEAEA;
border: 1px solid #000000;
width: 750px;
text-align:left;
}

#top_banners{
margin: 0;
padding: 0px;
height: 106px;
}

#top_menu{
margin: 0px;
padding: 0px;
height: 20px;
}

#content p{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
}

any help would be greatly appreciated


ps:the buttons in the second row are rollover gif images done with Dreamweaver, not that that should matter I guess

Hey guys i have some image layout problems with my images on safari and firefox on Mac only. Firefox and safari on PC seem fine but its only happening on Mac. The positioning of the images have moved dramatically.

Not sure how to fix it

CSS is validated and so is xhtml strict

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag?

Hi guys,

I'm pretty new to web design, so please be gentle.

I have an issue with CSS positioning that I'm trying to figure out. After research, I figured out how to align a div to the centre using an external stylesheet. However, I want this div to be positioned at the very top of the page. Currently, it sits approx 100px from the top and I can't figure out how to position it to 0px.

Here's my code;

body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; }
#content {
width: 760px;
text-align: left;
margin: 0 auto;
background-color: #000000;
top: 0px;
}

Can anyone help me?

Thanks
Luke

I need help laying out my page, and I can't seem to get this CSS stuff right.

My page has a logo at the top left, a menu at the top right. Below the logo on the left, I have an image. To the right of that I have another image. The bottom of those two images need to line up.

Below those 2 images, I have 3 smaller images I want to display from left to right. I tried to set up DIV blocks, and used CSS to position them. When it lays out on my page, and I scrunch the brower small, the images on the right side overlap and cover the images on the left. Also, the images on the bottom extend below the bottom of the browser, but I don't get a scroll bar to see them.

I am told tables are not the way to do it anymore. I am not a web developer, so I need some help, pretty please.

stupid question

I have a three column layout I picked up from the web here and there and I am trying to be clever and of course, since I am not a CSS pro...I am blowing it!

the css I am messing with is as follows:

container holds the three columns and the header and footer.

in the header section..which is called #top, I have an image which is the logo for the page. The top is 95 px high. what I wanted to do was split the TOP div into two sections, with the second one starting at 340px from the left and go about 250 px across. naturally, I tried to use:


#new_section
{
margin-left: 323px;
margin-right: 0px;
margin-top:55px;---bottom of #TOP div---
padding:0px 0px 40px 0px;
border-bottom:2px solid #D7C8AC;
background-color:#E2DCDC;
}

all the variations I used either worked in IE and not NS or vice versa.

I know it is just a simple positioning issue I am overlooking.

any help would be appreciated greatly.

thanks!

jpm226@comcast.net
**************************
#container
{
width:auto;
margin:0px 0px 0px 0px;
background-color:transparent;
color: #333;
line-height: 130%;
background-image:url(bg.gif);
background-position:left;
background-repeat:repeat-y;

}

#top
{

padding:0px;
height:95px;
border-bottom:2px solid #E2DCDC;
background-color:#F5F5F5;
background-image:url(header.gif);
background-repeat:no-repeat;
background-position:left;
}


.text{
padding:4px;
fontalatino linotype;
color:#000;
text-align:justify;
}

#leftnav
{
float: left;
width: 322px;
margin-top:0px;
padding:0px;

}

#rightnav
{
float: right;
width: 214px;
margin-top:149px;
margin-right:2px;
padding:0px;
background-color:transparent;
/*border-left:1px solid green;
border-right:1px solid green;*/
}

.news
{

margin: 0px 10px 0px 10px;
background-color:transparent;
/*height:235px;*/
border: 2px solid #fff;
}


#image
{
margin-left: 323px;
margin-right: 0px;
margin-top:0px;
padding:0px 0px 96px 0px;
border-bottom:2px solid #D7C8AC;
background-color:#E2DCDC;
background-image:url(desk.gif);
background-position:right;
background-repeat:no-repeat;

}



#content
{
margin-left:323px;
margin-right: 216px;
margin-top:0px;
padding:10px 0px 30px 0px;
max-width: 36em;
border-left:1px solid red;
border-right:1px solid red;
background-color:transparent;
}

.content2 {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:20px 8px 10px 8px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#F5F5F5;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */

}
#footer
{
clear: both;
margin: 0;
padding:0px;
color: #333;
border-top: 1px solid #fff;
background-color:#EEE8E8;

}

I have a table with 680px in width & trying to fit my img into the table. I'v tested it both in 1024x768 & 1280x1024. But it just doesn work. When i position it to match my 1024x768, it'll look bad at 1280x1024..

here is my positioning code :
img.one{ position:absolute; top:325px; left:550px; }

why is that so...

http://www.drowninginmytears.org/invalid/

it works in internet explorer, however in firefox, it is i believe 3px off (the main header and navigation), can anyone figure out why? i've been stumped now for hours. thanks

my css is:

http://www.drowninginmytears.org/invalid/css.css

Hi all.. I just stumbled onto this site via a google search. I'm having a problem with some "div" work and postitioning of a graphic. I'm working on a site and have decided to do all the positioning via CSS. The positioning shows fine in Firefox but the last portion is shifted down 10 or so pixels in Internet Explorer.

Here's a quick show of the error:

URL

Here's the HTML with CSS below:

Code:

<div id="Table_01">
	<div id="hdr-main_">
		<img id="hdr_main" src="images/hdr_main.jpg" width="557" height="161" alt="" />
	</div>
	<div id="hdr-mnu-left_">
		<img id="hdr_mnu_left" src="images/hdr_mnu_left.jpg" width="5" height="20" alt="" />
	</div>
	<div id="hdr-mnu-bg_">
		<img id="hdr_mnu_bg" src="images/hdr_mnu_bg.jpg" width="547" height="20" alt="" />
	</div>
	<div id="hdr-mnu-right_">
		<img id="hdr_mnu_right" src="images/hdr_mnu_right.jpg" width="5" height="20" alt="" />
	</div>
	<div id="hdr-mnu-bottom_">
		<img id="hdr_mnu_bottom" src="images/hdr_mnu_bottom.jpg" width="557" height="5" alt="" />
	</div>
</div>
</body>
</html>

I've also pasted the CSS code:

Code:

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
}

#hdr-main_ {
	position:absolute;
	left:228px;
	top:41px;
	width:557px;
	height:161px;
}

#hdr-mnu-left_ {
	position:absolute;
	left:228px;
	top:202px;
	width:5px;
	height:20px;
}

#hdr-mnu-bg_ {
	position:absolute;
	left:233px;
	top:202px;
	width:547px;
	height:20px;
}

#hdr-mnu-right_ {
	position:absolute;
	left:780px;
	top:202px;
	width:5px;
	height:20px;
}

#hdr-mnu-bottom_ {
	position:absolute;
	left:228px;
	top:222px;
	width:557px;
	height:5px;
	
}

Does anyone know why my graphic is turning out the way it is in IE and not in Firefox? This is my first serious attempt at positioning with CSS.. so bear with me

Thanks all...

Jason

Hi bit of a newbie but confused by following code;

The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings?

Pulling hair out!

Thanks,

Bill.

.child { width: 200px;
background-color:green;
background-image: url(unt.bmp) ;
}
.parent {margin: 0; padding: 0}
.bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px }

.br1 {background: url(_round_br.gif) bottom right no-repeat;}

.tl1 {background: url(_round_tl.gif) top left no-repeat;}

.tr1 {background: url(_round_tr.gif) top right no-repeat;}



</style>

</head>



<body>

<div class="parent">

<div class="child">
<div class="tl1">
<div class="tr1">
<h2>Hello </h2>
</div>
</div>
</div>
/* When displayed in browser the above is separated from the following by a gap of around 20 odd px */
<div class="bl1">
<div class="br1">
<h2>Hello</h2>
</div>
</div>

</div>

</body>

</html>

remove this topic plss. thanks