|
HTML - Separating Text From Images
I'm writing a blog posta nd I want to enter text and images.
But when I do, the text and images appear next to one another and I don't want that. I want the text to come UNDER and ABOVE the image rather than on the side of it. Currently, I have: Code: <img src="/images/menu.jpg" alt="Menu" /> <p> </p><p> </p> <p> </p><p> </p> <p> </p><p> </p> Text Here As you can see, I have to enter a lot of manual paragraphs. Is there a better way of separating the text from the images Similar TutorialsHello everyone, first post ^_^ I have recently tried my hand at designing a website. I downloaded a template off the internet, and have started to change the graphics etc on it to make it my own (I liked the layout). However: When I use a minimal amount of text, the page works fine. When I start to add more text however, the page 'breaks apart'. I was wondering whether anyone could help me resolve this issue, as it looks very ugly. Page Normal: http://img151.imageshack.us/img151/7416/normalqh2.png Page 'Cracked': http://img149.imageshack.us/img149/9072/crackeduo1.png (I have drawn red squares around the problem areas.) Where the problem areas are, I would like to have filled with the same color as the rest of the interface (a dark brown color, which is #b38736). Page source code: (index.html) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="content"> <div id="left"> <button class="button but1"> </button> <img src="images/photo1.jpg" alt="" width="246" height="176" class="border" /> <button class="button but2"> </button> <img src="images/photo2.jpg" alt="" width="246" height="175" /> </div> <div id="right"> <img src="images/title.gif" alt="" width="325" height="49" class="name" align=right/> <ul class="menu"> <li><a href="#"><img src="images/but1.jpg" alt="" width="83" height="46" /></a></li> <li><a href="#"><img src="images/but2.jpg" alt="" width="84" height="46" /></a></li> <li><a href="#"><img src="images/but3.jpg" alt="" width="84" height="46" /></a></li> <li><a href="#"><img src="images/but4.jpg" alt="" width="84" height="46" /></a></li> </ul> <div id="inside"> <img src="images/title1.gif" alt="" width="211" height="24" /> <div class="item1"> <p><strong>Minim veniam quis nostrud</strong> exerci tation tincidunt laoreet. Dolore magna aliquam suscipit lobortis nisl, ipsum adipiscing. elit, sed diam. </p> <img src="images/pic1.jpg" alt="" width="116" height="75" /> <a href="#">learn more about us</a> </div> <div class="hr"><img src="images/spacer.gif" alt="" width="280" height="1" /></div> <img src="images/title2.gif" alt="" width="113" height="20" /> <div class="item2"> <p><strong>Quis nostrud exerci tation tincidunt laoreet.</strong> Dolore magna aliquam suscipit lobortis nisl, ipsum adipiscing elit, sed diam.</p> <ul> <li><a href="#">Nostrud exerci tation</a></li> <li><a href="#">Tincidunt laoreet</a></li> <li><a href="#">Dolore magna aliquam</a></li> <li><a href="#">Suscipit lobortis nisl</a></li> <li><a href="#">Nostrud exerci tation</a></li> <li><a href="#">Tincidunt laoreet</a></li> <li><a href="#">Dolore magna aliquam</a></li> <li><a href="#">Suscipit lobortis nisl</a></li> </ul> </div> </div> <img src="images/round.jpg" alt="" width="335" height="8" /> </div> <div id="footer"> Copyright © 2007 Little Cafe.<br /> All Rights Reserved. <a href="#">Privacy Policy</a> • <a href="#">Terms Of Use</a> </div> <img src="images/botbg.gif" alt="" width="582" height="6" /> </div> </body> </html> CSS source code: (style.css) Code: *{
margin:0px;
padding:0px
}
img{border:0px}
html{
width:100%;
height:100%;
background-image:url(images/wallpaper.png);
background-position:top left;
}
body{
width:582px;
margin:auto;
padding:110px 0 0 0
}
#content{
background-image:url(images/topbg.gif);
background-position:top left;
background-repeat:no-repeat;
float:left;
width:100%;
padding:6px 0 0 0;
}
#content img{float:left}
#left{
background-color:#b38736;
padding:15px 0 15px 1px;
width:246px;
float:left
}
#left img {float:left}
.button{
border:0px;
cursor:pointer;
cursor:hand;
width:246px;
height:43px;
float:left
}
.but1
{
background-image:url(images/button1.gif);
background-position:top left;
background-repeat:no-repeat;
background-color:#c9a563;
}
.but2
{
background-image:url(images/button2.gif);
background-position:top left;
background-repeat:no-repeat;
background-color:#c9a563;
}
.border{
border-bottom:1px solid #BABABA
}
#right{
float:left;
background-color:#b38736;
width:335px;
}
.name{
background-image:url(images/bgor.gif);
background-position:top left;
background-repeat:repeat-y;
padding:0 0 0 10px;
margin:15px 0 0 0;
float:left
}
#right img{
float:left
}
.menu li{
float:left;
list-style-type:none
}
#inside{
background-image:url(images/bgleft.gif);
background-position:top left;
background-repeat:no-repeat;
padding:15px 0 0 20px;
float:left;
width:315px;
background-color:#FFFFFF
}
.item1{
width:297px;
float:left;
padding:10px 0 22px 5px;
font-family:Tahoma;
font-size:11px;
}
.item1 p{
color:#525151;
width:160px;
float:left;
margin:0 20px 0 0
}
.item1 p strong{
color:#3C5828;
display:block;
float:left
}
.item1 a{
text-decoration:none;
font-family:Tahoma;
font-size:11px;
color:#3D3D3D;
font-weight:bold;
background-image:url(images/arrow.gif);
background-position:0px 5px;
background-repeat:no-repeat;
padding:0 0 0 8Px;
}
.hr{
height:1px;
float:left;
background-color:#D1D1D1;
border:0px;
margin:0 0 8Px 8Px;
display:inline
}
.item2{
width:310px;
float:left;
padding:10px 0 11px 5px;
font-family:Tahoma;
font-size:11px;
}
.item2 p{
color:#525151;
float:left;
margin:0 20px 0 0
}
.item2 p strong{
color:#3C5828;
display:block;
}
.item2 ul{
display:block;
float:left;
height:53px;
width:297px;
margin:5px 0 0 0px;
background-image:url(images/dots.gif);
background-position:135px 0px;
background-repeat:repeat-y
}
.item2 li{
list-style-type:none;
background-image:url(images/disc.gif);
background-position:0px 5px;
background-repeat:no-repeat;
float:left;
width:135px;
padding:0 0 0 10px
}
.item2 a{
color:#525151
}
#footer{
background-image:url(images/footbg.gif);
background-position:top left;
background-repeat:no-repeat;
background-color:#b38736;
float:left;
padding:10px 15px 8Px 30px;
font-family:Verdana;
font-size:11px;
color:#FFFFFF
}
#footer a{
color:#FFFFFF;
text-decoration:underline
}
Thankyou for reading, I hope some kind soul can help me! Sincerely, james99. Hi: Enviro: IE 7 (for now) My list items (i.e., <li>) are too close together, *but* if I put a line-break at the end of each item, they are too far apart. I tried using CSS with a margin setting to get some separation but that didn't work either. So, how does one get some afjustable separation between list items please ? Thanks, -Mel Smith Hello HTML experts; a nooby here. Searched for this and found tons of posts but none seemed to fit my question or fix my problem. To show what I am trying to do, I put all the details he http://www.sticksite.com/align/ Is there a solution that a nooby can understand? THANKS for your time! <div id="myBox"> <p>4 Wheel Madness</p> <img src='sampleimage.png' width="65" height ="65" alt="img"> </div> What would i add to this to make the image go to the LEFT of the box, and then the text to go to the RIGHT of the box? ##### Text here, ##### Text here, ##### Text here, ^ Just like that Thank you for any comments please, check http://members.dodo.com.au/~rouslan/...ite/index.html I need to know how to get rid off strange effect down the bottom and how do I make text and image aligned on the same "line", "level" e.g. image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text hey ive been doing html a little while now and to move things around my webpage ive been using the <div> tag but when i change the screen resolution the images / words move to a different placee is there another way of doing it so they dont move if im adjusting the screen resolution somebody please help Hey All, I would like to have a site similar to lol.com, in which the page changes upon every visit. I have been researching and i have found this : http://baremetal.com/gadgets/sequence.html It looks very cool, however i can't implement this, as i NEED to have their hosting, Gay! Anybody know of a random script thing i could use? I would be very gracious, I found a dhtml script, however it was not good enough, somebody could eaisily copy the source, which they wouldn't of been able to had they done the above URL^ Thanks all! Hello All, I cant seem to lock a form and images in a browser, I have all center and when it opens it remains centered but when I shrink the browser window the images/form moves... My CSS is <style type="text/css"> <!-- body { background-image: url(); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin: 0; padding: 0; } --> </style></head> <style type="text/css"> <!-- #centerDIV0 { width: 100%; text-align: justify; overflow: hidden; position: absolute; margin: 0px; padding: 0px; left: 0px; top: 0px; right: 0px; bottom: 0px; visibility: visible; background-image: url(CS_bkgd.jpg); background-repeat: repeat; } #centerDIVX { text-align: center; overflow: hidden; position: absolute; margin: 0px; padding: 0px; vertical-align: middle; z-index: 2; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; } #centerDIVZ { z-index: 2; overflow: hidden; position: absolute; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; vertical-align: middle; left: 0px; top: 0px; right: 0px; bottom: 0px; margin-top: 380px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; visibility: visible; padding-top: 0px; padding-bottom: 0px; padding-left: -300px; } --> </style> And Html is... <body> <div id = "centerDIV0"> </div> <div id="centerDIVX"><img src="CS_bkgd.gif"/></div> <div id="centerDIVZ" bgproperties="fixed"> <form action="mailto:tastetation301@yahoo.com" method="post" enctype="text/plain" onsubmit="location.href='thanks.html'"> <p><br/> <strong>Name:</strong> <input type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> <br/> <strong>Email: </strong><input type="text"STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> </p> <input type="submit" value="Submit"/><input type="reset" value="Reset"> </form> </div> </body> </html> THANKS FOR YOUR ASSISTANCE!!!! I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high. So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text. I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not. I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible? I have the following code: <li><?php echo t("You are logged in as <strong>!user</strong>", array('!user' => l($user->name, "user"))); ?><?php echo user_badges_for_uid($user->uid); ?> <b>|</b> <?php echo l(t("Edit"), "user/" . $user->uid . "/edit");?> <b>|</b> <?php echo l(t("Log out"), "logout"); ?> </li> user_badge_for_uid function returns an image, a badge for the user. This, however, is causing a line break. The output is coming like this; You are logged in as: Navs image | Edit | Logout How can I do without the line breaks? Please help thanks Navs I'm trying to position text, links and pictures to follow one after the other, but it doesn't work. I want to see "Homepage" on the left corner of my webpage "Next" on the right corner of my webpage Unfortunately this command doesn't work properly. <div style="text-align:left;solid 2px #ff0000;"><a href="F:\Webcomic\Website Folder\NWvisuals-Index.html"> Home</a> <p align=right><a href="F:\Webcomic\TheEyeoftheWorld3.html">Next</a></div></p> It makes the "Next" go down a line, instead of being in the same line of the "Homepage". Also, on that vein, is there any way I can align images and text on the same line without using spaces*? As in: <p align="left">Hello</p> <p align="center">Hello</p> <p align="right">Hello</p> But they all should stay on the same line. Any guides, or even links to tutorial about my issue would be appreciated. I've been trying to google for a while, it's becoming frustrating. *I think the problem with spaces is that people with different resolution would see the text in different places than I want them to see. I have list of files in a folder which are to be displayed in html table. Each file should be shown as follows ------------ | image1| | | ------------ <image 1 file name> ------------ | image2| | | ------------ < image 2 file name> its image and name of the file below the image. I am new to this html and needs help! Thank you, Krishna. i am new, i found this site through google and seen how helpful everyone is and decided to join to try and find an answer. i got the design for the site from a template but i remade a majority of it and used photoshop to slice it. so heres the problem, the page is fine the way it is, but i need to be able to type in the white area. i dont know if a code exists to do such a thing but i attempted to will in the white area with a table instead of the image. please help me. thanks in advance. http://haskinsart.awardspace.com/index.html above is the page with the image as the white space (the body(where i want to type)) http://haskinsart.awardspace.com/indexart.html and this one has the table. but as u can see now i have gaps!!! please help me. --deleted-- I'm using WYSIWYG, please look at my webpage he http://www.nwvisuals.com/ You'll notice that the text below the images gets all over the place if you (A) Have resolution that is not 1024x768 (B) Not in full-screen mode Which is really really bad for me. Should I fix it with basic HTML'ing? Is this the downfall of WYSIWYG editors? I have several websites that I maintain and update. A lot of them are just textual changes and I would think my customers can do these themselves by editing a simple .txt file. I was hoping my choices are avalable so that I can just insert this tag into my web pages and then give them login info to their edit page or show them how to upload the .txt file. I hope this is an easy one with several answers. Is it possible these tags could discipline your rankings in the search engines? Thanks, Jason Hi All, I am new to this forum and is expecting an answer for this question. I have implemented a facebook type search to the database which displays the familiar text saved in the database when I type some text in the database. My issue is after I have used the search box for a couple of time the text box starts displaying a similar dropdown from its history which hides my database search. Does anyone know how to disable it using html or css. See the attached Image if my question is not clear. http://www.htmlforums.com/attachment...1&d=1306715905 here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. How do I Link text in a div, h1, h2, p to an external text file or xml file - I don't really know how to ask the question. I think I need an xml file that can be easily edited by a user saved to the server to update an xhtml page text without the user getting bogged down in html. I don't want to use joomla or cms. <Any ideas />? Best wishes, mas |
|||||||