Page Layout and Divs in HTML & CSS

huh??

I've sought advice here before and it worked out very well and I appreciate it so I'm back again.

I am designing a website using CSS and HTML but I can't get the different divs to fit in together on different screens or browsers. The main browser I wish to use is Firefox but across different screen resolutions some of my pages don't fit in properly together. Should I use % or px for the widths and heights or if anyone could give any advice on the matter I would be very grateful.

Also, if a few of my pages have the same layout should I use the same CSS file for all of them or should I have a different CSS file for each page.

Thanks!

(As you can see from my title I am new to this)

uck51js9zml2yt

you should use % so that everything will be relative.

If your css is the same, use an external css file to control all the pages. just link to it in the head.

if you need a page with a different css, have a css file for that page.

Liam Byrne

Most sites avoid this headache by centering the content in an approx 990-wide column in the middle of larger screens.

If you use percentages text is going to wrap differently and bear in mind that images should be shown at their native resolution as scaling them up will result in them looking crap while having a larger image to counteract this will result in a very slow site.

Unless you have a massive budget don't even think about having a fluid design.

Giblet

First website? Use px, get your footing so to speak. Responsive design requires some more experience.

Baz_

Liam Byrne wrote: »

Lots of sensible stuff.

I am in full agreement with what liam said, especially if you're not very experienced, however you might be ready to move on to the next level in which case I recommend doing a search as there are some brilliant tutorials online for different design styles using divs and CSS...

huh??

Thanks for all the great rep[lies so far. Ok so basically I'm using px now for my divs but one of my divs moves about 18px up or down depending on what screen I'm using. I don't know what screen my lecturer will be using either. Sigh. Any suggestions on how to fix this? Is it a position attribute problem?

Giblet

Would need code to understand completely.

Liam Byrne

huh?? wrote: »

Thanks for all the great rep[lies so far. Ok so basically I'm using px now for my divs but one of my divs moves about 18px up or down depending on what screen I'm using. I don't know what screen my lecturer will be using either. Sigh. Any suggestions on how to fix this? Is it a position attribute problem?

What do you mean by a "position attribute" ?

Site layouts which have to cope with different screen sizes should not have any fixed-position elements.

Zerroth

Liam Byrne wrote: »

What do you mean by a "position attribute" ?

Site layouts which have to cope with different screen sizes should not have any fixed-position elements.

I'm a noob to web design also. When it comes to placing and positioning things on a page, absolute and relative positioning is the way to go? Using % instead of px?

Liam Byrne

Zerroth wrote: »

Liam Byrne wrote: »

What do you mean by a "position attribute" ?

Site layouts which have to cope with different screen sizes should not have any fixed-position elements.

I'm a noob to web design also. When it comes to placing and positioning things on a page, absolute and relative positioning is the way to go? Using % instead of px?

Where possible page content wrappers should flow with no positioning whatsoever.

huh??

#pagewidth{ 
      width:1200px; 
      text-align:left; 
      margin:0 auto; 
     } 
 
#header{
       position:relative; 
       height:250px; 
       top:5px;
       padding-left:100px; 
       width:1100px;
       display:block;
       overflow:auto;
       background-color:#197575;
      }
 
#navbar{
       position:relative; 
       height:auto; 
       top:px; 
       width:100%;
       display:block;
       overflow:auto;
      } 

#leftcol{
       width:200px; 
       float:left; 
       position:relative; 
       background-color:#1E90FF;
       height:1700px;
       text-align:center        
      }
 
#maincol{
       background-color: #ADD8E6;    
       position: relative; 
       width:970px;
       height:1700px;
       float:left;
       overflow:auto;
       padding-left:20px;
       padding-right:10px; 
      }
 
#footer{
       width:100%;
       height:60px; 
       background-color:#B3B3B3; 
       margin-top:1650px;
       clear:both;
       display:block;
       overflow:auto;
      } 

#nav li{
       display:inline;
       padding:0;
       margin:0;
      }
      

#nav {
       margin:0;
       padding:0;
       background:#B3B3B3;
       float:left;
       width:100%;
       border:2px solid #B3B3B3;
       border-width:1px 0;
      }


#nav li:first-child a {
       border-left:1px solid #B3B3B3;
       
      }


#nav a:link,
#nav a:visited {
       color:Black;
       background:#B3B3B3;
       padding: 4px ;
       float:left;
       width:18.95%;
       border-right:1px solid #B3B3B3;
       text-decoration:none;
       font:bold 1em/1em Arial, Helvetica, sans-serif;
       text-transform:uppercase;
       text-align:center;
       text-shadow: 2px #555;
      }


#nav a:hover,
#nav a:focus {
       color:#fff;
       background:#4775FF;
      }

#nav a:active {
      background:#fff;
      color:#4775FF;
     }

#img{
     bottom:10px;
     right:10px;
     }

BODY{ 
      color:Black; 
      font-family:sans-serif;
      font-size:medium; 
      font-weight:normal; 
     }

P{
      color:Black;
      font-size:medium;
      font-family:sans-serif;
      font-weight:normal; 
      text-decoration:none;
     }

H1{
      color:Black;
      font-size:xx-large;
      font-family:sans-serif; 
      font-weight:bolder; 
      text-decoration:none;
      text-align:center;
     }

H2{
      color:Black; 
      font-size:x-large;
      font-family:sans-serif;
      font-weight:none; 
     }

H3{
      color:Black;
      font-size:large;
      font-family:sans-serif;
      font-weight:bold;
      text-decoration:none; }

button{
      position:absolute; 
      top:400px; 
      right:50px; 
      width:100px;
      }

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;

color: #2d2b2b;
background: white;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
color: #B3B3B3;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
border-bottom-color: white;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

#navleftcol, ul, li{
margin:0;
padding:0;
}


#navleftcol{
width: 200px;
height: 27px;
}

#navleftcol ul{ 
line-height: 25px;
}

#navleftcol li{
list-style: none;
position: relative;
background: #00FF00;
}

#navleftcol ul li a{

width: 200px;
height: 40px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia, "Times New Roman", Times, Serif;
color: #000;
border: 4px solid, #eee;
}

#navleftcol li:hover { 
background-color: #00B200;
}

#navleftcol a:hover {
font-weight:bold;
}

#bullets{
	padding-left:40px;
	
}

I hope this can help throw some light on the situation. Any (constructive) abuse would be greatly appreciated. Just remember I'm only new to this so the entire thing might be rubbish.

Just to recap, my problem is that my divs dont fit in together properly on different screens. If anyone thinks they can make a better job at this then please be my guest.

Thanks!

Giblet

You need the HTML as well, I notice you don't actually set the position in a lot of your CSS though, just the type of positioning, so it might be ok as regards that. (You do set top: in some rules though)

huh??

<!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>Home</title>



      <link rel="stylesheet" type="text/css" href= "css/mystyleHome.css" />

 </head>



                      

        <div id="pagewidth">

                    
                    
            <div id="header">
             <!-- Flash Banner Removed -->
            <script src="flashbanner from external site"text/javascript"></script>
			
            </div>


            <div id="navbar"> 

            <ul id="nav">

                                

                                <li><a href="Home.html"title = "Home">Home</a></li>

                                <li><a href="ContactUs.html"title = "Contact Us">Contact Us</a></li>

                                <li><a href="Map.html"title = "Map">Map</a></li>
								
	 <li><a href="JQuery\Travel.html"title = "Travel">Travel</a></li>

                                <li><a href="Other.html"title = "Other">Other</a></li>





             </div>

					 
					<div id="leftcol"> 
						  
			  <div id="navleftcol">
					 
				<ul>
				
					 <li><a href="Personal.html"title = "Personal Details">Personal Details</a></li>
					 	 		 
					 <li><a href="Education.html"title = "Education">Education</a></li>

	                 <li><a href="EmploymentHistory.html"title = "Employment History">Employment History</a></li>

	                 <li><a href="Interests.html"title = "Interests">Interests</a></li>

	                 <li><a href="References.html"title = "References">References</a></li>

				     <li><a href="CV.docx"title = "CV">Download My CV</a></li>
				
				 </ul>
				
			</div> 	 
					 
			
				
	

			 
					 
            </div>                    



                     <br></br>


                    <div id="maincol"> 



                      <br></br>



                     <h3> My Site</h3>

         
                     
                      You can easily navigate through my Site by using the tabs on the left.
					  <br></br>
					  
					  
					   

                     <h3> Personal Details	</h3> 
					 <div id="bullets">
                     <ul>		 
					 
                     <li><b>Name: </b> John </li>

                     <li><b>City: </b>Dublin</li>

                     <li><b>Date Of Birth: </b> 03/06/1989</li>

                     <li><b>Telephone Number: </b>085123456</li>

                     <li><b>E-Mail: </b>john@*****.com</li>

  

                     </ul>
					 
					</div>

                     <br></br>

                     
                    </div>





                    <div id="footer">             

                     <p style="color:black;text-align:center">John Wallace</p> 

                    </div>


        </div>





 </html>

Hopefully the code above doesn't look to messed up, I just copied and pasted it in. My CSS file is above also.

Thanks again!

Giblet

Em, there's not really much I can see different across browsers? Maybe a screen shot of the problem areas circled?

Unless you mean the default styling of the header tags and such? You can set these just by doing
h3 { margin:0; padding:0 }

But you seem to use <br /> tags, which you shouldn't really use, just set the margins.

huh??

Screen shot attached. This all relates back to my use px or use % question earlier I suppose.

Giblet

The big white bar? You have two <br /> tags doing that.

huh??

*face palm*

Thank you sir!

shootermacg

Doesn't anyone use Ems anymore for sizing?

Giblet

Me!

shootermacg

Good I thought I was alone ^ ^.

Kev_2012

Just a quick note, you are missing a closing </ul> tags and you don't have any opening or closing body tags. Just a warning because IE is a bitch for moaning about malformed HTML