http://www.videogamelists.com/top-10-final-fantasy-characters trying to figure out how this work where it's a pic, the text alongside, and then a pic below that, but as you see, it's only paying attention to how long the text is, and the images are not formatting correctly any ideas?
Change this... <p><a href="http://www.videogamelists.com/wp-content/uploads/2009/05/final-fantasy.jpg"><img class="aligncenter size-full wp-image-153" title="final-fantasy" src="http://www.videogamelists.com/wp-content/uploads/2009/05/final-fantasy.jpg" alt="" width="364" height="291" /></a></p> <ul> <li><img class="alignleft size-full wp-image-226" title="cecil-final-fantasy-4" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cecil-final-fantasy-4.jpg" alt="cecil-final-fantasy-4" width="200" height="259" /><strong style="font-size: x-large;">10. Cecil</strong></li> </p> <li><img class="alignleft size-full wp-image-227" title="vivi-final-fantasy-9" src="http://www.videogamelists.com/wp-content/uploads/2009/05/vivi-final-fantasy-9.jpg" alt="vivi-final-fantasy-9" width="150" height="255" /><strong style="font-size: x-large;">9. Vivi<br /></strong></li> <li><img class="alignleft size-full wp-image-228" title="cait-sith-final-fantasy-7" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cait-sith-final-fantasy-7.jpg" alt="cait-sith-final-fantasy-7" width="200" height="244" /><strong style="font-size: x-large;">8. Cait Sith<br /></strong></li> <li><img class="alignleft size-full wp-image-229" title="zidane-final-fantasy-9" src="http://www.videogamelists.com/wp-content/uploads/2009/05/zidane-final-fantasy-9.jpg" alt="zidane-final-fantasy-9" width="130" height="282" /><strong style="font-size: x-large;">7. Zidane</strong></li> <li><img class="alignleft size-full wp-image-230" title="mog-final-fantasy-6" src="http://www.videogamelists.com/wp-content/uploads/2009/05/mog-final-fantasy-6.jpg" alt="mog-final-fantasy-6" width="205" height="200" /><strong style="font-size: x-large;">6. Mog</strong></li> <li><img class="alignleft size-full wp-image-232" title="squall-final-fantasy-8" src="http://www.videogamelists.com/wp-content/uploads/2009/05/squall-final-fantasy-8.jpg" alt="squall-final-fantasy-8" width="190" height="244" /><strong style="font-size: x-large;">5. Squall</strong></li> <li><img class="alignleft size-full wp-image-233" title="kain-final-fantasy-4" src="http://www.videogamelists.com/wp-content/uploads/2009/05/kain-final-fantasy-4.jpg" alt="kain-final-fantasy-4" width="200" height="197" /><strong style="font-size: x-large;">4. Kain<br /></strong></li> <li><img class="alignleft size-medium wp-image-234" title="locke-final-fantasy-3" src="http://www.videogamelists.com/wp-content/uploads/2009/05/locke-final-fantasy-3-172x300.jpg" alt="locke-final-fantasy-3" width="145" height="200" /><strong style="font-size: x-large;">3. Locke</strong></li> <li><img class="alignleft size-full wp-image-236" title="sabin-final-fantasy-6" src="http://www.videogamelists.com/wp-content/uploads/2009/05/sabin-final-fantasy-6.jpg" alt="sabin-final-fantasy-6" width="185" height="256" /><strong style="font-size: x-large;">2. Sabin</strong></li> <li><img class="alignleft size-full wp-image-235" title="cloud-final-fantasy-7" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cloud-final-fantasy-7.jpg" alt="cloud-final-fantasy-7" width="200" height="246" /><strong style="font-size: x-large;">1. Cloud</strong></li> </ul> HTML: to this... <p><a href="http://www.videogamelists.com/wp-content/uploads/2009/05/final-fantasy.jpg"><img class="aligncenter size-full wp-image-153" title="final-fantasy" src="http://www.videogamelists.com/wp-content/uploads/2009/05/final-fantasy.jpg" alt="" width="364" height="291" /></a></p> <div class="list"><img title="cecil-final-fantasy-4" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cecil-final-fantasy-4.jpg" alt="cecil-final-fantasy-4" width="200" height="259" />10. Cecil</div> <div class="list"><img title="vivi-final-fantasy-9" src="http://www.videogamelists.com/wp-content/uploads/2009/05/vivi-final-fantasy-9.jpg" alt="vivi-final-fantasy-9" width="150" height="255" /><strong style="font-size: x-large;">9. Vivi</div> <div class="list"><img title="cait-sith-final-fantasy-7" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cait-sith-final-fantasy-7.jpg" alt="cait-sith-final-fantasy-7" width="200" height="244" />8. Cait Sith</div> <div class="list"><img title="zidane-final-fantasy-9" src="http://www.videogamelists.com/wp-content/uploads/2009/05/zidane-final-fantasy-9.jpg" alt="zidane-final-fantasy-9" width="130" height="282" />7. Zidane</div> <div class="list"><img title="mog-final-fantasy-6" src="http://www.videogamelists.com/wp-content/uploads/2009/05/mog-final-fantasy-6.jpg" alt="mog-final-fantasy-6" width="205" height="200" />6. Mog</div> <div class="list"><img title="squall-final-fantasy-8" src="http://www.videogamelists.com/wp-content/uploads/2009/05/squall-final-fantasy-8.jpg" alt="squall-final-fantasy-8" width="190" height="244" />5. Squall</div> <div class="list"><img title="kain-final-fantasy-4" src="http://www.videogamelists.com/wp-content/uploads/2009/05/kain-final-fantasy-4.jpg" alt="kain-final-fantasy-4" width="200" height="197" />4. Kain</div> <div class="list"><img title="locke-final-fantasy-3" src="http://www.videogamelists.com/wp-content/uploads/2009/05/locke-final-fantasy-3-172x300.jpg" alt="locke-final-fantasy-3" width="145" height="200" />3. Locke</div> <div class="list"><img title="sabin-final-fantasy-6" src="http://www.videogamelists.com/wp-content/uploads/2009/05/sabin-final-fantasy-6.jpg" alt="sabin-final-fantasy-6" width="185" height="256" />2. Sabin</div> <div class="list"><img title="cloud-final-fantasy-7" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cloud-final-fantasy-7.jpg" alt="cloud-final-fantasy-7" width="200" height="246" />1. Cloud</div> HTML: Then add this to your stylesheet... .list { font-size:140%; font-weight:bold; margin:5px 0; padding:5px 0; border-bottom:1px solid #ddd; text-align:center; } .list img { display:block; margin:0 0 5px 0;} Code (markup): Let me know if you have any problems.
Yeah, the way I coded it means that you can style each div/block. You could also do it without the div's like this... <p><a href="http://www.videogamelists.com/wp-content/uploads/2009/05/final-fantasy.jpg"><img class="aligncenter size-full wp-image-153" title="final-fantasy" src="http://www.videogamelists.com/wp-content/uploads/2009/05/final-fantasy.jpg" alt="" width="364" height="291" /></a></p> <img title="cecil-final-fantasy-4" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cecil-final-fantasy-4.jpg" alt="cecil-final-fantasy-4" width="200" height="259" /><BR />10. Cecil<BR /><BR /> <img title="vivi-final-fantasy-9" src="http://www.videogamelists.com/wp-content/uploads/2009/05/vivi-final-fantasy-9.jpg" alt="vivi-final-fantasy-9" width="150" height="255" /><BR />9. Vivi<BR /><BR /> <img title="cait-sith-final-fantasy-7" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cait-sith-final-fantasy-7.jpg" alt="cait-sith-final-fantasy-7" width="200" height="244" /><BR />8. Cait Sith<BR /><BR /> <img title="zidane-final-fantasy-9" src="http://www.videogamelists.com/wp-content/uploads/2009/05/zidane-final-fantasy-9.jpg" alt="zidane-final-fantasy-9" width="130" height="282" /><BR />7. Zidane<BR /><BR /> <img title="mog-final-fantasy-6" src="http://www.videogamelists.com/wp-content/uploads/2009/05/mog-final-fantasy-6.jpg" alt="mog-final-fantasy-6" width="205" height="200" /><BR />6. Mog<BR /><BR /> <img title="squall-final-fantasy-8" src="http://www.videogamelists.com/wp-content/uploads/2009/05/squall-final-fantasy-8.jpg" alt="squall-final-fantasy-8" width="190" height="244" /><BR />5. Squall<BR /><BR /> <img title="kain-final-fantasy-4" src="http://www.videogamelists.com/wp-content/uploads/2009/05/kain-final-fantasy-4.jpg" alt="kain-final-fantasy-4" width="200" height="197" /><BR />4. Kain<BR /><BR /> <img title="locke-final-fantasy-3" src="http://www.videogamelists.com/wp-content/uploads/2009/05/locke-final-fantasy-3-172x300.jpg" alt="locke-final-fantasy-3" width="145" height="200" /><BR />3. Locke<BR /><BR /> <img title="sabin-final-fantasy-6" src="http://www.videogamelists.com/wp-content/uploads/2009/05/sabin-final-fantasy-6.jpg" alt="sabin-final-fantasy-6" width="185" height="256" /><BR />2. Sabin<BR /><BR /> <img title="cloud-final-fantasy-7" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cloud-final-fantasy-7.jpg" alt="cloud-final-fantasy-7" width="200" height="246" /><BR />1. Cloud<BR /><BR /> HTML:
Are you joking? You use a bunch of DIVs, pretending to be a UL, greenhand's solution. It's a post's content, has nothing to do with the page structure. It depends on what the blogger posts, modify the CSS is the worst way. Or are you coding your site all by hand, with 10 thousand static HTMLs? Just wipe off alignleft from your original post.
I dunno how to respond to this. Maybe you don't understand my problem. All I want is to have a paragraph running alongside each picture, not above it, not below it, and every method I've tried in my repertoire has only messed up the page more. I've tried using divs, I've tried a lot of things.
Sorry, I just realized I haven't been thoroughly clear about this matter. I have been able to make it work the way I want, but if I don't type enough text to completely fill the area right of the pictures, then the next picture appears in that space to the right, unless i use a few line breaks, which I assume won't show the same in everyone's browser, depending on how they view text. Currently, I have set the page up like you guys are telling me to, and the text gets pushed to the line below the pictures, instead of running alongside.
see if this helps. w w w.loriswebs.com/html-tips/verticallyalignimages.html Adding divs to each element seems a bit excessive. You should be able to add a class to your text and align it with the vertical-align attribute how are you posting the images? you could also make a ul list, have each <li style="background: whatever image;" padding: xxxx; and then space the text next to the background image. I use this technique all the time
Hmm, the problem with vertical-align is when you get more than one line. Which was what I thought the asdfsdfsdfasdfsad text was suggesting. Since the example text begins a new line, it starts underneath the image. I thought that indeed, Jasta wants the images to be floated, since they come first in the code, and then the text alongside stays not only to the right, but begins at the top and lets more text just work its way down. The next floating image would need a clear: left or some sort of clearing on it. But if the text is going to remain short like that (10. Cecil) and you want the text to look like it's coming out of the middle of the image (height-wise) then yeah, vertical-align could do it so long as the images remain inlines. Although I have seen a trick used by Paul O'Brien to "vertically align" a small chunk of text (or, make it look like it). Search pmob.co.uk for vertical-align and it's one of those (he's redone his site since I last sifted through it).
here's a list i made, using line breaks to force the images to the line underneath the image before them. http://www.videogamelists.com/top-10-street-fighter-characters i can continue this way, but i'm fairly sure it won't format correctly on certain people's computers, and it's a pain in the ass to guess how many breaks to add, submit the post, reload the page so i can see if it worked, and continue to do this for all 10 items. my other current option is to make sure i write enough about the item that it will force the picture down where it should be, and that's too much writing when it comes to certain subjects. i just want to be able to throw an image on there, write some text beside it, and then have the next image be on the left side, right under
No way, dude, looking at your new page, you definitely just want some floats. Like this (assuming the images all either have a class or you have some other way of identifying them in the CSS) theimage { clear: left; float: left; thewidth; } The image gets floated left, the text which comes after it in the HTML naturally sits off to the right, and will wrap around the floated image when the text gets longer than the image. The clear: left makes sure that the next floated image starts on a new line, and underneath the whole image/text chunk above it. In fact, if it's not possible to do this in your external CSS sheet, you can still use your style="stuff" that you have in the HTML. Keep the height and width, but replace the other stuff with clear: left; float: left; and it should be fine (I won't guarantee because it's a messy-enough page that something else might suddenly appear and I didn't see it, but I'm fairly sure this would work fine).
Better, Ms poes, and more semantic is to use an ordered list, and generate new block formatting contexts for the list items, thus enclosing the float elements. <!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"> <head> <meta name="generator" content= "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> /*<![CDATA[*/ p { font-size: .8333em; } .descr { margin: 0 auto; width: 560px; } h1 { text-align: center; } #rank { list-style: none; margin: 0; padding: 0; } #rank li { border: 1px dotted silver; /* for illustration */ margin: 1.25em 0; overflow: hidden; zoom: 1; /* for IE6 */ } #rank li img { float: left; margin: 0 1em 0 0; } #rank li p { margin: 1.25em 0 0; } /*]]>*/ </style> </head> <body> <div class="descr"> <h1><img title="street-fighter-best-characters" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/street-fighter-best-characters.jpg" alt="Street Fighter; the best characters" height="384" width="480" /></h1> <ol id="rank"> <li> <img title="blanka-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/blanka-street-fighter.jpg" alt="blanka-street-fighter" height="213" width="150" /> <h2>10. Blanka</h2> <p>Everyone’s favorite green Brazilian monster, Blanka’s signature moves include curling into a ball and flying across the screen as well as the ability to generate electricity that will shock anyone who touches him. Blanka has been in almost every game since Street Fighter 2 and his fast, vicious striking style has gotten him more than a handful of fans.</p> </li> <li> <img title="m-bison-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/m-bison-street-fighter.jpg" alt="m-bison-street-fighter" height="162" width="150" /> <h2>9. M. Bison</h2> <p>The original boss of Street Fighter 2, Bison frustrated many a player in the arcade, but the gloves were off when they were finally allowed to choose him in future iterations of the game. Bison’s most famous move is the psycho crusher, where he sends himself flying towards the opponent in a blaze of glory. Add his head stomp and scissor kick moves, and you have a general worthy of the 9 spot on this list.</p> </li> <li> <img title="akuma-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/akuma-street-fighter.jpg" alt="akuma-street-fighter" height="211" width="150" /> <h2>8. Akuma</h2> <p>Akuma is the evil brother of Gouken, Ken and Ryu’s sensei. Akuma made his first appearance in Super Street Fighter 2 Turbo, the last Street Fighter 2 arcade iteration, as a hidden boss. As Akuma’s backstory goes, he only fights to test himself, thus, in order to prove your worth as an opponent, you must beat all the other opponents without losing a round, while getting 3 perfect rounds on the way. Since then, he’s been a hidden boss in all his appearances, including Street Fighter 4. Akuma is extremely popular in online play, as seemingly half of all our matches online have come against him.</p> </li> <li> <img title="gouken-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/gouken-street-fighter-246x300.jpg" alt="gouken-street-fighter" height="185" width="152" /> <h2>7. Gouken</h2> <p>Brother of Akuma, sensei of Ken and Ryu, best new character in Street Fighter 4. Gouken is beefy and plays differently than the afforementioned Akuma, Ken, and Ryu. His hurricane kick propels him straight up in the air, but sends him across the screen if performed in mid-air. He has no regular dragon punch, only using the attack in his super and ultra combos. His last big difference is his ability to change the angle on his fireball as well as charge/delay it. Even if Gouken weren’t totally awesome in Street Fighter 4, the fact he taught Ken and Ryu their moves makes him belong on this list.</p> </li> <li> <img title="guile-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/guile-street-fighter.jpg" alt="guile-street-fighter" height="206" width="150" /> <h2>6. Guile</h2> <p>The American soldier with a chip on his shoulder. Guile enters the World Warrior tournament to avenge the death of his military buddy, Charlie, which came at the hands of M. Bison. Unlike the other characters, Guile typically has the same 2 moves throughout the series. That’s not necessarily a bad thing, as the sonic boom and flash kick team together quite nicely to handle opponents both far away and in the air. Guile has the coolest hair of anyone in the series.</p> </li> <li> <img title="sagat-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/sagat-street-fighter.jpg" alt="sagat-street-fighter" height="213" width="150" /> <h2>5. Sagat</h2> <p>The original boss of the first Street Fighter game, Sagat rocks a pirate patch due to Dan’s father gouging his eye out, an action that would cause Sagat to kill him. Sagat also notably has a scar across his chest, which he received from Ryu in their battle from Street Fighter 1, however he has not achieved revenge for this act. After this, Sagat is delegated to #2, as right-hand man to the new boss M.Bison. Sagat is freakishly tall at 7′4″ and it shows in the game as his kicks span great lengths and can be difficult to contend with, when aided by his tiger shot, tiger knee, and the deadly tiger uppercut.</p> </li> <li> <img title="chun-li-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/chun-li-street-fighter.jpg" alt="chun-li-street-fighter" height="228" width="150" /> <h2>4. Chun-Li</h2> <p>Chun-Li was the first woman to ever grace a 1 on 1 fighter. What’s even more impressive is the fact she’s better than some of the guys. Her signature move, the lightning kick, can deal large amounts of damage in a small amount of time if the opponent doesn’t block. Her spinning bird kick and fireball are comparatively weak to other moves, but their ability to catch the other fighter off guard adds to their effectiveness. Chun-Li also has gigantic thighs.</p> </li> <li> <img title="zangief-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/zangief-street-fighter.jpg" alt="zangief-street-fighter" height="213" width="150" /> <h2>3. Zangief</h2> <p>FOR MOTHER RUSSIA! Zangief has been slowly stalking the battle arena since Street Fighter 2, making any opponent foolish enough to come within the grasp of his spinning piledriver pay the price. Zangief, a world class wrestler, entered the World Warrior tournament at the behest of the president of the now-defunct Soviet Union. As a wrestler, his strength lies in his slams, but that’s not all he’s good for. His spinning lariat allows him to dodge fireballs as well as knock would-be attackers out of the air, and recently gained the banishing flat move which, oddly enough, is the perfect setup for a spinning piledriver. The crushin’ Russian also has the best chest hair of anyone in video game history.</p> </li> <li> <img title="ryu-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/ryu-street-fighter.jpg" alt="ryu-street-fighter" height="204" width="150" /> <h2>2. Ryu</h2> <p>The main character of the Street Fighter series, Ryu has yet to be absent from any game in the series. A favorite for many players, Ryu’s trademark fireball has made him a formidable opponent, coupled with the hurricane kick and the dragon punch. Though he’s technically the main character, we usually opt for his sparring partner, #1 on the list.</p> </li> <li> <img title="ken-street-fighter" src= "http://www.videogamelists.com/wp-content/uploads/2009/05/ken-street-fighter.jpg" alt="ken-street-fighter" height="207" width="150" /> <h2>1. Ken</h2> <p>While Ken isn’t the face of the franchise, he narrowly edges out Ryu with the longer reach of his dragon punch. Sure, Ryu can throw fireballs faster, but fireballs are child’s play compared to the manliness of face to face combat. The differences between Ken and Ryu weren’t always there, however, as the duo played exactly the same in the original Street Fighter and Street Fighter 2. It wasn’t until mirror matches became available that Capcom felt the need to distinguish the pair from each other. The result was good, spawning the top fighter on our list.</p> </li> </ol> <p>(Honorable Mentions: Fei Long, Cammy, Abel, Seth, Dan)</p> </div> </body> </html> Code (markup): Note that the honorable mentions are outside the list, as they um, didn't make the list. cheers, gary
It looked like a template. I don't even try to fix those. I finally got all my hair to grow back in, you know.
well now i feel a little better about my inability to handle this problem. my hair is still gone, however. i'll let you guys know if i get it fixed. thanks for all your help.
Using the first example, and leaving the markup mostly untouched, change the class tokens to something more appropriate. Move the caption inside the p element. If you want the caption to have its own element, make the top level p a div element, and put the caption inside the div. Change the style rulesets as shown. <p class="floatleft"> <img class="clearleft" width="200" height="259" title="cecil-final-fantasy-4" src="http://www.videogamelists.com/wp-content/uploads/2009/05/cecil-final-fantasy-4.jpg" alt="cecil-final-fantasy-4"/> 10. Cecil </p> ============ .clearleft { /* the image */ float:left; } .floatleft { /* the p element */ overflow:hidden; } Code (markup): That ought to be a simple enough mod to the template. cheers, gary
i may be missing the point, but why name the classes in contradiction with their purpose? for example: .clearleft { float:left; }