Need help with first "from scratch" responsive design

HTML & CSS
1

NOTE: I was not able to paste all the code as I was not able to understand the directions on pasting code in a post. The website is www.ZimbaCo.com/indexr.shtml and style sheet is /style.css – thank you so much.

My very first responsive site. In order to really learn the
“nuts and bolts” I have foregone using wordpress or the various grid based
templates in favor of creating my template from the ground up. For my first
project I am working on a new client website setup in the “old fashioned” way
of 960px header with 25/65% vertical side menu/content area then footer below.

I’m making this first project simple, hence my not using a
“collapsing” menu (one that disappears under 480px resolution and becomes a
toggle, etc.). I also want this first template to emulate the way 85% of my
sites are – full width header, menu on left, content on right, footer below. I
will evolve, but I think using a familiar layout will serve my learning curve
first.

I’m using media queries and have labeled my css and div
beginning and endings as best I can

I’m using lists for menu, block style

I’m using a container div, which contains the header, menu,
content and footer. I’m using % vs. fixed width for fluidity but I’m keeping
the percentages even (i.e. 25% for menu vs. 23.45655555231%)

Some issues I’d love to get advice on are:

I originally had the menu be vertical left aligned down to
480px, then have the entire sidebar/menu float to top ABOVE content at 479 and
below. I also had the contact info box, header and footer disappear. (Yes, I
will have to add the contact info in there somewhere…maybe call or email
buttons later…)

I am probably over complicating but I noticed that between
480 and 760 pixels the left menu buttons got a LITTLE too squashed, so I
decided to try my hand at making them display inline under the header using a
min/max media query, so between 480 and 760 pixels, the menu would become
horizontal, over the content, using percentage width (so I’ll have to change it
when I add or remove menu items…a little sloppy). The problem is that I cannot
quite get them right. I am using display: table and display: table cell
properties but it’s not perfect. The mousover hover color is not covering 100%
of the cells in cells where there is no word wrapping. (for example, home and
our services only changes color on hover if you mouseover top 75% of the button
while “Meet the Staff” is 100% active.

Although I’ve spec’d the sidebar to be up top, there seems
to be a light blue margin to left for part of the scale from 760 to 480.
Sidebar div is the only one with this color so I’m sure it is the sidebar…it’s
almost like it’s “leaking” down the left side!

There is a picture that is “aligned right” so that text
flows around it but it pushes the text in bad places and also doesn’t scale
down very well until you get all the way down to 350~px. Maybe I could simply
make it go away as well by wrapping it in div … is it bad idea to have a left
or right aligned image in responsive design?

Other than that, I’d LOVE for someone to take a look at my
code and stylesheet and see what messes could be cleaned up. I really am
determined to learn this from the ground up and I want to understand every bit
of css so that I can solve any issue that comes up.

Thank you!

2

Would you mind putting this up somewhere? It sounds weird, but it’s actually easier to review complete HTML/CSS using the browsers console than looking at the code directly.

3

Oh I’d LOVE to. Believe it or not I have not been able to figure out how to post code. I will try pasting it below…

here is the page first indexr.shtml

```
<!DOCTYPE html>
<html lang="en">
<head>

  	<title>Zimba Company - Lath, plaster, metal framing and drywall installation Fairfield Maine</title>

<META NAME="description" CONTENT="Zimba Company services include applying lath, plaster, metal framing and drywall installation.  We also specialize in Residential work for builders with discriminating needs.   Retail sales of  drywall / plaster materials are available for pickup or delivery to your site with boom truck allowing.">

<META NAME="keywords" CONTENT="lath, plaster, metal framing, drywall installation, maine, southern, central, augusta, waterville, fairfield, kennebec county, builders, commercial siding">
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="reset.css" type="text/css" rel="stylesheet">
  <link href="style.css" type="text/css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
	
	
	
</head>

<body>
<div class="container"><div class="header"><img  src = "images/header.jpg" alt = "Zimba"></div><!--end header -->

  
<div class="sidebar">
  
<div id="nav">

  <ul id = "menu">
  <li ><a href="index.shtml">Home</a></li>
  <li ><a href="services.shtml">Our Services</a></li>
  <li ><a href="staff.shtml">Meet The Staff</a></li>
  <li ><a href="facility.shtml">Our Facility</a></li>
  <li ><a href="contact.shtml">Find Us</a></li>
    <li ><a href="jobs.shtml">Project Photos</a></li>
	 
  </ul>
  

  
  </div> <!--end nav -->
  
  <div class = "info-box"><!-- contact info box under menu-->
  
  <strong>Contact Info:</strong><br>
<strong>Zimba Company</strong><br>
P.O. Box 336<br>
7 Summit St.<br>

Fairfield, Maine 04937<br>
Phone: (207) 453-7991<br>
Fax: (207) 453-6647<br>
Email: <a class = "menu" href="mailto:office@ZimbaCo.com">Office@ZimbaCo.com</a><br><br>

<strong>Hours:</strong><br>
Monday - Friday, 8:00am - 5:00pm Eastern Time

  </div><!-- end contact  box   -->
  </div> <!--end sidebar -->



<!--this is everything to the right of the left menu-->
  <div class="content">

<h1>Welcome to Zimba Company</h1>
<hr class = "light">
<h2>Wall &amp; Ceiling System Specialists</h2>
<hr class = "light">


  <div align="justify"><!--div to simply justify body text-->

<img src="images/hws-home.jpg" alt="" hspace="12" vspace="5"  style = "float: right; border: 2px solid black;">
Zimba Company is a drywall company that serves a broad spectrum of clients ranging from residential patching jobs to large commercial projects.  Our services include, but are not limited to experienced craftsmen applying lath, plaster, metal stud framing, EIFS and drywall installation.  The company was started as the Al Zimba Company in 1954 by Albert J. Zimba.  He was solely a plastering contractor working from his own home.  He later moved the business to its present location on Summit Street in Fairfield, Maine.  In 1972, the business was purchased by F. William Zimba.  In 2002 Zimba Company was sold to its current President, Ronald Loubier.
<br><br>

Zimba Company has built its reputation on quality workmanship, personal service and respected business practices.  Because of this commitment it has grown substantially.  Zimba Company now has several warehouses where the material is stored on site.
<br><br>
Zimba Company's management believes that their reputation as being dependable and reliable, and delivering quality service and products is due to their functionally integrated management team as well as their experienced craftsmen.  Each individual works in a team effort to produce a service and product that meets our clients highest expectations.
<br><br>
Our capabilities cover all facets of wall and ceiling drywall and plaster work.  No matter what size or type of project you may require, Zimba Company has a competent staff of professional people who according to their expertise, will see to it that every detail is properly carried out.
<br><br>
The success story lies with the development of the company providing more than routine services.  Zimba Company has highly experienced craftsmen and applicators that take pride in skillfully producing excellent quality work for the wide spectrum of clients which Zimba Company serves.</div><!--end body text align-->
<br><br>




  </div><!--end content -->
  
  
   <div class="footer">Some text for the footer
 </div><!--end footer -->
 
 
  </div><!--end container -->



</body>
</html>
```

and here is the css




    /* */
    
    /* link styles */
    
    
    
    /*body elements*/
    body{
    margin: 0px; 
    padding: 0px;
    background:  url("images/bg1.jpg");
    background-color: #B9D3F8;
    font-family: verdana, arial, Helvetica, sans-serif;
    }
    
    
    .header img {
     width: 100%;
     height: auto;
    }
    
    .header, .container {
    width: 100%; 
    max-width: 960px;
    }
    
    .header{
    margin: 0px auto;
    padding: 0px;
    }
    
    .container {
    margin: 0 auto;
    padding: 0px;
    background: #D5DDEA;
    }
    
    .sidebar {
    width: 24%;
    max-width: 230.4px;
    padding: 0px;
    margin: 0 auto;
    float: left;
    font-size: .8em;
    }
    
    .content {
    width: 74%;
     max-width: 710.4px;
    padding: 1%;
    margin: 0 auto;
    float: right;
    background: #ffffff;
    height: 100%;
    font-size: .8em;
    }
    
    .footer {
    background: lavender;
    margin: 0px; auto;
    margin-left:  auto;
    margin-right:  auto;
    width: 100%;
    clear: both;
    }
    
    .info-box {
    color: #ffffff; 
    width: 85%;
    border: 1px solid black; 
    background-color: #00539F;
    padding: 7px;
    margin-left:  auto;
    margin-right:  auto;
    }
    
    /* navigation */
    #nav ul {padding-left: 10px; padding-right: 10px;}
    #nav li {}
    
    #nav ul, li {
    list-style-type: none;
    margin-left:  auto;
    margin-right:  auto;
    }
    
    #nav li {
    display: block;
    background: #00539F;
    max-height: 35px;
    border: 1px solid black;
    }
    
    #nav ul li a, a:hover {
    display: block;
    padding: 10px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    }
    
    #nav ul li a:hover {
    background: #497CD0;
    max-height: 35px;
    
    }
    
    
    hr.light{
    border: 0;
    height: 1px;
    color: #00539F;
    background-color: #00539F;
    }
    /* make menu disappear and be replaced by show menu button */
    
    
    
    /* media queries */
    @media all and (max-width: 479px) {
      .content, .sidebar {
        float: none;
        width: auto;
      }
      .container {width: 95%;}
      
    .info-box { display: none;}/*hide the info box below the navigation menu for phones to save space*/
    .header, .footer  {display: none;}/*hide the header and footr for phones to save space*/
    
    }
    
    @media only screen and (min-width:480px) and (max-width: 760px) {
      .container, .header, .content, .footer {width: 100%;}
    
    .content {padding-left: 12px; margin: 5px auto;}
      /*make side bar become vertically aligned under header*/
    .sidebar {
    width: 100%;
    }
    
    /* navigation - we want the buttons to be diplayed horizontally hugged up against the header */
    
    #nav ul {display: table; width: 95%; margin-left:  auto;
    margin-right:  auto;}
    
    #nav li {display: table-cell; }
    
    #nav ul, li {
    list-style-type: none;
    margin-left:  auto;
    margin-right:  auto;
    }
    
    #nav li {
    background: #00539F;
    display: table-cell;
    width: 16.7%;
    }
    
    #nav ul li a, a:hover {
    height: 100% auto;
    }
    
    
    .info-box { display: none;}/*hide the info box below the navigation menu for phones to save space*/
    }
    
    @media only screen and ((max-width: 760px;) {
    .info-box { display: none;}/*hide the info box below the navigation menu for phones to save space*/
    }
    /*padding for menu if needed padding: 3.8%;*/
    
    ```
4

To format hte code for this forum, please edit your post, highlight all of your code, and then above your “typing area” you will see a list of buttons. One of which looks like this </> . When your code is highlighted, press that button.

5

Alternatively, for long code blocks it’s often easier to put three backticks ```on a line above your code, and another three on a line below your code. (Doesn’t work with some European keyboards, which don’t have backticks.)

6

Got it! I think it worked!

1 Like
7

Great start so far hotwired! A few pointers before I get to your questions:

  • Adding *, *:before, *:after{box-sizing: border-box;} at the top of your stylesheet will prevent you from having to use percentage paddings. Check this out, resize your browser to see how using box-sizing is more consistent (you might have to actually view the demo on CodePen, just click the CodePen logo and resize it there):

http://codepen.io/labofoz/pen/JoEYVM

  • That will also fix the weirdness with the content popping out of the viewport. In fact, it would probably fix all the other “leaking” issues.

You’re better off using display: inline-block; vertical-align: top. You’re defeating the purpose of not using tables for layout by forcing table layouts in your CSS.

What helps me is to just make all images inside your main content div 100% width when the screen is smaller than X. This obviously won’t work for tiny images like icons so either you’ll need to add classes for those through the WordPress editor or target those with JavaScript.

Let me know if I missed any other questions

8

That’s quite wrong. There is nothing wrong about using table layouts in CSS. They are quite useful and supported everywhere now. What are your reasonings for not wanting to use CSS based table layouts? I’m extremely curious. The reason not to do it for HTML is semantics. That issue is fixed by doing it in CSS.

9

:stuck_out_tongue: I really just spent the last 22 min trying to come up with a good reason. I guess I don’t have one after all.

10

despite how display-inline: block; is supposed to work, on my computer it still stacks. display BLOCK works, but inline-block absolutely does not do what every css manual says it will do. Display table is sofar the only way I’ve been able to get my lists bullets to appear side by side.

I am absolutely satisfied with what I have for menu … except that when I mouseover I can’t get the whole square to “activate” … I’ve tried forcing 100% height to the li a:hover but no avail… I’ll keep hammering…! thank you!

And if there was a way to do really reliable table’s based responsive design, I’d do it. I have always hated divs simply because tables seem so logical and “visual” but I know the rule…

11

If you gave us a demo, we could tell you why inline-block isn’t working like it’s supposed to. Considering you imply that floating didn’t work also, It leads me to believe there just wasn’t enough room (which width constraints are forced upon table-based code where it FORCES smaller widths to match the display view you want based on your code (i.e. if you had two elements with display:table-cell it would force the situation of two side-by-side elements EVEN IF there shouldn’t be enough width).

FYI percentage heights ONLY WORK if the DIRECT PARENT has a fixed height set. There are a few exceptiosn to this rule but as a general rule of thumb, remember what I just said.

12

Absolutely true.:slight_smile:

CSS has no bearing on the semantics of html. As far as html semantics are concerned a div is a div even if you set it to display as something else.

CSS is about presentation and styling and imparts no semantics on the html.

When you use a table element then the semantics are that you are displaying data. When you set a div (or anything else) to display:table then you are just utilizing the presentational aspects of the table element. It was never meant to be used to display table data but merely replicate some of the useful table properties.

Structure your html to hold your content in the most semantic way using the correct element for the job and then use css to move it around. CSS doesn’t care what element you use as it can bend it to its will (in most cases).

13

Yes it 100% does exactly what it should be doing in modern browsers and IE8+ :smile:

If its not working for you then you either you have a slight misunderstanding of how it works or you have conflicting rules somewhere (float and inline-block do not mix - neither does absolute positioning and inline-block etc.). Or perhaps it isn’t suitable for the job in hand.

As Ryan said we’d need to see an example that you think is not working and then we could explain what’s going on. A lot of people are still confused by inline-block and there are some things to take note of (such as white-space nodes, shrink-to-fit algorithm, vertical-alignment of blocks etc…).

I use inline-block all the time and much prefer it to floats and I love display:table and table-cell for the simple ease that they make laying out equal columns. I rarely use floats these days now that we don’t really need to support ie7 and under.

14

Basically in the code I pasted there are two instances of table css under the min max media query - display:table and display: table-cell – when I change those both to display: inline-block; it reverts to a stack. I do understand what you mean though … I have noticed, especially with media queries, that anything in the ORIGINAL css that IS addressed, needs to be re addressed (changed) in the media query. That’s thrown me off a few times …

15

If I change the code in post #3 to inline-block (and vertical-align:top) then the nav displays horizontal with inline-block at the smaller screen sizes.

You have to remember that display:table-cell and display:inline-block are not the same thing and with tables you get extra behaviors such as equal columns and auto fitting of content even when widths and heights are set. Inline-block is like other elements and if the width or height is too small content will stick out. There were also errors in the media query where you didn’t address the max-width and so the element was still contained and not full width.

However as I mentioned before display:table-cell is probably better anyway in these instances if you can live with ie8+ support.

16

Ok…I’ve done alot of tweaking and research (okay alot of tweaking and a little research!). The biggest challenge I’ve noticed with these media queries is that you have to address anything you want changed. If I have "max-width: 24%; in the main part of the css, and I’m adding a media query meant for 320-480px smart phones, I want to make sure I add a max-width to my query to “clear” that 24%…just looking for those kinds of things fixed most of my problems. Here’s what’s left…

  1. between 479 and 760px my menu changes to horizontal. I’d like it to be centered perfectly under the header but it’s not, it’s pushed over to the right just a tad.

  2. I’m sure this is related to the height: 35px; attribute just for a starting hint. But when the menu is horizontal (between 479-760px) you have to mouseover the upper 66% of the button. It’s like only a certain percentage is “active” the rest is not. you’ll see the color change.

I fixed the right aligned image by yanking out some unnecessary stuff in the style.css that was interfering, putting a

under the image to make sure the text gets pushed under it. I then control the line height of the .p element in media queries. I also “wrapped” the image in a special div just for floating body images. A little more code but honestly I couldn’t get the to respond as well as

element in my css. If that makes any sense??

Thanks for any help on the two items! The home page is now www.zimbaco.com/index.shtml

17

Yes that’s correct which is why I advise multiple media queries following closely in the html after the original element and in that way there is no chance of missing what you have already set. Putting all your media queries at the end of the css is nice to look at but hard to use.

Remember that media queries still follow the cascade and so you have to undo anything you don’t want. In most cases this should not be hard if you have coded correctly because usually the widths of many blocks should be controlled by a single parent rather than setting widths (or min/max widths on each).

Usually the first things you need to think about in a media query for smaller screens is to set width to auto, max-width to none, float to none and display to block (for block elements).

You have set the nav to be 95% yet have 9% padding. 104% is always going to be too large. What you should do is set the padding to zero at the smaller width.

@media screen and (min-width:480px) and (max-width:760px) {
#nav ul{padding:0}
}

I wouldn’t use the min with and max-width media queries anyway as that just complicates things.

Just go down with max-width and tweak as you go.

@media screen and (max-width:760px) {
#nav ul{padding:0}
}

In your example you would have to redefine more styles for viewports less than 480px. Usually as you get smaller you want the same settings you already had but just to tweak a little more as you go and not redefine a whole new set.

18

The problem is that the list element is the element that has full height (display:table-cell). The a element is just display:block and will not automatically stretch to the height of the list even if you give it 100% height because elements won’t base their height off auto height elements.

What you need to do is use a structure where the a element is the display:table-cell element.

e.g. like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#menu{
    max-width:960px;
    width:100%;
    display:table;
    border-collapse:collapse;
    margin:auto;
    border:1px solid #000;
   box-sizing:border-box;    
}
#menu a{
    display:table-cell;
    vertical-align:middle;
    background:blue;
    color:#fff;
    text-decoration:none;
    padding:10px;
    text-align:center;
    border-left:1px solid #000;    
}
#menu a:first-child{border:none}
#menu a:hover{background:red}

</style>
</head>

<body>
<nav id="menu"> 
    <a href="index.shtml">Home</a> 
    <a href="services.shtml">Our Services</a> 
    <a href="staff.shtml">Meet The Staff</a> 
    <a href="facility.shtml">Our Facility</a> 
    <a href="contact.shtml">Find Us</a> 
    <a href="jobs.shtml">Project Photos</a> </nav>
</body>
</html>

Now the whole area will always be active.

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.