css site

**cookingkym** · Mar 30, 2009 23:20

hello sitepoint

i have just started my first css web site, which i've started from scratch.

just wanted to see how u all thought the CSS code looked so far before i went any further.

thanks for your time.

kym

HTML code:

Code HTML4Strict:

<body>
 
 
 
<div id= "container">
 
 
<div id= "pageheader"> </div>
 
<ul id="menu">
 
	<li>home</li>
    <li></li>
    <li></li>
 	<li></li>
 
</ul>
 
 
 
<div id= "flash"> </div>
 
 
<div id="footer"></div>
 
</div>

CSS code:

Code CSS:

/* 
	Title:		Main CSS
	Date:		30 March 2009
	Authours:	Kym Garland - made with passion
	Email:		[email]kym@madewithpassion-design.com[/email]
 
 
 
/* ~~~ General Properties ~~~ */
 
 
* { margin:0; padding:0; }
 
 
body {
	background-color:#382d28;
 
 
}
 
/* ~~~ Div Properties ~~~ */
 
 
#container {
	position:relative;
	background-image:url(../images/bg.jpg);
	margin:0 auto;
	width:1024px;
	height:800px;
 
}
 
#pageheader {
 
	position:absolute;
 
	right:16em;
	top: 8em;
	width:300px;
	height:60px;
	background:url(../images/logo-text.gif) bottom no-repeat;
 
}
 
#flash {
 
	position:absolute;
	float:left;
	margin:0 auto;
	left:11em;
	top:12em;
	width:597px;
	height:291px;
	background-color:#FFF;
}
 
#menu {
	position:absolute;
	float:right;
	width:120px;
	right:7em;
	top:13em;
}	
 
 
#footer {
 
	position:absolute;
	top:40em;
	width:1000px;
	height:50px;
	background:url(../images/footer.gif); background-repeat:no-repeat;    		    background-position:center;
	text-align:center; color:#FFF; 
 
}
 
 
 
/* ~~~ fonts ~~~ */
 
#menu li {
 
font-family: Garamond, serif; size: 100&#37;;
color:#FFF;
text-transform:uppercase;
list-style:none;
}

**busy** · Mar 31, 2009 00:11

You might want to get away from relying on absolute positioning for everything. When you do that you're removing the element from the flow of the document. It's like forcing something that should be fitting together smoothly.

I believe float does nothing for absolutely positioned elements. You can float it, or you can position it absolutely. Not both.

Also, I suspect that a lot of the positioning done with em could be better with px or %.

Personally, I rarely use em, but when I do it's only because it has to do with how text behaves when the user resizes it.

Aside from that it looks nice, clean, and straightforward. You're off to a good start

**Blake Tallos** · Mar 31, 2009 00:19

Code CSS:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
    margin:0px;
    padding:0px;
}
body {
    background:#382d28;
    font-family:Garamond,Sans-serif;
    line-height:100%;
    text-transform:uppercase;
}
#container {
 
    background: url('img.jpg');
    width: 1024px;
    height: 800px;
    margin:0px auto;
 
}
#header {
    width:300px;
    height:60px;
    background: url('/images/logo-text.gif') bottom no-repeat;
}
#header h1 {
 
    //add-styles//
}
#menu {
    width:120px;
    float:right;
}
#menu li {
    color:#ffffff;
    list-style-type:none;
    display:inline;
 
}
#flashcontent {
    float:left;
    width:597px;
    height:291px;
    background:#ffffff;
}
#footer {
    width:100%;
    height:50px;
    text-align:center;
    color:#ffffff;
}    </style>
</head>
<body><!-- The Start of the Markup -->
<div id="container">
 
     <div id="header">
          <h1></h1>
                </div>
                   <ul id="menu">
            <li><a href="#" alt="#"></a></li>
            <li><a href="#" alt="#"></a></li>
            <li><a href="#" alt="#"></a></li>
            <li><a href="#" alt="#"></a></li>
                            </ul>        
 
                    <div id="flashcontent"></div>
                                          <div id="footer">
 
</div>
</div>
</body>
      </html>

**AlexDawson** · Mar 31, 2009 00:42

hey kym, the website looks fine at the moment but there is not a lot there to comment on, when you have the first page complete we could possibly give you more specific feedback for your design (and if you have any elements which could be replaced easier)!

User Tag List

Thread: css site

Thread Tools

Display

css site

Bookmarks

Bookmarks

Posting Permissions