...

View Full Version : Need Positioning help



Xiy
01-02-2010, 12:18 AM
Hey, I'm pretty new to CSS only been learning 1/2 days and each time I create a full width header and input images, for example I've included 3 images, (Twitter, RSS and Email) - each time I resize the browser the images fly of the pages.

If I set a width they stay in there position fine but I'm wanting it so the header is 100%.


<div id="container">
<div id="top">
<img src="images/g2_01.jpg" />
<div id="social">
<a href="#"><img src="images/g2_02.jpg" border="0" /></a><a href="#"><img src="images/g2_03.jpg" border="0" /></a><a href="#"><img src="images/g2_04.jpg" border="0" /></a>
</div>
</div>


</div>


#container {
width: 100%;
}

#social {
float: right;
height: 42px;
}

#top {
background-image: url(images/g2_01.jpg);
background-repeat: repeat-x;
height: 42px;
width: 100%;
position: relative;
left: 0;
top: 0;
}

If you don't understand what I mean have a check here:

1) http://img80.imageshack.us/img80/7413/33436788.jpg

2) http://img683.imageshack.us/img683/7634/47424581.jpg

I'm not sure if this is a easy fix or not, please help.

Excavator
01-02-2010, 02:29 AM
Hello Xiy,
That will work, you are just putting an image in twice when you don't need to.
Delete this bit in red-

<div id="container">
<div id="top">
<img src="images/g2_01.jpg" />
<div id="social">
<a href="#"><img src="images/g2_02.jpg" border="0" /></a><a href="#"><img src="images/g2_03.jpg" border="0" /></a><a href="#"><img src="images/g2_04.jpg" border="0" /></a>
</div>
</div>


</div>
Just a wild guess but, for #social to drop when the page is that wide makes me think that g2_01.jpg is a very wide image. It could be that a little slice of that, say 42px by 1px, might look fine repeated on the X axis.

Also, in the CSS for #social you have float:right;
For a float to work correctly and dependably, it needs to have a width.

Please use the code tags,
- available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post. That #i button really only works for highlighting a single line of code.

Xiy
01-02-2010, 03:17 AM
Thanks, I think I've fixed it now, deleted the image then added a width on #social and put the right margin to 1200px, seems to of worked :D. Also do you have any tips on making my code cleaner?

Excavator
01-02-2010, 04:16 AM
Also do you have any tips on making my code cleaner?

If that was the entire code then you definitely need a DocType Declaration. See the link about DocTypes in my sig below.
I would recomend a Strict DocType for any new website.
Start with something like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Also, the links about spellchecking in my signature line can be a lot of help.


Other than that, the way you layout your markup can also help. I like to comment each closing tag so it's easier to keep track of what div it's actually closing. Indenting your code will help with that too.
With that in mind, change that code above to look like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
</style>
</head>
<body>
<div id="container">
<!--end container--></div>
</body>
</html>
That's just a snippet that DW opens for me when I start a new .html document.

Xiy
01-02-2010, 07:21 AM
Hey Thanks, I already had a DOC Type declared just I didn't want to bore you with the whole code. As for commenting my code I'll start doing it more, thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum