SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: content

  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,157
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post content

    Hi can i ask when to use this content: "." ? in css

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Quote Originally Posted by jemz View Post
    Hi can i ask when to use this content: "." ? in css
    The simple answer is that you include it whenever you want generated content in your page and in your code above that would include a dot in your page after the content in that element.

    The content property goes hand in hand with the pseudo classes :before and :after and allows you inject content into the page that is not present in the mark up. It should be used in the same manner as you would for background decoration in that you should never apply important content via the content property as it is invisible to screen readers and search engines.

    However, I think your question is probably related to the clearfix hack where some people use the dot and some just use a space. The dot was needed in older gecko browsers as it wouldn't clear properly without it and indeed even these days the dot can be useful to stop margin collapse but may introduce a slight space into the layout especially when at the bottom of the page. Read Thierry's write up for more info.

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,157
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you paul O'B, for explaining me.I will write back to you if i get some trouble on this.

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,157
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,


    The simple answer is that you include it whenever you want generated content in your page and in your code above that would include a dot in your page after the content in that element.

    The content property goes hand in hand with the pseudo classes :before and :after and allows you inject content into the page that is not present in the mark up. It should be used in the same manner as you would for background decoration in that you should never apply important content via the content property as it is invisible to screen readers and search engines.

    However, I think your question is probably related to the clearfix hack where some people use the dot and some just use a space. The dot was needed in older gecko browsers as it wouldn't clear properly without it and indeed even these days the dot can be useful to stop margin collapse but may introduce a slight space into the layout especially when at the bottom of the page. Read Thierry's write up for more info.


    Hi Paul O'B, can i ask some help with you, I am trying to put divider in my menu using the content property.but i am having trouble can you please help me on this.


    Code:
    <!Doctype html>
    
    <html lang="en">
     <html>	
     <head>
       <meta charset="utf-8" />
       <link rel="stylesheet" href="menu4.css" style="text/css" />
       
     </head>
    	
    
    
      <body>
        <ul class="nav">
               <li><a href="#">home</a></li>
    	   <li><a href="#">about</a> </li>
               <li><a href="#">gallery</a> </li>
        </ul>	
     </body>
    
    </html>
    Code:
    body{
        background-color: #363636;
    }
    .nav{
    	list-style: none;	
    	padding: 0;
    	margin: 0;
    	
    	
    }
    
    ul.nav{
       min-width: 400px;
    }
    
    
    .nav li a:first-letter{
    	text-transform: uppercase;
    }
    
    .nav  li{
    	float: left;
    	margin-right: 0.1em;
        min-width: 8em;
    
    }
    
    
    .nav  li:after{
        background: none repeat scroll 0 0 #626262;
        content: "";
        display: inline-block;
        height: 20px;
        margin-top: -10px;
        position: absolute;
    
        top: 50%;
        width: 1px;
    }
    
    
    
    
    .nav li a:link,
    .nav li a:visited{
    	text-decoration: none;	
    	display: block;
    	color: #606061;
    }
    
    
    
    .nav li ul {
      list-style: none;
      margin: 0;
      padding: 0;
       
    }
    
    .nav ul li{
    	display: none;
    }
    
    .nav li:hover  li{
      display: block; 
      text-align: justify;
      color: #34b4e3;
    }
    
    
    .nav li:hover li a:hover, .nav li:hover a
    {
      color:#34b4e3;
    
    }

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    #1 I dont know if it was just an error when writing this post but you have TWO opened HTML tags!!!
    Code:
    <html lang="en">
     <html>
    Since you are using AP to position the generated dividers you need to give the PARENT LI Relative position.
    Code:
    .nav  li{ position:relative;}
    or actually :
    Code:
    ul.nav  { position:relative;}
    
    .nav  li:after{
        background: #626262;
     	 
        width: 1px;
     top:0;
    bottom;
        content:"";
     
    
    }
    so that the line would be the same height as the container UL.


    STILL using AP for this seems rather... troublesome.

    I would suggest the following:

    Code:
    
    .nav{} /* this was redundant since  ul.nav ALSO targets your menu*/
    
    ul.nav{
       min-width: 400px;    
       position:relative;
       list-style: none;	
       padding: 0;
       margin: 0;
    
    }
    
    
    .nav li a{text-transform: capitalize; }/* use text-transform: capitalize; that way you wont rely on the pseudo class: first letter to merely capitalize  a word*/
    
    .nav  li{
    	float: left;
    	margin-right: 0.1em;
    
    }
    
    
    .nav  li:after{
        background: #626262;
     	height:20px;
     	display:inline-block;  /*inline block so that  the created :after pseudo element doesnt 'drop'*/
        width: 1px;
        content:"";
        	vertical-align:middle; /* aligns with the pseudo element, which is also inline block align middle*/
    
    }
    
    
    
    
    .nav li a:link,
    .nav li a:visited{
    	text-decoration: none;	
    	display: inline-block;
    	vertical-align:middle;
    	color: #606061;
    	padding-left:1em;
    	    min-width: 8em;
    
    }
    
    
    
    .nav li ul {
      list-style: none;
      margin: 0;
      padding: 0;
       
    }
    
    .nav ul li{
    	display: none;
    }
    
    .nav li:hover  li{
      display: block; 
      text-align: justify;
      color: #34b4e3;
    }
    
    
    .nav li:hover li a:hover, .nav li:hover a
    {
      color:#34b4e3;
    
    }

    Then again even this is kinda convoluted....

    you could get rid of the :after pseudo element altogether and achieve the almost the same thing with:

    Code:
    .nav li+li { border-left:1px solid #626262}
     
    .nav li a:link,
    .nav li a:visited{
    	text-decoration: none;	
    	display:  block; /* we are back to using display: block; here */
    	color: #606061;
     	min-width: 6em;
     	padding:0 1em;
    
    }
    hope that helps

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,157
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi, Thank you for correcting my code,thank you also for helping me.


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
  •