I'm doing a site in which images need to presented next to textual content - a sort of pseudo two-column layout, as the images and text come from a single html source.
I've found quite a simple way to do this by putting the images as their own paragraphs and floating them. Would there still be a more simpler way (in regards to html) to do this without these extra paragraphs and by only attributing extra css to images?
If the floated image is in the same paragraph than the text, then paragraphs with and without images would be different in width.
EDIT: Basically, I'm looking for as simple HTML markup as possible to position images like this. The CSS can be complex ;)
CSS:
p { width: 500px; }
p.image { float: right; width: 900px; }
Current HTML:
<p class="image"><img src="image.jpg" /></p>
<p>Some text here.</p>
Is the above possible with this HTML?
<p><img src="image.jpg" /></p>
Are you looking for this?
p img { float: right; width: 900px; }
This would match all img-tags inside p-tags.
But I recommend always using classes or ids to match CSS rules. Just using the tag name can lead to annoying pitfalls, sooner or later.
Edit
Mhm, maybe I got you wrong. You would like to apply float: right; width: 900px; to the p-elements, not the img-elements ...
AFAIK there is no way to select a parent of a specific element. It always works in direction PARENT -> CHILD, not CHILD -> PARENT.
No. With the img inside the p, you can float the image right but the text will not stay in a column. It will wrap underneath the image. Any right margin or padding you apply to the p will also apply to the img.
Since you have two pieces of related information, I would wrap those in a div and then position them within the div.
.info {width:900px;}
.info img {float:right;}
.info p {margin-right:400px;}
<div class="info">
<img src="image.jpg" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
In response to Emily's answer.
No. With the img inside the p, you can
float the image right but the text
will not stay in a column. It will
wrap underneath the image. Any right
margin or padding you apply to the p
will also apply to the img.
While she's right, as far she goes, there is a workaround. Though it's not ideal:
p {position: relative; padding-right: 950px; /* width of the image + 50px margin */ }
img {position: absolute; top: 0; right: 0; }
This should put the image in the top-right corner of the p, while forcing the text into a column between the left boundary of the p element and the 950px right-padding. Not ideal, and a little messy, but it allows for the columnar effect without adding extra tags.
...unless you want to add a clearfix br(br.clearfix: display: block; clear: both) at the end of the paragraph (to force the p tag to extend past the image for short paragraphs).
yes, just tested this,
make sure you use the strict doctype
<!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">
<style>
p { width: 500px; position:relative;}
p img { position:absolute; margin-left:520px;}
</style>
<p><img src="PastedImage.jpg" />text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
I concocted this line of code here to help me position some text exactly where I wanted it. I might be a novice way but it got the job done simply and easily and precise. and all HTML.
put your txt in here and use the Top and Left values to position the text precisely where you want it
you can also use the href field to make your text a hyperlink or if thats now what you want you can jus delete the href field but be mindful to keep the "
<a STYLE="position:absolute; TOP: 24px; LEFT:50px;">txt go here - use Top & Left values to position it. ex. of text with no hyperlink</a>
Related
Can anyone please point me out, or name some tecnhiques that may exist in order to achieve this effect, on a properly way:
Like this:
and again:
As you may notice, the point is to connect both lines. Some of those lines come from text boxes, that, since we wish to properly use EM unit for font-size, the box around the text, may change.
I have never done this before, I would appreciate any point outs, in order to investigate this "effect" further please.
Thanks in advance.
It doesn't matter if the fonts in the text boxes are in EM. If the font size change, the text boxes size will change, but that it doesn't mean that the space between them also has to change (it could has a fixed height -the background height-).
Here's a really basic example (try changing the body font-size):
<html>
<head>
<style>
body { font-size: 12px;}
.text { border: 1px solid #999; padding: 15px; font-size:1em; }
.line { background: url(http://www.agavegroup.com/images/articles/photoshopCurvedLine/curveFinal.gif) no-repeat center center; height: 50px; }
</style>
</head>
<body>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="line"></div>
<div class="text">
Eum, quis consequuntur culpa ex eius totam nemo.
</div>
</body>
</html>
If you do want the space between boxes height changing if the font-size change, you should set it height to EM and use a background images that's, lets say, doubled the container original height (so when the height change, more background it's revealed). You can see this changing height: 50px; to height: 7em; on the .line {} rule (the example image I've used it higher than the container).
This a really basic example. The markup depends on the design. If you need something more accurate (like: you need that the line starts and ends in specific spot), you should probably use absolute/relative positions.
I have a bunch of child <div>'s of variable width, which I want to right-align within a parent . I also want the parent <div> to be no wider than it needs to be to contain the children. (I don't know in advance how wide the children will be -- they'll contain dynamically generated content.)
Here's an example that works correctly in IE 8.0 but not in Firefox 3.5 (child <div>'s aren't right-aligned):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#parentDiv{float:left; text-align:right; background-color: gray;}
.childDiv{clear:both; border: 1px solid black; background-color: white;}
</style>
</head>
<body>
<div id="parentDiv">
<div class="childDiv" style="width: 25px"> </div>
<div class="childDiv" style="width: 50px"> </div>
<div class="childDiv" style="width: 100px"> </div>
</div>
</body>
</html>
If I add float:right to the childDiv's CSS, then it works in Firefox 3.5 but not in IE 8.0 (parentDiv's width is no longer determined from the width of its children).
Is there a way I can get the desired behavior in all major browsers?
UPDATE: Apparently the adding float:right to the child divs only produces the error in IE when I'm hosting the page in my IIS localhost. (Which is what I was originally doing.) Perhaps this is an issue with some IIS setting? I'm running IIS 6.0
UPDATE #2: So it turns out IIS 6 was causing the page to load in IE7 Standards mode. So the above code (with float:right added to the child divs) works for IE8 and Firefox, but apparently not for IE7.
I guess that makes the question: Is there a simple way to make this work in IE7? (Besides just using a conditional comment or CSS hack to load a different stylesheet in IE7, I mean.)
Edited Jan 21, 2010 # 21:00 MST : You need to float the parent div to the right. Originally I also floated the child divs right, but this caused trouble in IE7. If you have Firebug, take a look at this test page, which has the result you're after. I tested in Firefox 3.5, IE7, IE8, Chrome, and Safari 4.
Here is the relevant CSS and HTML (I added some margin/padding and background colors so you can more easily see the effect):
<style type="text/css">
#parent {
margin:0;
background:#ccc;
float:right;
padding:20px;
}
#parent div {
background:#eee;
margin:0 0 20px;
text-align:right;
}
</style>
...
<div id="parent">
<div>Nulla facilisi. Suspendisse potenti. Sed sed euismod tortor.</div>
<div>Lorem ipsum, pharetra nec justo. In dapibus neque a libero cursus a laoreet nunc luctus.</div>
<div>Lorem ipsum dolor sit amdolor.</div>
</div>
My guess as to why the original didn't work is that IE7 has a number of documented bugs (see here for a list, which includes links to several float bugs). If you float both the parent and child elements to the right, you get the desired results in IE8 and other modern browsers, but in IE7 the parent's width won't collapse to the width of the widest child (enter mischievous bug).
IE7 behaves as expected if you float both the parent and child elements to the left, however (but this isn't what you were after).
Have you tried floating all the child divs to the right, then adding a separate footer with width:%100 and clear:both? I believe this will make IE properly scale the parent as it will have an element within it that is the proper width as well as in the document flow (floated objects are removed from the flow.) You may require display:inline on the clear as well.
Try adding position: relative; to the parent and float: right; to the children
You need position: relative; on the parent, and most importantly, you need to clear those floats.
I am sure sure if this is even possible due to the nature of CSS and being cascading, but I will try anyway.
I am creating a Terms and Conditions box which will contain some key elements that the user will select. Since the T&C's will have form components (radio buttons, check boxes). I don't really want to go through the trouble of putting it into an IFrame and getting the user input that way.
I figured using a with the overflow: auto property added, I could create an scrolling box with the T&C's and have the user select their options that way.
Well, because the T&C's have some mark up which would be directly affected by the sites css, I need to figure out a way to have this div not use the main CSS of the site.
Here is some sample code which would be similar to the approach I am trying:
<html>
<head>
<style>
div
{
border: solid 1px #000;
}
div small
{
font-size: 17pt;
}
</style>
</head>
<body>
<div style="overflow: auto; width: 500px; height: 300px;">
<small>This is small text</small>
<div>
<small>This is small text</small>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec vulputate mi sed nisl blandit sed porttitor massa fringilla.
</div>
</div>
</body>
</html>
The result of this is a pretty little black box with some text and then a sub box with more text and the key item in here is the text wrapped in <small/>.
Is there a way to have anything under a certain div NOT inherit the CSS? Maybe I need to take a completely different approach with this.
Thought? Ideas? Suggestions?
Thanks in advance!
Instead of working directly with tag names, keep two sets of classes ("inner" and "outer") and work with those.
So you can have a div.inner definition, and a div.outer definition, and work on them separately. The inner one would have to explicitly undo the settings outer has, though.
Something like
<div class="outer">
<div class="outer">Some content. <small>Small text.</small></div>
<div class="inner container">
<small>Blah blah blah</small>
More content
</div>
</div>
And in your CSS define whatever you need,
div.outer {
border: 1px solid black;
}
div.outer small {
font: 17pt;
}
div.inner {
border: none;
}
div.inner small {
font: 15pt;
}
div.container {
overflow: auto;
width: 500px;
height: 300px;
}
don't think there is a way to not inherit css. i think the only way is to 'reset' all the styles set on its parents explicitly. see eg http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ for a list of default properties.
There is, as second notes, no way to inherently prevent the cascade of styles, it's the cascade that defines CSS after all. So you are reduced to using the .inner and .outer approach that Welbog suggested.
So you're reduced to defining your styles for the main document as you normally would. However to override those styles for the same elements under the T&C div you would have to explicitly override/re-style. You could use two stylesheets to retain clarity, but you'd have to remember, in the t_and_c.css to explicitly preface every declaration with the id of the enclosing div, for example:
#t&c p {...}
#t&c a:link,
#t&c a:visited {...}
I have a div with a width of 250px. When the innertext is wider than that i want it to break down. The div is float: left and now has an overflow. I want the scrollbar to go away by using word-wrapping. How can i achieve this?
<div id="Treeview">
<div id="HandboekBox">
<div id="HandboekTitel">
<asp:Label ID="lblManual" runat="server"></asp:Label>
</div>
<div id="HandboekClose">
<asp:ImageButton ID="btnCloseManual" runat="server"
ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click"
BorderWidth="0" ToolTip="Sluit handboek" />
</div>
</div>
<asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode">
<Nodes>
</Nodes>
</asp:TreeView>
</div>
CSS:
#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}
As Andrew said, your text should be doing just that.
There is one instance that I can think of that will behave in the manner you suggest, and that is if you have the whitespace property set.
See if you don't have the following in your CSS somewhere:
white-space: nowrap
That will cause text to continue on the same line until interrupted by a line break.
OK, my apologies, not sure if edited or added the mark-up afterwards (didn't see it at first).
The overflow-x property is what's causing the scroll bar to appear. Remove that and the div will adjust to as high as it needs to be to contain all your text.
Or simply use
word-wrap: break-word;
supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
try white-space:normal; This will override inheriting white-space:nowrap;
It's pretty hard to say definitively without seeing what the rendered html looks like and what styles are being applied to the elements within the treeview div, but the thing that jumps out at me right away is the
overflow-x: scroll;
What happens if you remove that?
you can use:
overflow-x: auto;
If you set 'auto' in overflow-x, scroll will appear only when inner size is biggest that DIV area
I'm a little surprised it doesn't just do that. Could there another element inside the div that has a width set to something greater than 250?
Setting just the width and float css properties would get a wrapping panel.
The folowing example work just fine:
<div style="float:left; width: 250px">
Pellentesque feugiat tempor elit. Ut mollis lacinia quam.
Sed pharetra, augue aliquam ornare vestibulum, metus massa
laoreet tellus, eget iaculis lacus ipsum et diam.
</div>
Maybe there are other styles in place that modify the appearance?
I found that word-wrap: anywhere worked (as opposed to word-wrap: break-word mentioned in another answer).
See also:
What does "anywhere" mean in "word-wrap" css property?
Here's what I want:
text text text text text text text text text text text
text text text text text text text text text text text
+-----------+
| some text |
+-----------+
text text text text text text text text text text text
text text text text text text text text text text text
...where the "some text" block is a div. I want the div to be the minimum width necessary to contain its text without wrapping. If the text is too long to fit without wrapping, then it's okay if it wraps.
I do NOT want to set an explicit width for the div. I don't want to set min-width or max-width either; like I said, if there's too much text to contain on one line without wrapping, then it's okay if it wraps.
DIV elements are block-level by default, which means they automatically get 100% width. To change that, use this CSS...
.centerBox {
display:inline-block;
text-align:center;
}
<div class="centerBox">
Some text
</div>
EDIT: Updated to use a CSS class rather than inline attribute and changed "block" to "inline-block"
I don't know, the solutions here seem partially right, but then don't really work. Based on Josh Stodola's answer, here's a cross-browser solution tested in Firefox, Safari, Chrome and IE 7, 8 & 9
CSS:
body {
text-align: center;
}
#centered-div {
text-align: left;
background: #eee;
display: inline-block;
/* IE7 bs - enables inline-block for div-elements*/
*display: inline;
zoom: 1;
}
Markup:
<div id="centered-div">
Cum sociis natoque penatibus et magnis dis<br />
parturient montes, nascetur ridiculus mus.
</div>
To add IE6 support (sigh), add _height: [yourvalue] to the div. Yes, with an underscore.
Test it yourself on JSFiddle: http://jsfiddle.net/atp4B/2/
Props to Josh Stodola, although he wasn't exactly right. The property needed is:
display: inline-block;
Which has solved my problem. Yay!
<style type="text/css">
/* online this CSS property is needed */
p.block {
text-align: center;
}
/* this is optional */
p.block cite {
border: solid 1px Red;
padding: 5px;
}
</style>
<p>Some text above</p>
<p class="block"><cite>some text</cite></p>
<p>Some text below</p>
Hint: don't use DIVs for text blocks (for SEO and a better semantic purposes)
I recommend flexbox! See what's possible at this website, solved by flexbox.
It's quite new but works in all the major modern browsers (IE10 uses -ms- prefix, IE11+, Firefox 31+, Chrome 31+, Safari 7+, ...) - see this chart.
Basically, vertical and horizontal centering, complete with dynamic sizing, can be accomplished in 4 statements:
parent {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
Make sure this parent actually is 100% height. You may need to set body and html to 100% height too.
My implementation of this can be seen at my own personal website, http://pgmann.cf.
Here's an example I made of exactly what your looking for:
(jsFiddled here: http://jsfiddle.net/yohphomu/)
Warning:
I'm a CSS fanatic!!!
If I understand your question correctly, there is no need to set a height or width because their default setting is auto (that being said you can use auto), but the only problem with this is that if you wanted to change the background or put a border it will make it around more than the desired field. Why is that and how do we fix it, read on.
Or just copy and study the example.
Any one having this problem hasn't realized on thing (assuming you have this problem and are using div's) anything between div tags is considered (for understanding purposes) a complete set, meaning that in that div is all the things you want it to stand for (computers do what they're told, not what you want them to do) so (for example) in order to set the text-align to center it needs that whole lines space and (ultimately) if it had a border, it would border all the space it used. If you understand this read on, if not well can't help you there.
So now that we understand what happens, how do we fix it? Well we need one part to center it, the other to color it. In my example I used a div to center it and span to color. Did I need the div? I'm am positive I did not. I could have achieved the same thing by using the p to center (or I could get rid of the p and just use div). The reason I did this was to keep it organized.
Actually just because I didn't realize until I thought about it, but didn't feel like fixing it.
Hope this answered your question. Took you 4 years for an answer but me, 30 mins to figure it out (and I've been studying CSS for a few days now).
The Example:
<div class='container'>
<div class="text">
text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
</div>
<div class="holder">
<p><span>text here</span></p>
</div>
<div>
text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
</div>
</div>
Then css would look like:
.container {
width: 500px;
height: 500px;
}
.text {
font-size: 20px;
}
.holder {
text-align: center;
}
span {
background-color: blue;
border: 1px solid black;
}
Notice: I set the container with set width and height because I was working on a project at the same time and to simulate a full screen with text.
Also note that I have made it so that that the text has a separate background color with a border. I did this to show its measurements are independent and rescale when needed.
You are welcome, also I think people didn't understand your question. Hope I did.
Something like this?
<html>
<head>
</head>
<body style="text-align: center;">
<div style="width: 500px; margin: 0 auto;">
<p>text text text text text text text text text text text text text text text text text text text text text text</p>
<div>hello</div>
<p>text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</body>
<style>
p.one
{
border-style:solid;
border-width:2px;
border-color:red;
display:inline-block;
}
</style>
<p class="one">some text</p>
HTML
<div class="outerdiv">
<div class="innerdiv">
++++TEXT+++
</div>
</div>
CSS
.outerdiv{
text-align: center;
}
.innerdiv{
display: inline-block;
}
display: inline-block won't work if the block is not closed just before and just after the desired centered text. What you really need is to set width: fit-content; margin: auto; on block element, see the snippet.
.center {
display: block;
width: fit-content;
margin: 1em auto;
padding: .5em;
text-align: right;
background: yellow;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla diam sagittis, scelerisque ipsum ac, imperdiet tortor. Curabitur dapibus metus eu neque consectetur hendrerit. Cras interdum faucibus malesuada.
<div class="center">
Lorem ipsum yourself, buddy!<br>
Try to align this!
</div>
In auctor aliquam erat in pharetra. Suspendisse potenti. Pellentesque vehicula interdum sem vel tristique. Nullam erat nisl, imperdiet et turpis ut, ornare vulputate erat.