Forum Moderators: not2easy
-------------------------------
¦ Some text bla bla #.........¦
¦ Some text bla bla #.........¦
¦ Some text bla bla #.........¦
¦ Some text bla bla #.........¦
¦ Some text ..================¦
¦ bla bla Some=..............=¦
¦ text bla bla=..............=¦
¦ Some text ..=... Image ....=¦
¦ bla bla Some=..............=¦
¦ text bla bla=.. Image Text =¦
¦ Some text ..================¦
¦ bla bla Some text #.........¦
¦ bla bla ..........#........ ¦
-------------------------------
A page with margin of 200 pixels to the right side with a border (indicated by # in the 'picture' above).
Somewhere in the text one or more images should be present with some text below it that should extent to the right side of the page with the text nicely floating around when the image is wider than the margin on the right side.
Also the left and right side swapped should also work. (Note: the dots in the picture resemble spaces)
I now have the following stylesheet:
.chapter
{
background-color: #fcfcf4;
width:640px;
}
.txt
{
font-family:Arial;
font-size:11pt;
text-align:justify;
color:blue;
}
.txtleft
{
margin-right:200px;
border-right:solid 3px green;
padding-right:3px;
}
.txtright
{
margin-left:200px;
border-left:solid 3px green;
padding-left:3px;
}
.imgleft
{
background-color: white;
float:left;
border: solid 1px red;
padding:2px;
margin:2 2 2 0;
color:red;
font-size:10pt;
text-align:center;
font-weight:bold;
}
.imgright
{
background-color: white;
float:right;
border: solid 1px red;
padding:2px;
margin:2 0 2 2;
color:red;
font-size:10pt;
text-align:center;
font-weight:bold;
}
And using the following HTML code:
<div class="chapter">
<div class="txt">
<div class="txtleft">
Some text bla bla
<span class="imgright">
<img src="image.jpg" width=300 height=225 alt=""><br>
Text for the image
</span>
Some text bla bla
</div>
</div>
</div>
This will put the image next to the border and not to the right side of the page (class chapter in this example).
I also tried using position:absolute; and left:330px; instead of float:right but then the image covers the text.
Something else I tried was:
<div class="chapter">
<div class="txt">
<div class="imgright" style="margin-top:250px;">
<img src="image.jpg" width=300 height=225 alt=""><br>
Text for the image
</div>
<div class="txtleft">
Some text bla bla
Some text bla bla
</div>
</div>
</div>
This will put the image right aligned, but because of the margin-top of 250 pixels above the image, the text above the image does not align with the border but with the left side of the image.
Has someone any idea how to do this using CSS?
Thanks,
Arjan
The CSS is commented. Works as-is in FF and IE6. If this isn't along the lines of what you're looking for, let us know.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
*{margin:0;padding:0;} /* zeroes margins and padding so they are under our control, not the browsers*/
#container{width:600px;margin:0 auto;}
#content_box{background:#123;color:#fff;padding:10px;}
#image_box{float:right;width:290px;margin:10px;background:#987;text-align:center;}
#faux_image{height:100px;line-height:100px; vertical-align:middle;margin:0 auto;border:1px solid #000; background:#fff;color:#369;text-align:center;} /*Test-page stand-in for an actual image. All of these styles are unecessary when a real image is used, with the possible exception of the bolded margin, which centers the image in it's box.*/
#content_box>p{margin-right:150px;} /* provides the right hand space on the text that you wanted. The child selector (>) is unsupported in IE. For that browser, replace the > with a space, then add .caption{margin-right:0;} and place a caption class in the <p> tag after the image*/
</style>
</head>
<body>
<div id="container">
<div id="content_box">
<p>Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.</p>
<div id="image_box">
<div id="faux_image">the image</div>
<p>Caption for image.</p>
</div>
<p>Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.</p>
<p>Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.</p>
<p>Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.</p>
</div>
</div>
</body>
</html>
cEM
I've changed your code a bit to fit my needs as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
* {margin:0;padding:0;}
.chapter {width:640px; background-color:#fcfcf4;}
.txtleft {font-family:Arial; font-size:11pt; text-align:justify; color:blue;}
.txtleft p {margin-right:200px; border-right:solid 3px green; padding-right:3px;}
.imgright {float:right; margin:2 0 2 2; background:white; color:red; font-size:10pt; text-align:center; font-weight:bold; border: solid 1px red; padding:2px;}
.txtright {font-family:Arial; font-size:11pt; text-align:justify; color:blue;}
.txtright p {margin-left:200px; border-left:solid 3px green; padding-left:3px;}
.imgleft {float:left; margin:2 2 2 0; background:white; color:red; font-size:10pt; text-align:center; font-weight:bold; border:solid 1px red; padding:2px;}
</style>
</head>
<body>
<div class="chapter">
<div class="txtleft">
<p>Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.</p>
<div class="imgright">
<img src="image.jpg" width=300 height=225 alt=""><br>
Caption for image.
</div>
<p>Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.
Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.
Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.</p>
</div>
<div class="txtright">
<p>Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.</p>
<div class="imgleft">
<img src="image.jpg" width=300 height=225 alt=""><br>
Caption for image.
</div>
<p>Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.
Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.
Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur. Lorem ipsum dolor sit amet consectareur.</p>
</div>
</div>
</body>
</html>
And I have some questions:
What does the star in front of the {margin:0;padding:0;} mean?
The margin I added in the imgright and imgleft definitions doesn't seem to work. I only get them to work when I remove the doctype definition at the beginning of the page. Any idea why?
Once again thanks,
Arjan
What does the star in front of the {margin:0;padding:0;} mean?
That's called the universal selector [w3.org] (*). It basically means any and everything. When used all by itself, it literally matches to every single element in the code. So this rule declaration removes all padding and margins from all elements (including the html and body tags). Since default margins and padding are handled differently on different browsers, this a great way to level the playing field. Using it requires that you explicitly set margins and padding on anything that need them, but this is a good thing, as it affords you total control over the spacing and distances on your page.
The margin I added in the imgright and imgleft definitions doesn't seem to work. I only get them to work when I remove the doctype definition at the beginning of the page. Any idea why?
With a doctype on the page, the browser requires that your values have units. Since those margin values don't, it simply ignores the style altogether. You can see this if you are using FF and have the Web Dev toolbar installed. Using the CSS button, select "View CSS". When the tab opens, scroll to your non-united margin property and you'll see that it isn't even there. No margin property even shows up, a clear sign that the browser doesn't see it without the unit. The only exception to this is a value of zero (0), which is recognized with or without a value.
Add a unit (px, em, %, etc) and it will render the margin fine.
cEM
Thanks again, you helped me a lot,
Arjan
