Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    258
    Thanks
    47
    Thanked 0 Times in 0 Posts

    Using CSS attributes

    Hello

    I have a menu here myNew Site that I would like to have some text placed under. That text would have the same background as in the link above, but its own font and CSS attributes. In other words, apart from the background, it can't inherit the menu's CSS properties.

    Would I just create a <div> inside the body tag of my HTML with its own CSS properties in order to isolate it from the CSS attributes that govern the menu? For example, if I did something like this:

    Code:
    #title p {
        margin-top: 125px;
        margin-left: auto;
        margin-right: auto;
        font-family: 'courier std', 'courier new';
        font-size: 48px;
        text-align: center;
        }
    
    <div id="title"><p>TEXT HERE</p></div>
    would the menu CSS attributes override these #title attributes?

    Thanks.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Blue1,
    You can add a container for the rest of your site like this -
    Code:
    <link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/newSite.css"  media="screen" />
    <title>myNew Site</title>
    </head>
    <body>	
    	<div class="ph-line-nav nav">
    		<a href="#">Home</a>
    		<a href="#">About</a>
    		<a href="#">Gallery</a>
    		<a href="#">Contact</a>
    		<div class="effect"></div>
    	</div>
    	<div id="container">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
    	<!--end container--></div></body>
    </html>
    Then make your CSS look like this -
    Code:
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    }
    /* ---- reset ------*/
    html, body, div, a {
      margin: 0;
      padding: 0;
      border: 0;
      font: inherit;
      font-size: 100%;
      vertical-align: baseline; }
    
    html {
      line-height: 1; }
    
    /* --- basic styles ----*/
    
    .nav {
      font-family: "Unica One";
      font-size: 1.5em;
      background: #f2f2f2;
      text-shadow: 0 1px 0 white; }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    258
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Hello Excavator

    Many thanks for your reply.

    I have made the amendments as you suggested and posted a reply to you - for some reason it hasn't appeared on the board so I am trying again!

    The page now looks like this:

    myNew Site

    I have commented out this in my CSS because of the 'inherit' (the lone crow has inherited the menu font):

    Code:
    /*html, body, div, a {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }*/
    but as you can see, it hasn't made any difference!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts

    I have commented out this in my CSS because of the 'inherit' (the lone crow has inherited the menu font):

    Code:
    /*html, body, div, a {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }*/
    but as you can see, it hasn't made any difference!
    I'd just get rid of that reset if I were you - Why “Reset” Style Sheets AreÂ*Bad · Jens Oliver Meiert

    Lone crow takes the font you've told it to because you still style it with the body tag. See my previous post where I changed that to .nav, it's the last thing highlighted in red.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Feb 2014
    Posts
    258
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Do you mean delete this:

    Code:
    html, body, div, a {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }
    
    html {
        line-height: 1;
    }
    body {
        font-family: "Unica One";
        font-size: 1.5em;
        background: #f2f2f2;
        text-shadow: 0 1px 0 white;

    then use <body> (and container) as you have them (without anything inherited from the menu CSS),

    html, body {
    margin: 0;
    font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #000;
    background: #f2f2f2;
    }
    #container {
    width: 800px;
    margin: 0 auto;
    background: #f2f2f2;
    }


    and then to use .nav:

    Code:
    .nav {
      font-family: "Unica One";
      font-size: 1.5em;
      background: #f2f2f2;
      text-shadow: 0 1px 0 white; 
    
    
     text-align: center;
        overflow: hidden;
        margin: 2em auto;
        width: 480px;
        position: relative;
    }
     .nav a {
        display: block;
        position: relative;
        float: left;
        padding: 1em 0 2em;
        width: 25%;
        text-decoration: none;
        color: #393939;
        -webkit-transition: .7s;
        -moz-transition: .7s;
        -o-transition: .7s;
        -ms-transition: .7s;
        transition: .7s;
    }
     .nav a:hover {
        color: #c6342e;
    }
    .effect {
        position: absolute;
        left: -12.5%;
        -webkit-transition: 0.7s ease-in-out;
        -moz-transition: 0.7s ease-in-out;
        -o-transition: 0.7s ease-in-out;
        -ms-transition: 0.7s ease-in-out;
        transition: 0.7s ease-in-out;
    }
    .nav a:nth-child(1):hover ~ .effect {
        left: 12.5%;
    }
    .nav a:nth-child(2):hover ~ .effect {
        left: 37.5%;
    }
    .nav a:nth-child(3):hover ~ .effect {
        left: 62.5%;
    }
    .nav a:nth-child(4):hover ~ .effect {
        left: 87.5%;
    }
    .ph-line-nav .effect {
        width: 90px;
        height: 2px;
        bottom: 36px;
        background: #c6342e;
        box-shadow: 0 1px 0 white;
        margin-left: -45px;
    }
    Thanks for your patience.


  •  

    Posting Permissions

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