9 replies [Last post]
greenman
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-03-16
Posts: 10
Points: 0

Please look at this. I have it mostly done, but can't seem to get the images that are on the bottom up and to the right of the text.

www.webcoat.com/working

CSS
------
www.webcoat.com/working/css/main_page.css

Thanks,
Michael

greenman
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-03-16
Posts: 10
Points: 0

Please help.

can someone help me with this?

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

New to CSS

Try changing your css to:

#catalog
     {
     float: left;
     width: WHATEVER WIDTH OF THE IMAGE WITHIN IN PIXELS;
     }
#footer
     {
     float: left;
     color: #000000;
     font-weight: bold;
     font-size: .6em;
     text-align: center;
     }

The next sentence is true. The previous sentence is false. Discuss...

greenman
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-03-16
Posts: 10
Points: 0

New to CSS

no good, all it did was move the whole thing left in IE and didn't do anything in mozilla. (which more often than not is the right way)

Thanks though.

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

New to CSS

The code could be tidied up a bit... you've closed the 'bottom' div before the footer starts, so the footer could never sit next to the image.

Here's the amended HTML you need to replace:

<div id="bottom">
<div id="menu"><img src="images/menu.gif" alt="menu to choose where to go"></div>
<div id="text"><img src="images/text.gif" alt="text describing what we do"></div>
<div id="new"><img src="images/new.gif" alt="new product link"></div>
<div id="catalog"><a href="catalog"><img src="images/frontcat.jpg" alt="picture of, and link to catalog"></a></div>
<div id="footer">Copyright 2004 Visions Innovated Products, Inc.  For Website Comments please email <a href="mailto:[email protected]">Webmaster</a></div>
</div>
</div>
</body>
</html>

And the correct CSS... amend to the style you require:

div#catalog 
	{
	float: left;
	width: 150px;
	}
div#footer 
	{
	float: left;
	color: #000;
	width: 400px;
	margin: 8em 0 0 1em;
	font-weight: bold;
	font-size: .6em;
	text-align: left;
	}

The next sentence is true. The previous sentence is false. Discuss...

greenman
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-03-16
Posts: 10
Points: 0

New to CSS

what do i do with the new {} that is in between the catalog and the footer?

that image needs to be on top of the catalog and both right of the text and the footer under that...

I appreciate the help.

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

New to CSS

I didn't include the new { } because there was nothing in it. If it's going to contain something, then you'd have to insert the HTML and CSS so we can see what you are trying to achieve.

The next sentence is true. The previous sentence is false. Discuss...

greenman
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-03-16
Posts: 10
Points: 0

New to CSS

it is in the html the line you pasted: <div id="new"><img src="images/new.gif" alt="new product link"></div>

I just don't have anything in the css code yet cause I don't know what to put there yet...

I need the image new.gif and frontcat.jpg to be on the right of the text in the middle and the footer to be under it all...

THanks

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

New to CSS

Okay... replace the following CSS:

#menu
	{
	float: left;
	width: 150px;
	}

#text 
	{
	float: left;
	width: 370px;
	}
div#catalog 
	{
	float: left;
	width: 150px;
	margin: 1em 0;
	}
#new
	{
	float: left;
	width: 150px;
	}

div#footer 
	{
	clear: left;
	color: #000;
	width: 400px;
	margin: 8em auto 0 auto;
	font-weight: bold;
	font-size: .6em;
	text-align: left;
	}

The next sentence is true. The previous sentence is false. Discuss...

greenman
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-03-16
Posts: 10
Points: 0

New to CSS

Wow! Perfect. So, basically in the future if I wan to line things up like that just float them all left and make sure to put thier widths?

I really appreciate the help.