SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Newbie looking for some CSS help ^^

    I've recently started doing web design using CSS to control the layout, but I keep running into trouble with a few things >.<;

    edit - I figured out some of the problems I was having, but still need help on two >.<;

    Firstly, here is my HTML and CSS for the webpage:
    Code:
    /*
    CSS for My Portfolio
    */
    
    
    /*
    Overall Site Properties
    */
    body {
    	font-family: verdana, helvetica, arial, sans-serif;
    	background-color: #abcdef;
    	text-align:center;
    	padding: 0;
    }
    
    
    /*
    Container Property
    */
    #container {
    	width:800px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:left;
    }	
    
    
    /*
    Header Properties
    */
    #header {
    	height: 150px;
    	text-align: right;
    	position: relative;
    	top: 20px;
    }
    
    
    /*
    Navigation Properties
    */
    #navigation {
    	background-color:#FFFF99;
    	width: 800px;
    	height: 40px;	
    }
    
    #navigation ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #navigation li {
    	margin: 10px;
    	padding: 0;
    	float: left;
    	position: relative;
    	top: -30px;
    }
    
    /*
    Navigation Link Properties\
    */
    
    #navigation img {
    	border: none; 
    }
    
    
    
    /*
    Main Contents Properties
    */
    
    #content {
    
    	background-color:#FFFFFF;
    	min-height: 500px;
    }
    
    #bodycopy {
    	float: left;
    	position: absolute;
    	width: 598px;
    	min-height: 500px;
    	padding-left: 5px;
    }
    
    #sidebar {
    	background-color: #CCCC99;
    	float: right;
    	position: relative;
    	width: 200px;
    	min-height: 500px;
    	padding-left: 5px;
    }
    
    
    
    /*
    Footer Properties
    */
    #footer {
    
    	background-color:#FFFF99;
    	height: 50px;
    	text-align: center;
    	padding-bottom: 15px;
    	padding-top: 1px;
    }
    Code:
    <body>
    	<div id="container">
    		<div id="header">
        		<img src="images/navicon1.gif" height="150px" width="400px" alt="Logo"/>
    		</div>
    		<div id="navigation">
       		  <ul>
    			  <li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="Home" /></li>
    				<li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="About" /></li>
    				<li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="Gallery" /></li>
    				<li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="Contact" /></li>
                	<li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="Link" /></li>
    			</ul>
    		</div>
      		<div id="content">
            	<div id="bodycopy">
    				<h2>Update</h2>
    				<h3>27/04/09, 2.45pm</h3>
    			<p>Information here :)
            	</div>
    		  	<div id="sidebar">
    			<h2>Welcome</h2>
    		  <p>This is the personal portfolio of Chloe Runco, containing design work from my past courses and industry experience - including company branding and stationary, advertising, photography, vector designs, and pixel art.		  
    			</div>
    		</div>
    		<div id="footer">
    			<p>All content &copy; Tre Le Coco 2006-2009
    		<br>| Site Map | FAQ | Contact | Commission | Link |
            </div>
    	</div>
    </body>
    </html>
    I had to remove the links because of the stupid ruling this forum has, and I can't add screenshots either xP so I can't visually show my problem.

    For some reason, the footer looks different between IE and FF - IE looks fine, but in FF the text within the footer seems to be pushed down to the bottom, how can i get it back up and sit in the middle?

    Another thing I would like help with, i've most likely coded the navigation links wrong for this, but when a person hovers their mouse over the image im using for my links, i want it to change to another image, how do i do this using the CSS? I know how to do it with text in that section instead of an image, so its confused with it now >.<;

    I thank anyone who can help me out with this! Truly grateful
    Last edited by TreLeCoco; Apr 28, 2009 at 18:35.

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    if you want to change the pictures with CSS only, they should be background pictures.

    Regarding the footer, try to put the copyright in one <p> and the links in another <p>. The <br> should only be used in extreme cases.

    Also, try to add a clear:both in your CSS.

    I am not sure what's the problem now (I need to go to work ) but if that doesn't work, I will have a look later.

  3. #3
    SitePoint Enthusiast J32's Avatar
    Join Date
    Mar 2009
    Location
    Seoul
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    close the <p> tags and delete the height in the #footer css.

    Visit us at J32Teez or Business-Cards.uni.cc
    Follow me on Twitter @J32Teez

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by J32 View Post
    close the <p> tags and delete the height in the #footer css.
    I didn't even see that the <p> tag was open (I should have scrolled to the right )

    Definately, that will help!

  5. #5
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help on the footer ^^ I closed the <p> too, i have a bad habit of forgetting to close them >.<;

    what does the clear:both actually do? I've never used one before

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TreLeCoco View Post
    what does the clear:both actually do? I've never used one before
    http://reference.sitepoint.com/css/clear

    The SP reference in the above link is invaluable.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just so you know, you probably don't need the DIV around your menu. You should be able to put the ID on the menu UL and then style it directly.

    I also recommend (though many don't) using some sort of a basic "reset" CSS rule at the top of your stylesheet to remove the margins and padding from almost every HTML element. I also recommend setting a default font size for your text (body text and headings).

    I don't have access to "my" computer at the moment, so I can't load your code into my armada of browsers to see what else I'd recommend changing though. I will when I can though (work load permitting, of course).


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
  •