|
HTML - 100% Page Width Layout
I'm trying to make a layout that takes up 100% of the page, but isn't fixed. So it moves whenever the browser is resized.
However I can't get the code to work for the footer and the two inner divs. Is how I want it to look like. The white and light gray and the two content boxes. The black are the header and footer which need to be at the absolute top and bottom, respectively. The dark gray are both static images. The bottom dark gray one needs to be positioned at the same place as the footer background. The red are both content boxes that need to be centered in the middle of the light gray div and the white div. And lastly the blue is an image that needs to stay static right next to the light gray div. Anyone know how I would go about coding it? Or if anyone is willing to code me a simple block template I'd really appreciate it. Thanks =] Similar TutorialsI am currently working on a website. It has been a while since I created websites professionally, about 10 years infact, so although a lot of it is coming back to me I can't seem to get around this problem... A friend has created a template to use for all our pages and has sent me some pages to check. They appear fine on both her computers, of differing screen sizes, but on my screen I have to scroll right across to see what's on the right-hand side. If I didn't know it was supposed to be there, I wouldn't have known to look for it IYKWIM?! Why isn't the page adjusting to fit my screen width automatically? It seems it is doing on my friend's screens. But not on mine. She hasn't specified a width, ie. by way of placing the entire contents of the page in a table. So as far as I can remember, from 10 years ago, it should automatically adjust. Is that still correct? I have tried using her HTML and amending it by putting the whole page in a table with a width of 700 pixels, which should fit on my screen, but it didn't make any difference. Any ideas?? Hi first tech question in ages... Anyway... I've seen a bunch of pages designed at 962px in width. Anyone know where this figure comes from? For example when we all used to design at 800px I would set width at 740px to cater for all browsers scroll bars etc. Is this how the new 962px figure is derived? Hey so how come my div wont go across the whole page width? my code: Code: <style type="text/css">
#adminbar {
background-color: #464646;
background-image: -moz-linear-gradient(center bottom , #3F3F3F, #464646 5px);
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
color: #DDDDDD;
font: 11px sans-serif;
height: 28px;
position: relative;
width: 100%;
z-index: 99999;
}
</style>
<div id="adminbar">
<p> hi there</p>
</div>
Here is what it looks like: Please help, i would greatly apreciate it. I have created a website, and its aligned in a table Is there anyway I can make the height and width determined by the size of the screen without distorting the image? I'm fairly new to this, Thanks. So i just added some google adsense floating ads to my website. They looked pretty nice where they were BUT when i tried it in a thin screen, it falls. So how do I define the border of when the horizonal scrollers appear? BTW: the site where I need to define width is http://akkeonline.com Thanks in advance, AkkeDaBest Hi, I'm kind of new to HTML and I've been trying to make a website that has 3 frames in it. One frame extends across the entire top of the page and has about a 100 pixel height. The second frame extends the entire length of the page, but only has a width of about 200 pixels. Which leaves the rest for the thrid frame. I'm doing this so that frames one and two don't change and all of the content changes in the third frame. I'm running into an issue, because I cannot figure out how to get one frame extend across the top and one fram extend the length of the page. I can do one or the other but not both. is there any way that I can configure the columns and rows so that the page takes on this look? Thank you. here is a visual of what I'm trying to do: Code: ____________________ | 1 | |__________________| | | | | | | | 2 | 3 | | | | -------------------- I'm still extremely new to coding in html and I'm trying to figure out how to code in all the divides and space them out where I want to but I can't figure out what makes the menus and ad space and main body conform to the shape it is in on this code: And apparently I can't fit it all into a post but the web page is he http://www.huntingtonnews.net If anyone knows about how to space divides, menu bars, and such can you please look at that page and view source and give me a hint? Thanks... Codeguru hello Every can any one tellme How can i make a webpage open in Fixed height and Width which is to be opened by a Hyperlink Example : like when you click On MORE link From The Smilies in this Forum it open a Small Window Resizeble Window Hi all, I'd really appreciate some help on this one. I have a program which outputs very long strings of text to a HTML page. At the moment the text stays on one line resulting in an annoying horizontal scrollbar. How do I get the page to automatically format the text so that it all fits within a standard width, and so there's no horizontal scrollbar? Regards, Ruth Hi there, Theres a page on my website that appears fine when offline (without google adverts) but when online it messes up the page layout. Would appreciate any help, not sure if the CSS file is causing the problem or the html/css webpage. http://www.paid2review.co.uk/links.html Thanks for any help. Matt I am reworking my webpage http://www.webficsdesign.com/start.html I can not get my tables to lineup correctly. Here is the coding I am using. Please tell me what I am doing wrong and I will love you forever! <tr> <td width="147px" height="143px" background="images/08.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:90px;padding-bottom:90px;"> <div style="padding-right:15px;padding-left:25px;">NEWS NEWS NEWS<br> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR></div> </td> <td width="505px" height="143px" background="images/09.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:90px;padding-bottom:90px;"> <div style="padding-right:15px;padding-left:15px;">INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR></div> </td> <td width="148px" height="143px" background="images/10.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:10px;padding-bottom:10px;"> <div style="padding-right:15px;padding-left:15px;">SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR></div> </td> </tr> any help on what I am doing wrong would be great. I have just started to teach myself how to do framing like this, but I cannot figure out how to get everything to lineup correctly. Hey guys I asked a similar question before about the best way to go with page layouts and the only response I got was to go with one that will properly change with resolutions and browsers, etc.. I am learning and want to develop practical and sound habits from early on. If any of you would be willing to throw me out some good pointers, etc.. That would be great. I'm looking to do a layout with a horizontal header section and below this 2 or 3 columns of varying widths. This is rough but hopefully you get the idea. In software programming languages you can apply layout to a software program and i'm trying to apply the same philosiphy to web sites. I've been using just <div> tags with settings of its attributes (width, height, floats & margins etc..) to get what a layout i want and recently just came across that you can use tables to contstruct a layout aswell. which idea is better and which is better design that allows future extensibility? cheers I'm quite new to the world of HTML and actually know very little about this stuff. I'm trying to do a web page for my friends company but I'm stuck. I have made my body and "menu" parts to expand according to the text I enter but it screws my layout up Maybe some one could take a look and say what I have done wrong. For me it looks like body and menus are dependent from each other, if I enter text to menu1, body and menu2 also rescale themselves... Here is the link to the problem, you can see what I want by clicking on the link "Picture of the design I want" Hi, I'm in the middle of developing a infosite to work alongside our retail site. The infosite is going to maintain the basic layout of our current site (www.muddypuddles.com) with Header, footer, left menus and right buttons, which move with the size of the page. However the primary content in the middle of the page is going to become articles, etc. On our front page I'm going with a single horizantal box around 250px in height and I want the size of the box to expand depending on the resoultion of the page. Below that I am placing 2 vertical boxes side by side which I also want to expand depending on resolution. I think this is most likely CSS related, but can someone please advise me on how to float these boxes into position first of all, and then what is required to make these boxes expand with the screen size. Thanks in advance Man, I am trying to continue to work in divs instead of tables and it just keeps getting more frustrating. IE6, IE7, Firefox, different screen sizes, different screen resolutions. Can someone please help me write code that is as cross-browser/resolution/screen size capable as possible? Much appreciated~ I need help with my layout + putting content on my page + putting wordpress on my page and editing it to match someone help please? I recently updated my homepage to include more text, and moved some of the image buttons around. I noticed however, that if I view the site and increase the size of the font (control+mouse wheel) it also increases the amount of spacing between the buttons, enough to move one of the images to the next row. Is there any way to stop these images from moving? The site is he http://www.bacchanalpromotions.com The current code is written like this, I think the margin tags are what gets increased when the font size goes up, but I don't know for sure... I tested on Firefox 3.6, at 1400x900 resolution. Code: <a href="booking.php?page=thss"><img height="100px" width="123px" src="performers_images/home-circus.png" onmouseover="this.src='performers_images/home-circus2.png'" onmouseout="this.src='performers_images/home-circus.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=fire"><img height="100px" width="123px" src="performers_images/home-fire.png" onmouseover="this.src='performers_images/home-fire2.png'" onmouseout="this.src='performers_images/home-fire.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=sideshow"><img height="100px" width="123px" src="performers_images/home-sideshow.png" onmouseover="this.src='performers_images/home-sideshow2.png'" onmouseout="this.src='performers_images/home-sideshow.png'"alt="" /></a> <a style="margin-left:13px" href="booking.php?page=stilts"><img height="100px" width="123px" src="performers_images/home-stilts.png" onmouseover="this.src='performers_images/home-stilts2.png'" onmouseout="this.src='performers_images/home-stilts.png'" alt="" /></a> I need to find all erors in this page, it is for a school teacher and it needs to work properly, the title and stuff will be posted here, all and any corenctions are welcome : ) Code: <!--
start border and main background
-->
<HTML>
<div style="border-left:120px solid #000000;border-right:120px solid #000000;with:100%;height:100%;">
<title>Mr. Rodgers Website</title>
<BODY background="BG.jpg" style="margin:0px;">
<!--
end border and main background
-->
<!--
Static BG image
-->
<head>
<style type="text/css">
body
{
background-image:
url('BG.jpg');
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>
<!--
done static images
-->
<!--
nav bar and head
-->
<style type="text/css">
h2 {background-color: black}
</style>
<h2 align="center"><font size="4" face="times" color="white">
<font size="6">Welcome To Mr Rodgers Website</Font>
<BR>
| <A HREF="index.html">Home</A> | <A HREF="Projects.html">Projects</A> | <A HREF="skdl.html">
schedule</A> | <A HREF="Extracredit.html">Extra Credit</A> | <A HREF="wksts.html">Worksheets
</A> | <A HREF="links.html">Links</A><BR></H2><BR>
<BR>
<!--
end navbar and head
-->
|
|||||||