1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problems With Columns

Discussion in 'CSS' started by Jeremy Benson, Apr 27, 2015.

0
  1. #1
    Hey,

    Okay. I've finally finished my website to about 90%. I decided that instead of spending a ton of money on layout, if I could help it, I would take another crack at it, and try to lower the cost. The problem is, it's till giving me troubles. I've got columns set up where I want to put my listing categories. I don't know why I can't get the category divs to drop down in the columns.

    I had them laid out perfect without columns, but decided I needed more control on their order...

    Right now the category divs are either stacked on top of each other or popped off the screen...

    I don't have a tab key, so you don't have to complain about indentation, got it pretty good with spacbar :p

    #topnav{
  
    height:60px;
    width:100%;
    background-color:#f8f8f8;
}

#topnavcontent{
   
padding:20px 0 0 8px;
   
}

#circular{
   
    width: 24px;
    height: 24px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    background: url(gateway/images/stock/stock_profile.jpg) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);   
     float:right;
    
     display: inline-block;
     vertical-align: middle;
     line-height: normal;
     margin-right:8px;
    
}

#gear{
   
    height:26px;
    width:66px;
    background-color:#62c2e4;
    float:right;
    margin-right:24px;
    text-align:center;
    padding:2px;
}

#gear img{
   
    height:28px;
    width:28px;

}

.topnavcolor{
   
    width:12.5%;
    height:10px;
    float:left;
    display:inline;
}

#color1{
   
    background-color:#14cc77;
}

#color2{

  background-color:#c4e17f;
   
}

#color3{
   
    background-color:#fecf71;
   
}

#color4{
   
    background-color:#f0776c;
   
}

#color5{
   
    background-color:#db9dbe;
   
}

#color6{
   
    background-color:#c49cde;
}

#color7{
   
    background-color:#669ae1;
   
}

#color8{
   
    background-color:#62c2e4;
   
}



html, body, div, span,
p,a, abbr, acronym, img,
form, label{

    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

}
/* HTML5 display-role reset for older browsers */
footer, header, hgroup, menu, nav, section {

    display: block;

}

h2, h3{

    margin:0px;
}
body {

    line-height: 1;
}

#content{

    overflow:hidden;
    width:100%;
}


#leftcolumn{
   
    float:left;
    width:80%;
}

#rightcolumn{

    float:right;
    width:20%;

}


#categorycontainer{
   
    overflow: auto;
    clear:both;
   
}

.categorycontainercolumn{
   
    width:25%;
    height:20px;
    float:left;
    background-color:blue;
   
}

.category{
   
    width:80%;
    -webkit-box-shadow: 2px 2px 2px 1px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 2px 2px 2px 1px #ccc;  /* Firefox 3.5 - 3.6 */
    box-shadow: 2px 2px 2px 1px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    clear:both;
 
}

.categoryheader{

    background-color:#f0776c;
    height:22px;
    padding-top:4px;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0; /* future proofing */
    -khtml-border-radius: 4px 4px 0 0; /* for old Konqueror browsers */
    text-align:center;

}

.categorycontent{

    border:1px #f0776c solid;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px; /* future proofing */
    -khtml-border-radius: 0 0 4px 4px; /* for old Konqueror browsers */
}

.categoryheader h2{

    display: inline-block;
    vertical-align: middle;
    line-height: normal;     

}

.categorycontent ul li{
   
    color:#669ae1;
    list-style: square;

}

#spacer{

    height:120px;
    width:250px;
    float:left;
    margin-left:12px;
    margin-top:20px;

}
    Code (CSS):
    html

    <!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="gateway/css/index.css"/>
<link rel="stylesheet" href="gateway/css/topnav.css"/>
</head>
<body>

<div id="topnav">
   <div id="topnavcolors">
      <div id="color1" class="topnavcolor"></div>
      <div id="color2" class="topnavcolor"></div>
      <div id="color3" class="topnavcolor"></div>
      <div id="color4" class="topnavcolor"></div>
      <div id="color5" class="topnavcolor"></div>
      <div id="color6" class="topnavcolor"></div>
      <div id="color7" class="topnavcolor"></div>
      <div id="color8" class="topnavcolor"></div>
  </div>
   <div id="topnavcontent">
     <div id="gear">
       <img src="gateway/images/stock/gear.png" />
     </div>
     <h3>Jijify</h3>
  
   </div>
</div>


<div id="content">
<div id="rightcolumn">
  <p>right</p>
</div>
<div id="leftcolumn">
<!-- categories -->
<div id="categorycontainer">
   <div class="categorycontainercolumn">
      <!-- column 1 -->
     
<div class="category">
     <div class="categoryheader">
       <h3>Local Spots</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>cool</li>
         <li>cool</li>
         <li>cool</li>
       </ul>
     </div>
   </div>
  
   <div class="category">
     <div class="categoryheader">
      <h3>Neighborhood</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>cool</li>
         <li>cool</li>
         <li>cool</li>
       </ul>
     </div>
   </div>
     
        <div class="category">
     <div class="categoryheader">
       <h3>Buy/Sell/Swap</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>cool</li>
         <li>cool</li>
         <li>cool</li>
       </ul>
     </div>
   </div>
        
      <!-- end column 1 -->
   </div>
   <div class="categorycontainercolumn">
       <!-- column 2 -->
     
     
     
       <!-- end column 2 -->
   </div>
   <div class="categorycontainercolumn">
      <!-- column 3 -->
     
     
     
      <!-- end column 3 -->
   </div>
   <div class="categorycontainercolumn">
      <!-- column 4 -->
     
     
      <!-- end column 4 -->
   </div>
   <!-- end of category container -->
</div>
  
   <!-- end of left column -->
</div>

<!-- end of content -->
</div>

</body>

</html>
    HTML:
     
    Jeremy Benson, Apr 27, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    It feels div heavy, class heavy, ID heavy for nothing... your use of numbered headings seems to be gibberish, I suspect you have a presentational image in there as a IMG (which is wrong), no media targets, you've nto shown us the complete CSS, values that don't even EXIST in your CSS (there is NO SUCH THING as line-height:normal), fixed heights on text containing elements, HTML 4 charset in a 5 doctype, pointlessly redundant comments...

    I'm not sure what you are trying to accomplish, but I'm pretty sure this isn't it. I think I'd either have to see it with REAL content, with the complete CSS, or just have more explanation of what the devil you are even trying to accomplish as my gut is saying about half your DIV belong in the trash.

    and what the ***** do you mean you don't have a tab key?!? :p
     
    deathshadow, Apr 27, 2015 IP
  3. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #3
    Lol, The keyboard on this laptop is going out the window. No tab, exit, 6,7,8,9,0... Half my programming is done with alt keys, and cut and paste. I've got a txt file titled needed chars with characters in it...

    I'm not sure what half of you comment meant, but I'm pretty sure that's all the css. I did add a footer though... I'll get an image and show updated code....

    [​IMG]

    [​IMG]
     
    Jeremy Benson, Apr 27, 2015 IP
  4. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #4
    css

    #topnav{
  
    height:60px;
    width:100%;
    background-color:#f8f8f8;
}

#topnavcontent{
   
padding:20px 0 0 8px;
   
}

#circular{
   
    width: 24px;
    height: 24px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    background: url(gateway/images/stock/stock_profile.jpg) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);   
     float:right;
    
     display: inline-block;
     vertical-align: middle;
     line-height: normal;
     margin-right:8px;
    
}

#gear{
   
    height:28px;
    width:66px;
    background-color:#62c2e4;
    float:right;
    margin-right:24px;
    text-align:center;
    padding-top:2px;
    padding-bottom:2px;
}

#gear img{
   
    height:28px;
    width:28px;

}

.topnavcolor{
   
    width:12.5%;
    height:10px;
    float:left;
    display:inline;
}

#color1{
   
    background-color:#14cc77;
}

#color2{

  background-color:#c4e17f;
   
}

#color3{
   
    background-color:#fecf71;
   
}

#color4{
   
    background-color:#f0776c;
   
}

#color5{
   
    background-color:#db9dbe;
   
}

#color6{
   
    background-color:#c49cde;
}

#color7{
   
    background-color:#669ae1;
   
}

#color8{
   
    background-color:#62c2e4;
   
}

html, body, div, span,
p,a, abbr, acronym, img,
form, label{

    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

}
/* HTML5 display-role reset for older browsers */
footer, header, hgroup, menu, nav, section {

    display: block;

}

h2, h3{

    margin:0px;
}
body {

    line-height: 1;
}

#content{

    width:100%;
}


#leftcolumn{
   
    float:left;
    width:80%;
}

#rightcolumn{

    float:right;
    width:20%;

}


#categorycontainer{
   
    overflow: auto;
    clear:both;
   
}

.categorycontainercolumn{
   
    width:25%;
    height:20px;
    float:left;
    background-color:blue;
   
}

.category{
   
    width:80%;
    -webkit-box-shadow: 2px 2px 2px 1px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 2px 2px 2px 1px #ccc;  /* Firefox 3.5 - 3.6 */
    box-shadow: 2px 2px 2px 1px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    clear:both;
 
}

.categoryheader{

    background-color:#f0776c;
    height:22px;
    padding-top:4px;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0; /* future proofing */
    -khtml-border-radius: 4px 4px 0 0; /* for old Konqueror browsers */
    text-align:center;

}

.categorycontent{

    border:1px #f0776c solid;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px; /* future proofing */
    -khtml-border-radius: 0 0 4px 4px; /* for old Konqueror browsers */
}

.categoryheader h2{

    display: inline-block;
    vertical-align: middle;
    line-height: normal;     

}

.categorycontent ul li{
   
    color:#669ae1;
    list-style: square;

}

#footer{
   
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
   
}

#footermottowrapper{
   
    width:100%;
    height:28px;
    background-color:#62c2e4;
    padding-top:12px;
    text-align:center;
    vertical-align:middle;
   
}

#footermotto{
   
    font-weight:bold;
    font-size:x-large;
}

#footerheader{
   
    color:white;
}

#footercolumnwrapper{
    overflow:hidden;
    background-color: #3A3A3A;
}

.footercolumn{
   
    float:left;
    width:25%;
    margin-top:22px;
    text-align:center;
    vertical-align:middle;

}

.footercolumnheader{
   
    color:white;
}

.footercontent{
   
    list-style:none;
    margin:14px 0px 0 0;
   padding:0px;
   
}

.footercontent li{
   
    color:white;
    list-style:none;
    margin:0px 0 14px 0;

}

#footersocialwrapper{
   
        background-color:#3A3A3A;
        width:100%;
        height:84px;

}

#footersocialwrapper b{
   
    color:white;
    font-size:large;
}

#footersocialwrapper hr{
   
    margin:0px auto 8px auto;
    width:78.2%;
    height:1px;
  
}

#footerconnect{
   
    width:78%;
    margin:0 auto auto auto;
   
}

.connecticon{
    color:white;
    float:right;
    margin-right:8px;
}
    Code (CSS):
    html

    <!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="gateway/css/index.css" />
<link rel="stylesheet" href="gateway/css/topnav.css" />
<link rel="stylesheet" href="gateway/css/footer.css" />
</head>
<body>

<div id="topnav">
   <div id="topnavcolors">
      <div id="color1" class="topnavcolor"></div>
      <div id="color2" class="topnavcolor"></div>
      <div id="color3" class="topnavcolor"></div>
      <div id="color4" class="topnavcolor"></div>
      <div id="color5" class="topnavcolor"></div>
      <div id="color6" class="topnavcolor"></div>
      <div id="color7" class="topnavcolor"></div>
      <div id="color8" class="topnavcolor"></div>
  </div>
   <div id="topnavcontent">
     <div id="gear">
       <img src="gateway/images/stock/gear.png" />
     </div>
     <h3>Jijify</h3>
  
   </div>
</div>


<div id="content">
<div id="rightcolumn">
  <p>right</p>
</div>
<div id="leftcolumn">
<!-- categories -->
<div id="categorycontainer">
   <div class="categorycontainercolumn">
      <!-- column 1 -->
     
<div class="category">
     <div class="categoryheader">
       <h3>Local Spots</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>cool</li>
         <li>cool</li>
         <li>cool</li>
       </ul>
     </div>
   </div>
  
   <div class="category">
     <div class="categoryheader">
      <h3>Neighborhood</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>cool</li>
         <li>cool</li>
         <li>cool</li>
       </ul>
     </div>
   </div>
     
        <div class="category">
     <div class="categoryheader">
       <h3>Buy/Sell/Swap</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>cool</li>
         <li>cool</li>
         <li>cool</li>
       </ul>
     </div>
   </div>
        
      <!-- end column 1 -->
   </div>
   <div class="categorycontainercolumn">
       <!-- column 2 -->
     
     
     
       <!-- end column 2 -->
   </div>
   <div class="categorycontainercolumn">
      <!-- column 3 -->
     
     
     
      <!-- end column 3 -->
   </div>
   <div class="categorycontainercolumn">
      <!-- column 4 -->
     
     
      <!-- end column 4 -->
   </div>
   <!-- end of category container -->
</div>
  
   <!-- end of left column -->
</div>

<!-- end of content -->
</div>

<!-- Footer Begin -->

<footer id="footer">
<div id="footermottowrapper">
   <b>List better, share better, sell better.</b>
</div>
   <div id="footercolumnwrapper">
     <div class="footercolumn">
     <!-- foot column 1 -->
       <b class="footercolumnheader">About</b>
       <ul class="footercontent">
         <li>About</li>
         <li>FAQ</li>
      </ul>
      <!-- end of footer column 1 -->
     </div>
     <div class="footercolumn">
     <!-- footer column 2 -->
       <b class="footercolumnheader">Policies</b>
       <ul class="footercontent">
          <li>Acceptable Use</li>
          <li>Advertising</li>
       </ul>
       <!-- end of footer column 2 -->
     </div>
     <div class="footercolumn">
     <!-- footer column 3 -->
       <b class="footercolumnheader">Jijify</b>
       <ul class="footercontent">
         <li>Register</li>
         <li>Post Listing</li>
       </ul>
       <!-- footer column 3 -->
     </div>
     <div class="footercolumn">
     <!-- footer column 4 -->
       <b class="footercolumnheader">Contact</b>
       <ul class="footercontent">
         <li>Email</li>
       </ul>
       <!-- footer column 4 -->
     </div>
   </div>
   <div id="footersocialwrapper">
     <br/><hr/><br/>
   <div id="footerconnect">
     <span class="connecticon">
       <img alt="YouTube" src="gateway/images/social/white_youtube.png" />
     </span> 
     <span class="connecticon">
       <img alt="Google Plus" src="gateway/images/social/white_gplus.png" />
     </span>
     <span class="connecticon">
        <img alt="Facebook" src="gateway/images/social/white_fb.png" />
     </span>
     <span class="connecticon">
         <img alt="twitter" src="gateway/images/social/white_twitter.png" />
     </span>
     <span class="connecticon">Follow Us</span>
     <b>Connect</b>
   </div> 
  </div>
</footer>

<!-- Footer End -->

</body>

</html>
    HTML:
     
    Jeremy Benson, Apr 27, 2015 IP
  5. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #5
    What I'm trying to accomplish is sections with a colored heading inside the columns.... The background where the columns are just blue right now so I can see in relation to width and what not.. that will go back to white. The colors for the page will change to. I don't care much for the overall color scheme but right now I just want to get things in place.
     
    Jeremy Benson, Apr 27, 2015 IP
  6. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #6
    I fixed my original problem, but for some reason my footer covers the last of my content. The content div stops sizing up....

    #topnav{
  
    height:60px;
    width:100%;
    background-color:#f8f8f8;
}

#topnavcontent{
   
padding:20px 0 0 8px;
   
}

#circular{
   
    width: 24px;
    height: 24px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    background: url(gateway/images/stock/stock_profile.jpg) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);   
     float:right;
    
     display: inline-block;
     vertical-align: middle;
     line-height: normal;
     margin-right:8px;
    
}

#gear{
   
    height:28px;
    width:66px;
    background-color:#62c2e4;
    float:right;
    margin-right:24px;
    text-align:center;
    padding-top:2px;
    padding-bottom:2px;
}

#gear img{
   
    height:28px;
    width:28px;

}

.topnavcolor{
   
    width:12.5%;
    height:10px;
    float:left;
    display:inline;
}

#color1{
   
    background-color:#14cc77;
}

#color2{

  background-color:#c4e17f;
   
}

#color3{
   
    background-color:#fecf71;
   
}

#color4{
   
    background-color:#f0776c;
   
}

#color5{
   
    background-color:#db9dbe;
   
}

#color6{
   
    background-color:#c49cde;
}

#color7{
   
    background-color:#669ae1;
   
}

#color8{
   
    background-color:#62c2e4;
   
}



html, body, div, span,
p,a, abbr, acronym, img,
form, label{

    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

}
/* HTML5 display-role reset for older browsers */
footer, header, hgroup, menu, nav, section {

    display: block;

}

h2, h3{

    margin:0px;
}
body {

    line-height: 1;
}

#content{

    width:100%;
    clear: both;
  
}


#leftcolumn{
   
    float:left;
    width:82%;
}

#rightcolumn{

    float:right;
    width:18%;

}


#categorycontainer{
   
    overflow: auto;
    clear:both;
   
}

.categorycolumncontainer{
   
    width:20%;
    float:left;
   
}

.category{
   
    /*width:80%;*/
    -webkit-box-shadow: 2px 2px 2px 1px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 2px 2px 2px 1px #ccc;  /* Firefox 3.5 - 3.6 */
    box-shadow: 2px 2px 2px 1px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    clear:both;
    margin: 14px 0 0 12px;
 
}

.categoryheader{

    background-color:#f0776c;
    height:22px;
    padding-top:4px;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0; /* future proofing */
    -khtml-border-radius: 4px 4px 0 0; /* for old Konqueror browsers */
    text-align:center;

}

.categorycontent{

    border:1px #f0776c solid;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px; /* future proofing */
    -khtml-border-radius: 0 0 4px 4px; /* for old Konqueror browsers */
}

.categoryheader h2{

    display: inline-block;
    vertical-align: middle;
    line-height: normal;     

}

.categorycontent ul li{
   
    color:#669ae1;
    list-style: square;

}

#footer{
   
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
   
}

#footermottowrapper{
   
    width:100%;
    height:28px;
    background-color:#62c2e4;
    padding-top:12px;
    text-align:center;
    vertical-align:middle;
   
}

#footermotto{
   
    font-weight:bold;
    font-size:x-large;
}

#footerheader{
   
    color:white;
}

#footercolumnwrapper{
    overflow:hidden;
    background-color: #3A3A3A;
}

.footercolumn{
   
    float:left;
    width:25%;
    margin-top:22px;
    text-align:center;
    vertical-align:middle;

}

.footercolumnheader{
   
    color:white;
}

.footercontent{
   
    list-style:none;
    margin:14px 0px 0 0;
   padding:0px;
   
}

.footercontent li{
   
    color:white;
    list-style:none;
    margin:0px 0 14px 0;

}

#footersocialwrapper{
   
        background-color:#3A3A3A;
        width:100%;
        height:84px;

}

#footersocialwrapper b{
   
    color:white;
    font-size:large;
}

#footersocialwrapper hr{
   
    margin:0px auto 8px auto;
    width:78.2%;
    height:1px;
  
}

#footerconnect{
   
    width:78%;
    margin:0 auto auto auto;
   
}

.connecticon{
    color:white;
    float:right;
    margin-right:8px;
}
    Code (CSS):
    html
    <!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="gateway/css/index.css" />
<link rel="stylesheet" href="gateway/css/topnav.css" />
<link rel="stylesheet" href="gateway/css/footer.css" />
</head>
<body>

<div id="topnav">
   <div id="topnavcolors">
      <div id="color1" class="topnavcolor"></div>
      <div id="color2" class="topnavcolor"></div>
      <div id="color3" class="topnavcolor"></div>
      <div id="color4" class="topnavcolor"></div>
      <div id="color5" class="topnavcolor"></div>
      <div id="color6" class="topnavcolor"></div>
      <div id="color7" class="topnavcolor"></div>
      <div id="color8" class="topnavcolor"></div>
  </div>
   <div id="topnavcontent">
     <div id="gear">
       <img src="gateway/images/stock/gear.png" />
     </div>
     <h3>Jijify</h3>
  
   </div>
</div>


<div id="content">
<div id="rightcolumn">
  <p>right</p>
</div>
<div id="leftcolumn">
<!-- categories -->
<div id="categorycontainer">
   <div class="categorycolumncontainer">
      <!-- column 1 -->    
<div class="category">
     <div class="categoryheader">
       <h3>Local Spots</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>events</li>
         <li>bars/clubs</li>
         <li>resteraunts</li>
         <li>salons/nails/spas</li>
       </ul>
     </div>
   </div>
  
   <div class="category">
     <div class="categoryheader">
      <h3>Neighborhood</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>childcare</li>
         <li>classes/workshops</li>
         <li>general</li>
         <li>groups</li>
         <li>lost &amp; found</li>
         <li>volunteers</li>
       </ul>
     </div>
   </div>
     
        <div class="category">
     <div class="categoryheader">
       <h3>Buy/Sell/Swap</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>antiques/collectables</li>
         <li>appliances</li>
         <li>business</li>
         <li>boats &amp; motorcycles</li>
         <li>clothing/jewelry/accessories</li>
         <li>farm/garden</li>
         <li>computers/electronics</li>
         <li>furniture</li>
         <li>household items</li>
         <li>pets &amp; pet supplies</li>
         <li>sports equip</li>
         <li>tickets</li>
         <li>tools/materials</li>
         <li>yard sales</li>
         <li>giveaway</li>
         <li>misc</li>
       </ul>
     </div>
   </div>
        
      <!-- end column 1 -->
   </div>
   <div class="categorycolumncontainer">
       <!-- column 2 -->
  
     <div class="category">
     <div class="categoryheader">
       <h3>Musicians</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>available/wanted</li>
         <li>equip/instruments</li>
         <li>lessons</li>
         <li>services</li>
       </ul>
     </div>
   </div>

  <div class="category">
     <div class="categoryheader">
       <h3>Entertainment</h3>
     </div>
     <div class="categorycontent">
       <ul>
          <li>movies</li>
          <li>telivision/series</li>
          <li>video games/systems</li>
          <li>music</li>
          <li>books</li>
          <li>ebooks</li>
          <li>misc</li>      
      </ul>
     </div>
   </div>
     
       <!-- end column 2 -->
   </div>
   <div class="categorycolumncontainer">
      <!-- column 3 -->
    
       <div class="category">
     <div class="categoryheader">
       <h3>Auto</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>car/truck/rv</li>
         <li>atv/motorcycles</li>
         <li>boats/pleasure crafts</li>
         <li>auto parts</li>
       </ul>
     </div>
   </div>
    
      <div class="category">
     <div class="categoryheader">
       <h3>Rentals</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>apartments/condos/houses</li>
         <li>commercial</li>
         <li>vacation</li>
         <li>rentals wanted</li>
         <li>roommates wanted</li>
         <li>misc</li>     
     </ul>
     </div>
   </div>
  
     <div class="category">
     <div class="categoryheader">
       <h3>Property</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>house/condo</li>
         <li>land for sale</li>
         <li>commercial</li>
         <li>misc</li>      
    </ul>
     </div>
   </div>
     
      <!-- end column 3 -->
   </div>
   <div class="categorycolumncontainer">
      <!-- column 4 -->
  
     <div class="category">
     <div class="categoryheader">
       <h3>Job Listings</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>admin/office</li>
         <li>computer/technical</li>
         <li>customer service</li>
         <li>domestic</li>
         <li>driver/delivery/courier</li>
         <li>education</li>
         <li>focus group/studies</li>
         <li>job wanted/resume</li>
         <li>management/professional</li>
         <li>medical/health</li>
         <li>real estate</li>
         <li>inn/motel/hotel</li>
         <li>sales/marketing</li>
         <li>salon/spa</li>
         <li>show biz/audition</li>
         <li>trades/labor</li>
         <li>other</li>      
      </ul>
     </div>
   </div>
  
     <div class="category">
     <div class="categoryheader">
       <h3>Services</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>business</li>
         <li>cleaning</li>
         <li>computer</li>
         <li>artistic</li>
         <li>financial</li>
         <li>health &amp; beauty</li>
         <li>home improvement</li>
         <li>landscape/lawn</li>
         <li>labor/moving</li>
         <li>legal</li>
         <li>massage</li>
         <li>real estate</li>
         <li>misc</li>     
      </ul>
     </div>
   </div>
      <!-- end column 4 -->
   </div>
   <div class="categorycolumncontainer">
  
         <div class="category">
     <div class="categoryheader">
       <h3>Dating</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>women > men</li>
         <li>men > women</li>
         <li>platonic</li>      
         <li>casual encounters</li>
    </ul>
     </div>
   </div>
     
      <div class="category">
     <div class="categoryheader">
       <h3>Adult</h3>
     </div>
     <div class="categorycontent">
       <ul>
         <li>escorts</li>
                <li>body rubs</li>
                <li>male escorts</li>
                <li>phone &amp; websites</li>
                <li>adult jobs</li>
         </ul>
     </div>
   </div>
  
   </div>
   <!-- end of category container -->
</div>
  
   <!-- end of left column -->
</div>
<br/><br/>
<!-- end of content -->
</div>

<!-- Footer Begin -->

<footer id="footer">
<div id="footermottowrapper">
   <b>List better, share better, sell better.</b>
</div>
   <div id="footercolumnwrapper">
     <div class="footercolumn">
     <!-- foot column 1 -->
       <b class="footercolumnheader">About</b>
       <ul class="footercontent">
         <li>About</li>
         <li>FAQ</li>
      </ul>
      <!-- end of footer column 1 -->
     </div>
     <div class="footercolumn">
     <!-- footer column 2 -->
       <b class="footercolumnheader">Policies</b>
       <ul class="footercontent">
          <li>Acceptable Use</li>
          <li>Advertising</li>
       </ul>
       <!-- end of footer column 2 -->
     </div>
     <div class="footercolumn">
     <!-- footer column 3 -->
       <b class="footercolumnheader">Jijify</b>
       <ul class="footercontent">
         <li>Register</li>
         <li>Post Listing</li>
       </ul>
       <!-- footer column 3 -->
     </div>
     <div class="footercolumn">
     <!-- footer column 4 -->
       <b class="footercolumnheader">Contact</b>
       <ul class="footercontent">
         <li>Email</li>
       </ul>
       <!-- footer column 4 -->
     </div>
   </div>
   <div id="footersocialwrapper">
     <br/><hr/><br/>
   <div id="footerconnect">
     <span class="connecticon">
       <img alt="YouTube" src="gateway/images/social/white_youtube.png" />
     </span> 
     <span class="connecticon">
       <img alt="Google Plus" src="gateway/images/social/white_gplus.png" />
     </span>
     <span class="connecticon">
        <img alt="Facebook" src="gateway/images/social/white_fb.png" />
     </span>
     <span class="connecticon">
         <img alt="twitter" src="gateway/images/social/white_twitter.png" />
     </span>
     <span class="connecticon">Follow Us</span>
     <b>Connect</b>
   </div> 
  </div>
</footer>

<!-- Footer End -->

</body>

</html>
    HTML:
    [​IMG]
     
    Jeremy Benson, Apr 27, 2015 IP
  7. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #7
    You need a margin-bottom on the content to push the footer below the content
     
    PoPSiCLe, Apr 28, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    You've got a number of issues there that stems from broken methodology and likely and equally broken workflow -- you've gotten as far as styling before you even have completed content (or a facsimile of it), logical document order, logical heading structures, or any of the dozens of other things that should be 100% completed BEFORE you start worrying about the screen layout!

    This is evident from a lot of your pointless wrapping DIV around things like the H3 and UL, much less all those H3 that have no h2 to be subsections of.

    I went through and did a quick rewrite so I can explain to you the entire process I would use for building a site like that. It is elastic, semi-fluid, responsive, gracefully degrading to non-screen media targets, gracefully degrading images off or blocked, and in general just "how it SHOULD be done" if you've paid any attention to what HTML is for, what CSS is for, and accessibility norms. I tossed a live copy up on my server here:
    http://www.cutcodedown.com/for_others/jeremyBenson/template.html

    The directory:
    http://www.cutcodedown.com/for_others/jeremyBenson/

    ... is unlocked for easy access to the gooey bits, and I threw a couple source files in as .txt to help show the progressive enhancement approach I used.

    You may or may not have seen me talk at length about progressive enhancement and content first development; this is a wonderful example of something that could benefit greatly from that approach. The first thing I'd be doing is going back to basics and putting the content into a flat text editor as if HTML never even existed, then mark up that content semantically. Again that means ALL of the content (which you haven't shown).

    That would include having a H1 for all those sections to be subsections of, hence why that site title should be a H1, and H2 to indicate the start of those subsections or HR where a heading is inappropriate. (hence why HTML 5's SECTION, NAV, ARTICLE, ASIDE and FOOTER are pointless redundant crap). At this stage DIV and SPAN being semantically neutral have no business in the markup. If something is going to be an anchor, you MAKE it an anchor BEFORE you start applying or even thinking about style, so when it comes time to style it you have all the proper semantic tags in place.

    Which given what you've show so far would go something like this:
    http://www.cutcodedown.com/for_others/jeremyBenson/semantics.txt

    I took a wild guess on the sidebar stuff, and that gear image I assume is a dropdown menu? I would most certainly have that menu marked up semantically BEFORE even THINKING about the application of CSS and it's screen appearance!

    As you can see, it has a H1 (the site title) for all those sibling-level headings to indicate the start of subsections of. The paragraph before the footer really doesn't make sense as a H2. If it did I'd have made it a H2 and all those headings inside the footer be h3, but really it's just a floating (as in loose, not as in CSS float) bit of flow text like a call-out. (a close cousin to a "call to action" but with no actual action -- I'd give it emphasis but that seems inappropriate).

    From there I would add the standard HTML structural stuff to the HEAD, something like:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

<meta
	name="viewport"
	content="width=device-width, initial-scale=1.0"
>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>

<title>Jijify</title>

</head><body>
    Code (markup):
    I went with HTML 5 as that's what you were doing, though I pretty much wrote it as HTML 4 STRICT. Most of 5's elements are pointless redundancies and code bloat, or make document structure HARDER to maintain -- laughably pathetic since those are the very things they claim all those new (pointless) tags are there to address. :/ You'll find a LOT of developers saying "code in strict, add 5 last minute" because of this, mostly just so you can use the smaller sized header and the handful of tags being shoved down our throats whether we like it or not like the equally pointlessly redundant bits of vendor lock-in like AUDIO and VIDEO. (which are equal bullshit, particularly when they've duped people into thinking they are about fighting vendor lock-in!)

    There is NO reason other than making the site slow and making yourself work harder to be using those separate sheets you had, and if you are going to use separate sheets for **** sake use bloody media targets. If you use LINK where rel="stylesheet" and you use media="all" or fail to include a MEDIA target, you're doing it all wrong and completely missing the point of CSS and separation of presentation from content.

    Likewise I tossed in the viewport meta to tell browsers we know what the **** we are doing when it comes to mobile design and to not "lie" to us about the screen size.

    Then I would add div to the obvious sections that will receive style and begin working on the screen layouts - adding DIV and SPAN where needed for the application of style WITHOUT actually saying what that style is in the markup. The source for that ended up being this:
    http://www.cutcodedown.com/for_others/jeremyBenson/structured.txt

    I don't need to say "start" of anything as comments because that's what the DIV, H2 or HR mean, I don't need to say "end" as that's what closing the DIV means, though I do include comments so I know what DIV is being closed. You had the comments inside the elements which is good, I just do it in a bit leaner a fashion.

    We don't really need all those ID and classes on the generated coloured bar, sibling selectors or nesting selectors can handle that quite easily. Modern style you could consider using nth-child, but I went for nesting so that we can be compatible back to IE5 if desired. (though I did little apart from that as yet.)

    As I went for "content first" in terms of assuming the larger column was more important than the small "right" one, I went double wrapper on the content. I also added an outer div.widthWrapper for float containing and ease of positioning -- a max-width will prevent the content from getting too spread out, or on sub-pages having paragraphs of excessive length be an issue since I assume your sub-pages won't be five columns? Again, I'd also have complete content (or reasonable facsimile of future content) COMPLETELY marked up before even thinking about getting this deep into styling. That way you have some idea what to expect while styling. Playing around with style before the semantic markup and content is in place is just back-assward, no matter how many ignorant mouth-breathing PSD jockeys will try to tell you otherwise.

    You will notice inside each .category I did NOT waste an extra DIV around the content UL or headings as it didn't look you were doing anything that warranted the existence of those DIV or their classes. Semantic markup means you don't need that **** as you weren't doing anything that couldn't have been applied to the existing tags! Dan Schulz and I used to joke that DIV like the ones you had around those H3 and the associated classes are the equivalent of George Carlin's "Not every ejaculation deserves a name!"

    Normally I wouldn't have those extra div.subsection and try to use floats or flow on their own to position those categories, but since you wanted them flush top to bottom it's somewhat impractical. Those subsections limit us to exponents of two as column counts inside the #content area, so I went with 1, 2 and 4 columns as the possibilities.

    The "rightmost column" I called #extras as again it's bad practice to say what things will look like in the markup.... and once this is made responsive they might not even BE on the right hand side. This is more true than it is for the dipshits using things like bootcrap or grid type layouts since how I'm showing you this is done to the needs of the content, not the arbitrary layout breakpoints some framework or artsy fartsy painter decided to use.

    In the footer you'll see I have an HR before the paragraph to make it clear said paragraph is NOT part of the "Side bar stuff" .category. DIV mark sections for recieving style, NOT that they are actually "sections" (and part of why I don't like 5's section, redundant semantics). I gave the P the class "callout" to describe what we want to do with it. I added span to each small subsection of the text so that we can use white-space controls to keep them together on the narrower display sizes. (Something I often know to do ahead of time on elements like that just on experience)

    The remaining sections all get the same class excepting the last one (again, only use classes when children are DIFFERENT) and aren't really that different from any of the previous page sections. Again I put the anchors in there BEFORE styling so I have all the semantics and structure in place so I can style it in one fell swoop instead of dicking around declaring styles on things that once you add the links are just going to get overridden again.

    That final section div#socialLinks I added empty bold tags for use in gilder-levin image replacement, and some span to break long words into multiple lines to sit under the positioned bold tags. Doing this allows us to use one single image instead of eight separate ones. (You'll also notice I used .gif files since your images could easily fit a 16 color 'depth' with zero damage and GIF always makes the smallest 16 color non-transparent images!)

    Ok, I'm likely banging up against the post size limit, so I'll pause here and post up a CSS breakdown in a few minutes so you can try to understand the what/why/how of what I did.
     
    deathshadow, Apr 28, 2015 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Over on the CSS side of things:
    http://www.cutcodedown.com/for_others/jeremyBenson/screen.css

    I always start out with a reset; there are smaller resets like the so called "universal" one of "* { margin:0; padding:0; border:0 }" but that can cause major headaches with form elements given that IE and FF both have their heads up their asses about how padding is (or isn't) handled by INPUT, SELECT and TEXTAREA. There are larger resets like the Eric Meyer's "reset reloaded", but that fat bloated train wreck is more akin to a framework than an actual reset -- and IMHO is responsible for why so many developer rage against resets. (including some people who use frameworks which just makes me go "whiskey tango foxtrot!?!")

    The one I use (developed by Dan Schulz about a year before passed away) is a nice safe middle ground. At a quarter of a K it's so small that worrying about it's size is just stupid, it hits JUST the elements that tend to be inconsistent cross browser. Some will say "just declare those when you use them" -- for reliable cross browser appearance even on this simple layout that would be some two dozen or more "margin:0; padding:0;" which would be far, FAR more code than just using the reset. I just look at it as variable initialization.

    HR -- I hide these since they are there for semantic meaning and non-screen targets, NOT "drawing a line across the screen". Remember, HMTL is a semantic language where tags say what things are or what they would be in professional writing. If you choose your tags based on their default appearance you are choosing all the wrong tags for all the wrong reasons.

    -text-size-adjust -- I have these inside a media query as sending them to desktop Safari breaks zoom (herpaderp when it doesn't break zoom on mobile Safari). These lile the viewport META tell smaller screen devices "we know what the **** we are doing, leave **** the **** alone!". Actually, I generally use more profanity than that in reference to how mobile browsers try to override things.

    body -- I set the font and size most likely to be used across the entire page. You were using a serif font and serifs cause legibility issues on screen. Segoe-UI is "new" as of Windows Vista and fairly nice looking, and of course NEVER declare a font-family without declaring fallbacks. I use a taller line-height as that too increases legibility (as years of teachers telling us to "double-space" supports... I'm more of a fan of 1.5 space, but hey...) and whenever declaring fonts I use the condensed full declaration so I can see EXACTLY what's being set. It's good practice to ALWAYS declare line-height when you change font-size anyways as inheritance of that CANNOT be trusted (even the dipshit "omit the metric" nonsense is unreliable, no matter what the asshat mouth-breathers over at Sitepoint say) and by the time you say "font-size" and "line-height" you're spitting distance from the size of the complete line anyways.

    #top, #footer, .widthWrapper - I set a min-width on these for pre CSS3 capable browsers in an attempt to make it so IE8/earlier at least have a chance at rendering a useable page. A more complete version would probably also send IE6 a fixed width since it knows not the min/max-width, but I skipped that extra bit of effort for now.

    #top -- I set up float wrapping behavior since we'll be using a lot of floats here. I also added a bottom-border as I just thought that looked better. (box-shadow might be even better!)

    .colorBar -- the outermost DIV of the generated colors I set to that 1/8th width and set the font-size tiny so legacy IE won't make it taller than intended. (Older versions of IE have this weird bug where they won't let elements be shorter than the font-size). The first color gets set here as well. The float fixes a bug in IE8 called the "staircase effect" - we just have to remember to clear anything after this.

    .colorBar div -- the nested DIV all get 100% width, which results in that 12.5% of the parent, then get slid over 100% which is again that same width. End result puts them across the screen despite being nested one inside the other. It's a sneaky trick that works really well when you want to skip adding "classes for nothing". Remember, less markup and more CSS is a good thing since across your pages CSS can be cached and pre-cached, while HTML isn't!

    .colorBar div div,
    .colorBar div div div,
    .colorBar div div div div,
    etc, etc, etc...     -- I used nested selectors to target them for color. They could have been made siblings and nth-child would have been simpler, but nth-child is "too new" IMHO for an appearance element that is likely on every one of your pages. This way we have methodology that works all the way back to IE5.

    h1 -- we clear the float, then float the heading so we can position the "gear" menu thing on the other side. Padding for appearance and a larger font-size and we're good to go.

    .gear -- flaoted the other way, padded where the top padding is equal to the halfway point down the h1...

    .gear img -- which once the image is set to block (so no goofy extra bottom spacing or alignment issues) lets us use a negative top margin equal to half the image height to slide that gear up into perfect alignment. This method is a lot easier and more compatible than trying to pull stunts like display:table-cell or flex-box.

    .contentWrapper -- We start out with 100% width floated, leaving 0px free on the right for our right-most column... stick with me on this; this is pure magic.

    #content -- relative positioning helps with width reporting to the child elements, good since we have multiple columns as the "content". Likewise a haslayout trigger drags IE7/earlier into behaving properly. I pad the top just to make it pretty, then in our next bit of hocus-pocus we use a right margin to make visual (but not flow) room for that sidebar.

    #extras -- and here's our final wave of the wand. Remember how I said that there was 0px left for floats next to .contentWrapper? By setting a negative margin equal to our declared width here, #extras becomes 0px wide "in flow" making it small enough to fit next to #contentWrapper even though it remains the same size. This pops it up into place over .contentWrapper and #content. Boom, elastic side column with fluid content column with the content column FIRST in the source order. This is the cornerstone of doing really good and reliable cross-browser content first layouts.

    #content.subSection - each of those sections we'll start out as a quarter of #content's width. I like to start with the desktop layout and work towards mobile instead of the other way around since the lowest common denominator is NOT CSS3 capable mobile browsers, it's browsers made BEFORE there was CSS3 like desktop IE8/earlier.

    .category -- Since I used .category in both #content and #extras I declare values they share together... margin, border-width, border-radius, etc.

    #extras.category -- then I unset the margin that's different and change the border color for the side one. I guessed (wildly) that blue you had going fullscreen was for these. I was probably wrong on that, adjust as needed!

    .category h2 -- these too share a lot of values in common, so set the padding/margins/alignment, border-radius and font as desired.

    #content .category h2 -- then the colors and shadows for the content area ones. The comment on the text-shadow says it all. For a black text-color that light red isn't light enough for true legibility. I'd let that slide on legacy browsers but we can use text-shadow to just lightly tweak things into being easier to read.

    #extras .category h2 -- as opposed to in that right-most column where a light blue on dark blue is more than visible.

    .category ul -- adjust the bullet as desired and pad them to be pretty. YAWN. The 0.25 em bottom + 0.25em bottom on the LI ends up balancing the 0.4em * 1.25 = 0.5em bottom margin on the h2.

    .category li -- a bit of extra bottom padding meks them pretty, and I set the color even though the anchors override that.

    .category p -- same basic padding as the UL.

    .category a -- color the anchors, strip off the underscores.

    .category a:visited -- on content always indicate if the user has visited the link or not.

    .category a:active,
    .category a:focus,
    .category a:hover     -- hover effect and I tossed a bit of "glow" on it using text-shadow. Rememember that :focus is supposed to be for keyboard navigation which you should be using in addition to mouse styling, but some older browsers use :active for keyboard ignoring :focus, so just nab all three together at once!

    #footer -- clear just to be 100% sure we're past all the floated columns, pad the bottom, set up that darg gray with white text.

    #footer a -- I made the anchors darker to make it clear they are different despite not having underscores. I didn't target them with :visited as they are more major section links than content navigation.

    #footer a:active,
    #footer a:focus,
    #footer a:hover     -- another hover with glow. Nothing too fancy there.

    #footer .callOut -- just styling the paragraph to make it stand out as per your original design.

    #footer .callOut span -- as mentioned above, setting white-space:nowrap on each of those span keeps the small sections of words together as the width narrows. Just looks nicer.

    #footer .subSection - quarter-width to start with, centered text, padding to space it evenly. Again, nothing too fancy.

    #footer h2 -- all the H2 get the same font size and face.

    #footer .subSection h2 -- the first few getting even padding all-around. Remember that since the font-size is 125% that means 0.4em is actually 0.5REM. We could use REM there, but I don't trust them yet and I still care about supporting pre CSS3 browsers in addition to CSS3 capable. Usually if you keep your sizes consistent and only change font-size for things like headings (the only time it really makes sense) you can keep it simple, since at 125% a 1 becomes 0.8, while at 150% a 1 becomes 0.66~.

    #footer .subSection ul -- kill the bullets, add some space at the bottom. YAWN.

    #socialLinks -- I gave these an ID so if desired one could target them in the URI via a hash (reason most of the 'major' sections got ID's and not classes). This means we don't need to target off the parent #footer. First we just clear again to get past the quarter-width subsections, margin and padding, and that little border. I added that side margin to push in the border as I think that looks nicer than it did "edge to edge".

    #socialLinks h2,
    #socialLinks ul,
    #socialLinks li     -- setting these to inline puts them all on one line. Technically h2 has no list-style, but it does no harm sending that value at it. Pretty much I put it there so I didn't have to say "#socialLinks ul" a second time for nothing.

    #socialLinks h2 -- some extra padding just to space it away from the anchors.

    #socialLinks a -- the inline-block allows us to set height and/or padding. Normally I rail against PX font size but since this is behind a image-replacement we have no choice. I do not set a fixed height as that can be problematic, and instead pad it with a max-height. Word-wrap:break-word (a "CSS3" property that exists all the way back to IE5... yeah, chew on that one for a while) will create line-breaks mid-word if need be. The overflow:hidden chops off the height allowing us to do hover states simply by moving the nested bold tags with three background-position declarations instead of six separate ones. Of course the relative positioning is for those bold tags to be absolute positioned over the anchors content.

    #socialLinks .twitter a -- the only one not split into two lines, I increase the padding by 12px total to equal the same 32px height. This just looks nicer when images are disabled.

    #socialLinks a span -- setting this to display:block forces the word-wrap where we want it instead of where break-word "thinks" is right.

    #socialLinks a b -- this is our image replacement. I declare it 64px tall which gets the bottom half chopped off... we'll get to why in a minute. AS you can see it uses this single image:
    http://www.cutcodedown.com/for_others/jeremyBenson/images/socialIcons.gif

    For all four icons AND their hover states.

    #socialLinks .facebook b,
    #socialLinks .google b,
    #socialLinks .youtube b     -- each of these gets slid farther and farther left revealing the appropriate slice of that image.

    #socialLinks a:active b,
    #socialLinks a:focus b,
    #socialLinks a:hover b     -- sliding the entire bold tag up reveals that extra 32px from the bottom as the hover state. CSS sprites so we have one image doing what most people would use eight separate ones to accomplish...

    ... and since all that is done via gilder-levin, we're showing meaningful text images off and for non-screen media devices!

    That's the primary large format desktop layout complete and ready to go, only leaving some simple media queries to adjust everything for smaller displays. The breakpoints for these media queries were determined through experimentation based on the content's needs via resizing the window instead of some arbitrary pre-determined "grid" -- using grids or figuring out this stuff ahead of time usually means you have to design your content to the layout and not the other way around, and that's pretty much missing the point of having layou in the first place for screen media. Again, the web is not print!

    (max-width:70em) -- the first thing I do here is reduce that min-width we set for non-media query browsers to the smallest size we really would ever encounter on mobile. I then strip the content first columns off .contentWrapper, #content aand #extras, adjusting the paddings on various elements. This removes that rightmost column placing it below the remaining four gaining us a bit more room.

    (max-width:50em) -- even narrower 4 columns just isn't viable, so I drop it to two columns. This has some alignment issues that I address by making the left-columns (odd) clear the floats (makes a weird gap, but it's better than the other way, trust me!) and the right columns (even) float right with a negative right margin to prevent something called "perfect width opposing float drop".

    (max-width:28em) -- going this small we want to make the content section only be a single column and the footer sections two instead of four columns. Likewise the social links no longer look good on the right so I centered them.

    (max-width:20em) -- our smallest query just gets rid of the last of the columns so it's all one long single one. I also made the H2 for the social links be separate as it looks better to keep the icons together than to have them wrap...

    ... and that's the CSS of how I'd be approaching what you have so far.

    I know that's a lot to take in and likely WAY different from how you are used to thinking about things, but that's really how it SHOULD be done if one is paying any attention to what HTML is, what CSS is, what they are for, and all the actual improvements in thinking and development methodologies introduced since 4 STRICT. Even if much of the things I just advocated are being pissed on from orbit by the HTML 5-tards, scripttards and all the other people making lame excuses for their sleazy outdated inaccessible ways of crapping out sites any-old-way!

    Hope that helps, or at least gets you thinking on how HTML is supposed to be used and why playing with layout before you've even got complete markup is a back-assward waste of time... no matter how many in the industry seem to be trying to make it the norm.
     
    deathshadow, Apr 28, 2015 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Oh, and as to your keyboard problem, three things:

    1) have you checked to see if you can get a cheap replacement off fleabay?

    2) you could ghetto fix it by ripping it out of the machine and finding a smaller usb one. STick it in the hole with double-sided tape and run the cable around when you want to use it. Smaller USB ones can be nabbed off e-fence for under ten bucks -- they're meant for tablets but they work fine on laptops.

    3) have you tried turning on the on-screen keyboard option? If you are on windows it's been available since XP though they keep moving where to enable it around for some blasted reason.

    Just some ideas.
     
    deathshadow, Apr 28, 2015 IP