Bytes Tech Community, We heart tech!

Register Now


 
 Reply to this topicStart new topicStart Poll

Outline · [ Standard ] · Linear+

 CSS / HTML Help, really need help, willing to pay creds!!

Track this topic | Email this topic | Print this topic
Vpr99
post Apr 25 2008, 07:57 PM
Post #1


¤ I Has A Bucket! ¤
Group Icon

Group: VIP Members
Posts: 1,805
Gender: Male
------------------
Donate CFX Creds
CFX Credits: 1,041
------------------
Member No.: 758

Reputation: 64 pts




Ok, here is my problem: I am trying to build a site for my school's AP program. I have built the site completely from DIV tags, and everything looks right. 1 problem, though. I need to enlarge the font for the final verson. The easiest thing would be to have the page be as long as the content, which isn't that hard in theory. Here's my problem:

I have it set up in 2 different DIV tags:
CODE
main
middle


The main DIV tag has a background, and two other tiliing side images(See illustration).

The content that is in Middle makes the box expand properly, so that is all fine and dandy. The Main DIV, however, does not recognize that there is content in it, and so it stays at the same height. It works fine if I give it a fixed height (e.g. 1000 pixels), but if I set it at 100%, it does not recognize the content inside it, and it reduces it down to 0%, nothing. Whatever I do, it does not want to work properly.

Here is an example of what it is doing wrong, my HTML, and the relevant parts of my CSS.

(IMG:http://www.maj.com/gallery/Vpr99/Documentation/ex2.jpg)

HTML
CODE

<!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>
   <title>PHS International Baccalaureate - Home</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <link href="stylesheet.css" rel="stylesheet" type="text/css">
 </head>
 <body>
<!-- Site Begins Now -->
   <div id="main">
     <div id="lbar"><img src="images/bar_left.gif" width="50" height="1000" alt=""></div>
     <div id="rbar"><img src="images/bar_right.gif" width="50" height="1000" alt=""></div>
     <div id="middle">
       <div id="banner"><a href="index.html"><img src="images/banner.gif" width="789" height="122" border="0" alt="Poudre High School International Baccalaureate Program"></a></div>
       <div id="phs"><a href="http://schoolweb.psdschools.org/phs/"><img src="images/topnav_1.gif" alt="" width="111" height="31" border="0"></a></div>
       <div id="psd"><a href="http://www.psdschools.org/"><img src="images/topnav_2.gif" alt="" width="111" height="31" border="0"></a></div>
       <div id="ibo"><a href="http://www.ibo.org/"><img src="images/topnav_3.gif" alt="" width="111" height="31" border="0"></a></div>
       <div id="piv"><a href="https://piv.psdschools.org/piv/piv.exe?action=signin"><img src="images/topnav_4.gif" alt="" width="111" height="31" border="0"></a></div>
       <div id="homeNav"><a href="index.html"><img src="images/sidenav_1.gif" alt="" width="140" height="40" border="0"></a></div>
       <div id="genNav"><a href="general.html"><img src="images/sidenav_2.gif" alt="" width="140" height="40" border="0"></a></div>
       <div id="calNav"><a href="calendar.html"><img src="images/sidenav_3.gif" alt="" width="140" height="40" border="0"></a></div>
       <div id="diplomaNav"><a href="dp.html"><img src="images/sidenav_4.gif" alt="" width="140" height="40" border="0"></a></div>
       <div id="mypNav"><a href="myp.html"><img src="images/sidenav_5.gif" alt="" width="140" height="40" border="0"></a></div>
       <div id="staffNav"><a href="content/staff.pdf"><img src="images/sidenav_6.gif" alt="" width="140" height="40" border="0"></a></div>
       <div id="newsNav"><a href="news.html"><img src="images/sidenav_7.gif" alt="" width="140" height="40" border="0"></a></div>
       <div id="groceryNav"><a href="grocery.html"><img src="images/sidenav_8.gif" alt="" width="140" height="40" border="0"></a></div>
       <div id="pabNav"><a href="content/pab.pdf"><img src="images/sidenav_9.gif" alt="" width="140" height="40" border="0"></a></div>
       <div id="content">
<!-- Content Starts Here -->

<!-- Content Ends Here -->
       </div>
     </div>
   </div>
</body>
</html>





CSS
CODE

@charset "utf-8";
/* CSS Document */

html { min-height: 100%; margin-bottom: 1px; }

body {
text-align: center;
background-color: #22366F;
padding: 0px 0px 0px;
margin: 0px;
}
#main {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width:901px;
height: 1000px;
min-height: 1000px;
text-align: left;
background-color: #b5bece;
}
#lbar {
height: 1000px;
width: 50px;
position: absolute;
left: 0px;
top: 0px;
}
#rbar {
height: 1000px;
width: 50px;
position: absolute;
left: 851px;
top: 0px;
}
#content {
text-align: left;
height: 782px;
width: 603px;
position: absolute;
background-color: #b0b7c0;
left: 165px;
top: 174px;
z-index: 2;
border: 1px solid #FFFFFF;
font-family: Verdana;
font-size: 12px;
font-style: normal;
line-height: normal;
color: #000;
padding: 10px;
}
#middle {
height: 1000;
width: 801px;
position: absolute;
background-color: #b9c1cc;
left: 50px;
top: 0px;
}



Thanks a bunch for this!


User is offlineProfile CardPM
+Quote PostGo to the top of the page
SleeplessHacker
post Apr 26 2008, 03:01 AM
Post #2


Loyal Member
Group Icon

Group: Members
Posts: 339
Gender: Not Telling
------------------
Donate CFX Creds
CFX Credits: 151
------------------
Member No.: 18

Reputation: 4 pts




I'm not really sure, I've had problems with myself. Made up for it by using tables :b

Try removing the height and using display: inline; or display: block; on your CSS .main class? You also could try floating it, like float: left; float: right; or something like that.


User is offlineProfile CardPM
+Quote PostGo to the top of the page
Vpr99
post Apr 26 2008, 11:16 PM
Post #3


¤ I Has A Bucket! ¤
Group Icon

Group: VIP Members
Posts: 1,805
Gender: Male
------------------
Donate CFX Creds
CFX Credits: 1,041
------------------
Member No.: 758

Reputation: 64 pts




Yea, I'm trying to figure it out using float, but I have the same thing built out of tables as a backup...


User is offlineProfile CardPM
+Quote PostGo to the top of the page
SleeplessHacker
post Apr 28 2008, 03:01 AM
Post #4


Loyal Member
Group Icon

Group: Members
Posts: 339
Gender: Not Telling
------------------
Donate CFX Creds
CFX Credits: 151
------------------
Member No.: 18

Reputation: 4 pts




Supposedly it's so web developers who need content a certain size aren't bothered if they put too much content in, but frankly who cares? :| They should have an overflow: extend; or something like that..


User is offlineProfile CardPM
+Quote PostGo to the top of the page
MyRule
post Apr 28 2008, 12:15 PM
Post #5


CodedFx Legend!
Group Icon

Group: VIP Members
Posts: 1,759
Gender: Male
------------------
Donate CFX Creds
CFX Credits: 17,867
------------------
Member No.: 3,137

Reputation: 22 pts




dont use the "position: blabla; top: XXXpx; left: XXXpx". The design wont be cross-browser compatible and those tags also caused your problem. Try using margins instead.

anyways, I dont have all the images & stuff so I dont know if it actually works but this might fix ur problem:
CODE
@charset "utf-8";
/* CSS Document */

html { min-height: 100%; margin-bottom: 1px; }

body {
text-align: center;
background-color: #22366F;
padding: 0px 0px 0px;
margin: 0px;
}
#main {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width:901px;
height: 100%;
text-align: left;
background-color: #b5bece;
}
#lbar {
height: 1000px;
width: 50px;
position: absolute;
left: 0px;
top: 0px;
}
#rbar {
height: 1000px;
width: 50px;
position: absolute;
left: 851px;
top: 0px;
}
#content {
text-align: left;
height: 100%;
width: 603px;
position: relative;
background-color: #b0b7c0;
left: 165px;
z-index: 2;
border: 1px solid #FFFFFF;
font-family: Verdana;
font-size: 12px;
font-style: normal;
line-height: normal;
color: #000;
padding: 10px;
margin-top: 174px;
}
#middle {
height: 100%;
width: 801px;
background-color: #b9c1cc;
left: 50px;
}
User is offlineProfile CardPM
+Quote PostGo to the top of the page
Vpr99
post Apr 29 2008, 07:21 PM
Post #6


¤ I Has A Bucket! ¤
Group Icon

Group: VIP Members
Posts: 1,805
Gender: Male
------------------
Donate CFX Creds
CFX Credits: 1,041
------------------
Member No.: 758

Reputation: 64 pts




I will try that out later today, thanks alot MR!


User is offlineProfile CardPM
+Quote PostGo to the top of the page
suman
post Aug 8 2008, 07:05 AM
Post #7


Member
Group Icon

Group: Members
Posts: 22
Gender: Male
------------------
Donate CFX Creds
CFX Credits: 48
------------------
Member No.: 11,167

Reputation: none




Hi



this is great information for my academic projects.


User is offlineProfile CardPM
+Quote PostGo to the top of the page
« Next Oldest · Coding Display & Discussions · Next Newest »
 

Reply to this topicTopic OptionsStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


 

Invision Power Board v2.0.4 © 2010  IPS, Inc.
Licensed to: CodedFX.com