Hi, Shoxt3r, welcome back!
PART 1.
You've made some advancements to your page. Looks nice.
Yes, the use of percent widths is causing some problems, but that can be worked out.
You've mentioned a responsive layout, but so far there are no media queries being invoked so we're still looking at a fluid layout. Your new additions practically beg for a responsive layout, though, so you're on the right track.
When one designs for a small device, the "fluffy" stuff like unnecessary or large images are often dropped along with unnecessary text to save bandwidth and reduce scrolling. Could you identify those parts of the new page that are the most important (the part that a user should see first) and the part(s) that are less important (stuff that could come last or be eliminated from small devices)?
When I look at the content on your page I see the following:
(1) Images on the left that impart a nice, warm feeling about the inn but give no readable information.
(2) A Lot of text in the middle. Probably more than someone might want to read if just casually browsing (probably just temporary filler).
(3) Images on the right with text that informs and links that go to useful targets; however, the size of that text is uncomfortably small and some or most users would have to zoom larger to read it. I would find that annoying.
At this time, the images on the left do not resize; the ones on the right do; the text in the middle adapts to the width of its column.
How do you anticipate the content being arranged for small devices?
In the following recent message, a member asked about Fluid Layouts and Best Practices. The link is to @Paul O'B 's excellent response in which he provides several resources.
http://www.sitepoint.com/forums/show...=1#post5329671
All good reading.
PART 2.
This code is a month after-the-fact may be probably useless, but I am going to include the FLUID layout that I put together last month when I was playing because I think there may be a couple of items in it that may still be useful. You can always ignore it 
. The only images used are one of the old twitter images and the logo.
Highlights:
(1) The shadow around the main menu bar is symmetrical.
(2) The tilde (~) is applied via an :after pseudo-class; however, code is included to apply it within <span> taqs in the HTML as well. Either method is valid. Placing it outside of the <li> tags is not.
(3) The page is fluid down to 203px. Nothing overflows any border before that point.
(4) The boxes for the social buttons and the booking phone number have been rearranged to improve the flow of the layout. Social buttons are at the bottom. (That's why I didn't post it before.)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
http://www.sitepoint.com/forums/showthread.php?991682-How-to-align-and-reduce-gaps-between-boxes
Thread: How to align and reduce gaps between boxes?
Mar 4, 2013 16:07
Shoxt3r
http://andrewcourtney.co.uk/demoenvironment/lioninn/
http://www.andrewcourtney.co.uk/
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title>Lion Inn (floats)</title>
<link rel="stylesheet" type="text/css" href="includes/lion1r.css"/>
<link href='http://fonts.googleapis.com/css?family=Lusitana' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="outer cf">
<div class="logo">Lion Inn</div>
<div class="menubox">
<div class="menubg">
<ul class="cf">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Restaurant & Menus</a></li>
<li><a href="#" title="">Rooms</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">Events</a></li>
<li><a href="#" title="">The Area</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
</div> <!-- .menubox -->
<div class="main cf">
<div class="enquire">To Enquire or Book Call 01234 ~ 567890</div>
<!-- ADD CONTENT BELOW THIS LINE -->
<div class="heading"><h1>Page Heading</h1></div>
<div class="content cf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum mattis bibendum. Pellentesque ultricies risus tristique elit faucibus at hendrerit elit aliquam. Integer gravida nulla eget magna facilisis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dui ligula, ut sodales lacus. Nulla sit amet elit id mi adipiscing pulvinar. Nunc bibendum diam nunc, sit amet aliquet urna.</p>
<h2>Page Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum mattis bibendum. Pellentesque ultricies risus tristique elit faucibus at hendrerit elit aliquam. Integer gravida nulla eget magna facilisis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dui ligula, ut sodales lacus. Nulla sit amet elit id mi adipiscing pulvinar. Nunc bibendum diam nunc, sit amet aliquet urna.</p>
</div>
<!-- ADD CONTENT ABOVE THIS LINE -->
</div> <!-- .main -->
<div class="social">Why not join us for the latest news and events? <span><img src="images/twitter.png" alt=""/><img src="images/twitter.png" alt=""/><img src="images/twitter.png" alt=""/></span></div>
<div class="footer">
<p><a href="#" title="">Home</a> | <a href="#" title="">Members</a> | <a href="#" title="">Dates</a> | <a href="#" title="">Gallery</a> | <a href="#" title="">Contact</a> | <a href="#" title="">Links</a></p>
<p>Copyright 2013 Andrew Courtney</p>
<p>Website Designed and Developed by <span class="andrewcourtney"><a href="http://www.andrewcourtney.co.uk" target="blank">andrewcourtney</a></span></p>
</div>
</div>
</body>
</html>
Code:
/* lion1r.css */
@font-face {
font-family:'Lusitana', serif;
font-weight:normal;
font-style:normal;
}
body {
font-size:13px;
font-family:Arial, Helvetica;
background-color:#3b1313;
background-image:url(../images/background.png); /* 200x200 */
background-attachment:fixed;
margin-top:10px;
}
.outer {
/* border:1px solid red; /* TEST BORDER */
width:90%;
padding:0 12px;
margin:0 auto;
}
.logo {
/* outline:1px solid #0cc; /* TEST OUTLINE */
width:165px;
height:177px;
float:left;
background-image:url(../images/logo.png); /* logo as background-image 165x177 */
background-repeat:no-repeat;
font-size:0px;
padding-right:6px;
margin-left:-15px;
}
.menubox {
/* outline:1px solid yellow; /* TEST OUTLINE */
border:2px solid #522a2a; /* border around menu bar */
padding:6px; /* space for black box shadow */
margin:44px -8px 0 0px;
}
.menubg {
border:1px solid #3b1313; /* 1px brown border around inner menu bar */
background-color:#522a2a; /* inner background-color of menu bar */
-webkit-box-shadow:0px 0px 3px 2px black;
box-shadow:0px 0px 3px 2px black; /* black shadow around menu bar */
}
.menubg ul {
/* outline:1px solid #0c0; /* TEST OUTLINE */
display:table;
list-style-type:none;
padding:12px; /* includes padding left when page is very narrow */
margin:0;
}
.menubg li {
display:block;
float:left;
color:#faa31b;
font-size:1.2em;
font-family:Lusitana;
text-transform:uppercase;
text-shadow:black 0.15em 0.15em 0.2em;
padding:4px 0; /* space above and below the list items */
margin:0;
}
/* "list" valid tilde-in-spans in the main menubar, eg: </a><span>~</span></li> */
.menubg span {
display:inline-block;
padding:0 .75em; /* space to the left and right of the tilde */
}
/* An (IE8+) ALTERNATIVE to the tilde-in-spans in the main menubar */
.menubg li:after {
content:"~";
display:inline-block;
padding:0 .75em;
}
.menubg li:last-child:after {
content:"";
padding:0;
}
/* END ALTERNATIVES */
.main {
/* outline:1px solid magenta; /* TEST OUTLINE */
border:2px solid #522a2a; /* border around main content area of page */
background-color:#3c1313; /* background-color of content area of page (overlays pattern) */
color:#faa31b; /* content text color */
margin-top:-2px; /* space between div.topcoat and top of window */
}
.heading {
padding:0 20px;
}
h1 {
/* outline:1px solid gray; /* TEST OUTLINE */
float:left;
font-weight:normal;
font-size:2.75em;
font-family:'Lusitana', serif;
margin:.4em 0 .2em;
}
.content {
/* outline:1px solid brown; /* TEST OUTLINE */
clear:both;
padding:0 20px;
margin:.4em 0;
/* overflow:hidden; /* more obvious|visible|flexible if applied as class="cf" in html ??? */
}
.enquire,
.social {
float:right;
border:2px solid #522a2a;
background-color:#522a2a;
color:#faa31b;
font-family:Lusitana;
text-transform:uppercase;
text-shadow:black 0.15em 0.15em 0.2em;
box-shadow:0 0 0 1px #3b1313 inset;
padding:4px 14px;
margin:4px;
}
.enquire {
font-size:1.2em;
}
.social {
font-size:1em;
line-height:150%;
margin:4px 0;
}
.social span {
white-space:nowrap;
}
.social img {
vertical-align:middle;
margin:-1px 0 1px 6px;
}
.social img + img {
margin-left:12px;
}
.footer {
/* outline:1px solid brown; /* TEST OUTLINE */
float:left;
padding-top:3px;
}
.footer p {
color:#dd4e00;
line-height:1.25em;
margin:3px 0 0;
}
/* modern ClearFix */
.cf:before,
.cf:after {
content:"";
display:table;
line-height:0;
}
.cf:after {
clear:both;
}
/* Contact Page */
.submit {
float:right;
border:0px;
border-radius:5px;
padding:5px 10px;
background-color:#ccc;
color:#000;
text-decoration:none;
}
.submit:hover {
background-color:#666;
color:#fff;
cursor:hand;
}
textarea {
font-size:12px;
font-family:Arial,Helvetica;
}
/* anchor treatments */
a {color:#faa31b;font-size:1em;}
a:link,
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
.menubg a:hover {text-decoration:none;border-bottom:1px solid #faa31b;}
.andrewcourtney a:link,
.andrewcourtney a:visited {color:#dd4e00;font-weight:bold;text-decoration:none;}
.andrewcourtney a:hover {color:#ff5533;text-decoration:underline;}
Reply With Quote
may want to take care of the nav wrapping too on ipad.
Originally Posted by dresden_phoenix
Bookmarks