Why gose to image's flow
This is code:
<p><img class="left" width="95" height="64" src="#" />
some text here some text here some text here some text here some text here some text here
</p>
<ul>
<li>some text here some text here some text here some text here some text here some text here some text here
</li>
</ul>
Probably because
the image is float: left
either the <ul> or the <li> or both is display: inline
I assume you want to keep the left float of the image. To get the <ul> onto its own line,
you could give it a display: block; clear: left; to sort it out.
Because you're floating the image left. That's what happens. The bullet is behind the picture.
Presumably because a CSS rule-set that applies to the element includes the rule float: left
Remove class="left" :)
If you have control over the .left class, add some padding or margin to the right side of the image.
.left {float:left;padding-right:2em;}
or
.left {float:left;margin-right:2em;}
The exact amount of padding/margin you need depends on how the list is styled - you want to add enough so that the list bullet doesn't overlap the image, but the paragraph and other stuff doesn't go too far to the right.
Which of padding-right or margin-right to use depends on what else is going on in the page, what browser(s) you are using, and somewhat also on personal preference. Try each and see which one works better in your situation.
Related
I have an image, which is floated left from some text:
<ul class="row">
<li class="col-sm-6">
<img src="asset.svg" style="float:left;width:50px;height:50px;">
<div>some text</div>
</li>
<...etc...>
The result I get from this (with .png as well) is attached:
The width of the images seems to be dictated by the neighbouring div. Anyone know why this happens and how best to get around it?
First step: Properly close the IMG-tag with /> .
Second, does the div some text also have float:left ?
If the li has by example a width of 200px, and the img tag has a width of 50px, the div some text should have a width of 150px and float:left.
Hope that works for ya
Your question is not quite clear, you should try and upload more details.
But you can try clear: both in your CSS code.
At the get-go, here's the fiddle.
I want a <ul> in which each <li> has a <p> and then an icon floating on the rhs. The paragraph may take 1-4 lines, and I want the icon to sit nicely in the middle of the line no matter what. The double wrapping <p> is necessary, trust me :)
The width of the <p> has to be 100% less whatever space is necessary for the icon. Basically, I want the icon to sit halfway up the space left by the right-margin of the <p>.
The solution here uses background-image, but that's no good for me because the image has to serve as a draggable handle for mobile devices. (I'm using this approach to modify a jQuery sortable desktop site for touch screen.)
The fiddle uses a placeholder <img> because of the demands of jsfiddle, but I'll actually use an <a> with an image off a sprite.
I want to avoid having a negative top margin, because the margin will move into the preceding line and could mess up the dragging (i.e., you could inadvertently drag the wrong line).
Thanks.
Based on this answer by bfrohs,
DEMO here
HTML
<ul>
<li class="absoluteCenterWrapper">
<p class="text">This is some text that flows over multiple lines and I want it to have the icon on the rhs that stays in the middle of the line no matter how many lines of text (and I'd really like not to use a negative top margin on the image).</p>
<img class="icon" src="http://placekitten.com/g/20/20">
</li>
</ul>
CSS
.text {
margin-right:35px;
}
.absoluteCenterWrapper {
position:relative;
}
.icon {
margin:auto;
position:absolute;
max-height:100%;
max-width:100%;
top:0;
bottom:0;
right:0;
}
Change the position of the li element to be absolute and that of the img also absolute. Consider adding this code instead of using your css.
.icon{
margin:40% 5%;
float:right;position:absolute;
}
See this fiddle.
http://jsfiddle.net/NXWPE/47/
I am trying to insert an image along with text. when i insert the div, it puts the image on the next line. the div has a background image set to it. here is my code:
Chat Rooms <div class="dot"></div>
the text is aligned by center.
Use float with right or left options
Chat Rooms <div class="dot" style="float: right;"></div>
Browsers always place a line break before and after the element.
http://www.w3schools.com/tags/tag_div.asp
So you have to use the float attribute to get the desired result:
<div class="dot" style="float: left"></div>
Alternatively, you can do:
<p>Chat Rooms <img src="link to your image" alt="altext" /> </p>
you can do this way-
<div><span style="float:left;">chat room</span> <span class="dot"></span>
<div style="clear:both;"></div></div>
If I understand your problem correctly, your <div> goes to a new line because div tags, by default, have a display: block; property which tells them, put simply, to go on their own line and leave anything that is around them above or below themselves.
To correct this issue, you can either apply this bit of CSS to your document:
.dot {
display: inline;
}
Setting the div's display property to inline (and giving it a width and height alongside) should allow it to sit on the same line as the content that is around it. However, I suggest that you instead use an <img> tag, which already presents the correct behavior for cases such as yours.
For reference about the <img> tag, visit this link:
https://developer.mozilla.org/En/HTML/Element/Img
Is it possible to show the text inside <h3> over the image, without using <span> and images in background?
HTML
<h3>sample caption 1<img alt="" src="banner4.jpg" /></h3>
CSS
h3{ }
h3 img { }
To have a img tag inside of a h3 tag is bad practice.
what you could do is:
<div>
<h3>sample caption 1</h3>
<img src="banner4.jpg" alt="banner" />
</div>
and then alter the position or padding and margin to maneuver the text over the image, maybe put a z-index to ensure it shows the text on top.
img{z-index:10;position:absolute;top:0px;left:0px;}
h3{z-index:20;}
div{position:relative;}
The easiest way though is to use a background image on the h3.
Here is a demo
http://jsbin.com/ozobo5
No, I don't think it's possible to do it how you asked in the question.
And believe me, I tried.
There's just no way to style that text without an element enclosing it. The only hope I had was the :first-line pseudo-element, but that didn't help either.
It's pretty easy to do it in your fiddle though, which is completely different to the question you asked in the first place:
http://jsfiddle.net/thirtydot/vqaFf/1/
Any ideas how I get rid of white space on my IE browser. It is caused by a hidden div. When I remove the div the white space goes. Works fine in FF.
Here is the DIV:
<div class="hidden" id="popup">
<div>
<H1 class="center" id="popupTitle"></H2><br/><br/><br/>
<div style="position:relative; display:inline;">
<p id="popupText" style="float: left"></p>
<img id="popupImage" style="float: right"></img>
</div>
</div>
</div>
Here are the styles associated with it:
.ofCommunications .hidden { display:none; visibility: hidden; }
I am also trying to get the p and the img inside the third div to display on the same line but that doesn't seem to be working either.
Thanks in advance
Caroline
The spacing problem is most likely caused by your improperly closed tag ("") as well as using both display: none; and visibility: hidden;
Visibility will cause the element to still take up space so you need to get rid of that style.
If you make those adjustments it should work unless you have other issues not seen in the code provided (for example: your parent container to .hidden having a misspelled class name).
Tips:
Never create space with < br/ > tags. They're only used for breaking text.
Get rid of display: inline; and position: relative; on your other < div > as it doesn't make sense to have it there (relative positioning is default).
Lowercase all of your tags. Uppercase tags are a thing of the distant past and not ideal.
A couple of comments. Once you clean this up it might help to resolve this and other future headaches:
Remove your inline styles and put them in a stylesheet.
What is that second div doing under the hidden div? It looks redundant and unnecessary to me. Remove it.
If you're floating elements then you'll need to clear them down the track. This could be why you have things floating in the wrong spots.
Have you display:block'ed the p element next to the image and given it a width? Otherwise it's not going to float anyway.
Your h1 should not be uppercase.
Hope those few suggestions help out a bit.
Try this to get the <p> and <img> lined up:
<div>
<p id="popupText" style="float: left"></p>
<p style="float: right"><img id="popupImage" /></p>
</div>
I removed the position: relative because it's not needed with the code you provided, and the display: inline because it doesn't make sense to make the div inline.
Have you checked the widths of the parent elements? If a width is set too small on a parent element there will not be enough space to render your paragraph and image on the same line. This could cause your paragraph and image to render on different lines.