Hi guys, totally newbie here. Just wanna ask a quick question on how to do something like the attached image in css. The yellow box is a container and inside that container the black box is a “<p>” tag and the red one is a blank “<div>” tag. As you can see the “<p>” tag arranger vertically and right beside it is the “<div>” tag that is blank.
I am a totally newbie in html and css, I jsut comeup to jump advancely in css for some emergency assignment.
Please could someone show me on how to do that. Thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
h2,p{margin:0 0 .5em}
.wrap {
width:640px;
margin:0 auto;
border:1px dashed #ccc;
padding:10px;
overflow:hidden;
background:#f2f2f2;
}
/*
this next rule makes text stay clear of image in a rectangular block and not wrap
IE6 though just needs haslayout which is done with the height:1% hack (or zoom)
but will need overflow set back to visible in case it hides it all at 1%
*/
.text {overflow:hidden;}
* html .txt {height:1%;overflow:visible}/* ie6 fix*/
.image {/* this would be an image in the html */
float:left;
margin:0 10px 0 0;
width:100px;
height:100px;
background:red;
border:1px solid #000;
}
</style>
</head>
<body>
<div class="wrap">
<p class="image">This would be the image</p>
<div class="text">
<h2>Title goes here</h2>
<p>The description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here .</p>
</div>
</div>
<div class="wrap">
<p class="image">This would be the image</p>
<div class="text">
<h2>Title goes here</h2>
<p>The description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here .</p>
</div>
</div>
<div class="wrap">
<p class="image">This would be the image</p>
<div class="text">
<h2>Title goes here</h2>
<p>The description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here .</p>
</div>
</div>
</body>
</html>
It was designed for an image to be at the side but could be changed to text although you would probably want to lose the height.
A definitive answer could not be given based only on a picture.
Probably p and div aren’t the elements for the job, whatever job is there to do. If it’s a checkbox list or an option group, certainly p and div are the wrong elements, and that effect doesn’t need but the element (checkbox or option) and its corresponding label.
A definitive answer could not be given based only on a picture.
Probably p and div aren’t the elements for the job, whatever job is there to do. If it’s a checkbox list or an option group, certainly p and div are the wrong elements, and that effect doesn’t need but the element (checkbox or option) and its corresponding label.
Actually sir noonnope, the reason I used p tag and div was based on the javascript that im going to apply for it. When the p tag was click the div would be visible something like that.
@Paul O’B - I tried your sample sir and that was what Im looking for though as you said you used it for image but thats not a problem I think im gonna play around with it. BTW, why you use overflow ? and was the overflow the reason why it goes into right position ?
Sorry for too many question its just so happen im totally out of css world :D.
Actually sir noonnope, the reason I used p tag and div was based on the javascript that im going to apply for it. When the p tag was click the div would be visible something like that.
Hm, I also would not use those elements, based on that information. First of all, when I need someone to click on something with Javascript, I still like to stick to elements who are always clickable (they can receive the focus without you needing to add a negative tab index to them, as you would need to with <p> if you want users without a mouse to be able to use your page).
BTW, why you use overflow ? and was the overflow the reason why it goes into right position ?
If you give .wrap an ugly background colour, then remove the overflow statement (or comment it out), and look in a modern browser (so, not IE6 or IE7), and you should see the .wrap box vanish.
This would be Paul enclosing his floats which is going to be one of your main bits of knowledge you’ll need when building layouts with CSS.
The .text having overflow: hidden was for not letting the text inside that box wrap around (and under) the image. Make the text longer (add more to it) and remove the overflow: hidden from .text and you’ll see what the default behaviour is (in a modern browser).
Though I think Paul typo’d here:
html .txt {height:1%;overflow:visible}/* ie6 fix*/
That should prolly be * html .text since there’s nobody with a class of .txt in the HTML.
