12 replies to this topic

[Clandestine]

alright so im making my site in CSS, its going pretty smoothly i just have a couple of questions. This is what i have gotten so far, and im stuck now

http://img.photobucket.com/albums/v398/cla...esigns/help.gif

-how do i get my navigation box to go to the top?
-also in my CSS code im making all my images background images is that what i am supposed to do?
-and my navigation buttons, how do i get them in my navigation box like in my layout http://img.photobucket.com/albums/v398/cla...ns/layout08.gif
-and im looking ahead here so that i wont have to come back and ask more questions, how can i alight my content, recent addtions, and stuff boxes how they are in my layout? is there and option like i have in one of my codes" margin-left:px;" ive tried margin-top/bottom and none of them worked, i want to make it 12px from the top of the page, the banner and navigation bar.
-and to make the content box and the recent additions where they are in my layout will i have to count how many pixels they are down in my page for their exact position?

if anyone could help me with theses problems it would be greatly appreciated so that i can move along in my first CSS layout site

thank you

[rc69]

1. Float it to the right, or in CSS terms "float:right;"
2. If you want, it doesn't really matter (depends on the desired effect, for images that are purely for the template, yes, i recommend it).
3. Put them in there...

<div id="nav">
	<a href="/"><img src="image/path.gif"></a><br>
</div>

Since i don't know how you coded the box, that's all i can say.
4. The margin attributes work, you probably just don't have something right, some code would help to answer this question better.
5. Depends on the desired effect, and other things you've done in the code, but the simple answer is no, you don't HAVE to.

And remember, when dealing with web design, upload the page to your site, so we can see the code, that always works better then images (unless you're having a browser specific problem).

Edited by rc69, 17 December 2005 - 01:37 AM.

[Clandestine]

the float left thing doesnt work, so i just went and coded everthing and post what i have here to see if anyone can help me align everything up like i have in my layout

this is what i have with it all coded
http://img.photobucket.com/albums/v398/cla...signs/help2.gif this is what i want it to look like http://img.photobucket.com/albums/v398/cla...ns/layout08.gif

this is the CSS

/* CSS Document */
*{
	  padding:0;
	  margin:0;
	  border:0;
}
body{
	background-color:#e3e3e3;
}
#container{
	width:790px;
	height:100%;
	background:url(images/bg.gif);
	margin-left:auto;
	margin-right:auto;
}
#banner{
	background: url(images/banner.gif);
	width:551px;
	height:225px;
	margin-top:12px;
	margin-bottom:12px;
	margin-left:12px;
	margin-right:12px;
}
#navtop{
	background: url(images/navigation.gif);
	width:200px;
	height:29px;
	margin-top:12px;
	margin-left:579px;
	margin-right:12px;
}
#navbg{
	background:url(images/nav_bg.gif);
	width:200px;
	height:100%;
	margin-left:579px;
	margin-right:12px;
}
#navbtm{
	background:url(images/nav_footer.gif);
	width:200px;
	height:21px;
	margin-left:579px;
	margin-right:12px;
}
#contenttop{
	background:url(images/content_top.gif);
	width:551px;
	height:34px;
	margin-left:12px;
	margin-right:12px;
}
#contentbg{
	background:url(images/content_bg.gif);
	width:551px;
	height:100%;
	margin-left:12px;
	margin-right:12px;
}
#contentbtm{
	background:url(images/content_footer.gif);
	width:551px;
	height:19px;
	margin-left:12px;
	margin-right:12px;
}
#latesttop{
	background:url(images/latest_top.gif);
	width:200px;
	height:28px;
	margin-left:579px;
	margin-right:12px;
}
#latestbg{
	background:url(images/right_bg.gif);
	width:200px;
	height:100%;
	margin-left:579px;
	margin-right:12px;
}
#latestbtm{
	background:url(images/right_footer.gif);
	width:200px;
	height:17px;
	margin-left:579px;
	margin-right:12px;
}
#stufftop{
	background:url(images/stuff_top.gif);
	width:200px;
	height:28px;
	margin-left:579px;
	margin-right:12px;
}
#stuffbg{
	background:url(images/right_bg.gif);
	width:200px;
	height:100%;
	margin-left:579px;
	margin-right:12px;
}
#stuffbtm{
	background:url(images/right_footer.gif);
	width:200px;
	height:17px;
	margin-left:579px;
	margin-right:12px;
}
#footer{
	text-align:right;

and this is what my html is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ClandestineDesigns - Home</title>
<style type="text/css">
@import url(style.css);
</style>
</head>
<body>
	<div id="container">

		<div id="banner"></div>
		<div id="navtop"></div>
		<div id="navbg"> <a href="#">this is where the text would go lalala</a></div>
		<div id="navbtm"></div>
		<div id="contenttop"></div>
		<div id="contentbg">content stuff goes here lalalalalaalala</div>
		<div id="contentbtm"></div>
		<div id="latesttop"></div>
		<div id="latestbg">latest addtions</div>
		<div id="latestbtm"></div>
		<div id="stufftop"></div>
		<div id="stuffbg">stuff goes here</div>
		<div id="stuffbtm"></div>
		<div id="footer">Copyright lalalalala</div>

</div>
</body>
</html>

so how can i space everything so that it looks just like my layout? Like the spacing at the top and sides, and between all the boxes and all that jazz, and how can i make it so the text in the boxes dont go over the side of the boxes, and just stay in the gray area

any help would be awesome

thank you

Edited by Clandestine, 17 December 2005 - 12:26 PM.

[coolaid]

one thing i noticed is you dont nest your divs (you should just like you would tables) so this code:

<div id="navtop"></div>
<div id="navbg"> <a href="#">this is where the text would go lalala</a></div>
<div id="navbtm"></div>

should be like this:

<div id="navbox">
	<div id="navtop"></div>
	<div id="navbg"> <a href="#">this is where the text would go lalala</a></div>
	<div id="navbtm"></div>
</div>

then in #navbox,
you would use float:right just like rc suggested.

that way, when you float the nabox, everything in there floats along with it.

[rc69]

Few things i need to point out.
1. I said float:right, not left.

2. You should really look into CSS shorthand, it's half the reason CSS is so nice (and tends to load fast).
http://www.sitepoint...n-css-shorthand

3.

<style type="text/css">
@import url(style.css);
</style>

That's a no-no. You should use

<link rel="stylesheet" href="style.css" type="text/css" />

Reason being: Half the browsers out there don't recognize @import.

[coolaid]

most browsers recognize @import becuase it's what i use and it was a standard function starting from css1

[Clandestine]

alright coo, thanks to your guys help i got it all aligned how i want it , i have yet ran into another wall.

Ok so i have it all aligned how i want it heres what it looks like now
http://img.photobucket.com/albums/v398/cla...igns/help03.gif
looks like everything is correct right? well the only things are, i dont have my bg i want, and the padding for the text isnt how i want. so i forgot about the background for a second and wanted to fix the text padding, WEELll, i got my text to be padded how i wanted to to be BUT yet another wall, this is what happends when i set padding.
http://img.photobucket.com/albums/v398/cla...igns/help04.gif
it throws my entire site outta wack, and it creates a clone or something to the side of it.

so if anyone could help me solve my problems that would be AWESOME!!!!!!!!!!!!

and here is my updated HTML and CSS code

<body>
<div id="container">
	<div id="banner_box">
		<div id="banner"></div>
	</div>
	<div id="nav_box">
		<div id="navtop"></div>
		<div id="navbg"> 
			<a href="#"><img src="images/home.gif" /></a>
			<a href="#"><img src="images/portfolio.gif" /></a>
			<a href="#"><img src="images/about.gif" /></a>
			<a href="#"><img src="images/services.gif" /></a>
			<a href="#"><img src="images/contact.gif" /></a>
	  </div>
		<div id="navbtm"></div>
	</div>
	<div id="content_box">
		<div id="contenttop"></div>
		<div id="contentbg">content stuff goes here lalalalalaalala</div>
		<div id="contentbtm"></div>
	</div>
	<div id="latest_box">
		<div id="latesttop"></div>
		<div id="latestbg">latest addtions</div>
		<div id="latestbtm"></div>
	</div>
	<div id="stuff_box">
		<div id="stufftop"></div>
		<div id="stuffbg">stuff goes here</div>
		<div id="stuffbtm"></div>
	</div>
</div>
</body>
</html>

/* CSS Document */
*{
	  padding:0;
	  margin:0;
	  border:0;
}
body{
	background-color:#e3e3e3;
}
#container{
	width:790px;
	height:100%;
	background:url(images/bg.gif);
	margin-left:auto;
	margin-right:auto;
}
#banner_box{
	float:left;
	margin-top:12px;
	margin-bottom:12px;
	margin-left:12px;
	margin-right:12px;
}
#banner{
	background: url(images/banner.gif);
	width:551px;
	height:225px;
}
#nav_box{
	text-align:center;
	float:right;
	margin-top:12px;
	margin-bottom:12px;
	margin-right:12px;	
}
#navtop{
	background: url(images/navigation.gif);
	width:200px;
	height:29px;
}
#navbg{
	background:url(images/nav_bg.gif);
	width:200px;
	height:100%;
}
#navbtm{
	background:url(images/nav_footer.gif);
	width:200px;
	height:21px;
}
#content_box{
	float:left;
	margin-bottom:12px;
	margin-left:12px;
	margin-right:12px;
}
#contenttop{
	background:url(images/content_top.gif);
	width:551px;
	height:34px;
}
#contentbg{
	padding:12px;
	background:url(images/content_bg.gif);
	width:551px;
	height:100%;
}
#contentbtm{
	background:url(images/content_footer.gif);
	width:551px;
	height:19px;
}
#latest_box{
	float:right;
	margin-right:12px;	
}
#latesttop{
	background:url(images/latest_top.gif);
	width:200px;
	height:28px;
}
#latestbg{
	background:url(images/right_bg.gif);
	width:200px;
	height:100%;
}
#latestbtm{
	background:url(images/right_footer.gif);
	width:200px;
	height:17px;
}
#stuff_box{
	float:right;
	margin-top:12px;
	margin-bottom:12px;
	margin-right:12px;	
}
#stufftop{
	background:url(images/stuff_top.gif);
	width:200px;
	height:28px;
}
#stuffbg{
	background:url(images/right_bg.gif);
	width:200px;
	height:100%;
}
#stuffbtm{
	background:url(images/right_footer.gif);
	width:200px;
	height:17px;
}

any help would be great, thanks again

[coolaid]

dont use paddings. this is waht i do:

place the text in yet another div with a smaller width. and in that div's css, use margin:0 auto; to make it centered.

so for example:

<div id="content_box">
		<div id="contenttop"></div>
		<div id="contentbg">
			<div id="contentbg_inner">
			content stuff goes here lalalalalaalala
			</div>
		</div>
		<div id="contentbtm"></div>
</div>

and the css would be like:

#contentbg_inner{
	width:540px;
	margin:0 auto;
}

Edited by coolaid, 18 December 2005 - 12:20 AM.

[Clandestine]

coolaid, man your verry helpfull, thank you thank you thank you, so after what you told me i got it all worked and but i found another thing i need help with, so this is my site after your helped me http://img.photobucket.com/albums/v398/cla...igns/help05.gif

coo coo, looks good to me, but i still need my bg, the lil grid kinda bg that looks like in my layout

http://img.photobucket.com/albums/v398/cla...ns/layout08.gif

also i found another thing, when my latest addition box expands further than my content box, my stuff box its thrown outa wack

http://img.photobucket.com/albums/v398/cla...igns/help06.gif

do you know how to fix this?

thanks again

Edited by Clandestine, 18 December 2005 - 01:36 AM.

[rc69]

Ok, coolaid, you know what... i dislike you. I swear i remembered hearing that wasn't browser friendly, then i take a look at the following link, and well... i'm no longer going to be thinking that.
http://centricle.com/ref/css/filters/

Anyway, Clandestine, take a look at that link for CSS shorthand i provided, it's really a life saver...

And i don't know about the content box, but for your background, take a small, maybe 5x5 section (what ever size that would make it tesselate nicely), then change the body CSS selector to this:

body { background: #E3E3E3 url(path/to/the_image.gif); }

Naturally, change the part in url() to the actual path to the image.

Edited by rc69, 18 December 2005 - 01:21 AM.

[Clandestine]

ooo wow i just looked at my site in IE, and it looks terrible

http://img.photobucket.com/albums/v398/cla...igns/help07.gif

on the plus side...................... i have my bg (only in IE that is, still no bg is firefox)

Edited by Clandestine, 18 December 2005 - 01:37 AM.

[Clandestine]

this is what my site looks like in IE

http://img.photobucket.com/albums/v398/cla...igns/help07.gif

and this is what it l0ooks like in Firefox

http://img.photobucket.com/albums/v398/cla...igns/help05.gif

how can i make it so that it is all lined up right like in firefox, also in firefox my container BG doesnt show but it shows in IE. Can anyone hellp me fix thses problems?

HTML currently

<body>
<div id="container">
		<!-----banner----->
	<div id="banner_box">
		<div id="banner"></div>
	</div>
		<!-----navigation----->
	<div id="nav_box">
		<div id="navtop"></div>
		<div id="navbg"> 
			<a href="#"><img src="images/home.gif" /></a>
			<a href="#"><img src="images/portfolio.gif" /></a>
			<a href="#"><img src="images/about.gif" /></a>
			<a href="#"><img src="images/services.gif" /></a>
			<a href="#"><img src="images/contact.gif" /></a>
	  </div>
		<div id="navbtm"></div>
	</div>
		<!-----content box----->
	<div id="content_box">
		<div id="contenttop"></div>
		<div id="contentbg">
			<div id="contentbg_inner">
								TEXT
			</div>
		</div>
		<div id="contentbtm"></div>
	</div>
		<!-----latest addition----->
	<div id="latest_box">
		<div id="latesttop"></div>
		<div id="latestbg">
			<div id="latestbg_inner">
				  TEXT
			</div>
		</div>
		<div id="latestbtm"></div>
	</div>
		<!-----stuff----->
	<div id="stuff_box">
		<div id="stufftop"></div>
		<div id="stuffbg">
			<div id="stuffbg_inner">
					TEXT
			</div>
		</div>
		<div id="stuffbtm"></div>
	</div>
</div>
</body>

CSS currently

/* CSS Document */
*{
	  padding:0;
	  margin:0;
	  border:0;
}
body{
	background:url(images/bg.gif);
}
#container{
	width:790px;
	height:100%
	background-color:#fff;
	margin-left:auto;
	margin-right:auto;
}
#banner_box{
	float:left;
	margin-top:12px;
	margin-bottom:12px;
	margin-left:12px;
	margin-right:12px;
}
#banner{
	background: url(images/banner.gif);
	width:551px;
	height:225px;
}
#nav_box{
	text-align:center;
	float:right;
	margin-top:12px;
	margin-bottom:12px;
	margin-right:12px;	
}
#navtop{
	background: url(images/navigation.gif);
	width:200px;
	height:29px;
}
#navbg{
	background:url(images/nav_bg.gif);
	width:200px;
	height:100%;
}
#navbtm{
	background:url(images/nav_footer.gif);
	width:200px;
	height:21px;
}
#content_box{
	float:left;
	margin-bottom:12px;
	margin-left:12px;
	margin-right:12px;
}
#contenttop{
	background:url(images/content_top.gif);
	width:551px;
	height:34px;
}
#contentbg{
	background:url(images/content_bg.gif);
	width:551px;
	height:100%;
}
#contentbg_inner{
	width:521px;
	margin:0 auto;
}
#contentbtm{
	background:url(images/content_footer.gif);
	width:551px;
	height:19px;
}
#latest_box{
	width:200px;
	float:right;
	margin-right:12px;	
}
#latesttop{
	background:url(images/latest_top.gif);
	width:200px;
	height:28px;
}
#latestbg{
	background:url(images/right_bg.gif);
	width:200px;
	height:100%;
}
#latestbg_inner{
	width:170px;
	margin:0 auto;
}
#latestbtm{
	background:url(images/right_footer.gif);
	width:200px;
	height:17px;
}
#stuff_box{
	float:right;
	margin-top:12px;
	margin-bottom:12px;
	margin-right:12px;	
}
#stufftop{
	background:url(images/stuff_top.gif);
	width:200px;
	height:28px;
}
#stuffbg{
	background:url(images/right_bg.gif);
	width:200px;
	height:100%;
}
#stuffbg_inner{
	width:170px;
	margin:0 auto;
}
#stuffbtm{
	background:url(images/right_footer.gif);
	width:200px;
	height:17px;
}

thanks

[rc69]

Well, as i recommended before, look into that CSS shorthand, it will make things a lot easier.
As for the positioning difference, i'll assume its the box model that's causeing the problem. I can't exactly say what will fix it, but if you look into it a bit, you might be able to figure something out.
And again, i'm not sure on this one, but the background-color that you're adding in your #container may be preventing the body's background from displaying (although, it doesn't quite look that way to me, it's just a guess).

p.s. Please stick to one topic... and good luck