Jump to content

My first CSS website, Please help

spires

By spires
in CSS Help

 Share

Recommended Posts

spires Advanced Member

spires

Posted
Posted

Hi Guys.

 

I'm trying to build my first modular website using css div tags instead of tables.

 

http://www.reviews4mobilephones.com/home.html

 

(Firefox, safari)

As you can see, the lefthand navigation is cutting through the outer table,

Why is this?

 

I want the table to automatically resize when the div resizes.

 

For some reason i works in IE, but there are lots of other bugs that need fixing.

 

How can I fix this problem?

Am I structuring it totally wrong?

 

Thanks for your help

 

Here my code - HTML

<!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>Untitled Document</title>
<link href="css/wrapper.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
</head>

<body>
<center>
<table width="873" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td align="center" background="images/wrapper/mobile_phone_BG.jpg">
<div id="container">
<div id="head">
<div id="header"><H1>Header</H1></div>
</div>
<div id="main_navigation"><a href="#" class="subLink">Home</a>  |  <a href="#" class="subLink">Reveiws</a>  |  <a href="#" class="subLink">Latest News</a>  |  <a href="#" class="subLink">Top Deals</a>  |  <a href="#" class="subLink">Prizes</a>  |  <a href="#" class="subLink">Contact Us</a></div>

<!-- Intro Container -->
<div id="intro_container">
<div id="intro_text">
 <H1>Welcome to Reviews <span class="number_4">4</span> Mobile Phones.com</H1>
 <H2>We’re the UK’s largest independent mobile phone reviewer. Unbiased and honest, we’ll help you make an informed decision before you invest in your new mobile phone. Read our latest news, mobile reviews and win prizes in our fantastic competitions.</H2>
</div>
<div id="intro_signup"><img src="images/home/Review_sign_up.jpg" /></div>
</div>
<!-- Intro Container -->


<!-- Main Body Container -->
<div id="content">
<!-- Left Panel -->
<div id="leftpanel">
		<div id="mobile_reviews">
				<table cellpadding="0" cellspacing="0" border="0" width="150px">
				 <tr>
				  <td id="left_padding" background="images/wrapper/Left_navi_head.jpg" height="23px" class="boxTitle">Mobile Reviews
				  </td>
				 </tr>
				 <tr>
				  <td id="left_padding" background="images/wrapper/left_navi_bg.jpg">
						<br />
<span class="LeftNaviTitle">Apple Phones</span><br />
Apple i phone<br />
Apple i Phone 3G<br />
<br />
<div id="leftpanel_divider" align="center"></div>
<br />
<span class="LeftNaviTitle">Blackberry Phones </span>  <br />    
Blackberry Pearl 8100<br />   
Blackberry Curve 8320<br />
Blackberry 8800<br />
<br />
<div id="leftpanel_divider" align="center"></div>
<br />
<span class="LeftNaviTitle">LG Phones</span><br />
LG KE770 Shine Bar<br />
LG KE850 Prada<br />
LG KE970 Shine<br />
<br />
<div id="leftpanel_divider" align="center"></div>
<br />
<span class="LeftNaviTitle">Nokia</span><br />
Nokia 1112<br />
Nokia 1200<br />
Nokia 1208<br />
<br />
<div id="leftpanel_divider" align="center"></div>
<br />
<span class="LeftNaviTitle">Motorola</span><br />
Motorola KRZR K1<br />
Motorola KRZR K3<br />
Motorola RAZR V3<br />
<br />
<div id="leftpanel_divider" align="center"></div>
<br />
<span class="LeftNaviTitle">Sony Ericsson Phones</span><br />
Sony Ericsson C702i<br />
Sony Ericsson C902i<br />
Sony Ericsson C700i<br />
<br />
<div id="leftpanel_divider" align="center"></div>
<br />
<span class="LeftNaviTitle">Samsung Phones</span><br />
Samsung Armani<br />
Samsung C300<br />
Samsung D600<br />
<br />
<div id="leftpanel_divider" align="center"></div>
<br />
				  </td>
				 </tr>
				 <tr>
				  <td height="3px"><img src="images/wrapper/left_navi_bottom.jpg" /></td>
				 </tr>
     </table>
		</div>
</div>
<!-- Right Panel -->
<div id="rightpanel">
		<div id="best_picks">Best Picks</div>
		<div id="home_video">home_video</div>
</div>
<!-- Main Body -->
<div id="body"><img src="images/home/Mobile_Review_Image.jpg" width="420" height="181" /></div>
</div>
<!-- Main Body Container -->


<div id="footer">Footer</div>
</div>
	</td>
</tr>
<tr>
  <td><img src="images/wrapper/mobile_phone_Bottom.jpg" /></td>
</tr>
</table>

</center>
</body>
</html>

 

 

Wrapper.css

/* CSS Document */

/* undo some default styling of common (X)HTML browsers
************************************************************/

    /* No list-markers by default - 
     * must redefine bullets w/ bg graphics
     ********************************************************/
     ul,ol {
     list-style:none;
     }

    /* Avoid browser default inconsistent heading, 
     * font-sizes and pre/code
     ********************************************************/
     body,h1,h2,h3,h4,h5,h6,pre,code,td {
     font-size:10px;
					font-family: Arial, Helvetica, sans-serif;
      color: #444444;
					line-height: 14px;
         }

    /* Remove inconsistent (among browsers) - 
     * default padding or margin 
     ********************************************************/
     ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
     fieldset,input,label,div,dd,dt,dl,table,tr,td,img,hr {
         margin:0; padding:0;
         }

     /* prevent blue linked image borders
     ********************************************************/
      a img,:link img,:visited img,fieldset {
         border:none;
         }




div
{
border: 0px solid #333233;
}

#left_padding
{
padding-left: 8px;
}

#container
{
width: 859px;
margin: 0px;
border: 0px;
}

#head
{
height: 100px;
}

#header
{
text-align: center;
margin-top: 30px;
border: 0px;
}

#main_navigation
{
margin-top: 0px;
padding-left: 8px;
text-align: left;
height: 25px;
background:url(../images/wrapper/Mobile_Navi_bg.jpg);
}

#intro_container
{
margin-top: 0px;
padding: 16px;
text-align: left;
height: 95px;
}

#intro_text
{
width: 584px;
height: 95px;
margin-top: 0px;
padding: 0px;
text-align: left;
float: left;
}

#intro_signup
{
width: 230px;
margin-top: 0px;
padding: 0px;
text-align: left;
height: 95px;
float: right;
}


#content
{
margin-top: 0px;
padding: 0px;
height:auto;
}

#leftpanel
{
height: 300px;
width: 178px;
padding: 0px;
float: left;
}

#leftpanel_divider
{
background:url(../images/wrapper/Left_navi_divider.jpg);
height: 1px;
width: 135px;
padding: 0px;
}

#mobile_reviews
{
width: 150px;
height: 150px;
margin: 0px;
margin-top: 0px;
padding: 0px;
}


#rightpanel
{
height: 350px;
width: 258px;
padding: 0px;
float: right;
}

#best_picks, #home_video
{
width: 230px;
margin: 0px;
margin-top: 0px;
padding: 0px;
}

#best_picks
{
height: 150px;
}

#home_video
{
height: 174px;
}


#body
{
left: 210px;
height:auto;
padding: 0px;
}

#footer
{
margin-top: 5px;
padding: 5px;
}

 

 

Fonts.css

/* CSS Document */

h1 
{
font-size:20px;
font-family: Arial, Helvetica, sans-serif;
color:#444444;
font-weight:normal;
margin: 0px 0px 0px 0px;
padding: 0px 0px 8px 0px;

}

h2 
{
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
color:#222222;
line-height: 18px;
font-weight:normal;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

}

.number_4 
{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #009eff;
}

.boxTitle
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
font-weight: 400;
}

.LeftNaviTitle
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #222222;
font-weight: 450;
}



<!-- Links -->

A.subLink:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
text-decoration: none;
font-weight:bold;
}
A.subLink:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
text-decoration: none;
font-weight:bold;
}
A.subLink:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
text-decoration: none;
font-weight:bold;
}
A.subLink:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#66ff00;
font-weight:bold;
}

Link to comment
Share on other sites
yanivkalfa Member

yanivkalfa

Posted
Posted

Well IMO .. you gonna have to use either JS eith PHP or something like that . since it wont out resize by its self ..

well have you tryed  putting this into a table and inside this table this div .. so maybe when the table getting bigger the div will also do as well ?

. what i did is . i Set a function in PHP to creat my divs .. and i Counted the Content Rows with some function i got  so lets say the contnect is 15 lines .. so i set the high + around 70 px more in the div and i get a dynamic div like that ..

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.