|
HTML - Help With Page Layout
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 Similar TutorialsI 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. 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 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 =] 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. 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 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" Please tell me how I can get the login to sit directly under the menu on the following site: http://www.smilescanning.com/default.asp By the way, I am using ssi so I can't put the login into the menu div because the menu shows up on all pages and I just want the login to show up on the default page. Thanks~ 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> While I was searching for an HTML forum to join, I came across a statement in another forum that said using tables to layout a web page is incorrect -- even stupid. Is this true? I have been reading a book entitled "HTML, XHTML, and CSS Bible" which devotes an entire chapter (chapter 11) to "Page Layout with Tables" and continually refers to page layout within Tables and Nested Tables. This is the method that I have been using to create my first web pages. Do I need to re-think this and change the way I layout my pages? Please enlighten me... Thanks, JFB 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
-->
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? got a very basic page as this stuff is super new to me, not sure where to put or ask about this ... when the page is resized or when the bookmarks tab comes on in firefox browser my graphics all move around , didn't use to do this but i'm not sure. happens when u resize the actual page. everything kinda lines up to fit in the new space --- i really dont know -->loaded page up temporarily http://www.legendofthegknight.com/test/index.html Hello! I'm kinda stuck trying to get this idea on HTML for my web site: www.luzvenidera.com/webnueva/indexinframe.htm This is the thing: I want the content to appear in the main rectangle, and have it resize automatically to the content. I have been able to do this with an inframe and using a specific script. Next to the content there are cells with an image that should go on the top of each cell and a background tiled image that continues the pattern. At least on my computer, the current code works in IE7, but in FF3 the image inside the side cells ends up showing in the middle instead of the top. I have also read that using inframe isn't really a good idea for the main content section of the page, for a variety of reasons including that it's not search engine friendly, so I'm trying to figure out an alternative.. I'm stuck here. If I make an entire frame beneath the navigation bar and just add the content there then the scroll bar would only show up for that frame, that is, beneath the navigation bar. I want the whole page to have the scroll bar, I don't want the header and navigation bar to stay in place while the rest of the content is scrolled as the background in the sides would break. My questions would be: what should I do to make it so I have the content in a frame, having it expand so the content would fit, without screwing up the side bars and making the whole page scrollable to read the content? I really don't want to make an instance of the whole page tailored to each section's content. I'm also getting ActiveX warnings in IE that prevent the inframe to show up unless it's manually permitted.. if I'm forced to use inframe, is there any way to prevent this? I hope I'm being clear, and would really appreciate any advice! I'm new to most of this stuff, and I got a big headache trying to figure this one out! Thanks in advance! so im a silly little noob who is learning html, but i want to know how you layout your webpage with a defined width and have it all center in the webpage at all times. <www.w3schools.com <----not unlike this webpage Basically I would love to see the code for just the page centered like that and maybe a grey background to make it very obvious to me. Help a noob out! Just wondering if someone out there is able to quickly spot the horrible quirk in the HTML on this page: www.vergola.co.nz/contact.htm It renders fine in Firefox and Safari, (ie the page content is at the top of the window) but in IE the content appears way down the page with a large white space above it. ( I hate IE so much) The page has been edited by numerous people of varying degrees of knowledge so the whole page is a bit of a mess... Thanks so much! The layout of this page I'm making requires a centered table, 800 pixels wide and 100% high. I am having huge problems making it fill the entire height of the page though, it just stops rather than going right to the bottom of the page. It's a 4.01 transistional compliant page if that's relevant. Here's a link to the page. Here's a link to the page (apologies for the file size) link to page I want the dark green center section, and the two side cells with tiled graphics to extend right down to the bottom of the page, regardless of height. The center table with the graphics can stay where it is or vertically center, I don't mind about that. I also need it to have no vertical scrollbar when it's viewed fullscreen. If I remove the doctype, it works fine, but I'm wondering if there's a way to have it vaild for that doctype and still look ok? I've tried everything I can think of and am not turning up anything useful with web searches, if anyone can tell me where I've gone wrong and if this is possible to fix in html, I'd really appreciate it. I can't use CSS, and the doctype has to be as it is, because that's what the specs say (it's for an html class). Thanks for any help. guys, Im hoping someone can help me out. i am a flash designer and my flash movie opens in a 1024 x 680 fixed window but my index page is html ( a page with a picture and an "enter here" button and im trying to get this jpg to fill the full horizontal width of the screen in all resolutions. it looks fine @ 1024 x 768 but of you go higher, obviously you cant make the image wider or it will distort so i think the layout will have to be sectional ( tables perhaps or divs breaking the image into sections or something). i think the jpg has to be chopped up. if you see the picture, you will get the idea. i want it to fill the width of the screen regardless of screen resolution. im not sure what to do, i need so serious design help. I know that some of you can prob do this in 5 minutes but im trying to learn. the problem is that my site is complete but i cant launch until my index page is done. i dont know what to do. im new to html but am a flash programmer. i just want a index page to launch my site but have it look ok regardless of screen resolution / size. can someone take a look at this jpg and perhaps show me what to do so that my picture will always be to the far left and the enter button / box it is in will stay to the right. I can really use some help. i am attaching my image and also an example url that shows a site where the intro page does this. the image always stays to the left and everything keeps proper postion. i really can use some helpsample_&_image.zip what am i doing wrong? Quote: <!--DON'T DARE TO REMOVE THIS--> <!--This layout was made by Prodigy with a huge help of </b><a href="http://st.pcaworld.net/"><b>Levus</b></a>.</div> /*these are the main properties of your layout */ body { background-color: #DD0000; background-image: color: #000000; } /*these are the properties of a table cell */ td { border: 0px; vertical-align:top; } /*these are the properties of a link */ A:link { color: #000000; text-decoration: none; font-weight: ; cursor: ; } A:visited { color:#000000; text-decoration: none; font-weight: ; cursor:; } A:hover { color:#000000; text-decoration: underline; font-weight:; cursor:; } /*these are the properties of the banner */ #banner { background-color: #DD0000; text-align:center; height:198px; width:100%x; border:1px solid #000000; } /*these are the properties of the content */ #content { float:left; background-color: #DD0000; width: 70%; height: 100%; color:#000000; } /*these are the properties of the right menu */ #rightmenu { float:right; background-color: #DD0000; width: 15%; height: 100%; color:#000000; border: 0px solid #000000; border-top: 0px solid #000000; } /*these are the properties of the left menu */ #leftmenu { float:left; background-color: #DD0000; width: 15%; height: 100%; color:#000000; border: 0px solid #000000; border-top: 0px solid #000000; } /*these are the properties of a category on a menu */ .catagory { background-color: #DD0000; color: #000000; font-weight: bold; border: 1px solid #000000; } /*these are the properties of a heading (page title) */ .heading { background-color: #FF0000; color: #000000; width: 90%; font-weight: bold; border: 1px solid #000000; } /*these are the properties of the heading on the disclaimer */ .dheading { background-color: #FF0000; color: #000000; width: 71%; font-weight: bold; border-top: 0px solid #000000; border: 1px solid #000000; } /*these are the properties of the disclaimer */ #disclaimer { float:right; background-color: #FF0000; color: #000000; width: 100%; border-top: 1px solid #000000; border: 0px solid #000000; } </style> </head> <body> <!--only edit under here--> <!--this is the banner--> <center><div id="banner"> <center> <img src="http://i4.tinypic.com/63n130g.png"> </center> </div></center> <!--the banner end here--> <!--left menu starts here--> <div id="leftmenu"> <div class="catagory"><center>Layout Changer</center></div> <div class="catagory"><center>Pokemon</center></div> <a href="pokedex.html"><center>Pokedex</center></a> <a href="POTW.html"><center>POTW</center></a> <a href="FanArt.html"><center>Fan Art</center></a> <div class="catagory"><center>Other</CeNtEr></div> <a href="sigs.html"><center>Free Sigs</center></a> <a href="layouts.html"><center>Free Layouts</center></a> <a href="Games.html"><center>Games</center></a> <a href="emulation.html"><center>Emulation</center></a> <a href="affys.html"><center>Affiliation</center></a> <div class="catagory"><center>Current POTW</center></div> <center><b>#248 Tyranitar</b></center> <center><IMG SRC="http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa248.png" ALT="NPOTW"></center> <center><a href="POTW.html"><b>Past POTW</b></a></center> <!--left menu ends here--> </div> <!--page name goes here--> <div id="content"><center><div class="heading">Secret Pokemon Training Other Known As SPT</div></center> <!--page name stops here--> <!--content goes here--><center><b>News</b></center><br><br> <center>5/12/07: Aeroburn, he said hes gonna help but after hes done with some work of his own, so im happy about that. And maybe just maybe we'll be hosted by a network, not saying any spoilers..</center><br><br> <center>5/4/07: Well, i talked to Aeroburn but it didn't help me i guess i got to do it the easy but complicated way. Site will be released soon.</center><br><br> <center>4/28/07: Yea, its saturday. I still havent talked to Aeroburn! But i put a page hit, and uhh...idk</center><br><br> <center>4/25/07: Since im new to html, i need to do somehting (without this i cant do anything on the liks) so im waiting for Aeroburn to go online XD =P</center><br><br> <center>4/24/07: Yea, i havn't been posting on this, idk y though, i didnt give the link to anyone except Havok. lol, but i havnt been posting cuz ive been trying to figure out the misteries against the layout changer, and it's worth it i got it with the help of Aeroburn from PCA/PokeNebula: If u have errors with any layouts just refresh the page, it should be good =D<br><br></center> <center>4/19/07: We're installing New Stuff. Including Layout Changer, Pokedex, POTW, Fan Art, Free Sig/Layouts, Games, Affiliation,PUA: Info, Trades, Battling, Show Off, PCA: Info, Trades, Battling, Show Off, PC: Info, Trades, Battling, Show Off.<br><br></center> <!--content stops here--> </div> <!--right menu starts here--> </div><div id="rightmenu"> <div class="catagory"><center>Affiliates</center></div> <center><a href="affys.html"><b>Apply Here</b></a></center> <div class="catagory"><center>ShoutBox</center></div> <!-- BEGIN CBOX - http://www.cbox.ws --> <center><div align="center" id="cboxdiv"> <iframe frameborder="0" width="160" height="305" src="http://www4.cbox.ws/box/?boxid=3166240&boxtag=5868&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#FFFFFF 1px solid;" id="cboxmain"></iframe><br/> <iframe frameborder="0" width="160" height="75" src="http://www4.cbox.ws/box/?boxid=3166240&boxtag=5868&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform"></iframe> </div></center> <!-- END CBOX --> <div class="catagory"><center>SPT's Hits</center></div><br> <!-- Start Bravenet.com Service Code --> <center><script language="JavaScript" type="text/javascript" src="http://pub38.bravenet.com/counter/code.php?id=401896&usernum=3260284116&cpv=2"> </script></center> <!-- END DO NOT MODIFY --> <!--right menu ends here--> </div> <!--disclaimer starts here--> <div id="disclaimer"><center><div class="dheading">Copyright Notice:</div> <center><b>Do NOT steal! "Layout Made By Prodigy with a huge help of </b><a href="http://st.pcaworld.net/"><b>Levus</b></a>.</center></div> <!--disclaimer ends here--> <!-- --><script type="text/javascript" src="/i.js"></script></body> </html> 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 |
|||||||