div is pushed by another div when toggled - javascript

I am having somewhat two navigation bars right here. When I click on the menu-btn, the sidebar will slide in. But somehow the sidebar pushes the menu-bar downwards which I do not understand why. How do I make the sidebar stop pushing the menu-bar. Any tips will be appreciated.
function main(){
$(".menu-bar").hide();
$(".menu-bar").fadeIn(300);
$(".sidebar").hide();
$(".dropdown-content").hide();
$(".menu-btn").on('click',function(){
$(".sidebar").animate({width:'toggle'});
});
$(".close-btn").on('click',function(){
$(".sidebar").animate({width:'toggle'});
});
$(".login").on('click',function(){
$(".dropdown-content").animate({width:'toggle'});
});
}
$(document).ready(main)
.sidebar{
display:none;
width:250px;
background-color:#005777;
z-index:1;
padding-top:60px;
height:100%;
overflow:hidden;
}
.brand{
font-family:ParmaPetit;
font-size:50px;
}
.sidebar a, .login{
text-decoration:none;
padding: 8px 8px 8px 8px;
display:block;
font-size:30px;
text-align:center;
color:white;
}
.close-btn{
position:relative;
font-size:40px;
float:right;
bottom:50px;
right:10px;
color:white;
}
.sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
color:#01af55;
cursor:pointer;
transition:0.3s;
}
.dropdown-content{
background-color:#111111;
position:relative;
left:250px;
bottom:29px;
}
.menu-bar{
background-color:#005777;
padding-bottom:10px;
overflow:hidden;
float:top;
}
.menu-btn{
font-size:40px;
cursor:pointer;
color:white;
position:relative;
left:20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
<span class="close-btn">×</span>
Airline Intel
Book Flight
Book Hotel
<div class="dropdown">
<span class="login">Sign In ➤</span>
<div class="dropdown-content">
Admin
User
Register
</div>
</div>
</div>
<div class="menu-bar" id="collapse">
<span class="menu-btn">☰</span>
</div>

function main(){
$(".menu-bar").hide();
$(".menu-bar").fadeIn(300);
$(".sidebar").hide();
$(".dropdown-content").hide();
$(".menu-btn").on('click',function(){
$('#collapse').hide();
$(".sidebar").animate({width:'toggle'});
});
$(".close-btn").on('click',function(){
$('#collapse').show();
$(".sidebar").animate({width:'toggle'});
});
$(".login").on('click',function(){
$(".dropdown-content").animate({width:'toggle'});
});
}
$(document).ready(main)
.sidebar{
display:none;
width:250px;
background-color:#005777;
z-index:1;
padding-top:60px;
height:100%;
overflow:hidden;
}
.brand{
font-family:ParmaPetit;
font-size:50px;
}
.sidebar a, .login{
text-decoration:none;
padding: 8px 8px 8px 8px;
display:block;
font-size:30px;
text-align:center;
color:white;
}
.close-btn{
position:relative;
font-size:40px;
float:right;
bottom:50px;
right:10px;
color:white;
}
.sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
color:#01af55;
cursor:pointer;
transition:0.3s;
}
.dropdown-content{
background-color:#111111;
position:relative;
left:250px;
bottom:29px;
}
.menu-bar{
background-color:#005777;
padding-bottom:10px;
overflow:hidden;
float:top;
}
.menu-btn{
font-size:40px;
cursor:pointer;
color:white;
position:relative;
left:20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
<span class="close-btn">×</span>
Airline Intel
Book Flight
Book Hotel
<div class="dropdown">
<span class="login">Sign In ➤</span>
<div class="dropdown-content">
Admin
User
Register
</div>
</div>
</div>
<div class="menu-bar" id="collapse">
<span class="menu-btn">☰</span>
</div>
you need to hide menu button when you clicked it. and show when you click in close button.

Add a position : absolute; to the sidebar class should do the trick

Related

input type file exceeds its width

I have styled a file selector but the problem is it exceeds its max-width from the parent container
Everything works fine here but run this code on browser you'll see that the input type file will exceed its limit
I have also attached my code
.inputcontainer
{
width:500px;
margin:0 auto;
padding:0;
}
.filess
{
text-align:center;
width:200px;
margin:auto;
border:none;
position:relative;
}
.filess .file_upload
{
max-width:150px;
width:100%;
height:35px;
padding-top:6px;
background:#f55282;
color:#fff;
display:inline-block;
margin:0 auto 20px;
cursor:pointer;
font-size:19px;
}
.filess .file_upload input[type="file"]
{
position:absolute;
height:100%;
width:100%;
opacity:0;
top:0;
left:0;
cursor:pointer;
}
.filess span
{
float:left;
text-align:center;
margin:auto;
display:inline-block;
}
.filess span.delt_head
{
float:right;
cursor:pointer;
}
<div class="inputcontainer">
<div class="filess">
<span class="delt_head"><i>Delete</i></span>
<span class="file_upload"><input type="file" /> Choose a file</span>
</div>
</div>
Any help will be appreciated
There might be a problem with overflow try overflow:hidden for the file element.
so that it will wrap around its parent container.
.inputcontainer
{
width:500px;
margin:0 auto;
padding:0;
}
.filess
{
text-align:center;
width:200px;
margin:auto;
border:none;
position:relative;
}
.filess .file_upload
{
max-width:150px;
width:100%;
height:35px;
padding-top:6px;
background:#f55282;
color:#fff;
display:inline-block;
margin:0 auto 20px;
cursor:pointer;
font-size:19px;
}
.filess .file_upload input[type="file"]
{
position:absolute;
height:100%;
width:100%;
opacity:0;
top:0;
left:0;
cursor:pointer;
overflow:hidden;
}
.filess span
{
float:left;
text-align:center;
margin:auto;
display:inline-block;
}
.filess span.delt_head
{
float:right;
cursor:pointer;
}
<div class="inputcontainer">
<div class="filess">
<span class="delt_head"><i>Delete</i></span>
<span class="file_upload"><input type="file" /> Choose a file</span>
</div>
</div>

how to pass the dynamic image url to other function

I am trying to pass the path of image to onclick event. I am taking the image from folder dynamically. Now,I have to pass the path of image. I have tried, but I am not getting expected results. Please give me any advice.
My code:
<div class="col-md-2">
<div class="img-responsive">
<img id="prod" src="<?php echo base_url('uploads/store/'.$data->img);?>" style="height:350px;width:200px;display:none;" alt="Fjords">
</div>
My HTML & JS
<style type="text/css">
.button
{
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold;
text-decoration:none;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
}
#loginScreen
{
height:380px;
width:340px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
background: url(//here i have to pass above mentioned path src of image) no-repeat;
border:5px solid #cccccc;
border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{
display:block;
opacity:2;
}
.cancel
{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div align="center">
<br><br><br><br>
Click here to Log In
</div>
<div id="loginScreen">
×
</div>
<div id="cover" >
</div>
</body>
</html>

Automatically add new number page

$('button').click(function(){
$('.content').append('<div class="Box"></div>')
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
Hello,
I have one question about javascript I think. How add automatically new number page after added 5 boxes in <.content> e.g. like 1 2 3...10. I think it should create new with current page number after prpend fifth grey box, but I don't know how I can do it.
I will be grateful for any advices
Try this.
$('button').click(function(){
if ($('.content .Box').length == 5) {
$('.content .Box').remove();
var number = parseInt($('.numberPage span').text()) + 1;
$('.numberPage span').html(number);
}
$('.content').append('<div class="Box"></div>')
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
$('button').click(function(){
//chek if content height is biger than the sum of box heiht inclding the nmpage height and magin
if($('.content').height()>(($('.Box').height()+10)*($('.Box').length+1))){
$('.content').append('<div class="Box"></div>');
}else{
var currentPage=parseInt($('.numberPage .active').html());
PagesFiled[currentPage]=true;
currentPage++;
$('.numberPage .active').removeClass('active');
$('.numberPage').append('<span class="active">'+currentPage+'</span>');
//clear boxes and add in next page
$('.content').empty();
$('.content').append('<div class="Box"></div>');
}
});
var PagesFiled={};
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
display:flex;
width:20px;
height:20px;
position:relative;
top:-30px;
right: -7px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
.numberPage .active{
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span class='active'>1</span>
</div>
</div>
<button>Add new box</button>
try this one. adding the current page no. + 1 on every button click.
$('button').click(function(){
var counter = $('.numberPage span').text();
$('.content').append('<div class="Box"></div>');
if($('.content .Box').length == 6){
$('.content .Box').remove();
counter = parseInt(counter) + 1;
$('.numberPage span').text(counter);
}
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
You can use following code for this
$('button').click(function(){
$('.content').append('<div class="Box"></div>')
$('.numberPage').append('<span>'+($('.numberPage span').length + 1 )+'</span>')
});
Try this solution
t = 0;
$('button').click(function(){
$('.content').append('<div class="Box"></div>');
t++;
if (t%5 === 0) {
$('.wrap').append('<div class="numberPage"><span>'+t+'</span></div>');
}
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>

Trying to understand the CSS controlling a section of a website [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So i've forked a section on another website and I've looked through all the CSS and js and tried to recreate it on my website. I've been at it for an hour and i still can't figure out what's missing.
My question is what is the easiest way to find out what CSS is controlling a certain section?
Also what is missing from the CSS in my fiddle which is the reason my version of the html looks different to the one on the website mentioned above (you will have to scroll down on the website mentioned above to reach the section i'm trying to recreate).
Here is my fiddle of where I'm at https://jsfiddle.net/hLkyLqyd/
CSS:
.grab-section{
background-color:#fff;
width:100%;
overflow:hidden;
position:relative;
}
.grab-section .holder{
width:1104px;
margin:0 auto;
overflow:hidden;
padding:83px 0 123px;
}
.grab-section h2{
text-align:center;
font-size:58px;
line-height:70px;
margin:0 0 19px;
color:#2b3e51;
}
.grab-section .intro{
display:block;
font-weight:normal;
color:#bdc3c7;
text-align:center;
margin:0 0 67px;
}
.license-list{
margin:0 0 41px;
overflow:hidden;
text-align:center;
list-style: none;
}
.license-list li{
float:left;
width:50%;
}
.license-list span{
display:block;
padding:16px 10px 18px;
background:#ecf0f1;
border-radius:0 5px 5px 0;
color:#9fa6ac;
font-size:18px;
line-height:24px;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list span:hover{
text-decoration:none;
cursor:pointer;
background:#f9f9f9;
}
.license-list li:first-child span{border-radius:5px 0 0 5px;}
.license-list strong{
display:block;
font-size:24px;
line-height:28px;
margin:0 0 4px;
color:#2c3e50;
font-weight:600;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list .active span{
box-shadow:inset 0 2px 0 0 rgba(0,0,0,0.2);
background:#1abc9c;
color:#dff3ed;
cursor:default;
}
.license-list .active span strong{color:#fff;}
.grab-section .boxes{
width:100%;
overflow:hidden;
text-align:center;
color:#bdc3c7;
}
.grab-section .box{
width:312px;
position:relative;
padding:26px 17px 39px 18px;
border:3px solid #ebedee;
border-radius:5px;
float:left;
margin:0 0 0 22px;
}
.grab-section .box.bndl:before{
position:absolute;
right:-5px;
top:20px;
content:'';
background:url(../images/sprite.png) no-repeat -180px 0;
width:65px;
height:41px;
}
.grab-section .boxes .box:first-child{margin:0;}
.grab-section .box h3{
font-size:22px;
line-height:28px;
color:#2c3e50;
margin:0 0 8px;
opacity:0.95;
}
.grab-section .box .title{
display:block;
font-weight:normal;
font-size:18px;
line-height:24px;
color:#bdc3c9;
padding:0 0 27px;
margin:0 0 20px;
border-bottom:2px solid #ecf0f1;
}
.grab-section .box .list{margin:0 0 29px;}
.grab-section .box .list strong{color:#7f8c8d;}
.grab-section .box .btn{
display:inline-block;
vertical-align:top;
width:190px;
color:#fff;
font-size:17px;
line-height:21px;
font-weight:bold;
background:#1abc9c;
border-radius:3px;
padding:11px 0 12px 0;
font-weight:500;
border-bottom: 2px solid #16a085;
}
.grab-section .box .btn:hover {
text-decoration:none;
opacity:0.8
}
.grab-section .box .btn:active {
opacity:1;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
#media screen and (max-width: 1108px){
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .box{
width: 27%;
padding: 26px 1.7% 32px;
margin: 0 0 0 3%;
}
.grab-section .box .title{
padding:0 0 10px;
margin:0 0 10px;
opacity:0.9;
}
.grab-section .box.bndl:before { background:none;}
.grab-section .box .list {font-size:16px;}
.grab-section .box .list{margin:0 0 10px;}
}
#media screen and (max-width: 768px){
.grab-section .intro,
.license-list
{margin:0 0 15px;}
.grab-section .box{
float:none;
display:block;
overflow:hidden;
width:auto;
margin:0 0 30px !important;
}
.grab-section .box .title{
font-size:14px;
line-height:16px;
opacity:0.9;
}
.grab-section .box.bndl:before{top:-8px;}
.grab-section .box .bndl { display:none}
}
HTML:
<script type='text/javascript' src='http://designmodo.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<section class="grab-section" id="buy">
<div class="holder">
<h2>Ready to grab this Sweety?</h2>
<strong class="intro">These are probably the best prices ever offered.</strong>
<ul class="license-list">
<li class="active">
<span class="per-lic">
<strong>Personal License</strong>
For Personal Projects (from $39)
</span>
</li>
<li>
<span class="dev-lic">
<strong>Developers License</strong>
For Business Projects (from $149)
</span>
</li>
</ul>
<div class="boxes developer hidden">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector-Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $249
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
</div>
<div class="boxes personal">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $69
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
</div>
</div>
</section>
<script type="text/javascript">
jQuery('.license-list li span').click(function(){
if (jQuery(this).parent().attr('class') != 'active'){
jQuery('.license-list li.active').removeClass('active');
jQuery(this).parent().addClass('active');
jQuery('.boxes.developer').slideToggle(300);
jQuery('.boxes.personal').slideToggle(300);
jQuery('.boxes.personal').before( jQuery('.boxes.developer') );
}
});
</script>
help will be appreciated
Thanks in advance
Try using the devtools of a browser such as Chrome to select the element. There should be a pane, usually on the right side, that shows you the CSS rules applied.
just right-click on the element you want to know the css or js controlling it and select Inspect Element.
FIRST EDIT
Alternatively, saving a page locally downloads all the css and js used by the page. Then, you can just copy the css styles from the downloaded folder.

How to put container div under menu using CSS

I have a problem, how can i make container div to be under menu, when i put container background it go beside a header and menu... Could someone help me to fix my problem?
My HTML and CSS bellow...
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Рено Клуб Македонија - Добредојдовте</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="web">
<div id="header">
<div class="logo">
<img src="images/logo.png" alt="Logo"/>
</div> <!-- logo end -->
<div class="menu">
<ul>
<li class="active">Почетна</li>
<li>Форум</li>
<li>Клуб</li>
<li>Членство</li>
<li>Галерија</li>
<li>Огласник</li>
<li>Контакт</li>
</ul> <!-- main menu end -->
</div>
</div> <!-- header end -->
<div class="container">
<p id="petrol">Превземено од Макпетрол *цените се изразени во денари / литар </p>
</div>
</div><!-- web end -->
#charset "utf-8";
body {
margin:0;
padding:0;
width:960px;
background:#e2e2e2;
}
a {
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px #000000;
}
a:hover {
text-decoration:none;
color:#a6a5a5;
}
a:active {
text-decoration:none;
color:#ecd302;
}
.web {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
background-repeat:no-repeat;
display:block;
margin:auto;
padding:0px;
height:110px;
background:#ecd302;
position:absolute;
top:0;
left:0;
right:0;
}
.logo {
background-repeat:no-repeat;
width:305px;
height:85px;
float:left;
margin:10px 0 0 202px;
}
.menu {
background:#4b4b4b;
text-transform:uppercase;
word-spacing:32px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
border-top: 1px solid #000;
display:block;
position:absolute;
top:105px;
left:0;
right:0;
}
ul {
}
li {
display:inline;
}
.container {
background:#929191;
left:0px;
right:0px;
text-align:right;
width: 960px;
font-size:12px;
}
If my question is not understood please contact me... i will give more information.
Note, that using position: absolute stops an element from taking up any space, which is why other elements come to that position. The result is multiple elements being at the same place, which is what you mostly don't want. So only use position: absolute, when really necessary.
I removed position: absolute from #header and .menu. Now you also don't need top, left and right anymore.
You also don't need to define the width of the body, since it is already defined for .web. Additionally, I removed some styles from .logo and #header to get the result shown in the screenshot.
Updated Code:
http://jsfiddle.net/azq50bsd/5/
body {
margin:0;
padding:0;
background:#e2e2e2;
}
a {
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px #000000;
}
a:hover {
text-decoration:none;
color:#a6a5a5;
}
a:active {
text-decoration:none;
color:#ecd302;
}
.web {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
background:#ecd302;
}
.logo {
background-repeat:no-repeat;
width:305px;
height:85px;
margin:10px;
}
.menu {
background:#4b4b4b;
text-transform:uppercase;
word-spacing:32px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
border-top: 1px solid #000;
display:block;
}
ul {
}
li {
display:inline;
}
.container {
background:#929191;
left:0px;
right:0px;
text-align:right;
width: 960px;
font-size:12px;
}

Categories

Resources