|
CSS - Alignment, Text Wrap, And Caption Issue...
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. Similar TutorialsAlright, first post in a while, let me see if I can make this clear and simple so I can fix this issue. I am making a website for my history project. I have made the website solely by hand and using an HTML editor; I have quite a bit of knowledge in CSS and HTML, but really, this is a great learning process for me. The website design is laid out in table form. There are just two columns, a sidebar and the main content column. The text causes the table to be stretched out (you can see this by changing the border to "1" and viewing the table. However, when the main text strechtes the table, the side bar moves with it, settling in the center of the smaller column. The entire thing creates a problem like this: My History Website The source code for the site can be checked through your browser, or if you are too lazy, this is what I have written: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History Through The Ages: 1865-1900</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Ethan Mick">
<!-- Date: 2008-05-21 -->
<!-- I will eventually put this style sheet into its own external CSS file.-->
<style type="text/css">
<!--
body {
background:gray;
}
p {
color:white;
text-align:left;
position:top;
text-indent:1cm;
vertical-align:top;
}
h2 {
color:black;
text-align:center;
}
.sidebar {
position:relative;
}
.ads {
display:block;
margin-left:auto;
margin-right:auto;
}
.imageright {float:right;}
.imageleft {float:left;}
-->
</style>
</head>
<body>
<img src="file:///Volumes/FAT32DATA/OmniEthan/School/US%20&%20World/History%20Logo.jpg" title="History Through The Ages" alt="History Logo" width="800">
<table width="800" border="0">
<tr>
<td width="150" height="300">
<a class="sidebar" href="file:///Users/Ethan/Sites/History%20Website/Historysite.html">Home</a><br /><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1856-1900.html">1865-1900</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1901-1920.html">1901-1920</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1921-1940.html">1921-1940</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1941-1960.html">1941-1960</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1961-1980.html">1961-1980</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1981-2000.html">1981-2000</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/2001-Current.html">2001-Current</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Bibliography.html">Bibliography</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Genealogy.html">Mick Family Genealogy</a><br /><br />
<a href="http://www.mozilla.com/en-US/firefox/"><img class="" border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a>
</td>
<td width="*">
<h2>Emerging from the Civil War to the turn of the century<br />1865 to 1900</h2>
<img class="imageright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/DeadUnionsoldiercivilwar.jpg/250px-DeadUnionsoldiercivilwar.jpg" title="A dead soldier in Petersburg, Virginia 1865. Photograph by Thomas C. Roche">
<p>The United States emerged as a whole country from the Civil War, thanks to Abraham Lincoln and the union army, although not without consequences. Over half a million people were killed in the war. The United States' primary goal at this point was reconstruction from the war, and a lot of work had to be done in the south.</p>
<p>This time period set up the United States for many years to come. During the reconstruction the United States began to industrialize, creating thousands of miles of new infrastructure, and machinating a lot of jobs which had to be done by hand before. The industrialization allowed huge corporations to be formed, like Standard Oil created by John D. Rockefeller in 1870 and Carnegie Steel Company created by Andrew Carnegie in the mid 1870's, many of which gained a monopoly in the market. The industrialization allowed the United States to get back onto her feet quicker, as the new businesses could gain a lot of income by exporting their goods on the new infrastructure.</p>
<p>The South wasn't happy about losing the war, and it wasn't happy about being back in the union. During reconstruction many groups of people made clandestine acts against the government, and some others made their attacks public, such as the KKK. The reconstruction acts involved the dismantling of southern governments, and the southern states were only allowed to have their own government after the majority swore a loyalty oath to the Union, and they ratified the new amendments, the 13th, 14th, and 15th. Even then, once the southern people regained their own governments, everything that the North had been fighting for, rights of African-Americans, were largely ignored, and the African-Americans had to suffer even more discrimination. To make matters worse, the courts ruled in Plessy vs. Ferguson that segregation was legal on the premises of "separate but equal."</p>
<img class="imageleft" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/USS_Maine_h60255a.jpg/300px-USS_Maine_h60255a.jpg" title="USS Maine - Wikimedia Commons">
<p>To heal the scars which had been formed in the Civil War, the United States decided to jump aboard the imperialistic boat, and attacked the weakened Spanish empire, fighting Spain for Peurto Rico, the Philippines, Guam, and Cuba. The war was extremely single sided, with the United States decimating the Spanish fighters on almost all fronts. The only interesting points of the war was the Philippines and Cuba. In the Philippines, native freedom fighters had been fighting the Spanish for a long time, and they viewed the Americans as saviors coming to help their cause. However, when it became apparent that the American's weren't going to leave, they became angry and fought us as well. In Cuba, Roosevelt would lead the "Rough Riders" to fight the against the spanish with some Cuban help.</p>
<p>My family on both sides was in the United States at this point, but I am not positive where they were. My family was not seriously affected by the segregation and racism partaking in the south during this time; indeed, my ancestors who moved to the United States in 1730 opposed slavery. Seeing the cruelly and imbalance in South Carolina, where they landed, they moved to Illinois. This affected Grandma Lori, my mother's mom, and her attitude on life.</p>
</td>
</table>
<img class="ads" src="file:///Users/Ethan/image_1.png">
</body>
</html>
I recently added the "sidebar" class, trying to bring the links up, as you can see with the one I tested it on. Didn't work. I have tried other ideas, but I nothing worked. Also, if you have some advice (that doesn't require me completely rewrite the site) feel free to ring it by me. So my question is, without doing anything repetitive or stupid, and preferably with CSS, how can I cause the text (the links) in the sidebar to align to the top of the page, and make it look nice. If you need more information, lemme know. Can someone help me with this please...I've been attepting to beat this for several days, without success (although I've learned alot). My goal is displaying images, while using the browser to automatically wrap the images, so the user doesn't have to pre-define rows/cols. Currently, I just use HTML and stick a bunch of IMG elements one after the other. I would like to start using CSS to create border(s) and [optionally] image info. The page is laid out such that I have a DIV element containing all the images. Inside that DIV, I want each row vertically aligned, and horizontally centered (in the DIV), again, with the browser auto-wrapping the "list" of images at the width of the containing DIV. Although I've tried dozens (or more) combinations, I have been consistently testing with an IMG, surrounded by a DIV to create one border, surrounded by another DIV to create another border. In between the DIVs, I may add text info about the image. I originally started with a single DIV, and defined the IMG with a class that added a border. I switched to the two DIVs, to make it easier to test combinations. If the DIV holding the IMG has it's "display" set to "inline", I think that it would be the same as having an IMG with a class, anyway. It seems that I can get close to the alignment (both vertical and horizontal) I'm looking for, if I make the DIVs "Display: Inline", and do not float them; and set the IMG to "Vertical Align: middle". This creates various problems in different browsers. So I doubt this is the right way. If I float the DIVs left, everything about each image looks correct, but I can't get the vertical alignment nor the horizontal centering. Another side-effect that I don't like is that if an IMG is moved to the next line, it may not get floated all the way to the left if a previous IMG on the same row was taller (ie. sticks down further in the row). I think this is because of the rule that says floats should go the top as much as possible, so rather than the wrapped IMG going down a few extra pixels and then going all the way to the left, it stops at the IMG from the prvious row that sticks down the most. I think I've stated clearly what I'm trying to do, I'll include some sample code to help clarify further. Any help or suggestions is very much appreciated. -Jeff Code:
...
<style type="text/css" media="screen"><!--
.pagebox { margin: 12px; padding: 12px; }
.picborder2 { background-color: silver; float: left; margin: 12px; padding: 12px; border: solid thick purple; display: inline; }
.picborder1 { background-color: red; float: left; margin: 12px; padding: 12px; border: solid thick teal; display: inline; }
--></style>
...
<body>
<div class=pagebox>
<div class=picborder2>
<div class=picborder1>
<img src="thumbnail_01"/>
</div>
</div>
<div class=picborder2>
<div class=picborder1>
<img src="thumbnail_02"/>
</div>
</div>
...
<div class=picborder2>
<div class=picborder1>
<img src="thumbnail_NN"/>
</div>
</div>
</div>
</body>
...
Hi all, How do you wrap text in a div from the x-coordinate but the y-coordinate must have a scroll bar. CSS Code: Original - CSS Code .leftHand { height:300px; overflow-y:scroll; position:relative; width:550px; background-color:#F7FAFC; word-wrap:break-word; display: block; }
HTML Code: Original - HTML Code <div class="leftHand" id="leftHand"> </div> <div class="leftHand" id="leftHand"> </div> Hi I am facing starnge issue in IE with word-wrap: break-word style. When I set this to a p tag some times I see a word of that paragraph is displaying twice on IE though there is single instance in source. I tried debugging and found by removing the word-wrap style it is displaying as in source. But I have to wrap the word text to avoid crossing the p tag. Please suggest.... 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;*/
}
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. 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. 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 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. 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? Hi all, Is it possible to wrap text in a Drop Down Box?? Regards, Stephen Hi How can I wrap a long line of text inside a fixed width div? 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? 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. 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! 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? Hello, I Have an div of an sertain width. And there is some text like. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Which is wider then the div itself. Now the tekst overlaps the div borders. How can i fix this without getting a scrollbar. Thx in advance. Hi there, I recently started up an internship at a music magazine and they asked me to do a simple side site to present some information. I left it pretty simple for most of it but wanted to challenge myself a bit with some CSS for one of the pages. The page in question is the 05 Panel Page It looked better in Firefox earlier, but I recently made some changes according to the site editors which made it look a lot less clean in Firefox and damn ugly in IE. I would like to have that introductory block of text be where it is with the panel information on the left side and the photos and text wrapping where appropriate. I've been fiddling with padding a lot, but haven't made too much headway. I know that there's a lot going on to be helped out with specific parts (although I wouldn't mind if anyone could). But if you had any topics that I should concentrate looking up information on, then that would be just as helpful. Edit: I was also having problems giving the entire side enough padding to stay away from the edges of the browser window. However I ran into problems on the right side of the page: some of the text would go too far past the headers. And if that didnt happen, extra space in general appears on that right side. |
|||||||