|
HTML - Header Problem
my header is in line with the background on IE but not FF / OPERA etc..
what can i do to solve this? www.anastaciadreams.com Similar TutorialsHi, I'm not an expert with html and css and I'm having a problem with the header pushing down from the top. How can I fix this..and are there any other problems with my code? Thank you in advance! Here's my html Code: <!DOCTYPE html> <html> <head> <title>SevoDesign</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="headerbg"></div> <div id="footerbg"></div> <div id ="wrapper"> <div id="header"> <h1><a href="#">sevodesign</a></h1> <ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">social networks</a></li> </ul> </div><!-- end header--> <div id="content"> <div class="mainpost"> <div class="postheader"> <h2>Hello World</h2> <h3>July 31, 2011</h3> </div><!-- end postheader--> <div class="postcontent"></div><!-- end postcontent--> </div><!-- end mainpost--> <div class="mainpost"> <div class="postheader"> <h2>Hello World</h2> <h3>July 31, 2011</h3> </div><!-- end postheader--> <div class="postcontent"></div><!-- end postcontent--> </div><!-- end mainpost--> </div><!-- end content--> <div id="sidebar"> <div id="search"> <div id="searchinput"> <a href="#"><img src="images/searchicon.png"/></a> </div><!-- end searchinput--> </div><!-- end search--> <div id="sidebox"> <div id="inside"> <ul id="links"> <li>Register</li> <li>Login</li> <li>Entries RSS</li> <li>Comments RSS</li> <li>WordPress.com</li> </ul><!-- end links--> </div><!-- end inside--> </div><!-- end sidebox--> </div><!-- end sidebar--> </div><!-- end wrapper--> </body> </html> and Here's the CSS: Code: body {
margin: 0px;
background-color: #eeeeee;
}
#headerbg {
top: 0px;
position: relative;
height: 107px;
width: 100%;
background-repeat: repeat-x;
background-image: url(images/header.jpg);
}
#wrapper {
top: 0px;
height: 807px;
width: 960px;
background-color: #fffd89;
margin-left: -480px;
left: 50%;
position: absolute;
}
#footerbg {
top: 660px;
position: relative;
height: 40px;
width: 100%;
background-repeat: repeat-x;
background-image: url(images/footer.png);
}
#header {
background-color: #b2ffce;
top: 0px;
position: relative;
height: 107px;
width: 960px;
}
h1 a {
text-decoration: none;
color: white;
padding: 0px;
margin: 0px;
top: 0px;
position: relative;
float: left;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 36px;
font-family: rockoultraflf;
}
#nav {
position: relative;
top: 15px;
width: 400;
float: right;
padding: 0;
list-style: none;
}
#nav li {
float: left;
}
#nav li a {
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0px 1px 2px #252525;
font-size: 18px;
font-family: rockoultraflf;
display: block;
padding: 8px 13px;
text-decoration: none;
color: white;
}
#nav li a:hover {
text-decoration: underline;
}
I have to insert javascript between <Body> & </Body>, of a HTML page. The page, however, is a header and only contains a <Body>. There is no </Body>. So, the script does not work. Any thoughts on how I can resolve this? - b PS: Forgot to mention that the javascrip does work. I've already tried it on a test HTML page that does have <Body> & </Body> and the script does work. I am wanting to get the header image div to go to resize based off of the window and go to the edges of the browser and be at the top with no space. No matter what I do the image won't resize and the image appears to have a border even though I do not have one set. :wtf: here is a link http://www.deejayoctane.com/dev/ any help would be appreciated. Thanks Guys! 8) Hi all, well, i have a problem with the header in my blog. The address is blog.groffudd.net. When i open it with Mozilla Firefox everything is ok, but with ie7 my header hides the title of the first article... i can solve the problem putting
Code: <br /><br /> after the header, but then in firefox the space between the content and the header becomes too big. Is there a better way to control this space in the both browsers (btw i've put my header in table like you can see from the source)? Thank U in advance! Sry for this explanation, but my english is poor. hi guys, I'm basically wanting to have a H1 and a Google AdSense custom search box in the same div. The H1 needs to be left aligned, the search box needs to be right aligned. So, I did the following with span tags: Code: <span style="float:left;">Stainless Steel Kitchen Sinks</span> <span style="float:right;">AdSense search form</span> <br style="clear:both;" /> Now, the header is not big enough and things look cramped up. Please check out: http://topaussieflorists.com/temp3/ I would really appreciate any help on this! Thanks guys. why does my local copy of my site look like this http://img106.imagevenue.com/aAfkjfp...m_122_61lo.JPG but after I upload it to my webserver at http://shellsite.okinawapc.com it looks correct?? Hi everyone, I am having a basic problem with a header for my site. The header template is a 3 column 4 row table, with various graphic pieces plugged into each cell. On the second row, I have a graphic that is as wide as the 2nd column plus the 3rd column, and I used the colspan command so it should take up both columns. But, there is a goofy gap to the left of it! Can anyone help? The website is www.precisionpythons.com Thank you! JonV I am facing problem related to header menu. Please see attached file for clarification. Please suggest how i correct this error Hey, im trying to find out why the header on my website isnt at the top of the page. it also moves sometimes even though the code appears to be all the same. the address is www.themonsterbox.com thanks in advance for any help. hi, guys new here and to html. i am writing my code as, <div class="header"> Drums</div>, for example, now my trainer wants it in a span class so i can change the font and color etc, what is the next step to take? hi, when i open web in internet explorer i see web without header and footer. then open with firefox i see web without header but i see footer. How to fix this problem and then i open web with every explorer i can see good web. sorry for english language. web url is www.xxlpramogos.lt Hi guys, I've done design work before, but the website I just finished is my first stab at doing html & css by myself and I just have one problem that isn't working. There is a gap a few pixels high between the top images in my header and the bottom of the header where the navigation is. This gap doesn't appear in Firefox or Safari, only IE. Does anyone know how to fix this. The site can be seen on my company's test server at www.worthy-llc.com/pfpk. Thanks so much, it's a charity site and I want to make sure it gets done correctly. Brendan Hey guys just need a little help in getting a google adsense ad in the top right hand side of my website next to the header image.. Help is much appreciated thanks. My site http://www.prized4you.com Thanks in advanced Hi people. hope everyones ok http://www.airportcarhireliverpool.co.uk/ is my website and it looks fine on firefox but when i go to IE the nav is too low. i really dont know why and its doing my head in. also when we use ie 7 it re-directs to youtube? whattttttt? lol please help me!!! Thanks!! Im hoping to put a animated picture on top of a header, but not sure how... All help appreciated Heres some of my code: <html> <body background="black.jpeg"> <head> <div id="header"><h1>Faed's Money Making Guide 2009</h1></div> <div id="links"><ul> <li><a href="links 1.htm"></li> Main</a> <li><a href="mainpage.html"></li> Introduction</a> <li><a href="page1.html"></li> Agility</a> <li><a href="page2.html"></li> Construction</a> <li><a href="page3.htm"></li> Cooking</a> <li><a href="page4.htm"></li> Crafting</a> <li><a href="page5.htm"></li> Farming</a> <li><a href="page6.htm"></li> Fletching</a> <li><a href="mainpage.htm"></li> Fishing</a> <li><a href="mainpage.htm"></li> Firemaking</a> <li><a href="mainpage.htm"></li> Herblore</a> <li><a href="mainpage.htm"></li> Hunter</a> <li><a href="mainpage.htm"></li> Magic</a> <li><a href="mainpage.htm"></li> Mining</a> <li><a href="mainpage.htm"></li> Prayer</a> <li><a href="mainpage.htm"></li> Ranging</a> <li><a href="mainpage.htm"></li> RuneCrafting</a> <li><a href="mainpage.htm"></li> Slayer</a> <li><a href="mainpage.htm"></li> Smithing</a> <li><a href="mainpage.htm"></li> Summoning</a> <li><a href="mainpage.htm"></li> Theiving</a> <li><a href="mainpage.htm"></li> Woodcutting</a> </ul> </div> hi..hopefully someone here will know a solution to my problem. i have made a page with a flash logo in the header section. now in ie7/firefox the page looks just about right. however in ie6 the flash logo appears above my page instead of where it should be. now i realize this may be because of how i have implemented the flash file. but i cant seem to figure it out..no matter what i do. i know i have some errors to correct in my code but none seem to be related to this specific problem. the problem is easy to see by comparing ie6 to ie7 if anyone can point me in the right direction it would be greatly appreciated. the site in question is www.nwotradingcards.com thanks for your help On my website www.fresh-lobster.co.uk my footer displays 3 lists with various links, in a horizontal line (ul is floated left in the css). But the way i created the list headers was to put a the list header within an LI so it would format (margin etc) with the rest of the list. ul li --list header-- /li li --list item -- /li li --list item -- /li /ul But when viewing in non-css mode, it displays a disc like any other element in an LI. I tried using the LH (which is included in html3)... ul lh --list header-- /lh li --list item -- /li li --list item -- /li /ul But IE doesnt like it (even though Opera does). Is the LH element still functioning? or is there some other way of doing it. Thanks Both work fine in Firefox. Code: Code: <style TYPE="text/css">
<!--
#rotate
{
background: url(/images/banner/players/rotate.php) no-repeat center top;
color: inherit;
width: 967px;
height: 202px;
}
-->
</STYLE>
<table width="967" height="202" id="rotate" style="cursor:pointer;" onclick="location.href='';">
<tr valign="top">
<td width="222"> </td>
<td width="733" style="padding-top: 9px">
<script type="text/javascript"><!--
google_ad_client = "pub-8692420629844560";
/* 728x90, created 10/7/10 */
google_ad_slot = "0662884499";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table>
In IE, works fine on site - ad is placed perfectly: In forums, using same code, the ad is misplaced slightly, and shows more of the white space from when the banner was designed, as a placeholder for ad: Banner design, w/ whitespace - creates a 1-px white border around ad: Any ideas what could be causing the inconsistency? As far as I know, it's IE only. I have a header on top of my profile http://stevespeeps.tumblr.com/ However is there any way I can have it on top like that with like a facebook twitter & myspace icon with a navigation bar like message pics etc The way I have it set up is just an image as a header & it seems thats the only way I can figure out how to put it up there. I tried a div code & did the slice tool thing but nothing was aligned & did not work Any help will be greatly appreciated =) |
|||||||