SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    designing with elements

    howdy all. Wanted to improve on my skills designing with pseudo elements, divs and positioning w/ relative and absolute settings.
    Was doing pretty good but running into probs when trying to position some text.
    i created a dive. & w/the ::after & ::before pseudo elements I gave it colored top and colored notch.
    I was trying to place some text in the colored ::after box but no matter what the text winds up behind it.
    Has anyone tried this?

    this is what I have

    HTML Code:
    <div id="ceoMsg"> 
    <img id="ceo01" src="images/ceo01.jpg" />
    <h3>Lorem ipsum dolor</h3>
    <p>"sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    my css


    Code:
    #ceoMsg{
    position: relative;
    width:280px;
    height:350px;
    margin: 10 0px 15px 20px ;
    Padding: 5px 10px 5px 10px;
    border: 1px solid #000;
    }
    
    #ceoMsg p{
    display:block;
    text-indent: 10px;
    margin-top: 100px;
    line-height: 20px;
    }
    
    #ceoMsg::before{
    position: absolute;
    content:'';
    top:-5px;
    left:150px;
    width:20px;
    height:20px;
    margin: 5 0px 15px 20px ;
    Padding: 5px 10px 5px 10px;
    background-color:#000099;
    border-top:0px;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    border-left:1px solid #000;
    -webkit-box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    12px 2px 3px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    
    #ceoMsg::after{
    position: absolute;
    content:'';
    top:-40px;
    left:-21px;
    width:280px;
    height:25px;
    margin: 5 0px 15px 20px ;
    Padding: 5px 10px 5px 10px;
    background-color:#000099;
    border-top:1px solid #000;
    border-right:1px solid #000;
    border-bottom:0px;
    border-left:1px solid #000;
    }
    
    #ceoMsg h3{
    position: absolute;
    top:-10px;
    left:-50px;
    font-size: 30px;
    font-weight: 900;
    color: red;
    }

  2. #2
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    actually a quick change as I go along.
    to the ::before

    Code:
    #ceoMsg::before{
    position: absolute;
    content:'';
    top:-5px;
    left:150px;
    width:0px;
    height:0px;
    margin: 5 0px 5px 20px ;
    border-top: 20px solid #000099;
    border-right: 10px solid transparent;
    border-bottom:0px ;
    border-left: 10px solid transparent;
    }
    it will result in a triangle.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,728
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    am not certain what you are trying to do with what here.
    1) if you are trying to place text with the pseudo generated element why not use content:"your text...". of course, thsi blurs the line between what text is page content and what text is decorative styling.
    2) if you are trying to place the text in the content, such as the H3, why not forgo the pseudo element and simply style the h3 and position it absolutely?
    3) Note that when you AP an after element it has a higher Z-index than it's siblings, since it as generated after these elements in the source code.
    4) also I notice that you moved the pseudo element -40px topward, unless there is something else in your code providing space it will probably overlap with something out side #ceoMsg, so you may want to add margin-top:40px; to #ceoMsg

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    divMap.jpg
    Hello Dresden, I attached an image of what I was trying to do.
    hope this helps.
    thx
    D

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    If you want to layer the elements then you need to control the z-index.

    I can't really work out what you want from the drawing but to keep the h3 on top then try adding a higher z-index.

    Code:
    #ceoMsg h3{
    z-index:3;
    }

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I did try the z index but perhps I did not do it right.
    also for it to work wouldn't i have to give a z-index to the other elements as well?
    I tried to give maidiv::after a z of 9999 & the maindiv::before a z of 999.
    as I write this I am guessing the z might not work on pseudo elements... but may work on the image.
    thx
    d

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    No you can change the z-index order quite easily. Here's an example showing three different stacking levels.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
    	position:relative;
    	zoom:1.0;
    	width:100%;
    	border:1px solid #000;
    	margin:20px 0;
    }
    .test:after, .test:before {
    	content:" ";
    	display:block;
    	position:absolute;
    	width:50px;
    	height:50px;
    	background:red;
    	top:10px;
    }
    .test:after {
    	left:10px;
    	z-index:2;
    }
    .test:before {
    	left:40px;
    	z-index:3;
    	background:blue;
    	top:20px
    }
    .test2:before { z-index:1 }
    .test3 p {
    	position:relative;
    	z-index:5
    }
    </style>
    </head>
    
    <body>
    <div class="test test1">
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div this is the actual content in the div </p>
    </div>
    <div class="test test2">
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div</p>
    </div>
    <div class="test test3">
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div this is the actual content in the div </p>
    		<p>this is the actual content in the div</p>
    </div>
    </body>
    </html>
    That will work in all the modern browsers apart from IE8 which is buggy with :before and :after.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    It doesn't look behind it to me. All I did was change the postion so I could see it

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS3 Transparent Border | Demo 2 | { visibility: inherit; }</title>
    <style type="text/css">
    #ceoMsg{
    position: relative;
    width:280px;
    height:350px;
    margin: 10 0px 15px 20px ;
    Padding: 5px 10px 5px 10px;
    border: 1px solid #000;
    }
    
    #ceoMsg p{
    display:block;
    text-indent: 10px;
    margin-top: 100px;
    line-height: 20px;
    }
    
    #ceoMsg::before{
    position: absolute;
    content:'';
    top:-5px;
    left:150px;
    width:20px;
    height:20px;
    margin: 5 0px 15px 20px ;
    Padding: 5px 10px 5px 10px;
    background-color:#000099;
    border-top:0px;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    border-left:1px solid #000;
    -webkit-box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    12px 2px 3px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    
    #ceoMsg::after{
    position: absolute;
    content:'test';
    top:40px;
    left:21px;
    width:280px;
    height:25px;
    margin: 5 0px 15px 20px ;
    Padding: 5px 10px 5px 10px;
    background-color:#000099;
    border-top:1px solid #000;
    border-right:1px solid #000;
    border-bottom:0px;
    border-left:1px solid #000;
    }
    
    #ceoMsg h3{
    position: absolute;
    top:-10px;
    left:-50px;
    font-size: 30px;
    font-weight: 900;
    color: red;
    }
    </style> 
    </head>
    <body>
    <div id="ceoMsg"> 
    <img id="ceo01" src="images/ceo01.jpg" />
    <h3>Lorem ipsum dolor</h3>
    <p>"sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
    </div>
    
    </body>
    </html>
    Last edited by Force Flow; Feb 25, 2013 at 00:35. Reason: added code tags

  9. #9
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you I will go try it out.


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
  •