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
Related
I want a Text with an vertical line below it, right to this constellation i want a floating div. I dont want to set fixed widths. What i tried is this:
<div>
huhu
<hr class="green" />
<div style="float: right">right</div>
</div>
what i want is the text+hr flow around the red box, is this possible?
This is possible; however, the code you've given won't work without a small modification.
You need to have the right-floating div before the content that you want to wrap around it --
http://jsfiddle.net/S9mmU/1/
To ensure that the floated div never takes up more than half the screen, you can use the max-width property - max-width:50%;
<div>
<div style="float: right; max-width:50%; border:2px solid red; padding:2em; margin:1em;">right</div>
huhu
<hr class="green" />
</div>
I've added the red border, a margin, and some padding so that you can see the effect. It should go without saying that none of these should be inline styles in practice.
Use the border-bottom instead of tag and set overflow:hidden.
A bit of head scratching going on here, so any pointers would be much appreciated!
I have a header div that has the property overflow:hidden. On the left of this header is the page title, and on the right a number of images. This works perfectly well and everything shows as it should.
However, I now need to wrap these images around div tags (they will become clickable, and updated via Ajax - so I need to define the postback div for each image). As mentioned, without wrapping the image around a div tag, they show fine. However, as soon as I add the div tags, they disappear (though still show in the page source). The div tags take the simple form of and no styling is associated with them.
I'm sure I'm missing something here, but for the life of me it's totally bypassing me right now!
Thanks :-)
Your question is bit unclear for me, any way if i understood your question
If you need to have click event you can use asp:ImageButton to hold the image.
if you really need to use div
<div class="header"> // this is the one with overflow hiddden
<div class="left"> // this div holds the page title ; float:left
<h1>Title</h1>
</div>
<div class="right"> // this div to hold the divs which contain images
// if all your images are same height set the same height to this div and float:right
<div class="image"> // this div holds the image; make float:left set height and width
<img/>
</div>
<div class="image">
<img />
</div>
<div class="image">
<img />
</div>
</div>
</div>
Hope this helps
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/
Here's a picture of my current situation :
alt text http://grab.by/FUM
But I don't want the images below each other, I want them in a line, a straight horizontal line.
This is the code I have currently:
<span title="Milestones" class="tl-icon">
<span class="tl-msg">
<span class="tl-msg-inside">
<div class="slice1"></div>
<div class="slice2"></div>
<div class="slice3"></div>
<div class="slice4"></div>
<div class="slice5"></div>
<div class="slice6"></div>
<div class="slice7"></div>
<div class="slice8"></div>
<div class="slice9"></div>
<div class="slice10"></div>
<div class="slice11"></div>
</span>
So how would I make all the images be in a straight line?
Try floating the images to the left. For example:
.image {
float: left;
}
You should set the class for all the divs to the same class, something like slices, and then go with:
.slices {
display: inline;
}
DIVs are block level elements and will cause each slice to be on it's own line. You can either change the display property of those divs to be inline, or use SPANs instead.
There's solutions to your problem, and then there's solutions to your problem.
The immediate fixup is to make the divs display:inline or float:left. Divs are naturally block which means each one will fill the entire width of their container, so they stack below each other. Inline makes them act like text and shrink to the size of their content, and sit next to each other. Floating works more-or-less similarly.
The better fixup is to avoid those divs altogether. Can you just use <img>? That's usually ideal.
I am creating a web page with 3 columns. The middle column is where all the content goes. The content I want to enter has to be in the format of left aligned image, followed by some text next to the image. And this flows throughout the column with different images and corresponding text. Since my layout is a div based layout, I have put a main div (page_content )for the column. Then the heading (h4) and below the heading I have entered another div. This div in turn contains individual divs that are nested with div (class photo) for image and div (class lat_art) for text. The HTML code and CSS code has been given below. My issue is that the first image and text comes up, but subsequent get lined up vertically below the first text i.e occupies only the 50% of the div and floats right, pushing its corresponding text below it in the same 50% space. Should I specify a height for individual divs, probably the image is bigger than the text. But if I do that won’t my code become static. I want it to be dynamic. Please help.
HTML Code
<div id="page_content">
<h4 class="center_cap">LATEST ARTISTS</h4>
<!--Div for the content begins here-->
<div>
<!--Individual div begins here-->
<div >
<div class="photo">
<img src="Images/guitar.jpg" alt="guitar"/>
</div>
<div class="lat_art">
<span class="artist">ROCK ON</span>
<p>
Good news to all the fans of 'Rock On'. Concerts all around the world.
</p>
</div>
</div>
<!--Individual div ends here-->
<!--Individual div begins here-->
<div >
<div class="photo">
<img src="Images/guitar.jpg" alt="guitar"/>
</div>
<div class="lat_art">
<span class="artist">ROCK ON</span>
<p>
Good news to all the fans of 'Rock On'. Concerts all around the world.
</p>
</div>
</div>
</div>
<!--Div for the content ends here-->
</div>
Code from external Stylesheet
.photo{
width:48%;
float:left;
padding-left:2px;
}
.lat_art{
width:50%;
float:right;
}
It is really hard to follow because you are describing very much every other word is 'div'. Anyhow you described that you have three columns but If I understood correctly it is just the middle one you are asking about.
You want this format:
picture to the left
Right of the picture you have a header
Under the header you have a lot of text that wraps around the picture
Correct?
You problem is that you float, but you don't clear the float. This means that all content under it will be align according to the picture. What you need is to set clear:both after you don't want the content to wrap anymore.
I wroted a little example and tested it. CSS is inline to make the example short and simple.
<div>
<img src="pircture.png" style="float:left;height:400px;width:400px" />
<h4>My header</h4>
<p> A little content</p>
<div style="clear:both"></div>
</div>
You can probably save yourself a lot of time and aggrevation by using the YUI Grids CSS from Yahoo!
I'm not 100% sure that I understand the question. If you actually want what you are calling individual divs to have a picture on the left and text on the right, you can accomplish this by floating both the photo and the lat_art div left. If you actually want the text to be on the right and to flow under the picture if it is longer, do not float the 'lat_art' at all.
There is no need to specify a height on the individual divs, or to clear floats on them as they will fall one below the other by default (divs are blocks).
You are falling victim to divitis here as well - <span class="artist">ROCK ON</span>
could likely be something more meaningful like <h5 class="artist">ROCK ON</h5> or a paragraph or something else styled accordingly.
The img could just as easily be:
<img src="Images/guitar.jpg" alt="guitar" class="photo"/>
rather than:
<div class="photo">
<img src="Images/guitar.jpg" alt="guitar"/>
</div>