...

View Full Version : Very Basic CSS Assistance



Jaali
07-20-2011, 03:27 PM
Hi All,

I need some assistance with a page I am building. I am going to start off with a disclaimer.

Disclaimer begin
I am not a coder. I have very basic CSS skills (hence my asking for help). I am a novice. I am not looking for comments such as "If you don't know what you are doing you shouldn't be doing it" or similar. If you don't have anything constructive to add, please scroll on to the next post that may interest you.
Disclaimer end

Sad I had to add that disclaimer, I'm only doing it out of past experience! :)

Anyone who is helpful and wanting to assist, please read on!

So, here is my problem. I have struggled thus far to reach this point:

Dev Index (http://www.jaali.com/dev/indexTemplate.php)

But the thing I can't work out is the footer bar. I want it to be on the bottom, no matter how large the text on the page is. I have used floats as the main body so they stretch according the text amount. I have placed the footer div at the bottom of the HTML, yet, as you can see, it seems to still appear up behind the main content. Arrggh. :mad:

Here is my CSS (excuse the formatting):


/* == global styles == */

body {
font-family: "Helvetica Neue", Arial, sans-serif; /* default page font */
background: #ebebeb url(../images/topBanner.png) repeat-x;
margin: 0; /* shorthand for all margins = 0 */
padding: 0; /* no padding */
}

p, h1, h2, h3, h4, h5, h6, li {
margin: 1ex 1em;
}

p {
color: #525252;
font-size: .8em;
}

#outerDiv {
width: 760px; /* sets the content width */
margin: 0 auto; /* no top/bottom margin, centered horizontally */
background: #ebebeb;
}

/* == header == */

#headerDiv {
height: 320px;
background: #ebebeb url(../images/headerLogo.png) no-repeat;
}

/* == content == */

#contentDiv {
position: relative;
}

/* == menu == */

#menuDiv {
width: 760px;
position: absolute;
left: 180px;
bottom: 0;
background: #ebebeb url(../images/longShadow.png) no-repeat -180px top;
}

#menuDiv ul {
list-style: none;
margin: 0;
padding: 0;
}

#menuDiv li {
float: left;
margin: 0;
padding: 0;
}

#menuDiv a {
left: 100px;
font-size: .6em;
display: block;
color: #525252;
text-decoration: none;
padding: 0 15px 0 21px;
margin-right: 10px;
background: url(../images/menuSprite.png) 0 -25px;
border: none;
font: .8em/25px "Helvetica Neue", Arial, sans-serif;
}

#menuDiv a:hover {
color: #82b32a;
background-position: 0 0;
}

#menuDiv a.current {
color: #525252;
margin-bottom: -15px;
height: 30px;
background-position: 0 -50px;
}

#menuDiv a.current:hover {
cursor: default;
}

/* == main content == */

#mainDiv {
position: absolute;
background: url(../images/containerBG.png) no-repeat;

}

#leftDiv {
float: left;
padding: 15px;
width: 450px;
}

#rightDiv {
float: right;
padding: 15px;
width: 250px;
}

/* == footer == */

#footerDiv {
background: #6f6f6f;
height: 100px;
bottom: 100%;
}


#footerContent {
width: 670px;
padding: 10px;
}

#footerContent p {
font: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: .6em;
color: #424242;
}


/* == miscellaneous styles == */

.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
}

Here is the body HTML (again, excuse the formatting):


<body>
<div id="outerDiv">

<div id="headerDiv">
</div> <!--headerDiv-->

<div id="contentDiv">

<div id="menuDiv">
<ul>
<li><a href="home.php" class="current">Home</a></li>
<li><a href="survey.php">Survey</a></li>
<li><a href="health.php">Health Services</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>

</div> <!--menuDiv-->

<div id="mainDiv">

<div id="leftDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices nulla a lectus tincidunt molestie. Mauris quis mauris eget libero auctor semper in id leo. Aenean ullamcorper tortor ac purus gravida sed congue lectus lobortis. Cras mauris velit, semper vel adipiscing ac, aliquam sed urna. Pellentesque tristique auctor diam, sed ultrices velit blandit in. Donec id quam neque. Pellentesque tempor lacus ut purus cursus id viverra erat ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<!--leftDiv-->

<div id="rightDiv">
<img src="images/mainApple.png" width="240" height="357" />
</div>
<!--rightDiv-->


</div> <!--mainDiv-->

</div> <!---contentDiv--->


</div> <!--outerDiv-->

<div id="footerDiv">

<div id="footerContent">

<p>footer testing message</p>

</div><!--footerContent-->

</div> <!--footerDiv-->
</body>

If anyone could help, that would be supremely helpful!

Cheers!

teedoff
07-20-2011, 03:40 PM
Have you tried clearing your float? Try adding


overflow: auto;

to your mainDiv css rule. Then remove the position: absolute.

Without knowing exactly the look you want, thats the best I can offer. Maybe if that doesnt work, try taking a screenshot showing how you want it to look.

Jaali
07-20-2011, 03:47 PM
Have you tried clearing your float? Try adding


overflow: auto;

to your mainDiv css rule. Then remove the position: absolute.

Without knowing exactly the look you want, thats the best I can offer. Maybe if that doesnt work, try taking a screenshot showing how you want it to look.

Didn't work :(

Another thing is, the shadow under the main header get chopped off on the left hand side, because I have to move the menuDiv over 18-px to make sure it is centered. Anyone know a fix for this?

Here is what I want it to look like:

http://www.jaali.com/dev/images/example.png

teedoff
07-20-2011, 04:20 PM
Well when I just remove the position: absolute; I get this:






When I add overflow: auto; then your mainDiv background comes back, but your menu is removed from its original place. I think you're going to have to move that menu div somewhere else, but I havent figured out where yet.

alykins
07-20-2011, 04:48 PM
where is it you want the menu to go? it is absent in the picture of how you want it to look

Jaali
07-21-2011, 09:19 AM
Well when I just remove the position: absolute; I get this:






When I add overflow: auto; then your mainDiv background comes back, but your menu is removed from its original place. I think you're going to have to move that menu div somewhere else, but I havent figured out where yet.

Thank you so much for your help!!

A side effect of removing the "position: absolute" on #mainDiv is that the background image has gone.

Any suggestions?

Jaali
07-21-2011, 09:22 AM
where is it you want the menu to go? it is absent in the picture of how you want it to look

If you have a look at the test page (http://www.jaali.com/dev/indexTemplate.php) you can see where I want the menu. It's in the right place and how I want it looking, except the shadow image. I'm going to try and play with image floating to see if I can get it where I want it!

Any suggestions are welcome!

alykins
07-21-2011, 03:40 PM
your site is even easier, and doesn't require any floats for basic layout... unless I missed something... see pic, change the sizes and colors accordingly... there are a number of ways to tackle the logo in the header


<!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>Untitled Document</title>
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:grey;}
#header{
width:100%;
height: 200px;
background:green;
}
#menubar{
width:300px;
height:50px;
margin:0px auto;
background:blue;
}
#content{
min-height:500px;
width:1024px;
margin:0px auto;
}
#footer{
width:100%;
height:100px;
background:purple;
}

</style>
</head>

<body>
<div id="header">change my size and color</div>
<div id="menubar">change my size and color</div>
<div id="content">
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text
</div>
<div id="footer">change my size and color</div>


</body>
</html>

teedoff
07-21-2011, 03:52 PM
Thank you so much for your help!!

A side effect of removing the "position: absolute" on #mainDiv is that the background image has gone.

Any suggestions?

I told you, if you place

overflow: auto;

on your mainDiv, then the background image is back where it's supposed to be, but your menu is removed from its position.

You will need to rework where the menu is in your code I think. I even posted an image to show you how this all looked.

Jaali
07-24-2011, 01:15 PM
your site is even easier, and doesn't require any floats for basic layout... unless I missed something... see pic, change the sizes and colors accordingly... there are a number of ways to tackle the logo in the header

Thank you! I used your ideas and made the site more simple than I originally had it.


I told you, if you place

overflow: auto;

on your mainDiv, then the background image is back where it's supposed to be, but your menu is removed from its position.

You will need to rework where the menu is in your code I think. I even posted an image to show you how this all looked.

I have changed the code to make it more simple now, but the menu is in the same place (it's where I want it). Everything is perfect, except the menu needs centering and the shadow to be added (similar to the shadow on the footer).

Could anyone assist with this? This is my updated code, and you can view the site here (http://www.jaali.com/dev/indexTemplate.php)


<!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>Test Page 1</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
<div id="headerImage">
<img id="headerLogo" src="images/headerLogo.png" width="760" height="295" />
</div>
</div>
<div id="menubar">
<ul>
<li><a href="home.php" class="current">Home</a></li>
<li><a href="survey.php">Survey</a></li>
<li><a href="health.php">Health Services</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
<div id="content">
<img id="contentApple" src="images/mainApple.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas euismod sagittis. Curabitur accumsan, nisi ac placerat facilisis, orci massa euismod neque, eget porta urna diam tristique risus. Integer tempus, nibh non tincidunt scelerisque, felis risus pretium diam, at aliquet nibh leo nec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi at enim eros, elementum placerat ante. In blandit dui a metus molestie at placerat erat dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc libero neque, pulvinar sit amet lobortis non, tincidunt non augue. Mauris ipsum lacus, tempor in dignissim vel, sagittis sit amet lorem. Vestibulum lacinia fermentum sapien, eu malesuada nulla hendrerit sed. Donec quis libero vel magna convallis dapibus. Curabitur congue porta velit eu accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque vestibulum porta. Nullam in elementum lacus. </p>

<p>&nbsp;</p>
</div>
<div id="footer">
<div id="footerContent">
<p>Company A</p>
<p>111 Test Street</p>
<p>Suburb, VIC 3000</p>
<p>Australia</p>
<p>www.test.com.au</p>
<p>&nbsp;</p>
<img id="footerDivide" src="images/footerDivide.png" width="760" height="10" />
<p>&nbsp;</p>
<p1>site designed by XxXxXxXxX</p1>
</div>
</div>

</body>
</html>


*{
margin:0px; padding:0px;
}

body{
background: #ebebeb
}

p{
color: #323232;
font: .8em Arial, Helvetica, Geneva, sans-serif;
}

a {
text-decoration: none;
color: #9eada1;
}

a:hover, a:active {
color: #566440;
border-bottom: 1px dashed #566440;
}

#header{
width:100%;
height: 295px;
background: #ebebeb url(../images/topBanner.png) repeat-x;
}

#headerImage{
text-align: center;
}

#menubar{
width:760px;
height:25px;
margin: auto;
}

#menubar ul {
list-style: none;
}

#menubar li {
float: left;
}

#menubar a {
font-size: .6em;
display: block;
color: #525252;
text-decoration: none;
padding: 0 15px 0 25px;
margin-right: 5px;
background: url(../images/menuSprite.png) 0 -25px;
border: none;
font: .8em/25px "Helvetica Neue", Arial, sans-serif;
}

#menubar a:hover {
color: #82b32a;
background-position: 0 0;
}

#menubar a.current {
color: #525252;
margin-bottom: -15px;
height: 25px;
background-position: 0 -50px;
}

#menubar a.current:hover {
cursor: default;
}

#content{
min-height:500px;
width:730px;
margin:0px auto;
background: url(../images/containerBG.png) no-repeat;
padding: 15px;
}

#contentApple{
float: right;
margin-left: 5px;
}

#footer{
width:100%;
height:200px;
background: #6f6f6f;
}

#footerContent{
background: url(../images/footerShadow.png) no-repeat;
width: 720px;
margin: 0 auto;
padding: 20px;
}

#footer p {
font: .7em Arial, Helvetica, Geneva, sans-serif;
color: #323232;

}

#footer p1 {
font: .6em Arial, Helvetica, Geneva, sans-serif;
color: #424343;
}

#footerDivde {
float: left;

}

Sammy12
07-24-2011, 08:40 PM
set width to 408px (sum of all the lis including margins) then use margin: auto;



#menubar ul {
width: 408px;
margin: 0 auto;
}


margin: auto; set an equal margin on both sides (thus centering your ul)

---
you have a margin on the <a> of the last li (contact us). you could get rid of this with



#menubar ul li:last-child a {
margin-right: 0;
}

then you just change the width to 403px instead of 408px

Jaali
07-25-2011, 12:40 PM
set width to 408px (sum of all the lis including margins) then use margin: auto;



#menubar ul {
width: 408px;
margin: 0 auto;
}


margin: auto; set an equal margin on both sides (thus centering your ul)

---
you have a margin on the <a> of the last li (contact us). you could get rid of this with



#menubar ul li:last-child a {
margin-right: 0;
}

then you just change the width to 403px instead of 408px

Thank you so much, you have helped a huge amount!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum