PDA

View Full Version : Trying to get a liquid layout to work


Stroods
08-27-2009, 09:17 PM
Hi, Im new here

Im trying to get a liquid layout to work with my site. Ive been looking around online and have found some tutorials but I have to admit Im pretty lost. Ive changed all of the positions on the page to percentages and after that is where i get lost. Im still a newbie. Each tutorial i find tells me to do different things or the page is just too far off from mine to understand. I know i have to set the bg image position in my css but when i do, it doesnt seem to change. I know i have to do something with min heights and widths but im not too sure

My css is below as well as a screenshot. Thanks for any help in advance

body {
background-color:#32b8d3;
margin:auto;
max-width:64.00em;
max-height:38.81em;
bottom:15%;
right:15%;
}

img {
border:none;
}

#background {
/*margin: auto;*/

background-image:url(../images/bg.jpg);

background-repeat:no-repeat;
width:1024px;
height:621px;
border:#FFFFFF 2px solid;

}

#col1
{
float: left;
width: 20%;
margin-left: 4%;
}

#col2
{
float: left;
width: 46%;
margin-left: 4%;
}

#col3
{
float: left;
width: 20%;
margin-left: 4%;
}

.buildingdiv {
background-image:url(../images/building.png);
width:196px;
height:107px;
margin-left:-15%;
margin-top:201%;
}

#logodiv {
position:relative; /* take out if needed */
z-index:1;
}

#logotabdiv {
margin-top:-3%;
position:relative;
z-index:-1;
}

#maincontenttabs {
margin-top:5%;
}

#maincontent {
margin-top:-1%;
background-image:url(../images/blue-box.png);
width:396px;
height:351px;
background-repeat:no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
color:#0a3f8f;
}

#maincontent p {
padding-left:3%;
padding-right:3%;
}

#footer
{
clear:both;
margin-top:8%;
text-align:right;
float:right;
}

http://www.dreamweaverclub.com/forum//attachment.php?attachmentid=668&stc=1&d=1251404176

coloeagle
08-27-2009, 10:27 PM
I see a few things wrong with your css. First a couple questions.

Why the % margins? Do you want the div's to butt up next to each other or have spacing between them?

coloeagle
08-27-2009, 10:41 PM
Sorry, forgot to ask for your html or url to the page

Stroods
08-27-2009, 10:52 PM
I have them as % because i was told to do that in another forum. They said if the window gets shrunk or enlarged, the divs keep that position based on %. It makes sense to me. My html is below. and thanks for your help

<!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>Hurry Print Imaging</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />


</head>

<body>
<div id="background">
<div id="col1">&nbsp;</div>
<div id="col2"><div id="logodiv" align="center"><img src="images/logo.png" alt="HurryPrint" longdesc="index.html" />
<div id="logotabdiv"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Location','','images/Location-DOWN.png',1)"><img src="images/Location-UP.png" width="85" name="Location" /></a>&nbsp;<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Equipment','','images/Equipment-UP.png',1)"><img src="images/Equipment-DOWN.png" width="85" name="Equipment" /></a>&nbsp;<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','images/Services-UP.png',1)"><img src="images/Services-DOWN.png" width="85" name="Services" /></a>&nbsp;<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('History','','images/History-UP.png',1)"><img src="images/History-DOWN.png" width="85" name="History" /></a></div>


<div id="maincontenttabs"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Newsletters','','images/location/newsletters-UP.png',1)"><img src="images/location/newsletters-DOWN.png" alt="Inkjet" width="75" height="16" name="Newsletters" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Floorplan','','images/location/floorplan-UP.png',1)"><img src="images/location/floorplan-DOWN.png" alt="Colour" width="75" height="16" name="Floorplan" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Map','','images/location/map-UP.png',1)"><img src="images/location/map-DOWN.png" alt="Binding" width="75" height="16" name="Map" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/location/contact-UP.png',1)"><img src="images/location/contact-DOWN.png" alt="Docutech" width="75" height="16" name="Contact" /></a></div>
<div id="maincontent">
<br /><br />
<img src="images/hp-header.png" alt="HurryPrint" />
<br />
<p>Hurryprint has been upholding a longstanding family tradition for the last two decades by being a leader in providing innovative, quality printing. Owned and operated by Jamie Hurley since 1981, Hurryprint has earned a reputation for producing high quality work with quick and efficient turnaround.

At Hurryprint, we look forward to the future with enthusiasm, and eagerly anticipate providing our customers access to the most up-to-date electronic printing equipment. We are confident in our ability to supply our customers with the highest quality output available for their documents. By providing the necessary information and resources to facilitate digital file transfer, we will be constantly helping our clients to find new ways to express their thoughts and ideas in bold and creative ways.</p>
<img src="images/future-text.png" alt="At Hurry Print, the future is exciting" /> </div>

</div>
</div>
<div id="col3"><div class="buildingdiv">&nbsp;</div>
</div>

<div id="footer"><img src="images/footertext.png" alt="Footer Text" /></div>
</div>
</body>
</html>

coloeagle
08-27-2009, 11:07 PM
I have them as % because i was told to do that in another forum. They said if the window gets shrunk or enlarged, the divs keep that position based on %. It makes sense to me. My html is below. and thanks for your help
True, I have an assignment for you while I look over and compare the css and html.

Add up all the %;s you have in your css that have anything to do with the width. Remember that you only have 100% as the maximum % available.

Stroods
08-27-2009, 11:15 PM
The only widths with % are my columns and they add up to 98%

coloeagle
08-27-2009, 11:28 PM
98% for just the div widths, don't forget about your left and right margin %'s

coloeagle
08-27-2009, 11:49 PM
OK, html looks good, nothing big.

Now for your css;

For the body you have settings that should be used for a div that will hold all of the other div's. Some have no affect on the body.
Unless it is really needed a max-height really shouldn't be used.
% widths, and you have a set width in the #background .building div and #maincontent. These may or may not be affecting things. (I not knowing for sure how the page should look).
Not sure why you are floating your footer div. Whenever you float a div it needs to have a width assigned to it. A footer div will typically be 100% of the main container div or browser.

Stroods
08-28-2009, 12:37 AM
All great points. Like i said, i was getting info from different sources. I got confused. If i want a liquid layout, how should i have everything? should i take the settings out of the body and what else should i do? I feel like an idiot but ive been trying this for days now and havent had a solid answer. Its getting frustrating

coloeagle
08-28-2009, 01:12 AM
In simple you will need 5 div's.
One div to hold all the other div's.
Three div's floated left, one right after the other.
One div for the footer.

Set the width in percentages for each div.
The main div will determine the overall width and position for your layout.
(98% overall width, margin set for auto, max-width setting)

Set the desired percentage width for each of the three content div's.
(20% - 60% - 20%)
Set the footer div. Clear floated div's above.

Place the div's in your page;

<body>
<div id="wrapper">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
</body>

coloeagle
08-28-2009, 01:24 AM
Copy, paste and save the following exactly as I have it as an html page.
Preview it in your choice of browser/s. View it in different browser widths.

<!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=utf-8" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {
background-color: #fff;
}
#wrapper {
margin:auto;
padding:0;
width:98%;
max-width:64em;
}
#left {
float:left;
width:20%;
height:500px;
background-color:#f00;
}
#middle {
float:left;
width:60%;
height:500px;
background-color:#0f0;
}
#right {
float:left;
width:20%;
height:500px;
background-color:#00f;
}
#footer {
clear:both;
height:50px;
background-color:#ff0;
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
</body>
</html>

Stroods
08-28-2009, 01:25 AM
Excellent. Im changing it all now

This might sound dumb but how do i find the width in percentage for my divs? do i divide the width by the width of the wrapper? Ive never used percentages as widths so just checking

Stroods
08-28-2009, 01:26 AM
Ok, i didnt see your second post

give me a second to change everything

Stroods
08-28-2009, 01:31 AM
So can i still use my background image with this code?

And will everything in my divs shrink along with the page?

coloeagle
08-28-2009, 01:35 AM
This might sound dumb but how do i find the width in percentage for my divs? do i divide the width by the width of the wrapper? Ive never used percentages as widths so just checking
The only dumb question is one that isn't asked. :)

Working with the above wrapper div we have 100% width on the inside of the div.
Split the three inner div's into %'s as you want, just so that the total of the three does not exceed 100.

To help you out further add a border to the wrapper div
border:1px solid #000;

coloeagle
08-28-2009, 01:42 AM
So can i still use my background image with this code?

And will everything in my divs shrink along with the page?
Yes, should be able to. Though you may need to use some additional css.

For now you need to get a good understanding of how percentages on the div settings will affect the layout.

More to come

Stroods
08-28-2009, 01:49 AM
Great! Thanks for the lessons!

coloeagle
08-28-2009, 01:53 AM
Viewing your page, you should now have four different div's all contained inside a single div marked with a black border.

The left and right div's should be equal with the larger div in the middle.

Add a 1% margin to the sides of the middle div.
margin:0 1%;
save and view the page. The right(blue) div is now below the left(red) div.
This happens because we have now exceeded the wrapper inside width by 2%.

Now reduce the middle div's width % by 2. Save and view the page. The right div will now be on the right and there should be a small white space between each of the three div's.

Stroods
08-28-2009, 01:59 AM
interesting

coloeagle
08-28-2009, 02:03 AM
Now go ahead and go back to the original settings leaving the border on the wrapper.

Add 5px of padding to the wrapper div. padding:5px;

The three inner div's will be side by side and there will be a white space surrounding them.

Does this as we have not changed the inside width of the wrapper. The actual outside size of the wrapper is changed.

Remember that margin is outside the div and padding is inside the div.

Stroods
08-28-2009, 02:09 AM
Sorry, i didnt mention in my last post that the border doesnt go around the wrapper. it goes above it but only extends about 10px down

coloeagle
08-28-2009, 02:13 AM
#wrapper {
margin:auto;
padding:0;
width:98%;
max-width:64em;
border:1px solid #000;
}

What browser are you using?

coloeagle
08-28-2009, 02:21 AM
The little lady is telling me it's time for me and the boy to quit playing and come eat dinner. :-D

I'll be back in about 30 minutes +/-.

Stroods
08-28-2009, 02:25 AM
Not a problem
but for when you're back, now it looks like a 2 px line going right along the top of the wrapper.

edbr
08-28-2009, 02:27 AM
it sounds like the page content is not in the wrapper.

Stroods
08-28-2009, 02:34 AM
<body>
<div id="wrapper">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
</body>
</html>

coloeagle
08-28-2009, 03:57 AM
The content div's are inside the wrapper div.

The clear both in the footer div should bring the wrapper div down as well. Are you viewing this page in a browser or your editor preview?

Stroods
08-28-2009, 01:30 PM
I was viewing it in a browser

Corrosive
08-28-2009, 01:37 PM
Have you got clear: both; in your 'footer' styles?

Stroods
08-28-2009, 01:49 PM
Yup....

#footer {
clear:both;
height:50px;
background-color:#ff0;
}

Corrosive
08-28-2009, 01:58 PM
Yup....

#footer {
clear:both;
height:50px;
background-color:#ff0;
}

Nuts...not the most obvious thing then :(

Corrosive
08-28-2009, 02:02 PM
Have you tried giving footer a width?

Stroods
08-28-2009, 02:25 PM
Yes, the border still sits along the top

Im actually just trying turn my page into a liquid layout. coloeagle was giving me some lessons on %'s

domedia
08-28-2009, 02:30 PM
the stuff inside the wrapper are probably all floated?
If so you have to make the wrapper clear all the floats.
Add this:
#wrapper {
height: 1%;
overflow: hidden;
}

This will fix it for both IE and FF

coloeagle
08-29-2009, 01:18 AM
This is really strange. I have just finished looking at this page in the following browsers. :confused:

The border is as it should be and except for a couple small issues the page displays the same.
FF3
Opera8
Opera9
IE5.5
IE6
IE7
Safari for Windows
ChromeNow off to get IE8 ahhhh :eek:

Load up the other pc and check it in FF2

For those that may be interested in it here is the page as I have it;

<!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=utf-8" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {
background-color: #fff;
}
#wrapper {
margin:auto;
padding:0;
width:98%;
max-width:64em;
border:1px solid #000;
}
#left {
float:left;
width:20%;
height:500px;
background-color:#f00;
}
#middle {
float:left;
width:60%;
height:500px;
background-color:#0f0;
}
#right {
float:left;
width:20%;
height:500px;
background-color:#00f;
}
#footer {
clear:both;
height:50px;
background-color:#ff0;
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
</body>
</html>