Jump to content
Killersites Forums

HTML & CSS Problem


Recommended Posts

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 post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

@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 post
Share on other sites






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 post
Share on other sites

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 post
    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...
    ×
    ×
    • Create New...