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..
Related
The situation is: I'm learning on my own how to make websites. I already know some stuff and now I decided to create one website.
But I have some struggle... I'm trying to make it responsive, ant it kinda works, but footer overlaps content in body when you resize the page...
The idea is to scroll down for the tags when they start to overlap..
I've googled for similar issue and checked threads, tried a lot of things, but still got nowhere :|
Help?...
body{
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/
.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}
/*+++TAGS*/
.tags {
position: fixed;
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/
.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}
#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name"viewport" content="width=device-width, initial scale=1">
<meta charset="utf-8">
<link rel="shortcut icon" href="/images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="/arturnmk/style.css">
</head>
<body>
<div class="main">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>WutWut</li>
</ul>
</li>
<li>Menu</li>
</ul>
</nav>
<div class="homecontainer">
<div class="hometitle">
<span>
<h1>Firtname Lastname</h1>
</span>
<span>
<h2>Thing to say/state</h2>
</span>
</div>
</div>
</div>
</body>
<footer>
<div class="tags">
<div class="item">TagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTag</div>
<div class="item">Tag</div>
<div class="item">TagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTagTag</div>
<div class="item">TagTag</div>
<div class="item">TagTag</div>
<div class="item">PTagTagTag</div>
<div class="item">TagTagTagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">Tag16 Tag16 Tag16Tag16</div>
<div class="item">Tag15Tag15</div>
<div class="item">Tag14Tag14Tag14</div>
<div class="item">Tag13</div>
<div class="item">Tag12</div>
<div class="item">Tag11</div>
<div class="item">Tag10</div>
<div class="item">Tag9</div>
<div class="item">Tag8</div>
<div class="item">Tag7</div>
<div class="item">Tag6</div>
<div class="item">Tag5</div>
<div class="item">Tag4</div>
<div class="item">Tag3</div>
<div class="item">Tag2</div>
<div class="item">Tag1</div>
</div>
</footer>
</html>
To achieve responsive web design, use CSS3 media queries
Issue for overlap is due to min-height of homecontainer class and fixed position for tags class
Please check the below option using CSS3 media queries
https://codepen.io/nagasai/pen/vJbqeE
CSS:
html{
height:100%;
}
body{
height:100%;
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/
.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}
/*+++TAGS*/
.tags {
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/
.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}
#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;
}
#media only screen and (max-width: 550px) {
.homecontainer {
width: 100%;
height: 20%;
min-height: 100px;
}
footer{
position: absolute;
top: 400px;
width: 100%;
height: 20%;
}
}
1) You shouldn't have HTML code outside of the <body> tag for elements that are meant to be displayed on the page. Your footer should be contained inside the <body> tag. You can create a <div> to contain the elements which you now have in the body of the document.
2) To avoid the overlapping (considering that you want to keep your existing code structure and CSS) you can set a margin-bottom equal to the height of your footer to the container of your main content. This approach will work if your footer always has the same height.
3) If your footer needs to change in height, another simple solution (but with drawbacks) is to let the footer stick to the normal page flow, instead of absolutely positioning it to the bottom of the document, and to set a min-height to the container of your main content. The min-height should be set to ensure that your footer won't be positioned in the middle of the user's screen on pages that are short (that don't have a lot of content in them). The min-height on the main content's container will in this case create whitespace below the main content that will push the footer down.
I may be mistaken, but is the only issue you have the footer getting in the way?
If I want the footer to stay at the bottom of the screen, I usually do as follows:
#footer{
position: absolute;
top: 100%;
height: however high you want it to be;
transform: translateY(-100%) ;
}
That pushes the footer all the way off your screen on the bottom, but the transform: translate pulls it back up exactly the height of the footer.
hi i just wanted to code a site like BBC just for practice while doing this i got an error in li item of a ul i don't know the problem but when i give it a border-right the border take more height then the original menu, i'm pasting my code here please check it and help me??
in simple words i want list item's border to be equal to the borders of "Signin" and "logo" div
<html>
<head>
<title>BBC</title>
<style>
body{
margin:0;
font-family:Arial,Helvetica,freesans,sans-serif;
}
#top{
width:100%;
height:50px;
}
.keepcenter{
width:1100px;
margin: 0 auto;
}
#logo{
border-right:1px solid #CCCCCC;
float:left;
padding-right:5px;
height:100%;
}
#signin{
font-weight:bold;
font-size:0.9em;
border-right:1px solid #CCCCCC;
width:200px;
height:100%;
float:left;
}
#signin img{
position:relative;
top:5px;
margin-left:15px;
}
#signin p{
display:inline;
position:relative;
top:1px;
padding-left:5px;
}
#menutop{
float:left;
}
#menutop ul{
list-style-type:none;
margin:0;
padding:0;
}
#menutop li{
padding:15px 20px 10px 20px;
display:inline;
font-weight:bold;
font-size:0.9em;
float:left;
border-right:1px solid #CCCCCC;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="images/logo.jpg" />
</div>
<div id="signin">
<img src="images/signicon.png" /><p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Simply remove the top and bottom padding from the list items.
body {
margin: 0;
font-family: Arial, Helvetica, freesans, sans-serif;
}
#top {
width: 100%;
height: 50px;
}
.keepcenter {
width: 1100px;
margin: 0 auto;
}
#logo {
border-right: 1px solid #CCCCCC;
float: left;
padding-right: 5px;
height: 100%;
}
#signin {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #CCCCCC;
width: 200px;
height: 100%;
float: left;
}
#signin img {
position: relative;
top: 5px;
margin-left: 15px;
}
#signin p {
display: inline;
position: relative;
top: 1px;
padding-left: 5px;
}
#menutop {
float: left;
}
#menutop ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menutop li {
padding: 0 20px;
display: inline;
font-weight: bold;
font-size: 0.9em;
float: left;
border-right: 1px solid #CCCCCC;
height: 100%;
}
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="http://lorempixel.com/40/40" alt="BBC" />
</div>
<div id="signin">
<img src="http://lorempixel.com/g/10/10" alt="" />
<p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
The list is floating though, which means that its baseline is not necessarily the same as the #signin div. In my snippet, the img in the div is small enough to not have an effect, but depending on its size, the baseline of the div (and therefore the position of the p) will move down. You may have to compensate for that in the ul.
I'm trying to create a fixed header that sticks to the top on scroll. I have one wrapper (#topbarwrapper) that should fit 100% across the entire browser. I also have another div wrapper (.topbarcontentWRAPPER ) inside the(#topbarwrapper) which includes logo and navigation (#mainNav). One floats to the left and the other floats to the right. They both float as they should but it seems as if when the browser is resized, the divs move. I want the two divs floating inside to be centered with the entire page. The layout is responsive so the body width is 90%. I spent several days trying to figure this out including research. Any help would be appreciated.
Ideal goal is to have the header with 100% width fixed and centered.
Layout View:
http://s30.postimg.org/so036qarl/Screen_shot_2014_03_10_at_1_53_42_AM.jpg
HTML:
<body>
<div id="topbarWRAPPER">
<div class="topbarcontentWRAPPER">
<nav id="mainNav" role="navigation">
<h2 class="hidden">Main Site Navigation</h2>
<?php if ($this->countModules('nav')): ?>
<jdoc:include type="modules" name="nav" />
<?php endif; ?>
</nav>
</div>
</div>
<div id="mobilelogo"></div>
<div id="imageshow">
</div>
<div class="wrap">
<div class="miscellaneousRow">
</div>
<div class="search">
</div>
</div>
<section><h2 class="hidden">Recent News</h2>
<article id="recentNews">
<jdoc:include type="component" />
</article>
</section>
<aside>
<div class="sideBOX"> <section>
<h1 class="sideHeader">MAILING LIST</h1>
<div class="signup">
</section> </div>
<div class="sideBOX"> <section>
</section></div>
<div class="tabviewTABS"> <section>
</section>
</div> </aside>
<footer id="mainbottomFooter">
<div class="footerFLOATLEFT">
<h1 class="hidden">Footer</h1>
<div class="floatone">
</div>
</div>
</footer>
<div class="secondbottomFooter"> <div class="secondbottomfooterRight">
<nav id="sidenav">
<ul>
<li>
l
</li>
<li>
f
</li>
<li>
g
</li>
<li>
x
</li>
<li>
!
</li>
</ul>
</nav>
</div>
<div class="secondbottomfooterLeft"> content</a></div>
</div>
</html>
body {
width:90%;
margin:0 auto;
min-width:1024px;
max-width:1580px;
}
.latest-post clearfix{
display:hidden;}
.imageshow {
position:relative;
width: 100%;
}
.blog-readmore{
font-size: 24px;
display: inline;
width: 180px;
text-transform:uppercase;
margin-top:20px;
}
.blog-readmore a:link{
font-family: arial;
color: #690000;
}
.blog-readmore a:visited{
color: #690000;
}
.blog-readmore a:hover{
color: #eee;
}
#topbarWRAPPER{
position:fixed;
left: 0px;
right: 0px;
background-color:#000;
z-index:1000;
text-align:center;
}
.topbarcontentWRAPPER {
display:block;
height:50px;
background-color: #1E1E1E;
width: 90%;
margin: 0 auto;
}
#topbarLOGO
{
background-image:url("http://strip2.png");
background-repeat:no-repeat;
display:block;
float:left;
height:50px;
width:250px;
text-indent:-9999px;
}
aside{
background-color: #d6d6d6;
width: 29.1%;
padding-left:1%;
height: 100%;
float: right;
overflow: none;
color: #fff;
font-size:10px;
padding-bottom:1000em;
margin-bottom:-1000em
}
/* Blog content */
#recentNews {
width: 65.1%;
float: left;
padding-right:2%;
padding-left:2%;
padding-bottom:2%;
background-color:#fff;
padding-bottom:1000em;
margin-bottom:-1000em;
}
.wrap{ overflow:hidden;
background-color:#fff;
}
/* ~~ Bottom footer ~~ */
#mainbottomFooter{
background-color:#000;
position:relative;
height: 300px;
clear: both;
padding:15px 0;
min-width:100%;
}
.footerFLOATLEFT li{
list-style-type: none;
padding-bottom: 1em;
padding-top: 1em;
}
.footerFLOATLEFT a:link{
font-size:12px;
color: #555555;
text-transform:uppercase;}
.footerFLOATLEFT a:visited {
font-size:12px;
color: #555555;
text-transform:uppercase;}
.footerFLOATLEFT a:hover {
font-size:12px;
color: #690000;
text-transform:uppercase;}
/* ~~ P~~ */
p{
font-size: 17px;
color: #000;
line-height:140%;
font-family: 'HelveticaNeue';
padding-left: 1%;
padding-right:1%;
font-weight:bold;
}
h3 {
margin-bottom: 0px;
font-size: 2em;
color: #690000;
font-family: 'Lato', sans-serif;
font-weight:300;
text-transform:uppercase;
padding-bottom:1em;
padding-top:1em;
}
.floatone {
float:left;
padding-right: 4em;
padding-top: 4em;
height: 100%;}
.floattwo {
float:left;
height: 100%;
padding: 4em;}
.floatthree {
float:left;
height: 100%;
padding: 4em;}
.floatfour {
float:left;
height: 100%;
padding: 4em;}
.signup {
width:100%;}
.footerFLOATLEFT {
width:100%;
float:left;
}
.secondbottomFooter {
width: 100%;
height:40px;
background-color:#690000;
border-top:1px solid #222;
border-bottom:1px solid #222;
color: #fff;
font-size: 12px;
padding-top:2em;
padding-bottom:2em;
text-align:right;
}
h2 {font-face:arial;
font-size:12px;
color: #fff;
padding-top: 1em;
padding-bottom: 1em;}
#sidenav {
}
#sidenav li {
display:inline;
}
#sidenav a:link{
font-family: 'socialicoregular', Arial, sans-serif;
font-size:5em;
color: #eee;
text-decoration:none;
}
#sidenav a:visited{
color: #fff;
text-decoration:none;
}
#sidenav a:hover{
color: #690000;
text-decoration:none;
}
.miscellaneousRow {
background-color: #000;
width: 100%;
height:100px;
position:relative;
}
.twitterFeed {float:left;
padding-top: 10px;
padding-bottom: 10px;
width: 65.1%;
}
.search {
float: right;
padding:2%;
width: 26%;}
#mainNav {
float:right;
}
.sideDivider {
background-color:#222;
height:auto;
margin-bottom:10%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
}
.tabviewTABS {
background-color:#222;
height:auto;
margin-bottom:20%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
}
.sideBOX {
background-color:#222;
height:auto;
margin-bottom:10%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
text-align:center;
}
.soundcloud {
background-color:#222;
position:relative;
height:auto;
clear: both;
padding:15px 0;
min-width:100%;
}
.soundcloudtitle {
font-family: 'Droid Serif', serif;
color: #fff;
font-size: 2em;
text-align:right;
text-transform: uppercase;
margin-bottom: 1em;
border-bottom: 5px solid #690000;
}
.secondbottomfooterRight p{
padding-right:3em;
padding-bottom:1em;
}
.hidden
{
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
You're setting the left and right positions of your topbarWRAPPER to 0px instead of 5%.
See this fiddle.
EDIT:
I see what you mean. I've updated the fiddle. It should be what you need.
EDIT #2:
Alrighty. Forgive me, I didn't notice this earlier. You've assigned the body a width in percent but a min and max width in pixels. If you remove the min and max widths you'll see the behavior you're looking for, but what I think you should do is assign the 70% width to .wrap and give it a margin:0 auto;
So, for some reason, in Dreamweaver it looks fine
But on my site it is not floating them properly in any browser, I tried FireFox, Chrome, and IE8:
Link to my site if you care: http://addisonbwilson.com/Portfolio/SUBPAGES/Photography.php
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Addison Wilson: Photography</title>
<link rel="stylesheet" type="text/css" href="../CODE/pcss.css">
</head>
<body>
<?php include ("../INCLUDES/navbarsubpages.php"); ?>
<div id="imagewrapper">
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0001-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0002-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0003-preview-320w.jpg">
</div> <!--imagecontainer-->
</div><!--wrapper-->
<div id="imagewrapper">
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0004-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0005-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0006-preview-320w.jpg">
</div> <!--imagecontainer-->
</div><!--wrapper-->
<div id="imagewrapper">
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0007-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0008-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
</div> <!--imagecontainer-->
</div><!--wrapper-->
</body>
</html>
My CSS:
#charset "UTF-8";
/* CSS Document */
/*The body is responsiable for the background image, the rest of the site is divided between the sub wrapper and the includes */
/*bground tile is from http://subtlepatterns.com/white-brushed/ created by Andre Schouten, crediting him here as per the usage agreement */
body {margin-top: 0px; background-image:url(../Portfolio/IMAGES/brushed_#2X.png);}
/* navbar is a php include*/
#wrapper{width:980px; height:auto;}
#imagewrapper{width:auto; height:auto;}
#subwrapper{width: 980px; height: auto;}
#imagefull{width: auto; height: auto; background-color:#FFF; margin:3px 3px 3px 3px;}
#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}
#textcontainer{width: 320px; height: 320px; background-color:#FFF; margin:3px 3px 3px 3px; float:right;}
/* navbar and its many variations are for the navbar include*/
#navbarwrapper{positon: absolute; width:980px; height: 120px; z-index:30; background-color:#FFF;}
#navbar{width:980px; height:120px; background-repeat:repeat-x; z-index:31;}
#navbarlogo{width:210px; height:120px; float:left; z-index:32;}
#navbarcontent{width:770px; height:120px; padding-top:75px; float:left; font-family:Verdana, Geneva, sans-serif; background-repeat:repeat-x; z-index:32;}
/*Unordered lists which are used to handle drop down nav bar*/
#nav{
list-style:none;
font-family:Helvetica, Arial, sans-serif;
margin-bottom:10px;
float: right;
width:100%;
position:relative;
}
#nav li{float:left; margin-right:10px; width: 120px; position:relative;}
#nav a{display:block; padding:5px; color:#000; text-decoration:none;}
#nav a:hover{color:#fff; background:#000; text-decoration:none;}
/* drop down */
#nav ul{
background:#fff;
background:rbga(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px ;}
#nav ul li{ padding-top:1px; float:none; list-style:none;}
#nav ul a{white-space:nowrap;}
#nav li:hover ul{left:0;}
#nav li:hover a{background:#ccc; text-decoration:underline;}
#nav li:hover ul a{text-decoration:none;}
#nav li:hover ul li a:hover{background:#000;}
/* general tag overides*/
h1{font-size:large}
h2{font-size:larger}
h3{font-size:medium}
img {border:none}
ul{ padding: 0; margin: 0;}
li{padding: 0;}
/*link modification*/
a:link{ text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:visited{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:active{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:hover{text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif}
You just need to add float: left; to the #imagecontainer styles. It's not there in the online version.
Change this:
#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}
to:
.imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}
and replace every <div id="imagecontainer" with <div class="imagecontainer"
For each image float:left;
This floats each container that contain each image. Use this for what you have right now.
#imagecontainer
{
float:left;
}
You can also do the same with inline styles. But CSS is cleaner.
Also, do not use multiple elements with the same ID. Use classes. Also, is there a reason you are using containers for each image? You could have one container with many images and use
.container img
{
float:left;
}
Also, keep in mind that img {float:left;} will float ALL images on your page.
Try
#imagecontainer{
display:inline;
margin: 0px
}
#imagecontainer {
background-color: #FFFFFF;
float: left;
margin: 3px 1%;
width: 31%;
}
and this
img {
border: medium none;
height: auto;
width: 100%;
}
check it, perfect as you wanted. Responsive too ;)
I'm sure I've just made a silly error with this, but I can't seem to make it work it out.
My list items in my nav are not starting at the edge of my div, it's almost like there is a margin on the left.
HTML
<div class="container">
<div id="topline"> blah blah </div>
<div class="leftbox">
<img src="images/totalbulllogo.svg" alt="Total Bull Clothing Company Logo" />
</div>
<div id="banner">
<img src="images/totalbullbanner2.jpg" alt="Total Bull Clothing Company Logo" />
</div>
<div id="navmenu">
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>STORE</li>
<li>SALE ITEMS</li>
<li>CONTACT</li>
</ul>
</div>
<div id="mainContent"> FEATURED ITEMS</div>
</div>
CSS
html, body {
margin:0;
padding:0;
font-family: Calibri, Arial, sans-serif;
}
#font-face {
font-family:'Neon 80s';
src:url('../fonts/neon.ttf'),
url('../fonts/neon.eot');
}
.container {
clear: both;
margin: 0 auto;
padding: 0;
width: 58%;
background-color: #FFFFFF;}
#topline { float:left;
text-align:right;
padding: 0;
width: 100%;
height: 5%;
background-color: #FFF;
margin-top:2%;
margin-bottom:2%;}
.leftbox {
float:left;
padding: 0;
width: 30%;
background-color: #5D2F92;}
.leftbox img {width: 96%;
margin-left: 3%
margin-right:1%;}
#banner img {width: 100%;}
#banner {float:left;
width:68%;
margin-left:2%;}
#navmenu {
float:left;
padding: 0;
width: 30%;
background-color: #5D2F92;
height: 100%;
margin-top:0.5%;
font-family:'Neon 80s';
font-size:18pt;
text-align:left;
}
#navmenu li {
list-style:none;
margin: 0;
}
#navmenu li a {text-decoration:none;
color:#FFFFFF;
margin: 0;
display:block;
padding:20px 0px;}
#navmenu li.active a {background-color:#C49A6C;}
#mainContent {float:left;
width:68%;
background-color:red;
text-align:center;
margin-top:0.5%;
margin-left:2%;}
You forgot to reset the browser ul default CSS values.
By default, depending on the browser, there are some attribute values assigned to some elements, in case of the ul has some margin and padding. So in order to fix this, you should reset these values as follows:
http://jsfiddle.net/gespinha/dW9wB/1/
#navmenu ul{
margin:0;
padding:0;
}