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
<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>
am not certain what you are trying to do with what here.
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.
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?
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.
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
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
No you can change the z-index order quite easily. Here’s an example showing three different stacking levels.
<!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.