|
HTML - Problem With Header Div Size
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. Similar TutorialsHey guys im sure this question has been answered, but having tried a large majority of the answers none seem to work. I have been building websites using my laptop (15 inch screen) after upgrading to a 17 inch screen im getting problems with the web page. It now has a horizontal scroll bar which i find rather annoying as do many other people that visit my sites. This is what it looks like at the moment on larger screens what i need to find out is how to make it so the page fits within the parameters of the screen without a horizontal scroll bar. this is the code that i used to make on of my sites, if possible could some one tell me where to maybe edit the string of html to get it to fit all screens? <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> </head> <body style="color: rgb(255, 255, 51); background-color: rgb(0, 0, 0);" alink="#ffff33" link="#ffff33" vlink="#ffff33"><div style="text-align: center;"><img style="width: 750px; height: 225px;" alt="" src="http://i488.photobucket.com/albums/rr248/kingofkingspoker/PCKBIGBANER-1.png"><br> <big><br> Home | Investigations | Gallery | Locations | The Team | Methods | Contact us<br> <br> </big> <table style="width: 800px; text-align: left; margin-left: auto; margin-right: auto;"> <tbody> <tr> <td style="text-align: center;"> <div align="center"><font color="#000000" size="+1"> <marquee bgcolor="#FF0000" direction="left" loop="99999" width="75%"><strong>We are accepting private bookings. Please contact Tim Harris on 07533119768 or email Tim at tim.paranormalknights@yahoo.co.uk</strong></marquee> </font></div> </td> </tr> </tbody> </table> <big><br> </big> <table style="background-color: rgb(0, 0, 0); text-align: left; margin-left: auto; margin-right: auto; width: 1312px; height: 459px;"> <tbody> <tr> <td style="text-align: center; vertical-align: top;"> <div style="margin-left: 40px;">Hello and welcome to Paranormal Knights Cymru. The group was founded in 2008 with the soul intentions of finding answers that we the team have been searching for, for all our lives! We are a unique team that reside in the south Wales area and have many many years of paranormal investigating experience between us. The things that make us such a unique team of paranormal investigators is that we take things to a higher level, we go to such a high level that other teams are left stranded whilst we soar above and beyond the grave. We use techniques such as Clairvoyance, Clairaudiance, Clairsentience and also the scientific approach with electronical equipment such as EMF detectors, EVP recording devices, still camera's and also video camera's. We also use non electrical equipment such as dowsing rods, oujia boards, glass swirling and table tipping. All of these methods are tried and tested and proven to be the main source of communications with the paranormal phenomena. To get an understanding of what these techniques entail and how they work please check out the methods page. <br> <br> So with that said will you be able to put the fear of the unknown behind you and join us in our quest for answers?<br> <br> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span class="Apple-style-span" style="color: rgb(51, 0, 153);"></span></span><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span class="Apple-style-span" style="color: rgb(51, 0, 153);"></span></span></div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td style="text-align: justify; vertical-align: top;"><img style="width: 498px; height: 253px;" alt="" src="http://i488.photobucket.com/albums/rr248/kingofkingspoker/Margam_Castle.jpg"></td> <td></td> <td></td> </tr> </tbody> </table><div style="text-align: left;"><br> </div> <br> </div> </body> </html> 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. 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 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, 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;
}
Hey I made the site princeoflayouts.com, and am having trouble with my last step. The resolution size of the screen. On my laptop the website looks perfect, but then on my schools computers the whole web site is out of whack. I tried to mess with the margins but that didn't help the issue. I used dreamweaer 8 to build the site and have seen the section where it has screen resolution but it only allows me to click it and nothing can be applied or changed. If you have any advice please tell me. I have a book that helped me through the whole process but this section was not in there. Thank You i have created a page, and i will chk that in firefox, the height of that page is not fixed, but i go through with chrome, the page size is fixed with browser? how to avoid this??? this is the page template code #panelIMG{ position:absolute; width:844px; height:652px; z-index:1; left: 203px; top: 14px; background-image:url(template_bg.jpg); background-repeat:no-repeat; } 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. 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 Hi all, I'm not sure if I'm posting in the right place but I have an issue with Internet Explorer 7. Apparently, when user's are looking at my website (it's internal) with IE 7 - the size of the font shrinks to 2 (or even lower). the site looks ok on fireFox/older version on IE. can anyone advise how to fix it? THANK YOU! Hi there, I'm curious of how to code a fix display size of html files. If I were to set the size (when launching) as a monitor size 1024 x 768, which means users don't need to scroll up and down anymore. It will exactly fit into the screen. How should I go about doing it? Thanks and cheers........... i have 2 frames in my parent frame say 1.htm ie left frame and 2.htm ie right frame now this 1.htm is quite a long frame and has a scrollbar and 2.htm is a short one i dont the scroll bar beside my frame 1 but want it to be for my entire parent window ie i wont to scroll both my left and right frames together how do i do that Hi! I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window. How can I make it do that? I did it once but just can't seem to remember how I did it. Thanks All: Working to update a previously designed website. Original design uses an <img> tag to create a top banner and another <img> tag to create a side banner. In each case there are mapped coordinates on each banner as links for the subsequent pages. Basic page design is as follows: Code: <table>
<tr>
<td>
<img usemap="Map1">
<map name="Map1">
<area>
<area>
<area>
</map>
</td>
</tr>
</table>
<table>
<tr>
<td>
<img name="Map2">
<map>
<area>
<area>
<area>
</map>
</td>
<div>
***PAGE CONTENT***
</div>
<tr>
<table>
The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages to be much longer or shorter than others. This causes some inconsistencey in the relationship between the side banners height and the page content. In other words in some cases the banner is exceptionally longer than the page content and the reader must scroll past significant "dead-space" before being brought to the lowest mapped links in the side banner; or... ...in some cases the side banner is significantly shorter than the page content causing the banner image to appear "poorly-fit" to the page design. I considered altering the 2nd table instance in the above design so that the banner is carried in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the image to size relative to the <td> tag carring the content.... Code: <table>
<tr>
<td>
<img usemap="Map1">
<map name="Map1">
<area>
<area>
<area>
</map>
</td>
</tr>
</table>
<table>
<tr>
<td size="100%">
<img name="Map2">
<map>
<area>
<area>
<area>
</map>
</td>
<td size="100%" >
<table>
***PAGE CONTENT***
</table>
</td>
<tr>
<table>
The problem I've found with this is that as the content size causes the image to "flex", either readablilty or image quality or both are effected, AND the mappings become inconsistent as the image coordinates constantly change. I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there are better ideas I'm overlooking. One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a "defalut" page size that would never be smaller than a standard for the side banner. Problem: larger page sizes are still a problem as are the changing map coordinates My other idea was to return to the original page design listed first above and again settle on a standard side banner "height"... ...any page that was significantly longer than that height would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to the additional content. Problem: ...possible complications splitting content... Benefit: ...consistent page design that allows a consistent side banner with navigable links... Question for the group: Does this sound reasonable? Are there better alternatives I am overlooking? THANKS IN ADVANCE FOR ALL INPUT!! 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. I'd like my div to automatically expand when there is more text but I don't want it smaller than a certain size. Is this possible? Please look at the following site to see what I mean and click on the Writing tab. (The right hand div is what I'd like to fix--you see the text is cut off.) Thank you so much! http://rkgrant.110mb.com/rkghome2.html can html set the size of a page? such as 5" x 7" ? if so, what are the tags? Hello, im trying to set my screen size with a div tag to 1024x768 any help would be very helpful and i'd be very thankful |
|||||||