5 replies [Last post]
batpixie
Offline
newbie
Stockbridge, GA
Last seen: 16 years 2 weeks ago
Stockbridge, GA
Joined: 2003-06-30
Posts: 9
Points: 0

So, I fixed my last issue with my DIV tags, but it is back again.

I am making a website for our local Habitat for Humanity. It is a project for school. We are working in groups & must all use the same HTML page, but change it with style sheets. That is the reason for so many nav divs & things that you will see when you view the code. Our site must be able to be viewed in different browsers & resolutions. This is where my problem lies.

I fixed my DIV centering issues using text-align & some inline tags & whatnot. But when you viewed the site in 640x4whatever, the nav bar moved down below the content. (I will post a link, so you will actually know what I am talking about).

I need it to stay in place. It doesn't matter if the person will have to bottom scroll, I just need to it to stay put. Absolute positioning will ruin the view in other resolutions. I want everything centered, reguardless of what your resolution is (even if it means bottom scrolling).

I am attaching a link to the page & I am posting my old style sheet & my new one. I know the new one is a just a mess. I tried everything you guys told me to do before, put it together, took it apart, etc.

Thanks A TON!

Old Style Sheet -

/* background */
body {background-color: F1FFF1;
font-family: verdana;
font-size: 12px;
color: #000000;
background-image: url(11green.gif);
scrollbar-base-color: #9CDCB0;
scrollbar-track-color: #F1FFF1;
scrollbar-arrow-color: #68C684}

/* links */
A:link {text-decoration: none;
color: #68C684}

A:visited {text-decoration: none;
color: #68C684;}

A:hover {text-decoration: none;
color: #F1FFF1;
background-color: #68C684}

A:active {text-decoration: none;
color: #000000}

/* title */
.title {background-image:url(top3.gif);
background-repeat:no-repeat;
margin-left: auto;
margin-right: auto;
width: 698px;
height: 140px}

/* main */
.main {width: 500px;
border: solid 3px #63C684;
background-color: #F1FFF1;
padding: 8px;
vertical-align: top;
text-align: justify;}

/* navigation */
.nav1 {border: solid 3px #63C684;
width:180px;
background-color:F1FFF1;
padding:6px;
vertical-align: top;
text-align: center}

/* inline */
.main, .nav1 {display: inline;
margin: 4px}

/* div center */
.one {text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
border: none}

/* hide */
.nav2 {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

.nav3 {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

.nav4 {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

.nav5 {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

.hammer {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

/* header */
p.header {font-family: verdana;
font-size: 10pt;
font-weight: bold;
background-color: #63C684;
text-align: center;
letter-spacing: .2em;
color: #F1FFF1;
margin: 0px 2px 0px 2px;
padding: 1px}

/* header 2 */
p.header2 {font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-align: center;
letter-spacing: 0em;
color: #000000;
margin: 0px 0px 0px 0px;
padding: 1px}

/* p links */
p.links {text-align: center}

/* house img */
p.house {text-align: center}

/* finished img */
img.finished {text-align: center;
width: 400px;
height: 250px}

/* p finished img */
p.finished {text-align: center}

/* ernie img */
img.ernie, img.day2, img.day4, img.day7, img.cut {text-align: center;
width: 400px;
height: 275px}

/* p ernie img */
p.ernie, p.day2, p.day4, p.day7 , p.cut {text-align: center}

/* finished img */
img.finished {text-align: center;
width: 400px;
height: 250px}

/* p finished img */
p.finished {text-align: center}

/* finished img */
img.finished {text-align: center;
width: 400px;
height: 250px}

/* p finished img */
p.finished {text-align: center}

/* tables */
table {border: 0;
cellpadding: 2px;
cellspacing: 2px;
width: 100%;
font-size: 12px;
font-face: verdana;
align: center;}

td.1 {border: 1px solid #68C684;
cellspacing: 2px;
cellpadding: 2px}

/* calendar */
p.month {font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-align: left;
background-color: #9CDCB0;
letter-spacing: 0em;
color: #000000;
padding: 1px}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

New style sheet -

/* background */
body {background-color: F1FFF1;
font-family: verdana;
font-size: 12px;
color: #000000;
background-image: url(11green.gif);
scrollbar-base-color: #9CDCB0;
scrollbar-track-color: #F1FFF1;
scrollbar-arrow-color: #68C684}

/* links */
A:link {text-decoration: none;
color: #68C684}

A:visited {text-decoration: none;
color: #68C684;}

A:hover {text-decoration: none;
color: #F1FFF1;
background-color: #68C684}

A:active {text-decoration: none;
color: #000000}
/* title */
.title {background-image:url(top3.gif);
background-repeat:no-repeat;
margin-right: auto;
margin-left: auto;
width: 698px;
height: 140px;
float: center;
text-align: center;}

/* main */
.main {width: 500px;
border: solid 3px #63C684;
background-color: #F1FFF1;
padding: 8px;
text-align: justify;
float: left;
margin-left:auto;
margin-right:auto;}

/* navigation */
.nav1 {border: solid 3px #63C684;
width:180px;
background-color:F1FFF1;
padding:6px;
text-align: center;
float: left;
margin-left:auto;
margin-right:auto;}

/* div center */
.one {width: 698px;
text-align: center;
align: center;
margin-left: auto;
margin-right: auto}

/* hide */
.nav2 {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

.nav3 {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

.nav4 {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

.nav5 {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

.hammer {visibility: hidden;
position: absolute;
top: 1px;
left: 1px}

/* header */
p.header {font-family: verdana;
font-size: 10pt;
font-weight: bold;
background-color: #63C684;
text-align: center;
letter-spacing: .2em;
color: #F1FFF1;
margin: 0px 2px 0px 2px;
padding: 1px}

/* header 2 */
p.header2 {font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-align: center;
letter-spacing: 0em;
color: #000000;
margin: 0px 0px 0px 0px;
padding: 1px}

/* p links */
p.links {text-align: center}

/* house img */
p.house {text-align: center}

/* finished img */
img.finished {text-align: center;
width: 400px;
height: 250px}

/* p finished img */
p.finished {text-align: center}

/* ernie img */
img.ernie, img.day2, img.day4, img.day7, img.cut {text-align: center;
width: 400px;
height: 275px}

/* p ernie img */
p.ernie, p.day2, p.day4, p.day7 , p.cut {text-align: center}

/* finished img */
img.finished {text-align: center;
width: 400px;
height: 250px}

/* p finished img */
p.finished {text-align: center}

/* finished img */
img.finished {text-align: center;
width: 400px;
height: 250px}

/* p finished img */
p.finished {text-align: center}

/* tables */
table {border: 0;
cellpadding: 2px;
cellspacing: 2px;
width: 100%;
font-size: 12px;
font-face: verdana;
align: center;}

td.1 {border: 1px solid #68C684;
cellspacing: 2px;
cellpadding: 2px}

/* calendar */
p.month {font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-align: left;
background-color: #9CDCB0;
letter-spacing: 0em;
color: #000000;
padding: 1px}

Link to the site -
http://kahuna.clayton.edu/~csu10977/itsk2411/index.html

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 24 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Back again with more CENTERING DIV issues

The problem is everything is floated. Given that the ONE div could be acting as a container, the width in there could stop things falling - but as it has no actual content (everything is floated out of the flow), it seems not to bother.

If you unfloated either the main or the navigation div (probably the main) and fiddled a lot - it'd need a big top margin, and left margin, it might possibly work. I'll try to give a more consise example tomorrow (UK tomorrow), without doing your work for you of course Wink

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

batpixie
Offline
newbie
Stockbridge, GA
Last seen: 16 years 2 weeks ago
Stockbridge, GA
Joined: 2003-06-30
Posts: 9
Points: 0

Back again with more CENTERING DIV issues

When I unfloat something it gets all messed. One thing moves down, up or where ever. The TA told me something about innerHeight innerWidth, but I looked it up & have no idea how to apply it.

dJomp wrote:
The problem is everything is floated. Given that the ONE div could be acting as a container, the width in there could stop things falling - but as it has no actual content (everything is floated out of the flow), it seems not to bother.

If you unfloated either the main or the navigation div (probably the main) and fiddled a lot - it'd need a big top margin, and left margin, it might possibly work. I'll try to give a more consise example tomorrow (UK tomorrow), without doing your work for you of course Wink

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 24 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Back again with more CENTERING DIV issues

The page linked to has gone! That won't help me fiddle about... Wink

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

batpixie
Offline
newbie
Stockbridge, GA
Last seen: 16 years 2 weeks ago
Stockbridge, GA
Joined: 2003-06-30
Posts: 9
Points: 0

Back again with more CENTERING DIV issues

I am so sorry. LoL. I didn't mean to delete it. I was cleaning up my FTP & I guess that page slipped by me. I will put it back up.

dJomp wrote:
The page linked to has gone! That won't help me fiddle about... Wink

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 24 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Back again with more CENTERING DIV issues

When I copied & pasted the 'new CSS' from above, it seemed to work fine-ish - there were no margins and the layout wasn't centered in IE (fixed by adding text-align : center; to the BODY tag).

If you do add margins, make the width of DIV.one a bit larger to accomodate the extra space, and all should be fine.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.