|
HTML - Html + Css Small Problem
Hey there, I am having a small problem everytime I try to make a page like this. The navbar will move up when I make the page bigger, and it will act weirdly and create extra pixels and such when I make it smaller. Please help! I validated everything, I would just like to know why it is doing this. Thanks a ton. I really appreciate it!
Html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="web.css"> <title>Sample</title> </head> <body> <div id="top"> <img src="samplebanner.png" width="750" height="150" alt="Banner"> </div> <div class="navbar"> <ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </div> </body> </html> Css: .navbar ul { position: absolute; text-decoration: none; background-color: aqua; background-image: none; padding-left: 0px; top: 143px; } .navbar li { list-style-type: none; border-style: solid; border-color: black; border-width: 1px; border-bottom: 0px; } img { border-style: solid; border-color: black; border-width: 1px; position: absolute; } Thank you so much for your help! Similar Tutorialsif the question is: Your objective is to send a POST header to this script. The POST content must contain your NAME and your IP. The variable names are ip & name! In addition you have to send a cookie with the name completed=1 to this page. then what should be the syntax of the answer. i am a newbie to html. <html><body> <table width="670" height="" cellspacing="0" cellpadding="" border="0" bgcolor="#f9f5f3" align="center"> <tbody> <tr> <td><table width="650" cellspacing="0" cellpadding="6" border="0" bgcolor="#f9f5f3" align="center"> <tbody> <tr> <td colspan="2"><img width="650" height="230" align="middle" src="/assets/images/Tifco Ezine/banner.jpg" alt="" /></td> </tr> <tr> <td colspan="2"><p><span style="color: rgb(193, 139, 92);"><strong><span style="font-size: x-large;">Summer Offers at Parknasilla Resort & Spa</span></strong></span></p> <p><span style="color: rgb(193, 139, 92);"><span style="font-size: large;">Self Catering in Style</span></span></p> <p>Only €200 per night for a 5 night self catering break in one of our two bedroom luxury lodges. Situated just behind the main house the lodges offer a fantastic alternative to staying in the hotel and allow your family absolute freedom to come and go as they choose!</p> <p><span style="font-size: large;">€200 Per Night </span></p> <p><img width="112" height="35" alt="" src="/assets/images/Tifco Ezine/book_now_burlo2.jpg" /></p></td> </tr> </tbody></table> <table width="320" cellspacing="0" cellpadding="" border="0" align="left"> <tbody height="400" background="/assets/images/Tifco Ezine/background.jpg" align="middle" alt="" width="320" img=""><tr valign="top"> <td style=""><p style="text-align: left; margin-left: 15px;"> </p><p style="text-align: left; margin-left: 15px;"><strong><span style="color: rgb(193, 139, 92);"><span style="font-size: large;">Sumptuous Spa Package</span></span></strong></p> <p style="text-align: left; margin-left: 15px;">Relax & unwind in our stunning thermal spa with panoramic views of the Atlantic Ocean and Kerry Mountains!</p> <p style="text-align: left; margin-left: 15px;">Package includes:</p> <ul> <li style="text-align: left;"><p>2 Nights Overnight Accommodation</p></li> <li style="text-align: left;"><p>Full Irish breakfast</p></li> <li style="text-align: left;"><p>Gourmet Dinner in Pygmalion Restaurant</p></li> <li style="text-align: left;"><p>spa treatment</p></li> </ul> <p style="text-align: left; margin-left: 15px;"><span style="font-size: large;"> </span></p> <p style="text-align: left; margin-left: 15px;"><span style="font-size: large;">Only €269 PPS </span></p> <p style="text-align: left; margin-left: 15px;"><img width="112" height="35" alt="" src="/assets/images/Tifco Ezine/book_now_burlo2.jpg" /></p></td> </tr> </tbody></table> <table cellspacing="0" cellpadding="" border="0" bgcolor="#f9f5f3" align="right" style="width: 320px; height: 400px;"> <tbody height="400" > <tr bgcolor="#f9f5f3" background="/assets/images/Tifco Ezine/background.jpg" align="middle" alt="" width="320" height="400" img="" valign="top"> <td style=""><p style="text-align: left;"><strong> </strong></p><p style="text-align: left; margin-left: 15px;"><strong><span style="color: rgb(193, 139, 92);"><span style="font-size: large;">Gourmet Golf Escape</span></span></strong><span style="font-size: large;"> </span></p> <p style="text-align: left; margin-left: 15px;"><span style="font-size: large;"><span style="font-size: small;">Package includes:</span></span></p> <p style="text-align: left; margin-left: 15px;">2 Nights overnight accommodation</p><ul> <li style="text-align: left;"><p> Full Irish breakfast</p></li> <li style="text-align: left;"><p>Gourmet Dinner in Pygmalion Restaurant</p></li> <li style="text-align: left;"><p>Round of Golf</p></li> </ul> <p style="text-align: left; margin-left: 40px;"><span style="font-size: large;">Only €309 PPS</span><span style="font-size: large;"><br /> </span></p> <p style="text-align: left; margin-left: 40px;"><img width="112" height="35" alt="" src="/assets/images/Tifco Ezine/book_now_burlo2.jpg" /></p></td> </tr> </tbody></table> </td></tr></tbody></table> </ html></ body> The two tables in bold I have an image in both these tables as a background it is a rounded rectangle similar to the background color #f9f5f3 but there is white spacing around the image that I cannot take out. Any help is greatly appreciated. Thanks. Hey everyone I'm new here.. I do have a slight problem, and I'm not sure where to look. I have a .swf file that is using a lot of bandwidth right now, mainly about 4GB of bandwidth a day. I don't mind that it is using that much, but I'm thinking why not put some advertisement links to try to make some money from showing this thing all the time. The link to it is, http://www.mypcgeeks.com/screenclean.swf It's a little pug licking the screen and people are getting a kick out of it, which is great, but what I want ultimately to be done is instead of going just to the .swf, to possibly redirect, or even add just a advertisement table above the .swf Suggestions? Thanks Hi everyone, I have a Flash movie embeded in HTML document and I'm using 100% width and height so that users can resize the flash to fit their screens. BUT on small screens (iBook 12") 1024 x 768 the movis is too small and unreadable. The Flash movie original size is 766 x 780. Is there a way to keep the resizing but to block it when it gets down to a ceratin size??? I would love to know the answer. Please any help would be gratefully recieved. Thanks for your time in advance, Martin I dont know what happened but all of a sudden I have no "layout view" and it looks like all code is in head section. Please help me, I cant figure it out. I used golive 7.0 for this crap code. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Room additions.</title> <meta name="keywords" content="san diego bath remodeling, san diego room additions, san diego remodeling contractor, san diego room addition contractor,san diego kitchen & bath remodeling" <meta name="author" content="http://www.hdr.com"> <meta name="copyright" content="hd"> <meta name="revisit-after" content="7 days"> <meta name="robot" content="All"> <link href="main.css" rel="stylesheet" type="text/css" media="all"> <csscriptdict import> <script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script> </csscriptdict> <csactiondict> <script type="text/javascript"><!-- var preloadFlag = true; // --></script> </csactiondict> </head> <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <table width="1235" border="0" cellspacing="0" cellpadding="0" align="center" background="images/bg.jpg" cool gridx="10" gridy="10" height="1014" showgridx showgridy usegridx usegridy> <tr height="78"> <td width="252" height="550" rowspan="5" valign="top" align="left" xpos="0"><img src="images/bg_top_L.jpg" alt="" height="434" width="252" border="0"></td> <td width="220" height="78" colspan="5" valign="top" align="left" xpos="252"><img src="images/logo.jpg" alt="" height="78" width="220" border="0"></td> <td width="507" height="78" colspan="3" valign="top" align="left" xpos="472"><img src="images/phone_head.jpg" alt="" height="78" width="507" border="0"></td> <td width="255" height="550" rowspan="5" valign="top" align="left" xpos="979"><img src="images/bg_top_r.jpg" alt="" height="434" width="255" border="0"></td> <td width="1" height="78"><spacer type="block" width="1" height="78"></td> </tr> <tr height="26"> <td width="194" height="935" rowspan="5" valign="top" align="left" xpos="252"><csobj h="935" occur="5" t="Component" w="194" csref="menu.html"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/but1.jpg" alt="" height="16" width="194" border="0"></td> </tr> <tr> <td><a onmouseover="changeImages('but2','images/but2_over.jpg');return true" onmouseout="changeImages('but2','images/but2.jpg');return true" href="index.html"><img id="but2" src="images/but2.jpg" alt="" name="but2" height="26" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but3','images/but3_over.jpg');return true" onmouseout="changeImages('but3','images/but3.jpg');return true" href="#"><img id="but3" src="images/but3.jpg" alt="" name="but3" height="24" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but4','images/but4_over.jpg');return true" onmouseout="changeImages('but4','images/but4.jpg');return true" href="#"><img id="but4" src="images/but4.jpg" alt="" name="but4" height="24" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but5','images/but5_over.jpg');return true" onmouseout="changeImages('but5','images/but5.jpg');return true" href="#"><img id="but5" src="images/but5.jpg" alt="" name="but5" height="22" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but6','images/but6_over.jpg');return true" onmouseout="changeImages('but6','images/but6.jpg');return true" href="#"><img id="but6" src="images/but6.jpg" alt="" name="but6" height="22" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but7','images/but7_over.jpg');return true" onmouseout="changeImages('but7','images/but7.jpg');return true" href="#"><img id="but7" src="images/but7.jpg" alt="" name="but7" height="24" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but8','images/but8_over.jpg');return true" onmouseout="changeImages('but8','images/but8.jpg');return true" href="#"><img id="but8" src="images/but8.jpg" alt="" name="but8" height="24" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but9','images/but9_over.jpg');return true" onmouseout="changeImages('but9','images/but9.jpg');return true" href="#"><img id="but9" src="images/but9.jpg" alt="" name="but9" height="23" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but10','images/but10_over.jpg');return true" onmouseout="changeImages('but10','images/but10.jpg');return true" href="#"><img id="but10" src="images/but10.jpg" alt="" name="but10" height="25" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but11','images/but11_over.jpg');return true" onmouseout="changeImages('but11','images/but11.jpg');return true" href="#"><img id="but11" src="images/but11.jpg" alt="" name="but11" height="26" width="194" border="0"></a></td> </tr> <tr> <td><img src="images/menu_low.jpg" alt="" height="235" width="194" border="0"></td> </tr> <tr> <td><img src="images/special1.jpg" alt="" height="130" width="194" border="0"></td> </tr> <tr> <td><img src="images/special2.jpg" alt="" height="126" width="194" border="0"></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> </csobj></td> <td width="533" height="26" colspan="7" valign="top" align="left" xpos="446"><img src="images/frame_top.jpg" alt="" height="26" width="533" border="0"></td> <td width="1" height="26"><spacer type="block" width="1" height="26"></td> </tr> <tr height="221"> <td width="16" height="221" colspan="3" valign="top" align="left" xpos="446"><img src="images/frame_left.jpg" alt="" height="221" width="16" border="0"></td> <td width="501" height="221" colspan="2" valign="top" align="left" xpos="462"><img src="images/main_pic.jpg" alt="" height="221" width="501" border="0"></td> <td width="16" height="221" colspan="2" valign="top" align="left" xpos="963"><img src="images/frame_rt.jpg" alt="" height="221" width="16" border="0"></td> <td width="1" height="221"><spacer type="block" width="1" height="221"></td> </tr> <tr height="38"> <td width="533" height="38" colspan="7" valign="top" align="left" xpos="446"><img src="images/frame_bottom.jpg" alt="" height="29" width="533" border="0"></td> <td width="1" height="38"><spacer type="block" width="1" height="38"></td> </tr> <tr height="187"> <td width="8" height="187" colspan="2"></td> <td content csheight="177" width="517" height="187" colspan="4" valign="top" xpos="454"><span class="h1b">Welcome & Remodeling.</span><span class="h1"><br> </span>Thank you for taking the time to <a class="test" href="index.html">look</a> around. <p>Remodeling kitchen .</p> <p>Remodeling bathrooms</p> </td> <td width="8" height="187"></td> <td width="1" height="187"><spacer type="block" width="1" height="187"></td> </tr> <tr height="463"> <td width="252" height="463"></td> <td width="1" height="463"></td> <td width="787" height="463" colspan="7" valign="top" align="left" xpos="447"><img src="images/line.jpg" alt="" height="16" width="533" border="0"></td> <td width="1" height="463"><spacer type="block" width="1" height="463"></td> </tr> <tr height="1" cntrlrow> <td width="252" height="1"><spacer type="block" width="252" height="1"></td> <td width="194" height="1"><spacer type="block" width="194" height="1"></td> <td width="1" height="1"><spacer type="block" width="1" height="1"></td> <td width="7" height="1"><spacer type="block" width="7" height="1"></td> <td width="8" height="1"><spacer type="block" width="8" height="1"></td> <td width="10" height="1"><spacer type="block" width="10" height="1"></td> <td width="491" height="1"><spacer type="block" width="491" height="1"></td> <td width="8" height="1"><spacer type="block" width="8" height="1"></td> <td width="8" height="1"><spacer type="block" width="8" height="1"></td> <td width="255" height="1"><spacer type="block" width="255" height="1"></td> <td width="1" height="1"></td> </tr> </table> <csobj h="240" occur="30" t="Component" w="1260" csref="footer.html"> <table width="1234" border="0" cellspacing="0" cellpadding="0" align="center" background="images/foot.jpg" height="240"> <tr height="51"> <td width="261" height="51"></td> <td width="130" height="51"></td> <td width="138" height="51"></td> <td width="155" height="51"></td> <td width="260" height="51"></td> <td width="50" height="51"></td> <td width="241" height="51"></td> </tr> <tr height="125"> <td width="261" height="125"></td> <td valign="top" width="130" height="125"><a href="index.html">Home</a><br> <a href="about%3ehtml">About Us</a><br> <a href="services.html">Services</a><br> <a href="gallery.html">Gallery</a><br> <a href="clients.html">Clients</a><br> <a href="contact.html">Contact Us</a></td> <td valign="top" width="138" height="125"><a href="design.html">Design Services</a><br> <a href="kitchens.html">Kitchen Remodeling</a><br> <a href="baths.html">Bath Remodeling</a><br> <a href="room_additions.html">Room Additions</a><br> <a href="home_repairs.html">Home Repairs</a><br> <p></p> </td> <td valign="top" width="155" height="125"></td> <td width="260" height="125"></td> <td width="50" height="125"></td> <td width="241" height="125"></td> </tr> <tr> <td width="261"></td> <td width="130"></td> <td width="138"></td> <td width="155"></td> <td align="right" width="260">Copyright © HDR 2009</td> <td width="50"><img src="images/logo_vg.jpg" alt="" height="35" width="50" align="right" border="0"></td> <td width="241"></td> </tr> </table> </csobj> </body> </html> Hello Ive got a bit of a problem which is really doing my head in trying to figure it out. It could be related to a script ive just used to produce a small slideshow/gallery, or could be to do with the tables. Ive highlighted the two areas with a red box in the attachment below, the main problem is the yellow line in the top left corner. on the other pages its not there... I noticed that there is a gap between the top page and the design of the site (which isnt meant to be like that), the whole design should be a little higher. Ive also attached the site code, im hoping someone can look and apologies if the code is messy (which it may well be..) thanks for any help Hello guys I am having problems with how my site looks in IE relative to other browsers. This is the problem --> http://www.triplestarnews.com/needhelp.jpg the url of the source is http://www.triplestarnews.com/main. Any ideas/help would be greatly appreciated. -Victor This is the page: [edited out link after problem solved] In Internet Explorer and Opera (not FF as far as I can see), under the 3rd 4th 5th 6th and 7th menu image there is a very small black line between it and the next. I don't know why these are there and how they appeared. I think it is something to do with the stylesheet rather than the page html as they are not there when I exclude it. The style is he [edited out link after problem solved] Can anyone shed some light on this? thanks. Hi, Background: I have a small page that need to be embeded into a bounch of other html pages. Help needed: 1. Please provide the html chunk that I can use to embed the small page in to other html pages. 2. Is there a way of not using iframe? Can I use <Object> or <embed>? How? --------------------------- mba colleges in london hospitality management diploma My html problem keeps failling, with all my image codes.. shown for 10 errors which are all for the images what's wrong? Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 Case 2 Fiddler Home Page Author: Date: 2-16-2011 Filename: home.htm Supporting files: fiddler.jpg --> <title>, ITSE 1411 Lab Project 2, Tutorial 2 Case 2, Due 02/23/2011</title> </head> <body> <div> <img src="fiddler.jpg" alt="Fiddler on the Roof" /> <hr /> <a href="home2.htm"><img src="home.jpg" alt="home" /></a> <a href="slide1txt.htm"<img src="start.jpg" alt="start" /></a> <a href="slide1txt.htm"<img src="back.jpg" alt="back" /></a> <a href="slide2txt.htm"<img src="forward.jpg" alt="forward" /></a> <a href="slide6txt.htm"<img src="end.jpg" alt="end" /></a> <br /> <a href="slide1txt.htm"<img src="thumb1.jpg" alt="slide1" style="border-width: 5" /></a> <a href="slide2txt.htm"<img src="thumb2.jpg" alt="slide2" style="border-width: 0" /></a> <a href="slide3txt.htm"<img src="thumb3.jpg" alt="slide3" style="border-width: 0" /></a> <a href="slide4txt.htm"<img src="thumb4.jpg" alt="slide4" style="border-width: 0" /></a> <a href="slide5txt.htm"<img src="thumb5.jpg" alt="slide5" style="border-width: 0" /></a> <a href="slide6txt.htm"<img src="thumb6.jpg" alt="slide6" style="border-width: 0" /></a> </div> <hr /> <div> <img src="slide1.jpg" alt="slide1" /> </div> <blockquote> <p><i>Do You Love Me?</i> sung by Deb Ingalls and Thomas Gates</p> </blockquote> </body> </html> Hi guys, I have a bit of a problem! I have designed a page and got it going, BUT... on some screens it doesn't fit in the browser and others it fits just fine. When I say 'fits' I mean that everything on the page is in proportion, but is it too big for the screen so you have to use both the side and bottom scroll bars to see everything - on my computer it's all in at once. I'm sure there's a simple bit of code or something to sort it, but I'll be damned if i know what it is! Any way - here is the link... www.strictly-smokin.co.uk/index.htm Cheers, Michael thanks a lot? Ok so im trying to align my text at the top of the 2 images i have done. for a live preview go to http://habbmania.net/djpanel/djlnn.php You can see the 2 images to the left and right and text in the middle. Im trying to put the text at the top and put a BR tag so it will look like this " The Current DJ Scheduled Non Scheduled " But once i put the Br tag in it shows the text breaking down to the next line, In Example 2. How would i align the text at the top of example 1 with a BR tag so it will be aligned with the images. THE WHOLE POINT IS TO FIX EXAMPLE #1 Please help This is the code i have for it. "<a href=""><img border="0" src="left.gif" /></a> The Current DJ Scheduled <b> <? include('djnow.php'); ?></b> <a href=""><img border="0" src="right.gif" class="float-right" /></a> " I am a small business owner in the process of re-launching my website in WordPress. I am not all that familiar with HTML so I Googled HTML forums and here I am looking for help. I have attached a JPEG image of the image. I am trying to figure out the code to get the video on the bottom on to the top of the iTouch graphic. Here is an example of the code as it is now: <p style="text-align: justify;"><span style="color: #ffff00;"> </span><span style="color: #ffff00;"><strong> </strong></span></p> <p style="text-align: justify;"><span style="color: #ffff00;"><strong> </strong></span></p> <img class="aligncenter size-full wp-image-298" title="iphonetemplate" src="http://www.pressboxsportsimaging.com/wp-content/uploads/2010/08/iphonetemplate1.png" alt="" width="625" height="321" /><object id="vp1kgvd1" style="width: 431px; height: 286px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="431" height="286" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="scale" value="showall" /><param name="src" value="http://static.animoto.com/swf/w.swf?w=swf/vp1&e=1282406536&f=kgvd1So1SIRuh2SEwfRDEA&d=301&m=p&r=w+s&i=m&ct=www.car olinaselectlacrosse.com&cu=&options=" /><param name="align" value="top" /><embed id="vp1kgvd1" style="width: 431px; height: 286px;" type="application/x-shockwave-flash" width="431" height="286" src="http://static.animoto.com/swf/w.swf?w=swf/vp1&e=1282406536&f=kgvd1So1SIRuh2SEwfRDEA&d=301&m=p&r=w+s&i=m&ct=www.car olinaselectlacrosse.com&cu=&options=" align="top" scale="showall"></embed></object> Thanks in advance. the footer is up with the content... I checked all the div's and they seem to be fine, another set of eyes may be able to figure out whats going on... works fine on this page: http://www.pzfantasyfootball.com/testing/ messed up on this page: http://www.pzfantasyfootball.com/tes.../twoworlds.php How do I set a very small font size for 1 sentence. I tried <small> but it's not small enough. I need something like a font size 1 or 2. Is there a way to put text in a type of fixed width and height area? If I make a table that is 100 x 10px and type inside it, if there is too much text it will stretch the table until all the text shows inside. I want it to just cut off everything that is bigger than the demensions specified. Ok well I'm coming up to the finishing point of the new Phinfever site, and I just have a bunch of small issues to deal with, mostly with IE. Was wondering if you lovely people here would help me out. 1. The footer text alignment. See this thread: http://www.htmlforums.com/css/t-alig...xt-106876.html 2. Making the text in the sidebar <h3> tags invisible. The CMS doesn't allow us not to put text in the header, as a result I've set the font-size to 0, which should make it invisible... however in IE you can see small dots of white. Is there a work-around for this? RESOLVED 3. The pagination gets cut off at the top in Internet Explorer. It looks fine in firefox but for some reason the top border and a few pixels of the box itself get cut off. I think that's about all I'm having trouble with right now. I'll use this thread if anything comes up. If you see anything else, be sure to let me know. Thanks! http://www.phinfever.com/newsite Can someone tell me why the image isn't zoomed all the way to its max when clicked on? You have to click on the zoomed image to get it to its max dimensions. Why does it do this and how do I fix it so it will max out in a separate window when you click on the thumb? I don't know how to write this Javascript stuff myself. Click on any image to zoom |
|||||||