I am sure this is a common frustration - but I am trying to just do a two column liquid with a footer in rails.
The problem that I am having is that I can get the footer to stick on the bottom, or to the columns. I am using this for my basis for the columns, I just need them to stretch to the bottom of the page, filling with color!!
The layout for the frame:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Shows: <%= controller.action_name %> </title>
<%= stylesheet_link_tag 'frame', 'show' %>
</head>
<body>
<div id="header">
</div>
<div class="colmask ">
<div class="colleft">
<div class="main"> <!-- The Main window -->
<% if flash[:notice] -%>
<div id="flash"><%= flash[:notice] %> </div>
<% end -%>
<%= yield %>
</div>
<div class="side"> <!-- The Sidebar -->
<%= link_to "Home", :controller => :shows, :action => :index %><br/>
<br/>
Shows<br/>
<% Show.all.each do |sh| %>
<div class="side_title">
<%= link_to sh.title, show_url(sh) %><br/>
</div>
<% end %>
</div>
<div id="push"></div>
</div>
</div>
<div id="footer"> <!-- Put a footer in this panel -->
This is where some more information can go...
</div>
</body>
</html>
The CSS - probably full of problems...help!?:
/*
Template for layout from
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
Thanks!
*/
html {
height: 100%;
}
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
height: 100%;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colleft {
float:left;
width:100%;
position:relative;
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -60px;
}
.main,
.side {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 2 Column (left menu) settings */
.colmask {
background:orange; /* right column background colour */
}
.colmask .colleft {
right:75%; /* right column width */
background:green; /* left column background colour */
}
.colmask .main {
width:71%; /* right column content width */
left:102%; /* 100% plus left column left padding */
}
.colmask .side {
width:21%; /* left column content width (column width minus left and right padding) */
left:6%; /* (right column left and right padding) plus (left column left padding) */
}
#push, #footer {
height: 60px;
clear: both;
}
/* Footer styles */
#footer {
position:relative;
bottom:0;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
Easiest solution would be, to just add a background image to your wrapper
#left_col, #right_col {
display: inline;
float: left;
margin: 0 10px;
width: 400px;
}
<div id="wrapper">
<div id="left_col">
<!--left_col content-->
</div><!--/left_col-->
<div id="right_col">
<!--right_col content-->
</div><!--/right_col-->
<div style="clear: both"/>
</div><!--/wrapper->
If your code looks like this, just add a y-axis repeating background image to the wrapper.
As far as I know, that is the solution that will produce the least amount of problems.
Related
I've created five different sections of images, displayed just as you can see in jsfiddle, the problem is that I can't control the margin of these imagesections. The thing is that I'm trying to add some space between section 1, 2, 3, 4 and 5, but whenever I add the margin the section just refuse to move.
I've tried to reset the float with the codes:
clear:both;
and
float: none;
but without success. The result of those codes is just that the section jumps to a new line.
The fiddle: https://jsfiddle.net/p0eaxkpz/
I found your problem, there is an error in your code: margin-left:0,5%; should be margin-left:0.5%;
Here is your updated jsfiddle
I have simply added margin: 0; padding: 0; to all elements, you can see it's working well. Basically, there is no need for you to wrap the images with <section> tags.
I also got a more modular aproach
#charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body
{
background-color:black;
width:100%;
height:100%;
padding-bottom:20%;
}
#wrapper
{
width:80%;
height:1000px;
background-color:white;
margin:auto;
}
#headerloga
{
float:left;
width:20%;
height:20%;
font-family: "Gotham Medium";
font-weight:800;
font-size:40px;
padding-top:10%;
padding-left:10%;
}
#menu
{
float:left;
width:60%;
height:auto;
font-family:"Gotham Medium";
font-size:15px;
padding-top:17.5%;
padding-left:10%;
}
ul {
float: left;
width: auto;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: auto;
text-decoration: none;
color: black;
padding: 0.2em 0.6em;
}
a:hover {
color:#ED1C91;
}
li {
display: inline;
}
#imageshosting {
background-color:#CCC;
width:60%;
height:80%;
position:absolute;
clear:both;
top:40%;
left:18%;
}
.img-hosted {
display:block;
position:relative;
float:left;
height:49%;
margin:0.5%
}
.w33 {
width:32.33%;
}
.w66 {
width:65.66%;
}
.img-nextline {
clear: both;
}
#foot {
background-color:#666;
clear:both;
position:absolute;
top:120%;
left:18%;
width:60%;
height:10%;
}
<div id="wrapper"><!-- Webpage wrapper-->
<div id="headerloga">
Test
Test2
<section style="color:#ED178C; ">Test3 </section>
</div>
<div id="menu"><!--Menu-->
<ul>
<li>KUNDER</li>
<li>GAMLA FAVORITER</li>
<li>OM OSS</li>
<li>KONST</li>
<li>KONTAKT</li>
</ul>
</div><!-- End of menu-->
<!-- images starts-->
<div id="imageshosting">
<img class="img-hosted w33" src="images/testimage1.jpg"/>
<img class="img-hosted w33" src="images/testimage2.jpg"/>
<img class="img-hosted w33" src="images/testimage3.jpg"/>
<!-- New image line -->
<img class="img-hosted w66 img-nextline" src="images/testimage4.jpg"/>
<img class="img-hosted w33" src="images/testimage5.jpg"/>
</div><!--Imageshosting ends-->
<!--Footer here-->
<div id="foot">
<p>Hello</p>
</div>
</div><!-- End of webpage wrapper-->
As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..
I have a two column layout (data on left and nav on right). Renders correctly on Safari desktop but Safari for iPhone the right column is rendered at the bottom of the page underneath the data.
The basic code template is:
<body>
<div class="colmask rightmenu">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<div class="ui-body ui-body-e">
<div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="b">
some data here
</div>
</div>
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start -->
<div class="ui-body ui-body-b">
nav stuff here
</div>
<!-- Column 2 end -->
</div>
</div>
</div>
</body>
Problem is the same whatever the viewport width is set at (currently 100&%)
Here is the CSS:
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
font-size:90%;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
#ads img {
display:block;
padding-top:10px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 2 Column (right menu) settings */
.rightmenu {
background:#eee; /* right column background colour */
}
.rightmenu .colleft {
right:25%; /* right column width */
background:#fff; /* left column background colour */
}
.rightmenu .col1 {
width:71%;
left:27%; /* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
width:21%;
left:31%;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
The reason you may be having an issue with this is because the iPhone and iTouch compared to the computer has a different resolution setting than a generic computer.
http://en.wikipedia.org/wiki/IPod_Touch
http://en.wikipedia.org/wiki/IPhone
If you don't set up your template to recognize specifics such as mobile computers, or monitor resolutions, you will never get your CSS to render correctly for the screen you are viewing at the time.
Even though you have it set at 100%, you have different settings in your CSS that an iphone, or iTouch may not recognize as well, so you may want to look into that.
I've been working on creating something that is both computer and iPhone/iTouch friendly, and it is not easy. You'll spend 10 minutes writing the script, 30 min to two days perfecting it.
You may want to look into this:
Detect iPhone/iPad purely by css
I wonder if someone can help me. This is my first site, and although I have tried to solve as many problems for myself as I can, I have reached a point where I am staring at the screen dribbling at the mouth hitting the refresh key hoping by magic it will resolve itself.
The problem is that although the site seems to work fine in FF, Chrome and IE9+, in versions of IE8 and below, the horizontal navigation bar is invisible. There is a gap where it should be, and the links do work, but the sprite images are not visible.
This site is not yet online so unfortunately I cant give you a link to it, only code.
I do apologise if there is a glaringly obvious and simple answer that Ive been too stupid to spot.
Thankyou for your time.
Jon
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Alan J. Warde Chartered Surveyor</title>
</head>
<body id="home">
<div id="wrap"><!--wrap starts-->
<img src="images/header.jpg" alt="header" />
<ul id="nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
<div id="main_content"><!--start of main_content-->
<div id="sidebar"><!--start of sidebar-->
<div class="listbox"><!--start of listbox-->
<div class="inner_sidebar">
<ul>
<li>Building Surveys</li>
<li>Valuations</li>
<li>Structural Engineering</li>
<li>Quantity Surveying</li>
<li>Loss Adjusting</li>
</ul>
</div><!--end of inner_sidebar-->
</div><!--end of listbox-->
</div><!--end of sidebar-->
<div id="homecontent"><!--start of Homecontent-->
<div id="inner_content"><!--start of inner_content-->
<h1>A J Warde Chartered Surveyor</h1>
<p>CONTENT</p>
<div id="contact"><!--start of contact-->
<p><img src="images/phone1.png" alt="phone" style="float:left;" />CONTENT</p>
</div><!--end of contact-->
</div><!--end of inner_content-->
</div><!--end of Homecontent-->
</div><!--end of main_content-->
<div id="footer">
<div id="footer_inside">
Registered Company 055012
<ul id="footer_nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
</div><!--end of Footer-inside-->
</div><!--end of footer-->
</div><!--wrap ends-->
</body>
</html>
#charset "utf-8";
/* CSS Document */
/*RESETS AND BASIC SETUP*/
* {margin:0; padding:0;}
html {overflow-y:scroll; overflow: -moz-scrollbars-vertical; }
body {
font: 62.5% "Times New Roman", Times, serif;
background-color: #322e2e;
}
/*TYPOGRAPHY*/
h1 {
padding:10px 0 20px 0;
text-align:center;
font-size:2.4em;
color:#003399;
text-shadow:1px 1px #69F;
}
h2 {
padding:5px 0 5px 0;
text-align:center;
font-size:1.1em;
color:#003399;
text-shadow:1px 1px #69F;
}
/*BASIC ELEMENT STYLING*/
ul {list-style:none inside;}
p {font-size:1.8em; line-height:1.2em; margin-bottom:1.2em; font-weight:bold; color:#333;}
a {outline:none;}
a {text-decoration:none;}
a img {border:none;}
/*END RESET*/
/*STRUCTURE AND THINGS*/
#wrap {
width:995px; /*for IE*/
margin:auto;
background:url(images/content.jpg)repeat-y;
}
html>body #wrap { /*IE hack*/
width:975px;
}
#main_content {
padding:0;
}
#homecontent {
background:url(images/contentimg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#servicescontent {
background:url(images/servicesnewbg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#inner_content {
padding:20px;
position:relative;
}
#contact { /*this is just to centre-align the contact details on home page*/
position:absolute;
left:150px;
width: 330px;
text-align:center;
}
#contact p {
color:#0000FF;
}
#left_col {
border:1px solid red;
float:left;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
margin-top:20px;
position:relative;
}
#contactdetails {
position:absolute;
left:50px;
}
#sidebar {
float:left;
background:url(images/sidebar.jpg) no-repeat;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
}
.inner_sidebar {
padding:20px 0 80px 0px;
font-size:1.4em;
}
.listbox {
width:230px;
margin-left:10px;
}
.inner_sidebar ul li {
font-size:1.4em;
padding:5px;
margin:5px 0 45px 5px;
font-weight:bold;
color:#FFF;
border:1px solid #FFF;
border-radius:3px;
background-color:rgba(0, 0, 25, 0.5);
}
/*TOP OF PAGE NAVIGATION*/
ul#nav {
}
ul#nav li {
display:inline;
}
ul#nav li a {
display:block;
height:54px;
text-indent:-9999px;
float:left;
}
ul#nav li.home a {
width:404px;
background:url(images/homenav.jpg)top center no-repeat;
}
ul#nav li.about a {
width:160px;
background:url(images/aboutnav.jpg)top center no-repeat;
}
ul#nav li.services a {
width:160px;
background:url(images/servicesnav.jpg)top center no-repeat;
}
ul#nav li.contact a {
width:251px;
background:url(images/contactnav.jpg)top center no-repeat;
}
ul#nav li a:hover {
background-position: center center;
}
body#home li.home a, body#about li.about a, body#services li.services a, body#contact li.contact a {
background-position: bottom center;
}
/*FOOTER*/
#footer {
height:96px;
background:url(images/footer.jpg) no-repeat;
clear:both;
}
#footer_inside {
text-align:center;
width:500px;
margin:auto;
padding:10px 0 0 0;
color:#CCCCCC;
font-size:1.4em;
}
ul#footer_nav li {
display:inline;
padding:0px;
margin:0px;
}
ul#footer_nav li a {
color:white;
text-decoration:none;
padding:0 10px;
border-right:1px solid white;
line-height:25px;
}
ul#footer_nav li:last-child a { /*last child selector to remove last border seperator*/
border:none;
}
Looks like you need to put spaces between the url() and top on each background property.
Lower version IEs have 'hasLayout' attribute that is only in IE.
You could find out about it.
ul#nav {
/* set width and height */
}
I think this might works.
I can't get my menu and logo centered. Here is the page URL: http://weebuild1.yolasite.com/
As you can see, the logo and menu aren't centered. They are all the way to the right. I tried putting margins and stuff and it will not center.
Menu / Logo CSS:
#header2 h1 { /*Logo*/
display:block;
float:left;
width:320px;
height:125px;
background:url('resources/images/logo.jpg') no-repeat 0 0;
text-indent:-10000px;
}
/*#header2 h1 a:hover {
background:url('resources/images/logo.jpg') no-repeat 0 -125px;
}*/
#header2 h1 span.bg_fade { /*Logo hover*/
position: absolute;
top: 0;
left: 0;
height: 125px;
width: 320px;
background:url('resources/images/logo.jpg') no-repeat 0 -125px;
}
#header2 ul { /*Menu*/
display:block;
float:right;
width:640px;
height:125px;
background:url('resources/images/menu.jpg') no-repeat 0 0;
list-style:none;
}
#header2 ul li { /*Menu part*/
display:block;
float:left;
height:125px;
text-indent:-10000px;
}
#logo-nav {
margin-right:10px;
}
#home {
width:160px;
}
#about {
width:137px;
}
#work {
width:129px;
}
#contact {
width:210px;
}
#header2 ul li a {
display:block;
width:100%;
height:100%;
outline: 0 !important;
-moz-outline-style: 0 !important;
-webkit-outline: 0 !important;
-webkit-outline-style: 0 !important;
}
#home a:hover {
background:url('resources/images/menu.jpg') no-repeat 0 -125px;
}
#about a:hover {
background:url('resources/images/menu.jpg') no-repeat -160px -125px;
}
#work a:hover {
background:url('resources/images/menu.jpg') no-repeat -297px -125px;
}
#contact a:hover {
background:url('resources/images/menu.jpg') no-repeat -426px -125px;
}
Menu / Logo HTML:
<div id="header2" style="height:465px;">
<div id="logo-nav" style="float:left;margin:0;">
<h1>WeeBuild Web Design</h1>
<ul id="nav">
<li id="home">Home</li>
<li id="about">About</li>
<li id="work">Work</li>
<li id="contact">Contact</li>
</ul>
</div>
Any ideas on how to get it to center?
It's not actually the header that is scewed... Theres a few elements that mess up the layout
First in the html theres a style tag on the div with the id #logo-nav.
Looks like this:
style="float:left;margin:0;"
Should be this:
style="margin:0 auto;"
That will perfectly center the logo and menu. The menu pushes against the far right side of the container on that page and the logo to the left.
Then in the CSS for the footer theres this class
#footer {
clear:both;
width:955px;
border-top:1px dashed #094e64;
}
Should be
#footer {
clear:both;
border-top:1px dashed #094e64;
}
It now correctly takes up 100% of its parent container.
Then back to the html, wrap #boxContainer, #leftCol and #newsletter in a div.
Give that div a fixed width, matching exactly the horizontal space of the wrapped elements.
Put margin: 0 auto; as a style on that div.
Everything should be centered now.
As a tip: the reason it got scewed because you use too much markup for some stuff on the page (you have like a bazillion wrappers/containers) and too little for other layout stuff (the actual content div doesn't contain any other grouping divs, you put spacing inbetween elements using brs)