Jump to content
UncleStef Mentoring Update: New SEO course!

HTML & CSS Problem

divz2

By divz2
in Beginners Web Design

 Share

Recommended Posts

divz2 Newbie

divz2

Posted
Posted

Hi Everyone,

 

I am struggling with the div's in my website layout. The link is http://www.independentsunsupport.com/

I added yellow and red as dummy colors for the background so that I can understand where the problem lies.

I want the footer menu to be just below the main content.

Can anyone please help me with this layout problem. It is very much appreciated.

Thank you.

Link to comment
Share on other sites
einsteinsboi Newbie

einsteinsboi

Posted
Posted
Hi Everyone,

 

I am struggling with the div's in my website layout. The link is http://www.independentsunsupport.com/

I added yellow and red as dummy colors for the background so that I can understand where the problem lies.

I want the footer menu to be just below the main content.

Can anyone please help me with this layout problem. It is very much appreciated.

Thank you.

 

 

Are you floating your sidebar and main content areas? If yes you may need to clear the floats before adding the footer div.

Link to comment
Share on other sites
LSW Newbie

LSW

Posted
Posted

I agree.

 

Also it is normal to think Left to Right, I found that for footers it is better to think right to left. Float right to left rather than left to right. I know it sounds cryptic, but try it. I will see if I can find the link that explained how to do it that way. I have been out of web design for a while so need to familiarize myself with all my stored bookmarks first.

Link to comment
Share on other sites
virtual Newbie

virtual

Posted
Posted (edited)

Change to this

.footer-links p {
[color=red]margin:0;[/color]
padding-top:8px;
}

 

You have not done a CSS reset so certain elements have inherent margins and padding.

 

It helps a lot to install Firebug for Firefox, with it you can visually see the margins and padding of different elements just by running the cursor over the page.

Edited by virtual
Link to comment
Share on other sites
Wickham Newbie

Wickham

Posted
Posted

I've changed a lot more than Virtual has. I changed the order of divs in the html file so that the float: right div #main-content is first and the other divs without a float follow, so you don't need a negative margin-top to raise the floated div. I also reset all margins and padding to 0

 

http://www.wickham43.com/forumposts/divzindependentsunsupport100119.html

http://www.wickham43.com/forumposts/divzstyles100119.css

Link to comment
Share on other sites
virtual Newbie

virtual

Posted
Posted

@Wickham

Hi "old" man, I really did think you were joking, I'm not that far up the hill but no spring chicken either :D !!

 

I started changing the html and the floats too and then thought that maybe he should just learn by trial and error, rather than hand it to him on a plate.

Link to comment
Share on other sites
divz2 Newbie

divz2

Posted
  • Author
Posted






Sun High End Server Support
Independent Sun High-End Server Support

Independent Sun Support is the leading Sun support provider. We have over 19 years of hands-on support experience, maintaining mission critical environments across the UK and Europe. Bulletproof your support and minimise downtime with an independent service plan from us. We have Sun certified engineers available nationwide, 24 hours a day and seven days a week. Each certified Sun engineer has specific technical knowledge to maintain the functionality of Sun servers at a performance level, that optimises data-centre efficiency and improves your ROI.


Sun's high-end servers are designed to meet the mission critical demands of the datacenter. The Sun high-end servers provide over five times greater performance, doubled memory capacity and significantly increased I/O performance over previous generation systems.


The new Sun SPARC Enterprise servers, feature the powerful dual core SPARC64 VI processor and provide mainframe-class RAS at open system prices. Highly scalable, with up to 24 dynamic domains and thousands of Solaris containers per system these servers enable massive server consolidation and datacenter virtualisation.






Link to comment
Share on other sites
Wickham Newbie

Wickham

Posted
Posted

First, you've got a lot of double >> in the html file like

  • > High-End Servers

    • so dElete one.

     

    Your #contentframe is 800px wide so I made the side divs 159px (800*20% less 1px side border) and the #landing-main-content-1 div 480px wide and made all three float (firsty two float left and the third float: right) and they all fit neatly together.

     

    Then add clear: both to #footer.

     

    * { 
   margin: 0; 
   padding: 0; 
}

body {
   margin: 0px;
   padding: 0px;
   font-family:Trebuchet MS, sans-serif;
   font-size: 10pt;
   text-align: center;
   background-color: #F0F2FF;
}
#outerframe {
   background:                                          pink;/*#ffffff; */ 
   width: 800px;
   margin-top: 0px;
   margin-right: auto;
   margin-left: auto;
   padding: 0px;
   text-align: left;
   border-left: solid 2px #3A6E8E;
   border-right: solid 2px #3A6E8E;
}

/*Path Links*/
   #pathlinks{
       width:100%;
       padding-top:20px;
       padding-left:20px;
       padding-bottom:10px;
       font-family:Trebuchet MS, sans-serif;
       float: left;
       font-size: 9pt;
   }
   #pathlinks a:link{
       color: #344654;
       text-decoration:none;
   }
   #pathlinks a:visited{
       color: #344654;
       text-decoration:none;
   }
   #pathlinks a:hover{
       color: red;
       text-decoration:underline;
   }
/*End of Path Links*?

/*Forms*/
   #form1 {
       width: 200px;
   }
   #search1 {
       width: 350px;
       background-image: url(/images/search-background.jpg);
       vertical-align: top;
   }
   #search1, #submit {
       vertical-align: top;
   }
   .error { color:red; }
/*End of Forms*/

/*Header and Top menu*/
   #header{                                        background: green;
       width: 100%;
       border:0px;
       padding:0px;        
   }
   .logo {
       padding:0px;
       background-color:#ffffff;
   }
   .logo img{
       border:0;
   }

   .logo a:link{
       text-decoration: none;
   }
   .logo a:visited{
       text-decoration: none;
   }
   .logo a:hover{
       text-decoration: none;
   }
   #topmenu{                   background: red;
       height: 32px;
       text-align:center;
       background-image:url(/images/header-menu-1.jpg);
       width: 100%;
   }
   #topmenu ul{
       margin: 0px;
       padding: 0px;
       font-family: Trebuchet MS, sans-serif;
       font-size: 10pt;
       color: #344654;
       line-height: 30px;
       white-space: nowrap;
   }
   #topmenu li {
       list-style-type: none;
       display: inline;
   }
   #topmenu a {
       text-decoration: none;
       padding: 7px 10px;
       color: #344654;
   }
   #topmenu a:link {
       font-weight: bold;
       color: #344654;
   }
   #topmenu a:visited {
       font-weight: bold;
       color: #344654;
   }
   #topmenu a:hover {
       font-weight: bold;
       color: #344654;
   }
/* End of Header and top menu bar*/

/*Side Menu*/
   #enquiry{                                           
       width:  20%; 
       border-right: 1px solid #000;
       padding: 0 0 1em 0;
       font-family: Trebuchet MS, sans-serif;
       font-size: 10pt;
       background-color:  #686147;
       color: #333;
   }
   * html #enquiry{ /*IE 6 only */
       width: 147px; /*Box model bug: 180px minus all left and right 

paddings for #blueblock */
   }
   #enquiry ul{
       list-style: none;
       margin: 0;
       padding: 0;
       border: none;
   }
   #enquiry li {
       border-bottom: 1px solid #686147;
       margin: 0;
   }
   #enquiry li a{
       display: block;
       padding: 5px 5px 5px 8px;
       border-left: 10px solid #76662A;
       border-right: 10px solid #D2AB1A;
       background-color: #B6992C;
       color: #000000;
       text-decoration: none;
       width: 100%;
   }
   html>body #enquiry li a{ /*Non IE6 width*/
       width: auto;
   }
   #enquiry li a:hover{
       border-left: 10px solid #978955;
       border-right: 10px solid #D9BC4E;
       background-color: #D1B034;
       color: #000000;
   }


#server-list{                                                      float: left;
       width: 159px;/*20%; */                
       border-right: 1px solid #000;
       padding: 0 0 1em 0;
       font-family: Trebuchet MS, sans-serif;
       font-size: 10pt;
       background-color: #2B536B;
       color: #333;
   }
   * html #server-list{ /*IE 6 only */
       width: 147px; /*Box model bug: 180px minus all left and right 

paddings for #blueblock */
   }
   #server-list ul{
       list-style: none;
       margin: 0;
       padding: 0;
       border: none;
   }
   #server-list li {
       border-bottom: 1px solid #1E303A;
       margin: 0;
   }
   #server-list li a{
       display: block;
       padding: 5px 5px 5px 8px;
       border-left: 10px solid #25485D;
       border-right: 10px solid #497C9B;
       background-color: #3A6E8E;
       color: #000000;
       text-decoration: none;
       width: 100%;
   }
   html>body #server-list li a{ /*Non IE6 width*/
       width: auto;
   }
   #server-list li a:hover{
       border-left: 10px solid #406276;
       border-right: 10px solid #5097C3;
       background-color: #4D99C7;
       color: #000000;
   }












   #server-list2{                                      float: right;
       width: 159px;/*20%;*/        vertical-align:top;         
       border-right: 1px solid #000;
       padding: 0 0 1em 0;
       font-family: Trebuchet MS, sans-serif;
       font-size: 10pt;
       margin: 0 0 0 auto;
       background-color: #2B536B;
       color: #333;
   }
   * html #server-list2{ /*IE 6 only */
       width: 147px; /*Box model bug: 180px minus all left and right 

paddings for #blueblock */
   }
   #server-list2 ul{
       list-style: none;
       margin: 0;
       padding: 0;
       border: none;
   }
   #server-list2 li {
       border-bottom: 1px solid #1E303A;
       margin: 0;
   }
   #server-list2 li a{
       display: block;
       padding: 5px 5px 5px 8px;
       border-left: 10px solid #25485D;
       border-right: 10px solid #497C9B;
       background-color: #3A6E8E;
       color: #000000;
       text-decoration: none;
       width: 100%;
   }
   html>body #server-list2 li a{ /*Non IE6 width*/
       width: auto;
   }
   #server-list2 li a:hover{
       border-left: 10px solid #406276;
       border-right: 10px solid #5097C3;
       background-color: #4D99C7;
       color: #000000;
   }
/* End of Side Menu*/

/*Server List Side Menu*/
   #server-sub-list{
       width: 20%;                 
       border-right: 1px solid #000;
       padding: 0 0 1em 0;
       font-family: Trebuchet MS, sans-serif;
       font-size: 10pt;
       background-color:                    blue; /*#2B2B5E;*/
       color: #333;
   }
   * html #server-sub-list{ /*IE 6 only */
       width: 147px; /*Box model bug: 180px minus all left and right 

paddings for #blueblock */
   }
   #server-sub-list ul{
       list-style: none;
       margin: 0;
       padding: 0;
       border: none;
   }
   #server-sub-list li {
       border-bottom: 1px solid #1E303A;
       margin: 0;
   }
   #server-sub-list li a{
       display: block;
       padding: 5px 5px 5px 8px;
       border-left: 10px solid #434361;
       border-right: 10px solid #7F7FAB;
       background-color: #6868B2;
       color: #000000;
       text-decoration: none;
       width: 100%;
   }
   html>body #server-sub-list li a{ /*Non IE6 width*/
       width: auto;
   }
   #server-sub-list li a:hover{
       border-left: 10px solid #5B5B76;
       border-right: 10px solid #A6A6D0;
       background-color: #7676C7;
       color: #000000;
   }
/*End of Server List Side Menu*/

/*Main Body Content*/
   #contentframe{                  
       width: 800px;
       border:0px;           disssssplay:inline;
       padding:0px;    
       position:relative;
       background-color:                     lime;/* #ffffff;*/
   }
   #main-content{
       margin: 0;
       padding: 0;
       font-family: Trebuchet MS, sans-serif; 
       background-color:                              skyblue;/*#ffffff;*/
       font-size: 10pt; 
       position:relative;
       color: #333333;
       width: 79.8%;
       float:right;
       padding-bottom:20px;
   }
   #main-content ul{               
       padding-left: 16px;
       padding-right: 16px;
       padding-top:10px;
       padding-bottom:10px;
   }
   #main-content li{
       list-style-type: square;    
       font-size: 9pt;
       color:#525252;
       padding-right:24px;    
       padding-left: 8px;
       margin:0em 0em 0em 1em;
   }
   .server-image{
       width: 30%;
       background-color:#ffffff;
       border:0;
       padding-left:15px;
       padding-top:20px;
       float:left;
   }
   .server-content{
       width: 61.5%;
       float:right;
       padding-top:15px; 
       padding-bottom: 15px;
       padding-right:15px;
       background-color: #ffffff;    
   }
   .server-content p{
       font-size: 10pt;  
       padding-bottom: 15px;
   }
   .server-content ul{                              
       padding-left:0px;
       margin-left:0px;    
       list-style-image: url(/images/link-icon.png);    
   }
   .server-content li {
       margin-left:0px;    
       list-style-image: url(/images/link-icon.png);    
   }
   .server-content-list{     
       width:95%;
       float:right;
       padding-left:15px;
       padding-right:15px;
       padding-top:15px;
   }    
   .bl {background: url(/images/bottomleft.gif) 0 100% no-repeat 

#E4EEED; width: 100%;}
   .br {background: url(/images/bottomright.gif) 100% 100% no-repeat; 

width: 100%;}
   .tl {background: url(/images/topleft.gif) 0 0 no-repeat;}
   .tr {background: url(/images/topright.gif) 100% 0 no-repeat; 

padding:5px;}
   .clear {clear: both; width: 100%; height: 0; visibility: hidden; 

background: #fff; font-size: 0; line-height: 0;padding-bottom:10px;}
   .title {  
       font-size: 16pt; 
       font-weight: bold; 
       color: #344654;
       margin-top: 20px;
       margin-bottom: 10px;
   }
   .title1 {  
       font-size: 16pt; 
       font-weight: bold; 
       color: #344654;
       margin-top: 20px;
       margin-left: 20px;
   }
   .sub-title-bullet{                        
       margin-top: 5px;
       font-family: Trebuchet MS, sans-serif;     
       margin-left: 0px;
       margin-bottom: 0px;
       font-size: 13pt;     
   }
   .sub-title-bullet p{                   
       font-size: 13pt; 
       font-weight: bold; 
       color: #344654;
       margin-left: 15px;
   }    
   .sub-title-bullet ul{                      
       list-style-type:circle;
   }
   .sub-title-bullet li{                      
       padding-left:10px;
       list-style-type:circle;
       line-height:16pt;
   }
/* End of Main Body Content*/

/*Footer*/
   #footer{                                    clear: both;                           
       width: 100%;
       border:0px;
       background-color:#3A6E8E;
       font-family: Trebuchet MS, sans-serif;
       font-size: 9pt; 
       color: #EEEEEE;
       float: none;
   }
   .footer-links{                 
       height:35px;
       text-align:center;
   }
   .footer-links p{                 
       padding-top: 8px;
   }    
   .footer-links a:link{
       color: #ffffff; 
       padding: 0 10px;
       font-weight: bold;
       text-decoration: none;
       font-size: 9pt;
   }
   .footer-links a:visited{
       color: #ffffff; 
       font-weight: bold;
       text-decoration: none;
   }
   .footer-links a:hover{
       color: #cccccc; 
       font-weight: bold;
       text-decoration: none;
   }
/*End of Footer*/

/*Landing pages*/
   #landing-main-content-1{                                 float: left;
       padding: 0; vertical-align:top; 
       font-family: Trebuchet MS, sans-serif; 
       background-color:                               yellow;/*#ffffff;*/
       position:relative;
       width: 480px;/*40%;*/
       margin: 0 auto;
       padding-bottom:20px;
   }
   #landing-main-content-1 p{
       font-size: 10pt; 
       color: #333333;
       padding-left:20px;
       padding-right:20px;
       padding-top:10px;
   }
   #landing-main-content-1 ul{
       padding-left: 16px;
       padding-right: 16px;
       padding-top:10px;
       padding-bottom:10px;
   }
   #landing-main-content-1 li{
       list-style-type: square;    
       font-size: 9pt;
       color:#525252;
       padding-right:24px;    
       padding-left: 8px;
       margin:0em 0em 0em 1em;    
   }
   .seo-text {  
       font-size: 10pt; 
       font-weight: bold; 
       color: #344654;
       margin-top: 15px;
       margin-bottom: 0px;
       padding-left:20px;
   }
   #sun-server{
   padding:20px;
   }
/*End of Landing pages*/

/*Site Map*/
   #site-title{
       width:100%;
       padding-left: 30px;
       color:#4b4b4b;
       float: left;
       line-height:14pt;
       padding-top:10px;
   }
   #site-title a:link{
       padding:1px;
       color:#4b4b4b;
       text-decoration:none;
       font-weight: bold;
   }
   #site-title a:visited{
       color:#026730;
       text-decoration:none;
       font-weight: bold;
   }
   #site-title a:hover{
       text-decoration:underline;
       color:#8D041A;
       font-weight: bold;
   }
   #level1{
       width:100%;
       padding-left: 30px;
       color:#4b4b4b;
       float: left;
       line-height:14pt;
   }
   #level1 a:link{
       padding:1px;
       color:#026730;
       text-decoration:none;
       font-weight: bold;
   }
   #level1 a:visited{
       color:#026730;
       text-decoration:none;
       font-weight: bold;
   }
   #level1 a:hover{
       text-decoration:underline;
       color:#8D041A;
       font-weight: bold;
   }
   #level2{
       width:100%;
       padding-left: 15px;
       color:#4b4b4b;
       float: left;
       line-height:14pt;
   }
   #level2 a:link{
       padding:1px;
       color:#4b4b4b;
       text-decoration:none;
   }
   #level2 a:visited{
       color:#4b4b4b;
       text-decoration:none;
   }
   #level2 a:hover{
       text-decoration:underline;
       color:#4b4b4b;
   }
   #level2 ul{
       width: 95%;
       float: left;
       padding-top:5px;

   }
   #level2 li{
       padding-left:10px;
       font-size: 9pt;
   }    
   #level3{
       width:100%;
       padding-left: 40px;
       color:#4b4b4b;
       float: left;
       line-height:14pt;
   }
   #level3 a:link{
       padding:1px;
       color:#4b4b4b;
       text-decoration:none;
   }
   #level3 a:visited{
       color:#4b4b4b;
       text-decoration:none;
   }
   #level3 a:hover{
       text-decoration:underline;
       color:#4b4b4b;
   }
   #level3 ul{
       width: 95%;
       float: left;
       padding-top:5px;

   }
   #level3 li{
       padding-left:10px;
       font-size: 9pt;
   }    
/*End of Site Map*/

     

    Leave my background colors temporarily so you can see the size of each div.

     

    The html file only had the >> reduced to >

    Link to comment
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      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.

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