PDA

View Full Version : Problem with resizing with css layout

jinju
08-04-2006, 05:44 AM
Hi everyone. I just started designing webpages and i came across lissa's site. eventually i found the css layouts. now i also read that frames were problematic so i decided to use css instead. but i also wanted to make use of the ability to link into frames externally. so i decided to incorporate an Iframe into the center column of the "Three Column CSS Layout with Header" layout. It did work, but every time i resize the page, due to the fluidity (is that even a word :confusion ........whatever:) ) of the layout the rigth column is overlaping the center one. I did a basic version of my site to demonstrate:
<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this

div. To change the properties of this div you can change the #header

selector in the style sheet that is located on this page between the head

tags.

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in

this div. To change the properties of this div you can change the #left

selector in the style sheet that is located on this page between the head

tags.

</div>


<div id="center">
<div style="position: margin-left: 230px;
margin-right: 230px">
<IFRAME src="testing.htm" name="frame" width="800" height="600"

frameborder="0"></IFRAME></div>
</div>

<div id="right">

Your right menu will go here. You can place images, text links, etc. in

this div. To change the properties of this div you can change the #right

selector in the style sheet that is located on this page between the head

tags.

</div>

</body>
</html>


Sad to say my level of expertise in these thing is only that of basic html knowledge. so i am hoping that someone on the forum can help me.
Thanks in advance for the help and i'm keeping my fingers crossed.
pb&j
08-04-2006, 05:58 AM
well, frames are only problematic if they are not used correctly. in general, they can be very helpful.

as for your current problem, if you look on the #right values, you have set a solid width on that column and a solid position for it from the top/right corner of the window, so yes, the natural outcome will be what you are experiencing.

perhaps change the width pixel value to a percentage if you want it to fluxuate?
jinju
08-04-2006, 07:18 AM
so what do i do exactly? i want it so that the page remains the same even if resized.
jinju
08-06-2006, 07:50 AM
could anyone help with this. not sure what to do
HeLpM3
08-06-2006, 08:27 AM
Hi sry would have been earlier but i'm one of those coders staying in the advance coding forum but anyway the problem was that your iframe width is very large u had 800 which prolly will take up about 3/4 of page i resized the iframe to 500 u can resize it to make it bigger or smaller just cahnge text in red hope this help :D :D


<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this

div. To change the properties of this div you can change the #header

selector in the style sheet that is located on this page between the head

tags.

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in

this div. To change the properties of this div you can change the #left

selector in the style sheet that is located on this page between the head

tags.

</div>


<div id="center">
<div style="position: margin-left: 230px;
margin-right: 230px">
<IFRAME src="testing.htm" name="frame" width="500" height="600"

frameborder="0"></IFRAME></div>
</div>

<div id="right">

Your right menu will go here. You can place images, text links, etc. in

this div. To change the properties of this div you can change the #right

selector in the style sheet that is located on this page between the head

tags.

</div>

</body>
</html>
jinju
08-06-2006, 04:07 PM
Hey thanks for responding and also thanks for the help. but when the window resisizes the rigth column still resiszes. i think it was described that the layout was fluid so that it would resize even if the window is resized. how do you stop that from occuring.
jinju
08-10-2006, 03:50 PM
umm hi again i did some messing around with my coding and after some complicated stuff, i got the basic way of how i want it to look. The only problem is that i know there is an easier way of doing it and i want my Iframe up a little higher. here's the coding <html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
width: 1000px;
}
#left {
position: relative;
top: 10px;
rigth: 300px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: relative;
top: -725px;
left: 770px;
width: 200px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this

div. To change the properties of this div you can change the #header

selector in the style sheet that is located on this page between the head

tags.

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in

this div. To change the properties of this div you can change the #left

selector in the style sheet that is located on this page between the head

tags.

</div>


<div id="center">
<div style="position: margin-left: 230px;
margin-right: 230px"><IFRAME src="testing.htm" name="frame" width="500" height="600" frameborder="0"></IFRAME></div>
</div>

<div id="right">

Your right menu will go here. You can place images, text links, etc. in

this div. To change the properties of this div you can change the #right

selector in the style sheet that is located on this page between the head

tags.

</div>

</body>
</html>

hope someone could help me with this.