SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: CSS help

  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS help

    hello, i am a new learner in building websites. i am currently working on the"Build your own website the right way using html & css.". I seem to be having trouble with separating my navigation from the tagline. As soon as i put a border around the navigation part is seems to connect itself to the tagline part. How do i go about separating my navigation from the tagline. Here is my coding Thankyou for your help.



    Code:
    /*
    CSS for Bubble Under Site
    */
    
    
    
    p {
    	font weight: bold;
    	color: navy;
    }
    
    
    #tagline   {
    	height:25px;
    	font-style: italic;
    	font-family: Georgia, Times, serif;
    	background-color: clear;
    	padding-left: .8em;
    	padding-bottom: .8em;
    	border: 1px solid navy;
    }
    
    body {
    	font-family:  Verdana, Helvetica, Arial, sans-serif;
    background-color:#e2edff;
    line-height: 125%;
    padding:6px;
    border: 4px solid navy;
    
    }
    
    
    #navigation {
    	border: 1px solid navy;
    	width: 180px;
    	height: 100px;
    	border-top:;
    	background-color:violet;
    	
    		
    }
    
    
    
    
    
    
    h1, h2, h3 {
    	font family:  Helvetica, Arial, sans-serif;
    	background-color: orange;
    	color: white;
    }
    
    
    h1{
    	font family: arial, helvetica, sans-serif;
    	font-size: x-large;
    	background-color: navy;
    	color: white;
    	padding-top: 2em;
    	padding-bottom: .2em;
    	padding-left: .7em;
    }
    
    
    
    h2 {
    	border: 1px solid navy;
    	color: navy;
    	font-size: 150%;
    	font-weight:normal;
    	font-style:italic;
    	text-decoration:;
    	padding-top: 10px;	
    	padding-bottom: 10px;
    }
    
    li {
    	font-size: medium;
    }
    
    
    
    em {
    	
    	text-transform: uppercase;
    }
    
    
    
    
    a   {
    	font-weight: bold;
    	
    }
    
    a: link {
    	color: black;
    }
    
    a: visited  {
    	color: navy;
    }
    
    a: hover  {
    	text-decoration: none;
    	color: white;
    	background-color: navy;
    }
    
    a: active  {
    	color: aqua;
    	backgrond-color: navy;
    }
    
    .fun {
    	color: #339999;
    	font-family: Georgia, Times, serif;
    	letter-spacing: 0.10em;
    }
    Last edited by Paul O'B; Feb 7, 2012 at 16:07. Reason: code tags added

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    It's a bit hard to tell without any HTML, but it looks like you just need to add margin-bottom to navigation or margin-top to tagline (or if the tagline is above the navigation, flip those around).

    Margin is the space in between elements. Whenever you need to separate any elements, look towards margin. =)

    I'm going to move this thread to the CSS forum, since it'll probably get more replies there if you have more trouble.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,628
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'd have to agree with samanime as to the correct way to handle this situation.

    If you would continue with the book, I'm sure they would get to the part about explaining margins . How far have you read in the book?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou again, it worked.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    As mentioned above please post the html that goes with that because css on its own doesn't really mean much apart from obvious typos etc. (Not all members would have that book to refer to so you need to post it as a stand alone question.)

  6. #6
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im up to the part about padding, but as i look further down, the next couple of pages, is about margins, thankyou for your help also

  7. #7
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thankyou for your help also, i will include the html with the css. i definitely am learning alot in this forum. thanks again.


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
  •