I am trying to get text to flow around a jpg in my 'content' div and it won't co-operate. Can anyone please tell me what I'm doing wrong?
CSS:
div.Content {
position: absolute;
top: 76px;
right: 1%;
width: 75%;
height: 84%;
min-width : 200px;
font-family: comic sans ms, arial, verdana bold, sans-serif;
font-size: .8em;
overflow: auto;
margin:0px 10px 10px 0px;
padding:10px 0px 10px 10px;
}
img.righttext (
float:left;
clear:left;
}
HTML:
width="384" height="288" border="0" alt="Portchester Castle" class="righttext">
The club pier and slipway are visible at the top left corner of the castle.
The text is supposed to flow down the right hand side of the photo...
EDIT: So sorry...just noticed the ordinary (not curly) bracket in the img.righttext definition. It's too late at night for this...
David
Thanks for the hints, I must admit I wasn't sure what the clear:left actually did.
Unterminated String Constant: Need help debugging::
I've been playing around with it and have determined where the problem lies, <input type="text" size="15" name="Keywords"> <INPUT TYPE="image"
http://answers.google.com/answers/threadview/id/115485.htmlHOME |
A supplementary question...
If I only want, say, one paragraph to flow alongside the picture
is there a way to tell succeding text to start again after the picture?
That tutorial is really good, showing the different usages and the results of each.
Do you know of a CSS tutorial that's as good.
I've worked my way through the westciv.com/style_master course which is good but could do with some example results.
My original bit of code I picked up from Eric Meyers current site.
Wonderful...
Thank you again.
You can create a 'hard break' like this
This creates a new line below any floats.
That tutorial is really good, showing the different usages and the results of each.
Do you know of a CSS tutorial that's as good.
I've worked my way through the westciv.com/style_master course which is good but could do with some example results.
My original bit of code I picked up from Eric Meyers current site.
Good grief, that's going to take some work
Thanks...
Subscription to website w/still life images or oil ::
In the long "Text Search" box, enter the subject you'd like to search on, Please give the above process a try -- and play around with a few other search
http://answers.google.com/answers/threadview?id=453902HOME |
or the CSS equivalent
are both useful. In fact, I prefer the default behaviour for my
tags to be clear:both so I put that in my external stylesheet as br {clear:both; } If I later want to have an ordinary or half-break, I can then overrule the style with
depending on what I want.
Read here (http://css-discuss.incutio.com/?page=ClearingSpace) for some more hints on how to create space clearing breaks of different heights.
BTW, the /> closing the tag has nothing to do with the clearing action.
is a contentless tag (you don't code
. . . stuff . . .) In XHTML your code MUST be well-formed and all tags must be properly closed, e.g.: all must be closed with even though you could get away with ommitting the in HTML. For a contentless tag, you "close" it by having a space after the last attribute and then the closing "/>"
DE
Oh, and in looking up references for the br tag and clearing properties, I came across this piece of Internet History - A series of HTML tutorial pages by Eric Meyer from circa 1995 (HTML 3 on the timeline) There is a link at the very, very bottom left of the page referencing Eric who has since gone on to be one of the top CSS gurus and an excellent teacher. Check it out! (http://www.cwru.edu/help/wilbur/ch2.html)
A couple of hints for images and CSS.
An image can be either an inline or a block level element. For example, a smilie :) is an inline element, it is rendered relative to the baseline and canchange the height of the baseline. An image that is floated, is a block level element an is not rendered directly in the flow of text. However, with CSS, an image that is referenced ambiguously (not in a line of text, but not as a float either, for example in a by itself, or in a table cell ) may be treted as an inline object and receive default placement in a manner that you don't expect. So, if you are using an image and CSS, you should specify the desired default behaviour in your stylesheet by putting in img {display:block} and then over-ruling it for inline images (or vice versa).
Your code for a left floated image is good (except for the bracket problem} and you used a clear:left to prevent hoizontal stacking of images. Unfortunately CSS doesn't have good image centering, but it can be done.
DE
OK theres something I wish I knew like 14 months ago - thanks DC... How long has that little parameter been around :-/
Ha - if you can't find one here (http://www.web-building.com/coding_css.php3), there is no hope for you!
DE
 Red Hat's Rough Recovery From CFO Exit
 Windows Live Finds a New, Pre-installed Home
| |
