HTML - Streching Logo Background & No Whitespaces
I have a table on the top of my page and it has a logo background image...but when i test the code i see that there are white spaces on the topside of website also right side and left side...
for example on this website htmlforum.com logo and the blue area are streched to the above right and left side..there are no whitespaces... how am i going to do this? thank you Similar TutorialsFirst Hi. I am new to this forum and quite newbie in HTML...I looked around the web, but info can be messy sometimes and I remain stucked...so here am I hoping I will solve this. Thanks to you in advance :-) SO : The problem is recurrent and simple : I HAVE A PSD BACKGROUND THAT I WANT TO STRECH ALL ALONG MY HTML PAGE...BUT WHATEVER I DO IT DOES NOT WORK , it repeats but does not strech. I am working with D8. Somebody could guide on this ? Hello, Here is my site logo, with the name covered due to private project: Now I have created a background the same as this without the logo. I have tiled this accross the webpage, but now need to line the logo with it, so that I can have the webpage viewable by any screen resolution. Please could you tell me how to make this line up correctly: Thank you. PS. Im using Microsoft Frontpage 2003 I am trying to changed the logo on my website. The part of the html code which does this, is showing as: <div id="logo-div" class="fw-logo"></div> the logo is a .gif file and I cant find anywhere in the html which is calling this image file. Where is it getting logo-div and fw-logo from, can someone please explain the html above that I posted Hi, does anybody know if there is a way to strech an Iframe to fit the whole of a page? When I try there is still always a gap at each side. And also is there a way to make the main window scroll bar act as the Iframes scroll bar? Thanks Jonny. The following table should strech out to 100% of the height of the page but it doesn't. If I remove the doctype it works fine, but somehow that doesn't seem the right solution.... Also, Dreamweaver is red underlining the piece of code I underlined and made red... I don't see the problem there but dreamweaver seems to think there is one... Can anyone help me out? 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=iso-8859-1" /> <title>Untitled Document</title> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" > <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <th height="20" bgcolor="#990033" scope="col"> </th> <th height="20" scope="col"> </th> <th height="20" scope="col"> </th> </tr> <tr> <td> </td> <td> </td> <td bgcolor="#CC00FF"> </td> </tr> <tr> <td> </td> <td bgcolor="#339999"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td bgcolor="#0066CC"> </td> </tr> <tr> <td height="20"> </td> <td height="20"> </td> <td height="20" bgcolor="#FF9900"> </td> </tr> </table> </body> </html> I am currently working on a web site. and i have got a few problem's with it so far. with the image's streching. i want to make it so a 1px width image can stretch along with the web site when information is type in to the news ill give you a link to a image showing what i mean and a link to a copy of the web site since ilm not worried about people having it. Ilm great with 2d art.. and i suck with html. but i am learning slowly if anyone could help me with this problem i would he very great full! if it needs any work done on the frame's i can do that if it would help. i have attached files below! =] edit: and here is a image on how it looks without text in the middle =] so u understand what i am getting on to more. =] I have a logo on my page coded like this <img src="http://www.etcetc.com/logo.gif" border="0"align="center"> however when u hover ure mouse over the logo it turns into a linked image and when u click on it ,it opens a blank page. I havent coded for the logo to be linked anywhere. why is that happeninig?: thanks Hello! I was wondering how you make a little logo to your website like the one on google.com for an example. Ok so I have these affiliate links and what I would like to do is create a page have my banner/logo located at the top of the page and then have the affiliate link open at the bottom of the page Hello, This is the site in question: www.hbcacworth.org I would like to place a small rectangular logo on the right side of the page on the same line as the church logo which is already there. I cannot figure out how to do this. Does anyone have any suggestions? Thank you so much. bt I've begun to notice that most websites now, up on the address bar, have a logo, to the left of the "http://..." address. Is it a piece of html code, or something else? My guess is the latter.. i have a domain registered with network solutions, do i have to pay for it? Thanks, -Adam adam79@toast.net I've lost the montage in the header section of my website, any ideas? http://www.mcaorals.co.uk I have a CSS file code follows BODY { MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color: #42d4ca; background-color: #540a67; } .text { FONT-SIZE: 16px; COLOR: white; FONT-FAMILY: Verdana, Arial, Helvetica } .newstext { FONT-SIZE: 14px; COLOR: #42d4ca; FONT-FAMILY: Verdana, Arial, Helvetica } .prtext { FONT-SIZE: 12px; COLOR: #42d4ca; FONT-FAMILY: Arial, Helvetica } .smalltext { FONT-SIZE: 12px; COLOR: #42d4ca; FONT-FAMILY: Arial, Helvetica } .wsmalltext { FONT-SIZE: 12px; COLOR: #42d4ca; FONT-FAMILY: Arial, Helvetica } .smalltext2 { FONT-SIZE: 12px; COLOR: #42d4ca; FONT-FAMILY: Verdana, Arial, Helvetica } .eresource { FONT-SIZE: 12px; COLOR: #42d4ca; FONT-FAMILY: Arial, Helvetica } .wtext { FONT-SIZE: 12px; COLOR: #42d4ca; FONT-FAMILY: Verdana, Arial, Helvetica } .bullet { FONT-FAMILY: Arial, Helvetica } .secthdr { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica; TEXT-DECORATION: none } .tabhdr { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica; TEXT-DECORATION: none } .peheader { FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: white; FONT-FAMILY: Verdana, Arial, Helvetica } .desthdr { FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #42d4ca; FONT-FAMILY: Arial, Helvetica } .header { FONT-WEIGHT: bold; FONT-FAMILY: Arial,Helvetica } .nulink { TEXT-DECORATION: FONT-SIZE: 14px; COLOR: #42d4ca; FONT-FAMILY: Verdana, Arial, Helvetica; font-size: 12px; background-color: #540a67; } .nulink:hover { COLOR: #42d4ca } .tabhdrlink { COLOR: green; TEXT-DECORATION: none } .wtabhdrlink { COLOR: #fff000 ; TEXT-DECORATION: none } .wtabhdrlink:visited { COLOR: orange; TEXT-DECORATION: none } .tabhdrlink:visited { COLOR: pink } .tabhdrlink:link { COLOR: white } .tabhdrlink:hover { COLOR: white } .svclink { FONT-FAMILY: Verdana, Arial, Helvetica } .destlink { FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica } .tablink { FONT-WEIGHT: bold; TEXT-DECORATION: none } A:hover { COLOR: pink } A.menubartext { FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: white; FONT-FAMILY: Verdana,Arial,Helvetica; TEXT-DECORATION: none } TD.clsMenuBarItem A { FONT-WEIGHT: bold; COLOR: white; TEXT-DECORATION: none } A.clsMenuBarItem { FONT-WEIGHT: bold; COLOR: white; TEXT-DECORATION: none } A.clsMenuBarItem:visited { FONT-WEIGHT: bold; COLOR: white; TEXT-DECORATION: none } TD.clsMenuBarItem { FONT-WEIGHT: bold; FONT-SIZE: 10px; CURSOR: hand; COLOR: white; FONT-FAMILY: Verdana,Arial,Helvetica; TEXT-DECORATION: none } TD.clsMenuBarItem A:hover { COLOR: orange } .clsMenuBarItem { FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: white; FONT-FAMILY: Verdana,Arial,Helvetica; TEXT-DECORATION: none } .clsMenuBarItem:hover { COLOR: orange } DIV.clsMenu { PADDING-RIGHT: 5px; BORDER-TOP: white 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 10px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; FONT-FAMILY: Verdana,Arial,Helvetica; BACKGROUND-COLOR: #00bede } DIV.clsMenuGray { PADDING-RIGHT: 5px; BORDER-TOP: white 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 10px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; FONT-FAMILY: Verdana,Arial,Helvetica; BACKGROUND-COLOR: gray } DIV.clsMenu A { FONT-WEIGHT: bold; COLOR: white; FONT-FAMILY: Verdana,Arial,Helvetica; TEXT-DECORATION: none } DIV.clsMenuGray A { FONT-WEIGHT: bold; COLOR: white; FONT-FAMILY: Verdana,Arial,Helvetica; TEXT-DECORATION: none } DIV.clsMenu A:hover { COLOR: white } DIV.clsMenu_blk A:hover { COLOR: white } .dllist { FONT-SIZE: 12px } <div id="logo"> <a href="/"><img src="../Montage/New-Montage-Chrome.jpg" width="1024" height="98" alt="MCA Orals Chrome Montage Header"></a> </div> I've changed the logo on my site at www.manchestermodelling.com. However, I need to move it higher. I've tried absolute positioning, valign etc. but it hasn't moved. I may have entered the wrong syntax however. Does anyone know what code I should use? Thank you Hi, i'm having a bit of an issue with my website in different browsers etc. It's a pretty basic html website with an iframe in the middle. I made it in dreamweaver, and it looks ok on my computer, however I had some people email in saying that the logo dissapears under the menu bar and is not visible (see attached jpeg). Is there any way I can make sure that the logo (an image) and the menu bar dont overlap on older versions of IE? Website is webuyanyphone.com btw. Any help would be awesome. Having problems with my logo on ie and firefox. It opens fine in safari. Site is www.justintimemelodies.com. I am new to html and am not sure what the problem is. I assume i need to add something for the coding to show in those two browsers. the following is the code:<div id="Logo"> <a href="index.html"><img src="./images/JustInTime2.jpg"alt="Home" border="0"></img></a></div> <a href="index.html"></a> Here is my site: http://www.straighttothetop.net What I want to do is add the image (the one in the background) and put it in the header above the navigation links (home, products, etc) Just having a black background and the image on the header as a kinda banner/logo centered on top of the navigation links I'm not the greatest when it comes to coding a website. I'm currently using WordPress for my site and can't seem to get my logo/header to hyperlink to my homepage. Right now it's just unclickable. My site is www.BlackjackClassroom.com Any help with this issue would be very much appreciated. I usually use an <a href> tag to hyperlink things, but this is giving me trouble for some reason. Thanks! Hey, thanks ahead of time for any amazing answers, Anyway, i am hosting my website on Tumblr, which is a blogging thing @ quickcache.org And you can customize your theme in HTML. I want to add a 150 by 150 or less picture to the left of the blog title. You can view to code here and view the sample website here If you could give me a updated copy with fill in the blank code that would be epic! I assume it should be easy for anyone with any knowledge of HTML. And yes i know i need a image host. Also if you add to the code, could you give me a recommended picture size to fit it to the left of the title? Thanks so much! Hey guys I'm having a terrible time getting some graphic logos to layout. I know the coloring right now is not looking up to par either so don't judge me too bad I have a header div with a nav div inside and then a content div below this with a swf slide show inside. Basically inside the header div I have 5 graphics and then a nav div nested inside below that. My problem is that I want 2 of the logos aligned to the left and close to centered up/down inside the header div, then I want the main masthead logo centered in the middle of the header div up/down and left/right, and finally I want the other 2 logos floated right and centered up/down. I'm trying various methods and the best I have so far shows the middle masthead logo not correctly centered, and the 2 left logos floating left, but the far 2 right logos do not show up at all. The page is located at http://www.atlanta-web.com and I'll past all of my code below. index.html snippet Code: <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#000080" alink="#800000" leftmargin="0" topmargin="5" marginleft="0" margintop="5"> <script type="text/javascript" src="fsmenu_commented.js"></script> <script type="text/javascript" src="menuset.js"></script> <link rel="stylesheet" type="text/css" href="listmenu_h.css" /> <link rel="stylesheet" type="text/css" href="listmenu_h_settings.css" /> <style type="text/css"> #navitoolbarcontainer a { line-height: 16px; } </style> <div id="header"> <img class="award1" src="nahb.gif" /><img class="award2" src="gahomebuilders.gif" /> <center><img src="Jhomes.jpg" /></center> <img class="award3" src="southernlivingmember_sm.gif" /><img class="award4" src="lobb.gif" /> <!-- START TOP TOOLBAR --> <!--<div id="heightcontainer"></div>--> <div style="width: 100%;" id="navitoolbarcontainer"> <div style="margin: 0px; padding: 0px; width: 100%;"> <div id="navitile" style="width: 100%;"> <ul class="menulist" id="listMenuRoot" style="height:22px;"> <li style="margin-top:0px;"> <a class="gt" href="index.html" style="font-size: 10px; font-family: arial,verdana,helvetica; text-decoration:none;"> <b>Jeffery Homes Inc.</b> </a> <ul id="listMenu-id-1"> . . . NAV Bar HTML Cut for space sake . . . <div style="margin-top: 0px;" id="lightgrey"> </div> </div> </div> </div> </div> <div id="content" style="width: 100%; background-color: #6B6637"> <div id="slideshow"> <object width="600" height="350"> <param name="movie" value="slideshow1.swf" wmode="transparent"> <embed src="slideshow1.swf" width="600" height="350" wmode="transparent"> </embed> </object> <br /> <br /> </div> </div> <!-- END TOP TOOLBAR --> css file1 Code: @charset "UTF-8"; a.gt{ text-decoration:none} a.gt:hover{text-decoration:none} a.gt:visited{text-decoration:none} a.gt:link{text-decoration:none} a.gt:active{text-decoration:none} #header { margin: 0px; padding: 0px; width:100%; min-width:830px; width:100%; background-color: #AFAB73; position: absolute; left: 0px; top:0px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 0} .award1 { float:left } .award2 { float:left } .award3 { float: right } .award4 { float: right } #navitile{width:820px; margin-left:0px; height:22px; background-repeat:repeat-x; position:absolute; color: #F2FFE4; left:0px; top: 0px; font-family:arial,verdana,helvetica; font-size:8px; white-space:nowrap; } #navtile a{ color: #F2FFE4 } #navitoolbarcontainer{width:100%; min-width:830px; width:100%; height:22px; position:absolute; top: 100px; left:0px; font-family:arial,verdana,helvetica; font-size:8px; background-image:url('background_end_fixed.png'); background-repeat:repeat-x; white-space:nowrap; margin:0px; padding:0px; z-index:1000} #navitoolbarcontainer a{color: #F2FFE4} #content {margin: 0px; padding: 0px; width:100%; min-width:830px; width:expression('100%'); position: absolute; left: 0px; top: 122px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 1} #slideshow { margin: 0 auto; position: relative; top: 30px; height: 480px; width: 600px; } #heightcontainer{position:relative; height:17px; width:99%; background:transparent;} #globalform{padding:0px; margin:0px} #lightgrey{text-align:left; color: #F2FFE4; text-indent:5px; background-image:url('background_end_fixed.png')} #lightgrey .inputglobal{font-size:9px; font-size:expression('8px'); text-align:left; margin-top:0px; margin-left:2px; background-repeat:no-repeat} #lightgrey .inputglobal:hover{font-size:9px; text-align:left; margin-top:0px; background-color:#ccc} #lightgrey a{font-family:sans-serif; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; top:1px; top:expression('-2px'); position:relative} #lightgrey a:link{text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px} #lightgrey a:visited{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px} #lightgrey a:active{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px} #lightgrey a:hover{display:inline; text-decoration:none; color:#fcf2ca; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px} A lot of this css is for the menus that i found on a site and have highly modifed, but I've used class/id's for most of everything so it should be easy to see what is what. Thanks for any help that you all can provide. This site has been a godsend for getting help. I'm just starting to get into HTML / CSS and I had a question I was hoping someone would be able to give me a hand with... The page I'm working on has a logo in the top left corner that gets cut off when the browser window is reduced to a smaller size. The left navigation bar, however, always appears in the browser window, regardless of size. I'd like to have this left side "anchor" to include the logo so that it always appears. Please let me know if you require additional information or if I have not described the issue clearly enough. Thank you! |