logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-27-2009, 08:17 PM   #1
Stroods
 
Join Date: Aug 2009
Posts: 22
Default Trying to get a liquid layout to work

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;
}

Attached Images
File Type: jpg layoutforFORUM_small.jpg (78.5 KB, 8 views)
Stroods is offline   Reply With Quote
Old 08-27-2009, 09:27 PM   #2
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

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?
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Old 08-27-2009, 09:41 PM   #3
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

Sorry, forgot to ask for your html or url to the page
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Old 08-27-2009, 09:52 PM   #4
Stroods
 
Join Date: Aug 2009
Posts: 22
Default

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>
Stroods is offline   Reply With Quote
Old 08-27-2009, 10:07 PM   #5
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

Quote:
Originally Posted by Stroods View Post
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.
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Old 08-27-2009, 10:15 PM   #6
Stroods
 
Join Date: Aug 2009
Posts: 22
Default

The only widths with % are my columns and they add up to 98%
Stroods is offline   Reply With Quote
Old 08-27-2009, 10:28 PM   #7
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

98% for just the div widths, don't forget about your left and right margin %'s
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Old 08-27-2009, 10:49 PM   #8
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

OK, html looks good, nothing big.

Now for your css;
  1. 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.
  2. Unless it is really needed a max-height really shouldn't be used.
  3. % 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).
  4. 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.
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Old 08-27-2009, 11:37 PM   #9
Stroods
 
Join Date: Aug 2009
Posts: 22
Default

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
Stroods is offline   Reply With Quote
Old 08-28-2009, 12:12 AM   #10
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

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;
Code:
<body>
<div id="wrapper">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
</body>
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:53 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com