SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: css site

  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css site

    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;
    }
    Last edited by AutisticCuckoo; Mar 30, 2009 at 23:44. Reason: Added code highlighting for readability

  2. #2
    Twitter - @CarlBeckel busy's Avatar
    Join Date
    May 2004
    Location
    Richmond, VA, USA
    Posts
    819
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 &#37;.

    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

  3. #3
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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)!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •