|
HTML - Middle Of Page Fixed, Left And Right Columns Resize?
Hi everyone, I'm trying to work out how to have a left and right side "column" both resize when the window is resized. An example of what I am after is : http://www.news.com.au/heraldsun/0,,,00.html.
I played with margin-left and -right but don't think it is quite what I am after. Thanks. Similar TutorialsHello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. Hi All, I have just started my first page and there is a little problem with it that is driving me nuts. Basically, Im trying to make a simple page where the content is centered and there are two background columns on the right and left: we see these pages everywhere. Here is the code (pseudo) I am trying <body> <centered content> <body_divis> <pic> insert picture (top left) <pic> </body_div> </centered content> <body> now im using a css file in which we have: <centetred content> : fix width (1000px), auto left and right margin, gray background. <body_div>: white background. <pic>: 0 margins. So far so good, I get the desired effect: white page in the middle, two side columns in gray. All of this starts at the very top of the page. Now I just want to move the picture slighlty down. As soon as I do that the whole white centered section moves down with it, creating a horizental gray bar on top of the page that is driving me nuts.... it seems that the white section starts where the first object is placed. I just want it to start at the top and then plance my objects wherever. All margins are good in my code as I have checked and rechecked. I appreciate any help. Thanks, Kakeez I want the side columns on my website, http://www.thethuglife.com to be fixed, like a frame, while scrolling. They contain my ads and I want my ads visible to the visitor at all times. How can I make these side columns fixed like a frame, but still centered vertically and horizontally on any viewing size? Any help would be appreciated. This could be an HTML or CSS problem, but I can't figure out what's causing this and it's driving me nuts! The left column on my website will not stay a fixed width of 175px in IE 8. That seems to be the only browser having a problem. Here's the link: http://www.jrsart.net/testarea/paull...cientists.html I've linked the page that has it the worst, but if you visit the other pages and keep an eye on the left column's border, you'll see it keeps moving. Please help! I'm rapidly running out of time to fix this issue, so any advice would be greatly appreciated! I have a parent div=body, and four child div's=sidebar (dark gray), spacer1, content (white), and spacer2. Those are not the backgrounds of the individual div's. I'm using a faux columns method of taking the parent's bg and y-repeating it. You can see the problem below. This works in IE6, but not in Firefox. This would lead me to assume there's a problem in my coding, but the way FF is displaying it...it's like firefox is placing it in a different column just to peeve me off. In IE6 (perfect): In FF (looks like script was placed in spacer1 column--padding:10 for content div) I noticed it repeated correctly for the first div, but it's like it started over with the spacer1 div and doesn't even repeat down: Here is the code: 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>DCS College Football Ratings and College Football News</title>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
</head>
<body background="images/bg.png">
<div id="container" style=" width:785px; background:inherit; height:auto; margin:0 auto;">
<div id="header" style="background:url('images/layout_01.png'); width:785px; height:121px;"></div>
<div id="navbar" style="background:url('images/layout_02.png'); width:758px; height:26px; padding-top:9px; padding-left:27px; clear:both;">
<font color="#cecece" face="Verdana" size="2"><b>»Home »The D-Report »DCS Ratings »Custom Helmets »About the DCS</b></font></div>
<div id="subheader" style="background:url('images/layout_03.png'); width:785px; height:49px; clear:both;"></div>
<div id="body" style="background:url('images/contentbg.png'); width:785px; height:auto; float:left;">
<div id="sidebar" style="background:inherit; width:260px; padding:10px; height:auto; float:left; ">
<font face="verdana" color="#cecece" size="3"><b>The D-Report</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current DCS news article here. More typing going on to fill up some more space, ya know what I mean?</b></font><br><br><br><br><font face="verdana" color="#cecece" size="3"><b>DCS Ratings</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current DCS ratings update here. More typing going on to fill up some more space, ya know what I mean?</b></font><br><br><br><br><font face="verdana" color="#cecece" size="3"><b>Custom Helmets</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current custom helmet here. More typing going on to fill up some more space, ya know what I mean?</b></font></div>
<div id="spacer1" style="background:inherit; width:17px; height:auto; float:left; "></div>
<div id="content" style="background:inherit; width:440px; padding:10px; height:auto; float:left;">
<div id="myGallery" style="width: 438px !important;
height: 250px !important;" ><script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="mypage1.html" title="open image" class="open"></a>
<img src="images/brugges2006/1.jpg" class="full" />
<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="mypage2.html" title="open image" class="open"></a>
<img src="images/brugges2006/2.jpg" class="full" />
<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
</div></div>
<div id="spacer2" style="background:inherit; width:28px; height:auto; float:left; "></div>
</div>
<div id="footer" style="background:black; width:785px; height:86px; clear:both">
<div id="contentfooter" style="background:url('images/layout_10.png'); width:460px; height:52px; margin-left:297px;"></div>
</div>
</div>
</body>
</html>
Could it have something to do with the image scripting? Hi, I have a problem. I don't get my table in the middle of the page. can someone help me? <removed by me> Got it now, delete this topic please Help, Can anyone tell me why my website is splitting down the middle. In other words when I scroll down it looks like the left half and right half don't match. It happens on all computers. And, how do I fix it? The url is www.gotobreakingthrough.com Thanks Hello, i need help understanding how to make my website automaticly resize depending on the resolution its viewed on i am viewing it on 1680 x 1050 and it looks fine but i then view it on a smaller monitor and everything gets moved about and squished, i notice on other websites that this is not the case and i do not know how its possible. my website url: http://mylocalmenu.co.uk/ you are able to view the source code and css files from the browser please help me with this problem, as it is the only problem i cannot fix. Thank you in advance to any help that i receive <a href="index.html" target="_blank" onclick="window.open(this.href,this.target,'status=no,toolbar=no,location=no,menubar=no,directories= no,resizable=no,scrollbars=no,height=600,width=800'); return false;" >Enter</a> This followed codes working properly, a window opened with the desired page and with desired conditions except resizable. It can be seen that "resizable=no" even then the page can be resized :S Lookin 4word 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. I want to create a html page which should not have address back, Back and Forward button. any help ? 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 Im making a site at the mo and im looking to keep the menu and a picture stay in the same position constantly. So when then user moves the scoll wheel only the text are will scroll. I dont want there to be any border or scroll bars around the text, so the only visable scroll bar will be the browsers... any ideas? Hello, I am having a bit of a problem with a website I just started. I am currently on a resolution of 1280x1024 and I want it work for 1024x768. Well, I want it to work for any resolution, really. In fact, I noticed the problem exists when I go from maximizing the browser window to minimizing it. Here is what it looks like at 1280x1024 with the browser window maximized. Here is what it looks like at 1024x768 or when the browser window is less than maximized. See the problem? The two background images to either side of the banner image are lessening, as the resolution decreases or the browser window is decreases. Yet, the banner image remains unaffected. How can I make sure that the html is proportional to resolution, such that the background image on either side of the banner image remain unaffected in the manner in which they are currently? Thank you. Here is the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Test</title> </head> <body> <table border="2"> <!-- table 1 --> <tbody> <tr> <td width="10%" style="BACKGROUND-IMAGE: url(pictures\BG.jpg)"><!-- col 1 --> </td> <td width="80%"><!-- col 2 --> <table border="4"> <!-- Table 2 --> <tbody> <tr> <td><img src="pictures/banner.jpg"> </td> </tr> <tr> <td>More stuff goes here</td> </tr> </tbody> </table> </td> <td width="10%" style="BACKGROUND-IMAGE: url(pictures\BG.jpg)"><!-- col 3 --> </td> </tr> </tbody> </table> <!-- table 1 --> </body> </html> Hello Everyone, i am new to HTML, i am trying to develop my first website. I am using asp.net , C#, HTML, CSS and Visual studio2008 on windows Xp I had a page, in that i moved the tables to center. after moving the tables to center i found the white space on the left and right sides of the page. Now i want to fill the white space which is on the left and right sides of the page with the black color. Can anyone please help me thank you regards john. How can I make the text appear at left bottom... I have 3 taGS RETURNING DATA FROM sql: <p> #TOC# </p> <p> BUSINESS POLICY TRADEMARK REGULATIONS. </p> <p> #Qry.USERSIGN# </p> I want the text from this tag to appear one after other at left bottom: For example: This is basic algebra lesson. BUSINESS POLICY TRADEMARK REGULATIONS. Smith How to do that? Any advise is appreciated.RosieGp I've attached the code for a template I'm wanting to use. I want to add a column to the left side of the page that runs the length of the page. Is there anyone out there who can assist me with the code to do that. I'd be exceedingly grateful. I'm afraid I'm table dyslexic. Thanks in advance to anyone who can 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! Hi, I'm new here but know a little bit about making websites. This one has seemed to stumped me, my webpage he Edit: link removed, problem solved and the other links: Order online, testimonials, about us, and contact us all render exactly in firefox, however my products page gets shoved to the left a couple of clicks for some odd reason. I narrowed it down a bit; it seems as if its only letting me to post a few paragraphs until it does it, meaning i can remove the animation and some paragraphs, and it looks the way i want it, but when I add the paragraphs back even without the slideshow the problem persists. Using expression web 3. Thank You a bunch for your help. |
|||||||