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;
Related
body{
background: #d4d4d4;
width:100%;
font-family: Helvetica, Arial, sans-serif;
margin:0px;
padding:0px;
}
.container{
background:#ffffff;
margin: 0px auto;
width: 50%;
}
.header-1{
background-color:#000000;
padding:0px 20px 0px 20px;
height:40px;
}
.header-1 p{
float:right;
font-size: 12px;
color:white;
}
span{
font-size:11px;
position:relative;
right:-145px;
color:white;
}
.logo{
float: left;
width:149px;
height:26px;
padding-top:10px;
}
.delivery{
float:right;
color: black;
}
.loop{
clear:both;
text-align: center;
}
.brand{
list-style-type: none;
}
.brand li{
display:inline-block;
background: #000000;
color:white;
margin-left:-40px;
margin-right:30px;
font-weight:bold;
width:86px;
height:28px;
vertical-align: middle;
}
.header-banner{
width:600px;
height:40px;
}
.header-banner img{
width:570px;
}
.official h1{
margin-left: 30px;
}
.official p{
margin-left:30px;
font-size: 13px;
}
.order-info{
list-style-type:none;
}
.order-info li{
display:inline-block;
margin-right:30px;
}
.product-image{
float:left;
}
.product-image img{
margin-left:30px;
}
.product-container{
float:right;
}
.price-list{
list-style-type: none;
}
.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
}
.price-table{
float:right;
}
.price-total{
column-count: 2;
list-style-type: none;
column-gap:2px;
}
.line-4{
width:100%;
size:20;
color:black;
}
<div class="">
<ul class="order-info">
<li><h3>Order Info</h3><hr><p>Order#: 445501<br>
Order Date: 26 de junio de<br> 2017</p></li>
<li><h3>Bill To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
<li><h3>Ship To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
</ul>
</div>
<hr size="3" color="black">
<div>
<div class="product-image">
<img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/679420297255_shad_qt?wid=150&hei=65&fmt=jpeg&qlt=65&op_usm=2.0,0.2,0,0&op_sharpen=0">
</div>
<div class="price-container">
<ul class="price-list">
<li><h4>Model</h4><hr><p>Model:<br>
SKU: 679420297255<br></p></li>
<li><h4>Quantity</h4><hr><p>1</p></li>
<li><h4>Quantity</h4><hr><p>191.60</p></li>
<li>Status:Cancelled</li>
</ul>
<hr>
</div>
<div class="price-table">
<ul class="price-total">
<li>Sub-total (includes VAT)</li>
<li>Packaging & Postage</li>
<li>Order Total</li>
<li>�191.60</li>
<li>�0.00</li>
<li>�191.60</li>
</ul>
</div>
</div>
<hr class="line-4">
I'm new to html and css. I have been trying to make an email template using html and css but it's not in the right away.The <hr> alignments are not proper.I have attached a screen shot as to how the look should be.
Should I have to use relative and absolute positioning or normal floats/ul and li. It would be helpful if someone gives me an insight on it. Thank You.
I have fixed the <hr> alignment. I have also made few more changes.
.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
vertical-align: text-top; //This is used to align all li from top
}
Here is the plunker: https://plnkr.co/edit/04dN4PDB3LjLHBjAOGbZ?p=preview
/* Styles go here */
body{
width:100%;
font-family: Helvetica, Arial, sans-serif;
margin:0px;
padding:0px;
}
.container{
background:#ffffff;
margin: 0px auto;
width: 50%;
}
.header-1{
background-color:#000000;
padding:0px 20px 0px 20px;
height:40px;
}
.header-1 p{
float:right;
font-size: 12px;
color:white;
}
span{
font-size:11px;
position:relative;
right:-145px;
color:white;
}
.logo{
float: left;
width:149px;
height:26px;
padding-top:10px;
}
.delivery{
float:right;
color: black;
}
.loop{
clear:both;
text-align: center;
}
.brand{
list-style-type: none;
}
.brand li{
display:inline-block;
background: #000000;
color:white;
margin-left:-40px;
margin-right:30px;
font-weight:bold;
width:86px;
height:28px;
vertical-align: middle;
}
.header-banner{
width:600px;
height:40px;
}
.header-banner img{
width:570px;
}
.official h1{
margin-left: 30px;
}
.official p{
margin-left:30px;
font-size: 13px;
}
.order-info{
list-style-type:none;
}
.order-info li{
display:inline-block;
margin-right:30px;
}
.product-image, .price-container{
float:left;
}
.price-container {
width: calc(100% - 200px);
}
.product-image {
width: 180px;
}
.product-image img{
margin-left:30px;
}
.product-container{
float:right;
}
.price-list{
list-style-type: none;
padding: 0;
margin: 0;
}
.price-list h4 {
margin-top: 0;
}
.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
vertical-align: text-top;
}
.price-table{
float:right;
}
.price-total{
column-count: 2;
list-style-type: none;
column-gap:2px;
}
.line-4{
width:100%;
size:20;
color:black;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="">
<ul class="order-info">
<li><h3>Order Info</h3><hr><p>Order#: 445501<br>
Order Date: 26 de junio de<br> 2017</p></li>
<li><h3>Bill To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
<li><h3>Ship To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
</ul>
</div>
<hr size="3" color="black">
<div>
<div class="product-image">
<img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/679420297255_shad_qt?wid=150&hei=65&fmt=jpeg&qlt=65&op_usm=2.0,0.2,0,0&op_sharpen=0">
</div>
<div class="price-container">
<ul class="price-list">
<li><h4>Model</h4><hr><p>Model:<br>
SKU: 679420297255<br></p></li>
<li><h4>Quantity</h4><hr><p>1</p></li>
<li><h4>Quantity</h4><hr><p>191.60</p></li>
<br>
<li>Status:Cancelled</li>
</ul>
<hr>
</div>
<div class="price-table">
<ul class="price-total">
<li>Sub-total (includes VAT)</li>
<li>Packaging & Postage</li>
<li style='border-top:1px solid black;margin-top:20px;padding-top:18px'>Order Total</li>
<li>�191.60</li>
<li >�0.00</li>
<li style='border-top:1px solid black;margin-top:18px;padding-top: 18px'>�191.60</li>
</ul>
</div>
</div>
<hr class="line-4">
</body>
</html>
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 want a vertical menu to the left side of my site, but the text is getting pushed down and is not to the side of the menu. Please ignore text in the paragraphs and headers. I am sorry for the poor organization or any small mistakes I have made, This is my first language and I am still learning.
<style>
body
{
background-color:#333;
color:#999
font: 12px/1.4em Arial,sans-serif;
}
#wrap
{
margin-left: 10px auto;
background: black;
padding:10px;
width: 100px;
}
#header
{
background-color:black;
color: #fff;
}
#logo
{
float: center;
font-size: 30px;
line-height:400px;
padding: 500px
}
#navWrap
{
height:15pxpx;
}
#nav ul
{
margin: 1px;
padding:1px;
}
#nav li
{
float:center;
padding: 5px;
background-color: black;
margin: 0 5px;
color: white;
list-style-type: none
}
#nav li a
{
color:white;
text-decoration: none;
font-size: 15px;
}
#nav li a:hover
{
text-decoration: underline;
}
br.clearLeft
{
clear: left;
}
h1
{
color:cyan;
text-align:center;
border-bottom: double 5px;
}
h2
{
color:red;
}
h3
{
color:cyan;
}
p.2
{
color:black;
font-size:22px;
text-align:left;
}
p
{
color:#DBDBDB;
font-size:22px;
text-align:left
right: 500px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo"></div>
<div id="navWrap">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>link1</li>
</ul>
<br class="clearLeft"/>
</div>
</div>
</div>
</div>
<p>lalalallalalalalalallalalala</p>
You just need to float your #wrap div to the left using the following CSS and that'll solve the issue:
#wrap {
float: left;
}
Here's a demo:
body {
background-color:#333;
color:#999 font: 12px/1.4em Arial, sans-serif;
}
#wrap {
margin-left: 10px auto;
background: black;
padding:10px;
width: 100px;
}
#header {
background-color:black;
color: #fff;
}
#logo {
float: center;
font-size: 30px;
line-height:400px;
padding: 500px
}
#navWrap {
height:15pxpx;
}
#nav ul {
margin: 1px;
padding:1px;
}
#nav li {
float:center;
padding: 5px;
background-color: black;
margin: 0 5px;
color: white;
list-style-type: none
}
#nav li a {
color:white;
text-decoration: none;
font-size: 15px;
}
#nav li a:hover {
text-decoration: underline;
}
br.clearLeft {
clear: left;
}
h1 {
color:cyan;
text-align:center;
border-bottom: double 5px;
}
h2 {
color:red;
}
h3 {
color:cyan;
}
p.2 {
color:black;
font-size:22px;
text-align:left;
}
p {
color:#DBDBDB;
font-size:22px;
text-align:left right: 500px;
}
#wrap {
float: left;
}
<div id="wrap">
<div id="header">
<div id="logo"></div>
<div id="navWrap">
<div id="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>link1
</li>
</ul>
<br class="clearLeft" />
</div>
</div>
</div>
</div>
<p>lalalallalalalalalallalalala</p>
The padding on your logo is pushing the text down, and your line-height is huge. I would suggest adjusting those two values.
#logo {
float: center;
font-size: 30px;
line-height:400px; // pushing it down
padding: 500px; // pushing it down
}
Also, you're setting the height on #navWrap, which is also causing your navigation to look weird. Finally, floating your #wrap element puts your content in the right place.
Here is a fiddle that resolves your situation:
http://jsfiddle.net/cywb70ds/2/
I adjusted the padding and line-height on the #logo element.
THis is my first time commenting on this website. I've found this site to be helpful in the past but now I can't seem to find a solution to my problem to I would like for someone to answer me directly.
I have webpage using where I have a fixed header and footer and absolute positioned panel where the content goes. My problem is, when I resize the browser the header content stays in the fixed position> Now that is obvious, none the less I would like to have it move with the scroll of the rest of the page. When I set the header to relative, it does work to my liking, but then the header nav links go under my lowerband and z-indexing wouldn't help. The same goes for the footer.
Also for the content panel, when I set the body overflow to auto or show, the content panel when I scroll, leaves a whitespace to the right.
Can anyone help me with this problem? It is very frustrating.
And one more thing, can anyone help me with code to use for css for my ux-header-upperbandcontent and lowebandcontent?. I would like to place the logo and other text in the upperband and the nav links in the lowerband but using a content wrapper.
Thanks. Here is my code for css and html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="content/style.css">
</head>
<body>
<!--BACKGROUND-->
<!--HOME-->
<div id="home">
</div>
<!--ABOUT-->
<div id="about" class="panel">
<div class="content">
<p>about content</p>
</div>
</div>
<!--SERVICES-->
<div id="services" class="panel">
<div class="content">
<p>services content</p>
</div>
</div>
<!--CONTACT-->
<div id="contact" class="panel">
<div class="content">
<p>contact content</p>
</div>
</div>
<!--HEADER-->
<div id="ux-header">
<div id="ux-header" class="upperband">
</div>
<div id="ux-header" class="lowerband">
</div>
<div id="ux-header">
<ul id="ux-header" class="dev-navigation">
<li><a id="dev-home" href="#home">HOME</a></li>
<li><a id="dev-services" href="#services">SERVICES</a></li>
<li><a id="dev-about" href="#about">ABOUT</a></li>
<li><a id="dev-contact" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<!--FOOTER-->
<div id="ux-footer">
</div>
</body>
</html>
body {
min-width:980px;
margin: 0px;
color: rgb(51, 51, 51);
line-height: 30px;
font-family: "Segoe UI","Helvetica",Garuda,Arial,sans-serif;
font-size: 0.81em;
cursor: default;
overflow:hidden;
}
a {
color: rgb(0, 68, 204);
text-decoration: none;
cursor: pointer;
}
img {
border:currentColor;
border-image: none;
max-width: 100%;
}
ul {
margin: 0px;
padding: 0px;
}
ol {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
}
ul {
margin-bottom: 0px;
}
ul li {
margin-bottom: 0px;
margin-left: 15px;
}
ol li {
margin-bottom: 2px;
margin-left: 18px;
}
p {
margin-bottom: 10px;
}
h1 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h2 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h3 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h1 {
line-height: 42px;
font-size: 2.77em;
margin-bottom: 20px;
}
h1.error {
margin-top: 50px;
}
h2 {
line-height: 34px;
font-size: 2.16em;
margin-bottom: 20px;
}
h3 {
line-height: 24px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.39em;
margin-bottom: 20px;
}
h4 {
margin: 0px 0px 10px;
color: rgb(51, 51, 51);
line-height: 20px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.08em;
}
#ux-header.dev-navigation {
margin-top:60px;
width:300px;
z-index:3;
left:70%;
white-space:nowrap;
}
#ux-header .dev-navigation li{
padding-right:10px;
margin:10px;
}
#ux-header ul.dev-navigation li{
display:inline;
}
#ux-header.dev-navigation li a {
text-transform:uppercase;
font-size:12px;
padding-bottom:0px;
margin-bottom:0px;
}
#ux-header.dev-navigation li a:hover {
padding-bottom:3px;
border-bottom-style:solid;
border-bottom-color:#4169E1;
border-bottom-width:10px;
}
#ux-header {
position:fixed;
top:0px;
z-index:2000;
width:100%;
overflow:hidden;
}
#ux-header a {
color:#FFF;
}
#ux-header ul {
margin:0px;
}
#ux-header li {
margin:0px;
}
#ux-header .upperband{
height:60px;
background-color:#000;
}
#ux-header.upperbandcontent {
margin:0px, auto;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-header .lowerband {
top:60px;
height:30px;
background-color:#F42;
}
#ux-header.lowerbandcontent {
position:absolute;
margin:0px, 0px, 5px, 0px;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-footer {
position:fixed;
bottom:0px;
width:100%;
height:50px;
background-color:#000;
border-top-style:solid;
border-top-width:8px;
border-top-color:#0000FF;
z-index:2000;
}
.content {
font-size:12px;
padding:3px;
line-height:10px;
color:#fff;
display:inline-block;
margin:3px 0px;
z-index:-1;
}
.content h2{
font-size: 30px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
font-size: 12px;
padding: 3px;
line-height: 16px;
color: #fff;
display: inline-block;
margin: 3px 0px;
}
.panel {
position:absolute;
min-width:100%;
min-height:80%;
margin-top:90px;
right:2000px;
background-color:#FF00FF;
z-index:-2;
transition:right 2s;
overflow:hidden;
}
.panel:target {
background-color:#F6A600;
right:0;
}
#home:target ~ #ux-header .dev-navigation #dev-home,
#about:target ~ #ux-header .dev-navigation #dev-about,
#services:target ~ #ux-header .dev-navigation #dev-services,
#contact:target ~ #ux-header .dev-navigation #dev-contact,{
color:#000;
}
Is that what you are looking for?
http://jsfiddle.net/cancerian73/huawb/
#media screen and (max-width: 400px) {
/* grid4 */
.col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}
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..