|
CSS - Want Images/table To Wrap Like Text
I am displaying a list of users on my site. Each user has a picture with some text below. I want to display this image+text block" and I want it to wrap like text.
I made inline div and tables with these elements but it seems to wrap arbitrarily around the page. any suggestions? Similar TutorialsPROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } i am making a web page using CSS. At the bottom of the page I have a box from left to right with thumbnails in it. I do not want these thumbnails to wrap. I tried whitespace:nowrap, but this makes the page really wide. The box the images are in has AUTO for the width. So if I re-size the window the width of the box re-sizes. I am having issues with a horizontal menu bar. The menu is supposed to be created with 4 images seamlessly aligned, but I find that there is a 3px space between each when I load the page. This causes the width of the 4 images to exceed the specified width specified for that id and a wraparound occurs. Page: www .sjbcathedral. org/php/sample.php CSS: Code: body {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:url(../images/redbkgnd.jpg);
overflow:auto;
text-align:center;
}
img {border:0px; margin:0px; padding:0px;}
#container {
margin-left:auto;
margin-right:auto;
height:auto;
text-align:left;
width:995px;
background:url(borderShadow2.png);
#menuBar {
width:905px
height:35px
}
menuBar PHP: PHP Code: <div id="menuBar"> <img src="menu1_MassTimes.jpg" ></img> <img src="menu2_OurSchool.jpg" ></img> <img src="menu3_OurClergy.jpg" ></img> <img src="menu4_ContactUs.jpg" ></img> </div> I'm new around here and to webdesign in general... Thanks for the help! Best, Andrew Hi all, Is it possible to wrap text in a Drop Down Box?? Regards, Stephen Hi folks, Heres a basic layout I created that includes a transparent PNG file with text wrapping around the image pretty well. http://agogo.dnsdojo.com/img/png_test/1.html I would like the layout to look more like this though: http://agogo.dnsdojo.com/img/png_test/indesign.png With the text wrapping around the circle. Considering the PNG file has transparency is there a way to do this with CSS. Is there a way to have texts wrap an image? For example, I want to have a small image 120x146 jpeg image aling top left on the page. I then want the texts to start from the top next to the image on the right side of the image just like in MS Word. Is this possible? ljCharlie i am making this page... T10L New and on the page, i am trying to float the right column on the right... like it is.. but problem is, when the text on the left continues past the right column, it isnt wrapping... like on this page... T10L Old i know it is because i have a width set on the "maincontainer" div... which is the left side, but if i dont do this, the right div will just be pushed to the bottom... any help or suggestions would be great... Greetings, How do you make a paragraph wrap around an image that is floated to the right or left? And what I mean here is not placing the image in a specific place in the middle of the paragraph code and then floating it, but wrapping text that comes from a tag like <p>$paragraphContent$</p> around an image that is floated left or right. Like basically, you don't know what exactly the text of the paragraph is, but whatever the text will be like, you want it wrapped around the image, and the image to be nicely placed in the middle of that paragraph. And can you do this with a number of paragraphs inserted in a <div> tag for instance? I mean just one image for all those paragraphs, to be placed neatly in the middle? Thanks for anyone taking the time to help and give tips. Thanks for taking the time to read my quesiton. I have an image, that if I use float: I can get the text to wrap around the image, but if I try to position the image and get the text to wrap, it doesn't. The text just shows up underneath the image. Instead of using float, I've tried display: block; but that didn't help. What do I need to change so that I can get the text to wrap around the image? Thanks, Brad Image is in textbox1 CSS: Code: .textbox1 {
height: 180px;
width: 280px;
font-size: 20px;
padding: 3px;
position: absolute;
top: 55px;
left: 15%;
border-style: solid;
border-color: red;
border-width: 2px;
/*display: block;
float: left;*/
}
I am working on this site design for a client: http://universalcorner.com/testsite/ In the center of the site, there is a text box with a dark blue square-shaped div inside of in it, positioned in the bottom right corner. CSS: Code:
#textbox {
width: 636px;
height: 292px;
float: left;
display: block;
border: solid #000027;
border-width: 0 12px 12px 0;
background: #C1BDFF;
margin: 0;
padding: 0;
}
#textbox p {
margin: 10px;
}
div.cube {
width: 150px;
height: 140px;
border: solid #000027;
margin: 0;
padding: 0;
}
HTML: Code: <div id="textbox"> <div style="background: #002455; float:right; border-width: 12px 0 0 12px; margin-top: 140px; margin-left: 10px" class="cube"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p> </div> The client would like the text in this box to wrap around the top of the dark blue square-shaped div, filling in the empty space above it. My current code has the square div positioned correctly, but because of the margin-top, it only wraps around the left side of the div, leaving the space above it blank. I also tried setting the square div's position to relative and top: 140px. This positioned the div correctly, but it overlapped the text rather than letting it wrap. Still had the blank space above it, too. Is there a way to achieve what the client wants? Currently I have this: <div style="padding:5px; overflow:auto; border:1px solid #c0c0c0; font-size:13px; background: #EEE;"> mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd </div> I want to make it so that it will always stay on 1 line, and a horizontal scroll bar will appear if the window gets too narrow. How can I do this? edit: I can't use <pre> tags because the destroy the formatting in a more annoying way. Hi How can I wrap a long line of text inside a fixed width div? Please realize this question is coming from a new CSSer. I would like to have the text I have in the content area wrap around the box on the right. So when I type more content, the bottom portion will extend below the box. The box will always stay at the top. can someone help me do this? My page By the way, I know it doesn't render properly in FireFox - I was going to ask about that later. Hi, Here is the problem I'm having: This: see attached cssprobl.jpg should become: http://www.thephotofactory.nl/csstest/cssprobl-goal.jpg Here's the CSS code I have: Code:
body{
background-color: #FFFFCC;
margin: 0px;
padding: 0px;
}
.holder{
background-color: red;
width: 250px;
height: 400px;
float: left;
margin: 10px 10px;
}
.img{
padding: 0px;
width: 200px;
height: 200px;
margin: 20px 10% 0px 10% ;
border: 2px white solid;
}
h1{
font: 35px Arial, Helvetia, sans-serif;
color: white;
text-align: center;
margin-top: 10px;
}
.omschrijving{
background-color: grey;
font: 15px Arial, Helvetia, sans-serif;
text-align: left;
margin-top: 10px;
padding: 5px;
}
.prijs{
font: 25px Arial, Helvetia, sans-serif;
color: white;
text-align: center;
margin-top: 10px;
}
.dec{
vertical-align: super;
font: 14px Arial, Helvetia, sans-serif;
color: white;
}
.euro{
font: 14px Arial, Helvetia, sans-serif;
color: white;
}
.omschrijvingholder{
background-color: black;
width: 250px;
height: 100px;
margin-top: 0px;
}
.prijsholder{
background-color: green;
width: 80px;
height: 40px;
vertical-align: bottom;
float: right;
}
and this is one of the sections: Code: <div class="holder"> <h1>Theeglas </h1> <div class="img"> <img src="theeglas.jpg" alt="theeglas met bedrukking" title="theeglas met bedrukking" width=200 height=200></img> </div> <div class="omschrijvingholder"> <div class="omschrijving"> Een mooi theeglas met een doorzichtige bedrukking. </div> <div class="prijsholder"> <div class="prijs"> <span class="euro">€</span> 9,<span class="dec">95</span> </div> </div> </div> </div> SO: how do I get that green part exactly there (and without going outside the red box), and how do I wrap the text in the grey part around it? After 2 hours of trying all kinds of options I give up and call for help Here is the full link: http://www.thephotofactory.nl/csstest/valentijn.htm Second problem: in IE the white border around the img is too low, leaving a red space. How to avoid that? Thanks in advance, Papermouse PS How do I put an uploaded image in this message? Seems to work just fine in IE 5.5+, however in Mozilla 1.5 the text just drops below the photo. Here is the page: http://www.sdtars.com/development/events/days.php Here is the sites CSS: http://www.sdtars.com/development/styles/layout.css Any help would be much appreciated. Thanks. Hi, For SEO reasons I'm trying to add an < H1 > tag around some text and have that text appear as the other text in a paragrah. The problem is any text I put in the h1 tags don't seem to wrap in IE or NS. Instead, if it needs to wrap it puts it on the next line. For example, if I had something that looked like: The quick brown fox jumped over the fence and ate the cat And I surround "brown fox jumped" in h1 tags, in IE and NS it would look like: The quick brown fox jumped over the fence and ate the cat Does that make sense? Any solution to that? The style I'm using is simply Code:
h1
{
position:relative;
font: 12px/14px Verdana;
display:inline;
margin:0;
}
TIA! Hello, I'm new to css layouts. I had to float:left every element so the heights stretch problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element). also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position. i'm very confused on which method to use for layouts. what method would you use for complex css layouts? float, position or other? this is code with the text wrap problem Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#main_c {
float:left;
width:770px;
padding: 10px;
border: 1px solid black
}
#header_c {
float:left;
border:1px solid brown
}
#page_c {
float:left;
width:100%;
border:1px solid red
}
#page_c_left {
float:left;
padding:10px;
border:1px solid blue
}
#page_c_right {
float:left;
width:55%;
padding:10px;
border:1px solid green
}
#footer_c {
float:left;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
<div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
<div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>
<div id="footer_c">
THIS IS THE FOOTER
</div>
</div>
</body>
</html>
if you could help, thank you How's it going, If you look at this page, you'll notice that the text doesn't wrap around the image, but instead breaks after the caption just below the image: http://www.trophyfishingcharters.com/test/ Ideally, I want the text to wrap around the picture, with the caption remaining just below the photo. How can I pull this off? Thank you. hi, im trying to get a long text to wrap in a div with a given width PHP Code: <div style=" width: 100px; word-wrap: break-word; "> aaweofajw;eofija;weoifja;weoifja;woeifja;woeifja;wieofj </div> however, the closest thing i found is "word-wrap: break-word;" which only works in IE. is there anyway i can get it to work in netscape or firefox? thanks! justin I'm currently working on a page that has a 3-column layout. The layout is fine as along as the content of the columns doesn't extend passed its given width. Is there a way to have the text either wrap or extend without extending the div it's in. I have attached a pic of what's happening (this is only when I get errors, the rest of the content doesn't extend the div). Is there a way to hide the text that goes beyond the div width? CSS Code:
/* columns */
#lcol {
float: left;
width: 190px;
vertical-align: top;
}
#mcol {
float: right;
width: 350px;
padding-right: 10px;
vertical-align: top;
}
#rcol {
float: right;
width: 200px;
vertical-align: top;
}
/* gray box */
.gray_box_frame
{
background-color: #fff;
border: solid 1px #404040;
width: 100%;
padding: 0px;
margin: 3px 0px 3px 0px;
}
.gray_box_head
{
height: 18px;
background-color: #404040;
}
.gray_smm,
.green_smm
{
display: inline;
float: right;
height: 18px;
cursor: pointer;
}
.gray_box_content,
.green_box_content
{
margin: 0px;
padding: 5px;
}
|
|||||||