How do i do this?

Discussion in 'CSS' started by 500Cent, Jun 15, 2010.

0
  1. #1
    I want to use CSS and HTML to do this can anyone help me.

    I have a header with a grey background. I want to make the header text towards the left side and put my nav bar on the right side on the grey background.

    If need me to post my CSS Code tell me.

    Here is the link to what i am making. I am new to coding so ya. Also if you see the copyright text it is too big, how can i make it smaller? I try using the CSS size code but does not work.

    http://chattyden.darkbb.com/My-Online-Portfolio-h2.htm
     
    500Cent, Jun 15, 2010 IP
  2. ARTidas

    ARTidas Active Member

    Messages:
    177
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    53
    #2
    div header: height: 40px;
    p header: float: left;

    bring the ul in the header div.

    And start playing with margins and paddign again :)

    Cheers,
     
    ARTidas, Jun 15, 2010 IP
  3. 500Cent

    500Cent Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Can you please give me a whole code? I don't get what you mind. Here is my CSS tell me where to add? 

    <!-- NAV BAR --> 
<head>
<style type="text/css">
ul,div.header,div.footer  {list-style-type:none; margin:0; padding:0; font-size:15px; font-family:Arial;}
li {display:inline;}
a {text-decoration:none;}   
a:hover,a:active {color:black;}
div.header,div.footer {padding:0.5em; color:white; background-color:gray; clear:left;} 
p.header {padding:0; margin:0; font-size:30px; font-family:arial;}
p.footer {padding:auto; margin:auto; font-family:arial;} 
</style>
</head>

<body>
<div class="header"><p class="header">Graphics8 - My Online Portfolio</p></div>
<br/>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About</a></li>
</ul>
</body>

<!-- END NAV BAR -->
    Code (markup):
     
    500Cent, Jun 15, 2010 IP
  4. bavington

    bavington Peon

    Messages:
    74
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4 
    <head>
<style type="text/css">
ul,div.header,div.footer  {list-style-type:none; margin:0; padding:0; font-size:15px; font-family:Arial;}
.header ul {float:right; }
li {display:inline;}
a {text-decoration:none;}   
a:hover,a:active {color:black;}
div.header,div.footer {padding:0.5em; color:white; background-color:gray; clear:left; overflow:hidden} 
p.header {padding:0; margin:0; font-size:30px; font-family:arial; float:left;}
p.footer {padding:auto; margin:auto; font-family:arial;} 
</style>
</head>

<body>
<div class="header"><p class="header">Graphics8 - My Online Portfolio</p><ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About</a></li>
</ul></div>
<br/>

</body>
    Code (markup):
     
    bavington, Jun 15, 2010 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    On a side note why have you got body tags around everything? A web-page should take the following structure:

    
<!DOCTYPE html>
<html>

	<head>
	Document Title, Meta Tags and Links to external scripts go here..
	</head>

	<body>
	The body of the document goes here..
	</body>

</html>
    Code (markup):
    You should only have one HTML, HEAD and BODY in your document along with a DOCTYPE of your choice which should always be at the very top..

    The HTML wraps around both the HEAD and the BODY.

    Viewing the source code of different websites in your browser can often help understand how things work, also checking your page against this W3 validator can help identify problems with your page with respect to the W3 spec.
     
    wd_2k6, Jun 16, 2010 IP