...

View Full Version : Need help with alignment on project



Stryker412
11-21-2008, 03:29 PM
Here is my page so far: http://users.ettc.net/mait119/final/

I'm very new to CSS so this will be quite challenging. I am trying to move away from tables and do alignment with divs and CSS.

Here is my CSS code. I have removed the two tables and put each section in a separate div.

.navmenu {
position: absolute;
margin:0px auto;
text-align:left;
}

.body {
text-align:center;
}

.pagelayout {
width: 760px;
left: auto;
right: auto;
text-align:center;
}

Right now as you can see the divs are overlapping. I want the content to be centered and the menu to the left of it but not flush with the side of the page. I will be using the menu on several of the pages, so I want it to appear in the same spot on each page.

abduraooft
11-21-2008, 03:58 PM
Drop the absolute positions and apply float to one of your column. Have a look at http://bonrouge.com/2c-hf-fluid(r).php

Rowsdower!
11-21-2008, 04:39 PM
CSS:


.navmenu {
padding-left: 0px;
width: 250px;
text-align:left;
height:100%;
float:left;
padding: 0 auto -4em;
}

.pagelayout {
position: relative;
width: auto;
text-align:center;
margin: 0;
height: 100%;
}

I think this should work... It did on my machine at least.


Edited to remove some IE hacks that were legacy from the particular application I pulled my reference from...

Stryker412
11-21-2008, 05:53 PM
So should I delete the body portion? I thought that was needed to get IE to align properly?

Edit: I used your code and it did move the page content better but I need the page content to be more or less centered under the logo graphic. How can I do that?

Crispy
11-21-2008, 06:33 PM
Hey man, I'm gonna try to explain this to you as simple as I can

create a

.wrapper - Set the width you want your website to fill, like the main section say 750px;

Place the following inside the wrapper tag <div id="wrapper">
<div id="sidebar">Content</div>
<div id="mainContent">Content</div>
</div


.sidebar - Set width i.e 100px and set this to float:left;

.mainContent - Set width for this i.e 650px; and float:left; this also (maybe try float:right) if that does work, that should give you the basic layout i think you're after.

Stryker412
11-21-2008, 07:01 PM
Hey man, I'm gonna try to explain this to you as simple as I can

create a

.wrapper - Set the width you want your website to fill, like the main section say 750px;

Place the following inside the wrapper tag <div id="wrapper">
<div id="sidebar">Content</div>
<div id="mainContent">Content</div>
</div


.sidebar - Set width i.e 100px and set this to float:left;

.mainContent - Set width for this i.e 650px; and float:left; this also (maybe try float:right) if that does work, that should give you the basic layout i think you're after.

If I set them both to div id instead of div class, both are in the center of the page stacked on top of each other.

Crispy
11-21-2008, 07:54 PM
If I set them both to div id instead of div class, both are in the center of the page stacked on top of each other.

umm, the wrapper will be a "." and the others will be "#" (inside).

they are just tagged as <div id="x"> in the html =)

Stryker412
11-21-2008, 08:05 PM
umm, the wrapper will be a "." and the others will be "#" (inside).

they are just tagged as <div id="x"> in the html =)

My page (http://users.ettc.net/mait119/final/) still does not look right with the divs set to id (instead of class) and with this CSS.

/* Global Styles */
#navmenu {
padding-left: 0px;
width: 250px;
height:100%;
text-align: left;
}

.body {
text-align:center;
width: 750px;
}
#pagelayout {
position: relative;
width: 750px;
text-align: center;
margin: 0;
height: 100%;
}

Crispy
11-21-2008, 08:39 PM
.wrapper(or container)
width: 750px;
margin: 0 auto;

.body {
text-align:center;
(only put stuff like text formatting here)

#sidebar {
width: 250px;
text-align: left;
float:left;
margin: 0; <-- zero out margins, good practice
}

}
#mainContent {
width: 500px; <---- change from 750px, or nothing else will fit next to it
float:right;(may be necissary)
margin: 0;
}

Stryker412
11-21-2008, 08:48 PM
Still no luck. I have tried both float right and left. I've also tried to set left: 0 and right: 0 in hopes of getting the pagelayout div centered under the header graphic.

Also, what does zeroing out the margins do?

Avril
11-22-2008, 06:04 PM
You need
(1) a black background
(2) a content "wrapper" of about 750px centred on the page
(3) a left column with the links
(4) a right column with the text.

Try this:
CSS code:

body {margin: 0px; border: 0px; background-color: #000000;}
div#wrapper {width: 750px; height: 600px; margin-left: auto; margin-right: auto; background-color: #bae6e9b; border: 1px solid #FFFFFF;}
div#header {float: left; width: 748px; height: 150px; background-color: #9e9e9e; border: 1px solid #FFFFFF; text-align: center;}
div#leftpane {float: left; clear: right; width: 150px; height: 450px;background-color: #d0d0d0;}
div#rightpane {float: left; width: 580px; background-color: #777777; padding: 10px;}
.title {font-family: times, verdana, garamond, sans-serif; color: #FFFFFF; font-size: 2em;}


html code:

<div id="wrapper">

<div id="header">
Here is where your header comes - image is centred<br>
<img src="images/myimage.jpg" width="150px" height="140px">
</div>
<div id="leftpane">
Here is where your links come
</div>
<div id="rightpane">
<div class="title">The next meeting is on ...</div>
</div>

</div>


Adjust accordingly. I have put colours and borders in to show each div. Taking out the colours and borders will give you a plain black background.

See if it works for you.

Cheers!

Stryker412
11-24-2008, 01:57 PM
What exactly does the wrapper do? Isn't it performing the same function as the body would?

Stryker412
11-24-2008, 02:13 PM
You need
(1) a black background
(2) a content "wrapper" of about 750px centred on the page
(3) a left column with the links
(4) a right column with the text.

Try this:
CSS code:

body {margin: 0px; border: 0px; background-color: #000000;}
div#wrapper {width: 750px; height: 600px; margin-left: auto; margin-right: auto; background-color: #bae6e9b; border: 1px solid #FFFFFF;}
div#header {float: left; width: 748px; height: 150px; background-color: #9e9e9e; border: 1px solid #FFFFFF; text-align: center;}
div#leftpane {float: left; clear: right; width: 150px; height: 450px;background-color: #d0d0d0;}
div#rightpane {float: left; width: 580px; background-color: #777777; padding: 10px;}
.title {font-family: times, verdana, garamond, sans-serif; color: #FFFFFF; font-size: 2em;}


html code:

<div id="wrapper">

<div id="header">
Here is where your header comes - image is centred<br>
<img src="images/myimage.jpg" width="150px" height="140px">
</div>
<div id="leftpane">
Here is where your links come
</div>
<div id="rightpane">
<div class="title">The next meeting is on ...</div>
</div>

</div>


Adjust accordingly. I have put colours and borders in to show each div. Taking out the colours and borders will give you a plain black background.

See if it works for you.

Cheers!

I used your code but the header and content pane are not centered.

http://users.ettc.net/mait119/final/

abduraooft
11-24-2008, 02:37 PM
To center your wrapper, apply a width to it(less than the body width), and then apply the left and right margins like

#wrapper{
width:900px; /* or in % like 95%*/
margin:0 auto;
}

PS: validate and fix all errors. see http://validator.w3.org/check?uri=http%3A%2F%2Fusers.ettc.net%2Fmait119%2Ffinal%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Stryker412
11-24-2008, 02:52 PM
To center your wrapper, apply a width to it(less than the body width), and then apply the left and right margins like

#wrapper{
width:900px; /* or in % like 95%*/
margin:0 auto;
}

PS: validate and fix all errors. see http://validator.w3.org/check?uri=http%3A%2F%2Fusers.ettc.net%2Fmait119%2Ffinal%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

If I take out the body div id, then the background goes white. Also I made the changes to my css but now the menu is on the right side.

abduraooft
11-24-2008, 03:03 PM
.wrapper {
height:600px;
margin:0pt auto;
width:750px;
}
.body {
background-color:#000000;
border:0px none;
margin:0px;
} should be

#wrapper {
height:600px;
margin:0pt auto;
width:750px;
}
body {
background-color:#000000;
border:0px none;
margin:0px;
}

Stryker412
11-24-2008, 03:16 PM
Ahhh! This is frustrating. I fix one issue and another is created. Flip back and forth between the index and contacts. Both are still not aligning properly.

Avril
11-24-2008, 04:38 PM
The body is like a "wall" on which you place your frame (wrapper - I've given it a width of 750px and height of 600px but you can change these). Within the wrapper are the three divs: header, leftpane and rightpane. The "header" is the full width of the wrapper with the logo centred. The "leftpane" is floated left, "clear: right" to make place for the "rightpane". The rightpane has been given a padding so that the content does not stay flush against the margins.

I am a bit confused, hence the long explanation - do you want the left content to align with the right content? Then add a padding to the left div as well and subtract it from the width and height.

Stryker412
11-24-2008, 05:58 PM
The body is like a "wall" on which you place your frame (wrapper - I've given it a width of 750px and height of 600px but you can change these). Within the wrapper are the three divs: header, leftpane and rightpane. The "header" is the full width of the wrapper with the logo centred. The "leftpane" is floated left, "clear: right" to make place for the "rightpane". The rightpane has been given a padding so that the content does not stay flush against the margins.

I am a bit confused, hence the long explanation - do you want the left content to align with the right content? Then add a padding to the left div as well and subtract it from the width and height.

Here is my last project but it was done using HTML alignment not CSS. This is how I want my final project to look in regards to alignment.

http://users.ettc.net/mait119/activity2/

The menu is in the same place one each page and the content area is centered on the banner.

For my final project, I have the CSS just how you all have suggested yet I'm still having major alignment issues. Also, if you click on the Contacts link it is way out of wack.

Rowsdower!
11-24-2008, 08:14 PM
So should I delete the body portion? I thought that was needed to get IE to align properly?

Edit: I used your code and it did move the page content better but I need the page content to be more or less centered under the logo graphic. How can I do that?

So were we close with my code? What exactly needed to be different with the code I provided? One major issue with centering the text under your logo is that your logo was page-centered (as opposed to the div centering the content takes on) which means after adding a left-side navigation panel the content is all centered further to the right than page center. In other words, your logo would always appear to the left of the content center. To fix that, just plop the image into the wrapper <div> and be done with it.

Also, your wrapper div should go AFTER your navmenu div. Putting the navmenu inside of the wrapper defeats the purpose.

Try this:


/* Global Styles */
#wrapper {
width: auto;
height: 600px;
margin:0 auto;

}

body {
margin: 0px;
border: 0px;
background-color: #000000;
}

#header {
width: 100%;
height: 201px;
text-align: center;
border:2px solid red;
padding-left:122px;
}

#navmenu {
float: left;
width: 244px;
height: 100%;
border: 2px solid blue;

}

#pagelayout {
padding: 10px;
text-align: center;
margin:0 auto;
}


.meeting {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 28px;
color: #FFF;
}
#calendarlink {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
}

/* ID Styles */

#navigation td {
border-bottom: 1px solid #F4FFE4;
}

#navigation a {
font: 16px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:16px;
letter-spacing:.2em;
text-decoration: none;
display:block;
padding:8px 6px 10px 20px;
}

#navigation a:hover {
background: #FFFFFF;
color:#000000;
}

#tagline {
font:24px Arial, Helvetica, sans-serif;
color: #FFFFFF;
letter-spacing:.4em;
line-height:18px;
}

#monthformat {
border-bottom: 1px dashed #FFFFFF;
}

#dateformat {
font:14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
letter-spacing:0.2em;
}

/* Class Styles */

.bodyText {
font:16px Arial, Helvetica, sans-serif;
color:#FFFFFF;
line-height:20px;
margin-top:0px;
}

.pageName{
font: 18px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:26px;
letter-spacing:.21em;
}

.subHeader {
font: 12px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:22px;
letter-spacing:.2em;
}

.quote {
font: 20px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:30px;
}

.smallText {
font: 10px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height: 22px;
}

.navText {
font: 12px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:16px;
letter-spacing:.2em;
text-decoration: none;
}

.contacts {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #FFF;
}



Knock out the borders once you have things where you want them of course. And then the HTML is like this:


<!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>Astronomical Society of the Toms River Area Home page</title>
<link rel="stylesheet" href="astrasite2.css" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #95B7DF;
}
-->
</style></head>

<script language="JavaScript" type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
</script>
<body>
<div id="header"><img src="http://users.ettc.net/mait119/final/ASTRA_Logo%202.jpg" alt="ASTRA" width="284" height="201"/></div>

<br />
<div id="navmenu">
<table width="200" border="0" align="center" cellpadding="1" cellspacing="0" id="navigation">
<tr>
<td width="244" align="center" valign="middle" id="dateformat">
<script language="JavaScript" type="text/javascript"> document.write(TODAY);</script> </td>
</tr>
<tr>
<td width="244" align="center"class="navText"><a href="aboutus.html">About Us</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="contacts.html">Contact</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="meetings.html">Meetings</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="newsindex.html">Newsletters</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="http://www.hcmpics.com/astra">Message Board</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="clocks.html">Clear Sky Clocks</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="http://www.skyandtelescope.com/observing/ataglance">This Week's Sky</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="http://www.astra-nj.org/ASTRA-WEAR.pdf">ASTRA Wear</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="content/astro_links.html">Astro Links</a></td>
</tr>
</table>
<p align="center"><img src="http://tycho.usno.navy.mil/cgi-bin/phase.gif" alt="Current Lunar Phase" width="100" height="100" align="bottom" /></p>
<p align="center" class="smallText">&copy;2008 ASTRA</p></td>
</div>
<div id="wrapper">


<div id="pagelayout">
<div class="meeting">The next meeting is on December 12th at 8pm</div>
<p><SCRIPT LANGUAGE="Javascript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<IMG name=randimg SRC='http://astra-nj.org/Gallery/Zollner-Phil/8th.JPG' height='416' width='600' border='0' ALT='Sunset'></A>"
b[n++]= "<IMG name=randimg SRC='http://spiff.rit.edu/classes/phys240/lectures/gal_taxon/images/m31_ware_big.jpg' height='416' width='600' border='0' ALT='M31'></A>"
b[n++]= "<IMG name=randimg SRC='http://gallery.photo.net/photo/6936595-md.jpg' height='416' width='600' border='0' ALT='M42'></A>"
b[n++]= "<IMG name=randimg SRC='http://naturenotebook.net/wp-content/uploads/2008/02/lunar-eclipse.jpg' height='416' width='600' border='0' ALT='eclipse'></A>"
b[n++]= "<IMG name=randimg SRC='http://i.pbase.com/o4/22/675522/1/62185767.Q8uxkEtK.VenusandJupiterConjunction3.jpg' height='416' width='600' border='0' ALT='conjunction'></A>"
i=Math.floor(Math.random() * n) ;
document.write( b[i] )
</SCRIPT></p>
<p><a href="calendar.html" id="calendarlink" title="2008Calendar">Calendar of Events</a></p>
</div>

</div>
</body>
</html>


Make all of this validate if it doesn't already and you should be good to go. On my IE7 (for what that's worth) this seems like it gives exactly the same performance as your Steeler's page.

Is this what you're looking for?

Stryker412
11-24-2008, 08:47 PM
So were we close with my code? What exactly needed to be different with the code I provided? One major issue with centering the text under your logo is that your logo was page-centered (as opposed to the div centering the content takes on) which means after adding a left-side navigation panel the content is all centered further to the right than page center. In other words, your logo would always appear to the left of the content center. To fix that, just plop the image into the wrapper <div> and be done with it.

Also, your wrapper div should go AFTER your navmenu div. Putting the navmenu inside of the wrapper defeats the purpose.

Try this:


/* Global Styles */
#wrapper {
width: auto;
height: 600px;
margin:0 auto;

}

body {
margin: 0px;
border: 0px;
background-color: #000000;
}

#header {
width: 100%;
height: 201px;
text-align: center;
border:2px solid red;
padding-left:122px;
}

#navmenu {
float: left;
width: 244px;
height: 100%;
border: 2px solid blue;

}

#pagelayout {
padding: 10px;
text-align: center;
margin:0 auto;
}


.meeting {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 28px;
color: #FFF;
}
#calendarlink {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
}

/* ID Styles */

#navigation td {
border-bottom: 1px solid #F4FFE4;
}

#navigation a {
font: 16px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:16px;
letter-spacing:.2em;
text-decoration: none;
display:block;
padding:8px 6px 10px 20px;
}

#navigation a:hover {
background: #FFFFFF;
color:#000000;
}

#tagline {
font:24px Arial, Helvetica, sans-serif;
color: #FFFFFF;
letter-spacing:.4em;
line-height:18px;
}

#monthformat {
border-bottom: 1px dashed #FFFFFF;
}

#dateformat {
font:14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
letter-spacing:0.2em;
}

/* Class Styles */

.bodyText {
font:16px Arial, Helvetica, sans-serif;
color:#FFFFFF;
line-height:20px;
margin-top:0px;
}

.pageName{
font: 18px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:26px;
letter-spacing:.21em;
}

.subHeader {
font: 12px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:22px;
letter-spacing:.2em;
}

.quote {
font: 20px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:30px;
}

.smallText {
font: 10px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height: 22px;
}

.navText {
font: 12px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:16px;
letter-spacing:.2em;
text-decoration: none;
}

.contacts {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #FFF;
}



Knock out the borders once you have things where you want them of course. And then the HTML is like this:


<!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>Astronomical Society of the Toms River Area Home page</title>
<link rel="stylesheet" href="astrasite2.css" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #95B7DF;
}
-->
</style></head>

<script language="JavaScript" type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
</script>
<body>
<div id="header"><img src="http://users.ettc.net/mait119/final/ASTRA_Logo%202.jpg" alt="ASTRA" width="284" height="201"/></div>

<br />
<div id="navmenu">
<table width="200" border="0" align="center" cellpadding="1" cellspacing="0" id="navigation">
<tr>
<td width="244" align="center" valign="middle" id="dateformat">
<script language="JavaScript" type="text/javascript"> document.write(TODAY);</script> </td>
</tr>
<tr>
<td width="244" align="center"class="navText"><a href="aboutus.html">About Us</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="contacts.html">Contact</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="meetings.html">Meetings</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="newsindex.html">Newsletters</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="http://www.hcmpics.com/astra">Message Board</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="clocks.html">Clear Sky Clocks</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="http://www.skyandtelescope.com/observing/ataglance">This Week's Sky</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="http://www.astra-nj.org/ASTRA-WEAR.pdf">ASTRA Wear</a></td>
</tr>
<tr>
<td width="244" align="center" class="navText"><a href="content/astro_links.html">Astro Links</a></td>
</tr>
</table>
<p align="center"><img src="http://tycho.usno.navy.mil/cgi-bin/phase.gif" alt="Current Lunar Phase" width="100" height="100" align="bottom" /></p>
<p align="center" class="smallText">&copy;2008 ASTRA</p></td>
</div>
<div id="wrapper">


<div id="pagelayout">
<div class="meeting">The next meeting is on December 12th at 8pm</div>
<p><SCRIPT LANGUAGE="Javascript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<IMG name=randimg SRC='http://astra-nj.org/Gallery/Zollner-Phil/8th.JPG' height='416' width='600' border='0' ALT='Sunset'></A>"
b[n++]= "<IMG name=randimg SRC='http://spiff.rit.edu/classes/phys240/lectures/gal_taxon/images/m31_ware_big.jpg' height='416' width='600' border='0' ALT='M31'></A>"
b[n++]= "<IMG name=randimg SRC='http://gallery.photo.net/photo/6936595-md.jpg' height='416' width='600' border='0' ALT='M42'></A>"
b[n++]= "<IMG name=randimg SRC='http://naturenotebook.net/wp-content/uploads/2008/02/lunar-eclipse.jpg' height='416' width='600' border='0' ALT='eclipse'></A>"
b[n++]= "<IMG name=randimg SRC='http://i.pbase.com/o4/22/675522/1/62185767.Q8uxkEtK.VenusandJupiterConjunction3.jpg' height='416' width='600' border='0' ALT='conjunction'></A>"
i=Math.floor(Math.random() * n) ;
document.write( b[i] )
</SCRIPT></p>
<p><a href="calendar.html" id="calendarlink" title="2008Calendar">Calendar of Events</a></p>
</div>

</div>
</body>
</html>


Make all of this validate if it doesn't already and you should be good to go. On my IE7 (for what that's worth) this seems like it gives exactly the same performance as your Steeler's page.

Is this what you're looking for?

YES!!! That's what I wanted. One small change is that I'd like the menu and pagecontent to come closer to each other. The menu is too far to the left of the page and the page content looks slightly to the right of center.

Stryker412
11-25-2008, 06:54 PM
I was able to get a few more pages finished (meetings and about us), does anyone have ideas on how I can move the menu over to the right a little more?

Rowsdower!
11-25-2008, 06:57 PM
YES!!! That's what I wanted. One small change is that I'd like the menu and pagecontent to come closer to each other. The menu is too far to the left of the page and the page content looks slightly to the right of center.
Hmm, well I think we're talking in circles around one another here. Let me try to clarify what we are talking about (or else expose my misunderstanding of it).


As for the gap between content and the menu...


If you add some text (and change the font color to a color other than black) you can see that the content actually doesn't pull away from the menu. Since your image is centered (as opposed to left-justified) and is a fixed width it necessarily moves away from the menu as the screen size gets bigger. If you are intent upon having that image fill the entire content area then you can rewrite your java code like so:


<SCRIPT LANGUAGE="Javascript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<IMG name=randimg SRC='http://astra-nj.org/Gallery/Zollner-Phil/8th.JPG' height='416' width='600' border='0' ALT='Sunset'></A>"
b[n++]= "<IMG name=randimg SRC='http://spiff.rit.edu/classes/phys240/lectures/gal_taxon/images/m31_ware_big.jpg' height='416' width='600' border='0' ALT='M31'></A>"
b[n++]= "<IMG name=randimg SRC='http://gallery.photo.net/photo/6936595-md.jpg' height='416' width='600' border='0' ALT='M42'></A>"
b[n++]= "<IMG name=randimg SRC='http://naturenotebook.net/wp-content/uploads/2008/02/lunar-eclipse.jpg' height='416' width='600' border='0' ALT='eclipse'></A>"
b[n++]= "<IMG name=randimg SRC='http://i.pbase.com/o4/22/675522/1/62185767.Q8uxkEtK.VenusandJupiterConjunction3.jpg' height='416' width='600' border='0' ALT='conjunction'></A>"
i=Math.floor(Math.random() * n) ;
document.write( b[i] )
document.getElementById('randimg').style.width="100%";
document.getElementById('randimg').style.height="auto";
</SCRIPT>

This could make some of your images a little unsightly but it will eliminate any gap with the menu.


As for the center alignment of the content on screen...


Well, as I said, the content WILL be to the right of center (by 122 px in fact) because you have a left-hand navigation pushing everything that way. Your content will be center aligned to the wrapper <div>, but since the wrapper <div> is bumped over to the right of the page-center by the menu... You get the idea.

The only way I know of to center the content on page-center again without wrapping the content under the bottom of the menu would be to add padding (equal to the menu width of 244px) to the right-hand side of the wrapper <div>. You can do that, but again, you'll have to have your images resize with the window (as above). If you don't resize with the window after adding this padding your images will be off-center when the window size gets down to a certain width on-screen. For instance, at my resolution your existing image breaks that alignment when I add right hand padding to the wrapper because the image is bigger than the wrapper <div>'s total width.

Instead let me have you try this to see if this is what you're after:

Move your header inside the wrapper <div>. You don't need to change any code, just make the adjustment in the HTML. After you have done that, make the changes in bold red text below into the css sheet from my last post:


#header {
width: 100%;
height: 201px;
text-align: center;
border:2px solid red;
padding-left:122px; <-- Remove this!
}

#navmenu {
float: left;
width: 244px;
height: 100%;
border: 2px solid blue;
padding-top:300px;
}
If 300px pushes the menu further down than you would like you can fiddle with it until the distance from the top looks right.

Try one, the other, or both of these changes together (or pad the wrapper div by 244px) and let me know if any of this is what you're after.

Rowsdower!
11-25-2008, 07:08 PM
Also, FYI your conjunction image (VenusandJupiterConjunction3.jpg) isn't loading properly. Check your external url for that one as it may have moved.

Stryker412
11-25-2008, 07:39 PM
Doesn't the wrapper tag start after the header and end before the /html tag?

Avril
11-26-2008, 04:19 AM
Could you post your code?

Rowsdower!
11-26-2008, 02:03 PM
Doesn't the wrapper tag start after the header and end before the /html tag?

It depends on what you're going for, but I usually use a pretty traditional setup with a header, left navigation, and a footer. Call it boring if you like, but it works. I usually place the code in order like so:


DOC TYPE...
<html>
<head>
</head>
<body>
<div id="header">
Header stuff goes in here...
</div>
<div id="main">
<div id="menu">
Menu stuff goes in here... Menu div is styled to float left
</div>
<div id="wrapper">
Content goes in here... Wrapper div does not have float or position, so it just fits itself in to the right of the menu
</div>
</div>
<div id="footer">
Footer stuff goes in here...
</div>
</body>
</html>
It gives an appearance like this:

_______________________
| header |
| menu |<--content-->|
| | |
| | |
| footer |

This works fine for me since I am not trying to center a logo in my header. Since you are trying to center a logo, I am just recommending that you put the header into the wrapper so that it will be centered along the same axis as your content. Like this:


_______________________
| | header |
| menu |<--content-->|
| | |
| | |
| footer |

This was the goal, wasn't it?

I have to say I am still a little confused about what you are trying to accomplish so please let me know if I have things wrong.


@ Avril: his site is here: http://users.ettc.net/mait119/final/

Stryker412
11-26-2008, 02:21 PM
Your second example is basically what I am trying to do. However I'd like to cater to those who user lower resolutions so I thought moving the content in on both sides might be best, similar to how SDTV looks on an HDTV (ie. bars on the sides).

Also, running into a small issue with the navmenu height. If you click on about us or meeting info you'll see what I mean. The main content starts to move into the nav area once the height of the menu has been reached.

Rowsdower!
11-26-2008, 03:17 PM
Your "aboutus" page does not use the wrapper div. If you add
<div id="wrapper"> just before your
<div id="info"> section and then close your wrapper div (using </div> of course) just after
<center><p>"THANK YOU FOR YOUR SUPPORT"</p></center> you should be fixed up as far as that goes.

I haven't checked your other page but I would suspect the same issue is at play there as well.

Stryker412
11-26-2008, 04:28 PM
I put the wrapper in there on both pages and it works fine in IE but not FF.

Avril
11-26-2008, 04:34 PM
Is this what you want?

CSS


body {margin: 0px; border: 0px; background-color: #000000;}
div#wrapper {width: 750px; height: 700px; margin-left: auto; margin-right: auto; background-color: #bae6e9b; border: 1px solid #FFFFFF; margin-bottom: 30px;}
div#header {float: right; width: 598px; height: 150px; background-color: #9e9e9e; border: 1px solid #FFFFFF; text-align: center;}
div#leftpane {float: left; clear: right; width: 150px; height: 550px;background-color: #d0d0d0;}
div#rightpane {float: left; width: 580px; background-color: #777777; padding: 10px;}
.title {font-family: times, verdana, garamond, sans-serif; color: #FFFFFF; font-size: 2em;}


html

<div id="wrapper">

<div id="header">
Here is where your header comes - image is centred<br>
<img src="images/myimage.jpg" width="150px" height="140px" alt="Mylogo">
</div>
<div id="leftpane">
Here is where your links come
</div>
<div id="rightpane">
<div class="title">The next meeting is on ...</div>
</div>

</div>


P.S. It works on Safari and FireFox and most probably needs a separate stylesheet for IE.

Rowsdower!
11-26-2008, 04:52 PM
Is this what you want?...P.S. It works on Safari and FireFox and most probably needs a separate stylesheet for IE.

This raises a good point. It's worth mentioning that I only have access to IE7 where I am due to admin settings. Any code I give you is by no means guaranteed to be solid on other browsers...

Stryker412
11-26-2008, 09:46 PM
Is this what you want?

CSS


body {margin: 0px; border: 0px; background-color: #000000;}
div#wrapper {width: 750px; height: 700px; margin-left: auto; margin-right: auto; background-color: #bae6e9b; border: 1px solid #FFFFFF; margin-bottom: 30px;}
div#header {float: right; width: 598px; height: 150px; background-color: #9e9e9e; border: 1px solid #FFFFFF; text-align: center;}
div#leftpane {float: left; clear: right; width: 150px; height: 550px;background-color: #d0d0d0;}
div#rightpane {float: left; width: 580px; background-color: #777777; padding: 10px;}
.title {font-family: times, verdana, garamond, sans-serif; color: #FFFFFF; font-size: 2em;}


html

<div id="wrapper">

<div id="header">
Here is where your header comes - image is centred<br>
<img src="images/myimage.jpg" width="150px" height="140px" alt="Mylogo">
</div>
<div id="leftpane">
Here is where your links come
</div>
<div id="rightpane">
<div class="title">The next meeting is on ...</div>
</div>

</div>


P.S. It works on Safari and FireFox and most probably needs a separate stylesheet for IE.

I used your CSS code, and these are the results:

http://users.ettc.net/mait119/final/newsindex.html

Stryker412
12-02-2008, 01:41 PM
I have one small lingering issue. The content from the right column if longer than the navmenu will move under it.

http://users.ettc.net/mait119/final/

Click the about us link, and you'll see what I mean.

Rowsdower!
12-02-2008, 01:48 PM
I have one small lingering issue. The content from the right column if longer than the navmenu will move under it.

http://users.ettc.net/mait119/final/

Click the about us link, and you'll see what I mean.

Use this in to your "#info" style in your CSS:


margin-left: <insert menu width here>px;

I think that should do it... Works in IE7 and FF.

Stryker412
12-02-2008, 02:14 PM
Use this in to your "#info" style in your CSS:


margin-left: <insert menu width here>px;

I think that should do it... Works in IE7 and FF.

That worked great thanks! One more simple thing I noticed since I wasn't testing on IE. On the contacts page I have a break in between each name to space them out, but on IE the breaks are not being used. Why is that?

Rowsdower!
12-02-2008, 02:25 PM
Hey Stryker, hang around here long enough and somebody will throw these eggs at you sooner or later (unless you learn by example as I have):

1) Never use tables for layout - tables are only meant for data tables, not graphical layout.
2) Never use <br> for vertical spacing - it is meant only to end text wrapping.

What you are seeing here I believe is a consequence of the second point above. I don't think the <dt> element breaks its own line for text wrapping (at least maybe not in all browsers) so your <br> is not vertically spacing as you had hoped in IE. This much is just my guess.

What I know is, if you add some padding to your <dt> elements in your style sheet (say 4px or so to the bottom of each <dt>) and get rid of those <br>'s you should be in good shape. Give it a try and let me know if it doesn't work out.

Stryker412
12-02-2008, 03:00 PM
I was able to get it to work by adding:

dt {
margin-bottom: 1.4em;

}

My question is, why didn't it work when I added .info dt or #info dt?

abduraooft
12-02-2008, 03:24 PM
I was able to get it to work by adding:

dt {
margin-bottom: 1.4em;

}

My question is, why didn't it work when I added .info dt or #info dt?Because, in that page (http://users.ettc.net/mait119/final/contacts.html), there is no container element having an id or class value of info

Stryker412
12-02-2008, 03:39 PM
Because, in that page (http://users.ettc.net/mait119/final/contacts.html), there is no container element having an id or class value of info


Ok I see, sorry about that. So if I had a CSS style that I wanted to apply to one page's element but not necessarily all of the other pages, how would I do that?

jerry62704
12-02-2008, 03:49 PM
1. Use a unique tag ID for the specific page.
2. Use a unique css style on that page.
3. Use a style at the header of that page.

Say you wanted <p> on page z to be different from pages a-y. Have a ID on there ("pagez" for example):

#pagez p {some stuff}

with a <div id="pagez"> only on that page as a wrapper of the stuff you want unique.

Or have a unique style sheet with that specific stuff and include it in only that page:

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

Or have a style in the header of that page:

<style type="text/css">
p {some stuff}
</style>

Stryker412
12-02-2008, 03:58 PM
Ok yes, that's what I was doing with the header. I tried to add some spacing to an UL but it didn't seem to take.

Stryker412
12-02-2008, 08:07 PM
I wanted to add some spacing in between the links on this page:

http://users.ettc.net/mait119/final/astro_links.html


Nevermind, I fixed what I wanted.

I would like to thank everyone here for both their patience and assistance. I submitted my project.

Rowsdower!
12-02-2008, 08:21 PM
Happy to help. Good luck!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum