HTML - Putting Boxes Next To Each Other With Out Space Between
Hi all,
I'm a beginner with XHTML, creating my very first website, so please forgive me if this should be a stupid question: I crated a table with 6 colums. Each column has a border. I'd like to set the 1st column on the left side, and the other 5 columns without a space between them on the right side. But there is still space between them. What am I doing wrong?? By the way - the 5 colums on the right side contain pictures. They are supposed to be in the middle with the same distance around to the border - doesn't work either ... the picture stucks at the top - but at least horizontally in the middle ... HTML Code: <TABLE style="cellpadding:0; cellspacing:0; width:85em;"> <TR> <TD> <DIV style="float:left; background-color:#f5f5f5; border:1px solid #CC6699; width:10em; height:5em; text-align:left;"> <B>text</B> </DIV> </TD> <TD> <DIV style="float:right; border:1px solid #CC6699; width:10em; height:5em; text-align:center; vertical-align:middle; display:table-cell;"> <IMG style="align:center; width:9em; height:4em;" src="path" alt="PICTURE"> </DIV> </TD> <TD> <DIV style="float:right; border:1px solid #CC6699; width:10em; height:5em; text-align:center; vertical-align:middle; display:table-cell;"> <IMG style="align:center; width:9em; height:4em;" src="path" alt="PICTURE"> </DIV> </TD> <TD> <DIV style="float:right; border:1px solid #CC6699; width:10em; height:5em; text-align:center; vertical-align:middle; display:table-cell;"> <IMG style="align:center; width:9em; height:4em;" src="path" alt="PICTURE"> </DIV> </TD> <TD> <DIV style="float:right; border:1px solid #CC6699; width:10em; height:5em; text-align:center; vertical-align:middle; display:table-cell;"> <IMG style="align:center; width:9em; height:4em;" src="path" alt="PICTURE"> </DIV> </TD> <TD> <DIV style="float:right; border:1px solid #CC6699; width:10em; height:5em; text-align:center; vertical-align:middle; display:table-cell;"> <IMG style="align:center; width:9em; height:4em;" src="path" alt="PICTURE"> </DIV> </TD> <TD> <DIV style="float:right; border:1px solid #CC6699; width:10em; height:5em; text-align:center; vertical-align:middle; display:table-cell;"> <IMG style="align:center; width:9em; height:4em;" src="path" alt="FLAG OF CHILE"> </DIV> </TD> </TR> </TABLE> Similar TutorialsHi everybody! I'm doing a page and IE keeps putting more space in between table cells than I have specified. Here's the link: http://renewforest.com/test The page is basically a table in a div layer, I have made the table have a 2px cellspacing, it works great for the top 3 cells but puts a few pixels after these first 3 cells, destroying my nifty 2 pixel separation. Also, I have given some cells (the td.topfade attributed ones that is) some left and right padding, BUT NO TOP PADDING, yet Safari and Firefox both put in some padding on the top. Oddly enough, IE obeys the CSS'ed padding, huh. Any ideas? Thanks in advance! (Because this also deals with CSS I am posting this to the CSS section as well, if this is a big no no please let me know.) i almost went crazy trying to troubleshoot this one... thought i'd share. HTML Code: <style type=text/css> a:link {font-family:Arial, Helvetica, sans-serif; font-size:12px;} </style> <table width="200" border="0" cellspacing="0" cellpadding="0"><tr> <td width="100" valign="top"> <a href="link">Sample text </a> <td width="100" valign="top"> <a href="link">Sample text</a> </td></tr></table> Turns out a "space" at the end of the link text pushes the text upwards slightly. Simply remove the space (or add on to the other line) or use the space code [ ] The css also plays a part, this doesn't appear happen when text is "unformatted" This is my code and im trying to put <div id="background"> into a table so when the screen resolution is bigger or smaller it makes it fit like the rest of the page URL: http://mylocalmenu.co.uk/test.html HTML Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Find your local takeaway menu's here"/> <meta name="keywords" content="my local menu, my local takeaway,local takeaway, local takeaways, Takeaway, Take away, takeaway, take away, food, kebab, donner, menu, Deal menu's, local menu's, local menu, local takeaway, deal, kent"/> <meta name="author" content="Ashley Sargent"/> <title>My Local Menu</title> <meta charset="iso-8859-1" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="advert.css" type="text/css" /> </head> <body> <div id="background"> <div class="freeadvertspace"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-2350274685081572"; /* dclxvi add */ google_ad_slot = "6428215554"; google_ad_width = 160; google_ad_height = 600; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <ul class="navigation"> <div class="navi"> <div id="header-content"> <div style="position: relative"> <li><a href="index.html">Home</a></li> <li><a href="#">Locations A - H</a> <ul> <li><a href="#">Bedfordshire</a></li> <li><a href="#">Berkshire</a></li> <li><a href="#">Bristol</a></li> <li><a href="#">Buckinghamshire</a></li> <li><a href="#">Cambridgeshire</a></li> <li><a href="#">Cheshire</a></li> <li><a href="#">Cleveland</a></li> <li><a href="#">Cornwall</a></li> <li><a href="#">Cumbria</a></li> <li><a href="#">Derbyshire</a></li> <li><a href="#">Devon</a></li> <li><a href="#">Dorset</a></li> <li><a href="#">Durham</a></li> <li><a href="#">East Ridings<br> Of Yorkshire</a></li> <li><a href="#">Essex</a></li> <li><a href="#">Gloucestershire</a></li> <li><a href="#">Hampshire</a></li> <li><a href="#">Herefordshire</a></li> <li><a href="#">Hertfordshire</a></li> </ul> <li><a href="#">Locations I - S</a> <ul> <li><a href="#">Isle Of Man</a></li> <li><a href="kent.html">Kent</a></li> <li><a href="#">Lancashire</a></li> <li><a href="#">Leicestershire</a></li> <li><a href="#">Linconshire</a></li> <li><a href="#">London</a></li> <li><a href="#">Middlesex</a></li> <li><a href="#">Norfolk</a></li> <li><a href="#">North Yorkshire</a></li> <li><a href="#">Northamptonshire</a></li> <li><a href="#">Northumberland</a></li> <li><a href="#">Nottinghamshire</a></li> <li><a href="#">Oxfordshire</a></li> <li><a href="#">Rutland</a></li> <li><a href="#">Shropshire</a></li> <li><a href="#">Somerset</a></li> <li><a href="#">South Yorkshire</a></li> <li><a href="#">Staffordshire</a></li> <li><a href="#">Suffolk</a></li> </ul> <li><a href="#">Locations S - Z</a> <ul> <li><a href="#">Surrey</a></li> <li><a href="#">Sussex</a></li> <li><a href="#">Tyne And Wear</a></li> <li><a href="#">Warwickshire</a></li> <li><a href="#">West Midlands</a></li> <li><a href="#">West Yorkshire</a></li> <li><a href="#">Wiltshire</a></li> <li><a href="#">Wirral</a></li> <li><a href="#">Worcestershire</a></li> <li><a href="#">Yorkshire</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">N/A</a></li> <li><a href="#">N/A</a></li> <li><a href="#">N/A</a></li> <li><a href="#">N/A</a></li> <li><a href="#">N/A</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> </ul> </li> </ul> <table width="100%" height="100%" border="0" > <tr> <td height="8.5%" > TOP </td> </tr> <tr valign="top"> <td width="21.4%"> LEFT SIDEBAR </td> <td style="background-image: url('images/Main_Menu_Background.jpg'); background-position:;"> <td width="21.4%"> RIGHT SIDEBAR </td> </tr> <tr> <td height="15.5%" colspan="3">BOTTOM <center><span>© Copyright © 2011.</span> <span><a href="test.html">My Local Menu</a> all rights reserved</span></center> </td> </tr> </table> </div> </div> </div> </div> </body> </html> Where "top" is i put <div id="background"> but it dosnt work it just dissapears, btw <div id="background"> is the top part of my website "My local menu" bit, i will also add the css code for it below. HTML Code: <table width="100%" height="100%" border="0" > <tr> <td height="8.5%" > TOP </td> </tr> <tr valign="top"> <td width="21.4%"> LEFT SIDEBAR </td> CSS CODE BELOW: HTML Code: #background{ background-image:url('../images/bg-page-top-curve.jpg'); background-repeat:no-repeat; background-position:top center; I've made a layout for a sim site however I can't workout why I can't get the text to go where I want. Code: Code: <table width=95%><tr><td><center><div style="background-image:url(http://i844.photobucket.com/albums/ab3/bernie-mad/LAYOUTS/bernipngnewlayout.jpg); width:700px; height:700px;"> <br><br><br><br><br><br><br><br> <body><style type="text/css"> .container { width: 300px; height: 500px; top:100px; overflow: auto; overflow-y: hidden; border: 0px; } .section { height: 500px; overflow: auto; } </style> <table width="100px"><tr><td> <div style="width: 300px; height: 500px; border: 0px;"> <html> <br><a href="#ABOUTOWK"><img src="http://i844.photobucket.com/albums/ab3/bernie-mad/LAYOUTS/ABOUTOWK.png" border="0"></a> <br><a href="#ABOUTME"><img src="http://i844.photobucket.com/albums/ab3/bernie-mad/LAYOUTS/ABOUTME.png" border="0"></a> <br><a href="#SERVICES"><img src="http://i844.photobucket.com/albums/ab3/bernie-mad/LAYOUTS/SERVICES.png" border="0"></a> <br><a href="#MYTAGS"><img src="http://i844.photobucket.com/albums/ab3/bernie-mad/LAYOUTS/MYTAGS.png" border="0"></a> </div> </td><td> <div class="container"> <html> <head> <FONT COLOR=" #000000"> <a name="ABOUTOWK"></a> <div class="section"> <br><br><center> <u>English ****er Spaniels</u><br> OWK is currently specializing in English ****er Spaniels. OWKs are proud that we've raised the top ****ers on Mutt-z. Our ****ers are currently trained in Agility and Flyball. Although, we want the best all-rounder dogs. <p> <u>Bernese Mountain Dogs</u><br> At the moment OWK has a pair of Bernese Mountain Dogs, whose their stats are being raised. They are named after mountains from their birthplace the Swiss Mountain Range. <p> <u>English Springer Spaniels</u><br> OWK also has a pair of Springers, who will be interbred with my ECSs to create Sprockers. The most awesome mix on the planet. xD </center> </div> <br><br> <a name="ABOUTME"></a> <div class="section"> <br><br><center> Hey! :D I'm Bernie! I'm 16 years old and live in West Sussex, England. I've always lived here and have been out of Europe twice. XD I've been to Italy once and have been to Northen France a few times. <br> I have a 4 year old English ****er Spaniel whom I ADORE! She has me firmly wrapped around her little paw. n-n Ruby is the inspiration for my kennel and my love of dog training. </center> </div> <a name="SERVICES"></a> <div class="section"> <br><br><b>Manips</b> - If you want a manip done, PM me. <br> <b>Layouts </b>- If you want a layout done, PM me. Price depends on complexity. </div> <a name="MYTAGS"></a> <div class="section"> <br><br><center> <MARQUEE direction="up" width="75%"><img src=http://i74.photobucket.com/albums/i253/Fish_Outta_Water_/leno2.gif><img src=http://img210.imageshack.us/img210/3231/berniesdf8.png><img src=http://i94.photobucket.com/albums/l110/Ren_041/Sales/howlingwolfbernie.gif><img src=http://mutt-z.com/images/avatars/1451.png><img src=http://i408.photobucket.com/albums/pp169/berniemad/avi1-32.png><img src=http://i408.photobucket.com/albums/pp169/berniemad/FF/Stafftag-bernie.png> </MARQUEE> <p> My character <a href="http://i844.photobucket.com/albums/ab3/bernie-mad/Stoat.png">Stoat</a>! <p> <a href="http://i844.photobucket.com/albums/ab3/bernie-mad/Stoat.png"><img src="http://i844.photobucket.com/albums/ab3/bernie-mad/Stoat.png" width=200px length=200px></a> </center></FONT> </div> </div> </td></tr></table></style></head></body></td></tr></table> Hey there. I have created the site saskannouncements.ca. If you go to create a post, you'll see I have set up an OK looking submission form. Here's the problem, you see what the people submit is sent to my email. because I'm just using this free thing off the internet. Now what I want, is I want to Posts to be automatically posted to where the posters sent it. How do I set that up? Basically I want it so they automatically post, and I don't have to copy and paste them in each time. I just want to moniter them as they automatically are placed. Can anyone help me on this please? Thanks alot. I really appreciate it. Also if you've got any other pointer's for my new site Feel free to let me know. Looking forward to hearing from you! Hey, I'm wanting to know how to place videos on a webpage that are personal to the website, in other words.. not a YouTube video. Like this for instance: http://www.stomperblog.com/darrin-mi...al-case-study/ How can i set up a video like this on a website? Do i need a certain program? Thanks! Hello, I have a small business with a website (http://www.232john.com). I created the website with Microsoft Publisher 2003. We produced a commercial about 1.5 years ago and would like to put it on the website. The problem is I don't know how, and really, if its at all possible. Also, the file may be too large, about 3 minutes long. I am thinking I would have to resize, or change the format somehow, but since I am quite new to this, I have no idea how to do that either. lol SO, anything anyone could do to help would be greatly appreciated. Thank you very much matthew Dear HTML senseis, I'm trying to make a "Previous | Next" link in the bottom center of the page, but what I get from this script is "Previous" in the bottom center, and "Next" below it instead of next to it. Here's what I'm using: <p style="text-align: center;"><a href="F:\Webcomic\TheEyeoftheWorld.html">Previous</a></p><p align="center" |</p><p style="text-align: center;"><a href="F:\Webcomic\TheEyeoftheWorld3.html">Next</a> I try to put 2 Objects (probably the wrong word) in a line. I tried div, float and span. I think i just used them in the wrong Way, so may someone here can help me out? Code: <?if($CHAT_BOX$)?> <div class="boxContent" style="width: 50%;"> <div align="center">$CHAT_BOX$<?endif?> <?if($MYINF_5$)?> <div class="boxContent" style="width: 50%;">$MYINF_5$</div> </div> </div><?endif?> Thats the Code, its always Displayed $CHAT_BOX $MYINF_5$ i want it to be $CHAT_BOX $MYINF_5$ hi all i am attempting to build my first forum and am having a little trouble. http://hvg.ucoz.com i have made up a picture for a header for my forum which works fine but i am unable to work out how to put links on the picture itself i can only get them to go over or under it. the txt on it at the moment i have put on there in paint (no supprise that doesnt work) its more for you to be able to see what i am trying to do this is what i have got at the moment, i have deleted everything as i was making a mess not knowing what i was doing. <img src="http://asif-clan.ucoz.com/Top_Background-finished-.png" border="0" alt="" style=""> thanks for any help in advance its appreciated so im trying to put a slide show in the div overly...im putting it in the right section but when i view my profile its right in the middle of the page overlapping writing etc.. how do i get it so its under that heading i put it up instead of it center? heres my code ABOUT ME: <style> body table {margin-top:-50000px;}body td table, body div table {margin-top: 0;}table, tr, td {background-color:transparent;}body div table form{display:none;}body table div form{display:block;}div table td font {visibility:hidden; }a.navbar:active, a.navbar:visited, a.navbar:link { display:none;}a.navbar:hover { display:none; }.navbar {visibility:hidden; display:none;} .userProfiledetail, .userProfileURL, .userProfileSchool, .interestsAndDetails, .friendsComments,.extendedNetwork, .latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;} a.text, table div font a, table div div {visibility:hidden;} table tr td div font {display: none;} body div table td form {display:none!important;}table, td, tr{ background-color:transparent;}td td embed, td td object {position:absolute; left:0px; top:0px; width:260px; height:47px;}td.text embed {width:260px; height:38px;}td.text embed, td.text object {width:260px; height:38px;} h1 { font-family: Time New Roman; font-size: 20pt; color: ffffff; font-weight: normal; border-bottom: 3px double; border-color: ff3399; text-align: right;} h2 { font-family: Time New Roman; font-size: 20pt; color: ffffff; font-weight: normal; border-bottom: 3px double; border-color: ff3399; text-align: left;} b { color: fff; font-weight: bold; text-transform: none;} i { color: fff; font-style: italic; font-weight: normal; text-transform: lowercase; } u {font-family: Arial; font-size: 11pt; color: fff; text-decoration: underline; border-bottom: 1px solid; border-color: ff3399;} strike { font-size: 10pt; color: fff; font-style: strikethrough; } big, small { color: fff;} textarea, select, input { font-family: Arial; color: fff; background-color: ff3399; border: 1px solid fff; letter-spacing: -1px; } blockquote { background-color: transparent; border: 1px solid; border-color: ff3399; padding: 5px;} body { background-color: 000000; background-image: url("http://cbimg6.com/layouts/08/08/30432aa.jpg"); background-repeat: repeat-y; background-position: center; scrollbar-face-color: ff3399; scrollbar-arrow-color: fff; scrollbar-track-color: 333; scrollbar-shadow-color: 000; scrollbar-highlight-color: 777; scrollbar-3dlight-color: fff; scrollbar-darkshadow-color: 000;} .navi:link, .navi:active, .navi:visited { font-family: Verdana; font-weight: normal; font-size: 8pt; color: ffffff; text-transform: uppercase; text-decoration: none; background-color: ff3399; display: block; text-align: center;} .navi:hover { font-family: Verdana; font-weight: normal; font-size: 7pt; color: ff3399; text-transform: uppercase; text-decoration: none; background-color: ffffff; display: block; text-align: center;} a:link, a:active, a:visited { font-family:Arial; font-weight: normal; font-size: 11pt; color: ff3399; text-transformation: none; text-decoration: none; background-color: none;} a:hover { font-family: Arial; font-weight: normal; font-size: 11pt; color: ffffff; text-transformation: none; text-decoration: none; background-color: ff3399;} .right {position: absolute; top: 380; left: 50%; margin-left: -143px; height:; width: 563; font-family: Arial; font-size: 12pt; color: cccccc; background-color: transparent; text-align: justify;} .left {position: absolute; top: 375; left: 50%; margin-left: -365px; height:; width: 170px; font-family: Arial; font-size: 12pt; color: cccccc; background-color: transparent; text-align: justify;} .base {position: absolute; top: 0px; left: 50%; margin-left: -497px;} </style> WHO ID LIKE TO MEET? <div class="base"><img src="http://cbimg6.com/layouts/08/08/30432ab.jpg" /></div> <div class="right"> <h1>Spotlight on me.</h1> <center><br /><img src="http://i31.tinypic.com/116nhwy.jpg" border="0" alt="Image and video hosting by TinyPic" /></a><br /></center> Best daughters in the world; <b>Allie & Stephie</b>, <u>my kids</u>; Steps Dance studio (Hip Hop Instructor) is the job; I am a dancer - i live it love it am it; dancing is a very big apart of my life that and i want to pass that same love to my girls ; Merced College is the school Nursing is the major; i <b><u>LOVE</b></u> anything PINK; I ♥ my girls; I ♥ my friends; I ♥ beer; I ♥ drinking at applebees; I ♥ Rap & R&b; I ♥ late nights; I ♥ romance movies ; I ♥ A Walk to Remember; I ♥ Tattoos; I ♥ coors light; I ♥ the RAIDERS; I ♥ my bff amanda always; I ♥ Mac Make-up; I ♥ getting my nails done; I ♥ drinking @ La Ha 2 haha<br /><br /><br /> I hate people who lie; I hate cheaters; I hate broken promise's; I hate caring so ****in much; I hate having a big heart; I hate fights; I hate onions and mushrooms; I hate clowns; I hate traffic; I hate dark beer; I hate tomatos; and that sums me up in a nut shell body <h1>Welcome To the Show.</h1> <img src="http://i38.tinypic.com/11kgl8m.jpg" align="left" /><b>Name:</b> Kelley Kellz<br /> <b>Age:</b> 24<br /> <b>Location:</b> merced; califoRnia.<br /> <b>Status:</b> call it what you want.<br /> <b>Occupation:</b> dance instructor; school.<br /> <br /><br /> <br /><br /><br /> <h1>Backstage Pass.</h1> <p style="visibility:visible;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="320" width="426" style="width:426px;height:320px" data="http://widget-af.slide.com/widgets/slideticker.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://widget-af.slide.com/widgets/slideticker.swf" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="l" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="cy=ms&il=1&channel=2666130979412675759&site=widget-af.slide.com" /> </object> under "backstage pass" thats where i want the slideshow but it wont put it under there nor under the "welcome to the show" area what am i doing wrong? Hi i am new to HTML and have a really basic question. I am trying to teach myself HTML from scratch and came across adding a hyperlink to an image. i found this HTML below on a practice web site and undestand that the <a href="default.asp"> is where the hyperlink links to, but when i changed this to a website for example www.google.com it didn't go to the google page it just said error why is this? Also the "smiley.gif" where does this come from if i wanted to change the picture that you click on how would i do this ?? I'd be so grateful if anybody could shed some light on this for me thank you, Angela <p>No border around the image, but still a link: <a href="default.asp"> <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> I try to put 2 Objects (probably the wrong word) in a line. I tried div, float and span. I think i just used them in the wrong Way, so may someone here can help me out? Code: <?if($CHAT_BOX$)?> <div class="boxContent" style="width: 50%;"> <div align="center">$CHAT_BOX$<?endif?> <?if($MYINF_5$)?> <div class="boxContent" style="width: 50%;">$MYINF_5$</div> </div> </div><?endif?> Thats the Code, its always Displayed $CHAT_BOX $MYINF_5$ i want it to be $CHAT_BOX $MYINF_5$ ------------------------------------ I am failry new to html and I need some help. I have a link on a page. When it is clicked I want another page (which is basically made up of a small 2X3 table) to appear on the same page as the link. I am trying to do this without using frames as they are becoming depriciated. Does anyone know how to put a link in an alert window? how can i have the actual website in a column in the midle of the page, and have a background around it? and have a rolover image change. I need help with my layout + putting content on my page + putting wordpress on my page and editing it to match someone help please? im going to use this webpage as an example http://danalverez.webs.com/index.htm im creating a webpage in dreamweaver and im having a problem i uploaded a background image and centered it and thats fine. But now im trying to creat links over the background image and i can, but when i view the webpage in IE the links or text move everytime i maxamize or minamize the webpage. when you maxamize or minamize the webpage above, the home button link is always in the same location on the page. When i max/min my website the home button jumps to the left or right. when its minamized its in the correct location, but when i maxamise the page the button is to much left. So i haven't been able to figure this out and in need of some assistance.Here is the code.want to put them in rows of 2 & columns of 4 but instead it put them in a list.Im sure this is a simple fix.I only have it set up to list 5 products but can set it up for more.If you need the entire page of code just let me know. The webpage for the code http://www.allyugioh.com/products_list <!-- Item loop --> <notag rst:define:img="item1:/ImageUrl" rst:define:notavailable="0" /> <notag rst:ifnot="{img}" rst:define:img="img/noimage.gif" /> <notag rst:if="{item1:/QtyAvailable} le 0" rst:define:notavailable="1" /> <div rst:if="item1:/Title"> <hr/> <a href="#" rst:content="item1:/Title" rst:href:lid="{item1:@id}" rst:href:pagename="product">name</a><br /> <img border="0" height="100" rst:attr:id="thumb{item1:@id}" rst:attr:src="{img}" src="img/imgb.gif" width="100" /><br /> <div class="prod_details_tab"> <b><i rst:content="{item1:/Price@currency}{item1:/Price}">$1</i><br /></b> <a href="#" rst:href:lid="{item1:@id}" rst:href:verb="ATC" rst:href:pagename="cart" rst:ifnot="{notavailable}">add to cart</a> </div> <i rst:content="">$1</i><br /> <i rst:content="">$1</i><br /> <br /><br /> </div> </notag> <!-- Item loop end --> For a class assignment we are to create a simple Web page with inline styles. My question is, How do I tell the browser to stop putting text next to an image? Here is the html I'm using now: HTML Code: <img src="recycle.jpg" width="142" height="146" style="float: left; margin-left: 10px; margin-right: 10px" alt="Recycle bin" /> <h1 style="font-style: italic">Help the Earth - Recycle</h1> <ul style="text-align: left"> <li><a href="#about">Q and A about recycling</a></li> <li><a href="#when">When to recycle</a></li> <li><a href="#contacts">Who to contact</a></li> </ul> The h1 header is supposed to be on the right side of the "recycle.jpg" image, which it is, but the bulleted list is supposed to be below the image. It keeps going alongside the image underneath the h1 header. I've tried putting different parts into div tags but that didn't work. Obviously I'm doing something wrong. Any help would be greatly appreciated! |