this is my html code
<html>
<head>
<link rel="stylesheet" href="main-pd.css"/>
</head>
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
</html>
and this is my css code
.menu-wrap{
background-color:pink;
}
ul{
background-color:blue;
height:100px;
border:solid;
width:350;
float:right;
}
without float:right property it is showing the background:pink color of the parent div and in the above case no pink background. Why is it happening?
Because you did not mention the width and height of parent div, So after putting float:right in child element, parent also float on right. Check below code:
.menu-wrap{
background-color:pink;
display:inline-block;
width: 100%;
height: 105px;
}
ul{
background-color:blue;
height:100px;
border:solid;
width:350px;
float: right;
position: relative;
top: -17px;
}
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
If i understood your question correctly then this is what i suggest:
HTML:
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
CSS:
.menu-wrap{
width: 100%;
height: 500px;
float: left;
background-color:pink;
}
ul{
width:350px;
height:100px;
margin: 0;
padding: 0;
float: right;
background-color:blue;
border:solid;
}
OR:
CSS:
.menu-wrap{
height: 500px;
position: relative;
background-color:pink;
}
ul{
width:350px;
height:100px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
background-color:blue;
border:solid;
}
Hope this helps you out.. definitely take a look at float and position:relative/position:absolute css properties in detail.
Finally i have understood the reason :) it is simply because
the parent element contained nothing but floated element, the height of it collapses to nothing.
for more details refer:- https://css-tricks.com/all-about-floats/
You must have something else your css file that is doing that. I have tested your code in jsfiddle and is working fine. Have a look https://jsfiddle.net/max234435/boL8zs4a/
Related
How do I position the navbar inside the header? If I float the divs inside the header it works fine. But when I remove the float the navbar positions below the header. I dont understand it. How do I fix it?
html{
height:100%;
}
body{
margin: 0px;
padding: 0px;
background-color: grey;
height:100%;
width:100%;
}
#container{
height:90%;
width:90%;
margin-left: 5%;
margin-right: 5%;
border-style: solid;
}
#header{
height:8%;
width:100%;
}
.logo{
height:80%;
width:10%;
}
.nav{
height:90%;
width:75%;
margin:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>basic</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
</div>
<div class="nav">
</div>
</div>
</div>
</body>
</html>
bydefault div element are block label element that's it took 100% width.
you can change it's to 'inline' element using float, inline-block. >br/>
check updated snippet below
html {
height:100%;
}
body{
margin: 0px;
padding: 0px;
background-color: grey;
height:100%;
width:100%;
}
#container{
height:90%;
width:90%;
margin-left: 5%;
margin-right: 5%;
border-style: solid;
}
#header{
height:8%;
width:100%;
}
.logo{
height:80%;
width:10%;
display: inline-block;
}
.nav{
height:90%;
width:75%;
display: inline-block;
}
<div id="container">
<div id="header">
<div class="logo">logo</div>
<div class="nav">
Nav1
Nav2
Nav3
Nav4
</div>
</div>
</div>
If u make the logo position:absolute it wont push down the navbar.
You do have to specify heigth and width since it will not compare to the parent div.
.logo{
height:40px;
width:100px;
position: absolute;
}
An other way of fixing this is by giving a negavtive margin to the navbar.
This way you dont have to specify the width and heigth of the logo.
.nav{
height:90%;
width:75%;
margin:-35px auto;
}
I want to position my anchor to middle (vertical) inside a fixed div.
I can't use display:table/table-cell because of other content inside my div, so I thought line-height would be the best alternative.
My problem is that the anchor will stretch out when I put line-height with it, but only if it's floated.
HTML:
<div class="fixed">
<a class="btn" href="#">btn1</a>
</div>
CSS:
.fixed
{
height: 100px;
width: 100%;
background-color:grey;
position:fixed;
}
.btn
{
padding: 3px 9px;
background-color:red;
color:white;
line-height:100px;
float:right;
}
JSfiddle: https://jsfiddle.net/828zrzrk/
add display:block;
change padding value.
.fixed
{
height: 100px;
width: 100%;
background-color:grey;
position:fixed;
top:0;left:0;
}
.btn
{
display:block;
padding: 0 9px;
background-color:red;
color:white;
line-height:100px;
float:right;
}
<div class="fixed">
<a class="btn" href="#">btn1</a>
</div>
is this what you need?
```
.btn {
**
width: WIDTH;
height: HEIGHT;
position: absolute;
left: 50%;
top: 50%;
margin-top: -WIDTH/2;
margin-left: -HEIGHT/2;
}
```
Demo
I want to design a web page using a fixed header in the top of the page and a fixed menu in the left side of the page. I want that the other parts are floater divs. How can I do this?
Thanks.
I think what you want is to create a header fixed position and put the menu inside the header and make the menus float left, like this example
Html:
<header>
<nav>
<ul class="menu">
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
</ul>
</nav>
</header>
css:
header {
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
background:#000;
}
header .menu {
float:left;
text-align:left;
}
header .menu li {
display:inline-block;
margin:0 10px;
}
header .menu a {
color:#fff;
text-decoration:none;
}
http://jsfiddle.net/8TB6e/
Try this,
<div class='header'>
<!--Whatever you want to include in the header section-->
</div>
<div class='leftsidebar'>
<!--Whatever you want to include in the left section-->
</div>
<div class='main-content'>
<!--This is your general section-->
</div>
Now the CSS will be as,
.header{
position: fixed;
top:0px;
height:70px;
background-color: red;
width:100%;
}
.leftsidebar{
position: fixed;/*write relative if you don't want this to be fixed*/
left:0px;
background-color: aqua;
top:70px;
width:100px;
height: auto;
}
.main-content{
position:relative;
left:100px;
top:70px;
}
Tell me if this helps :)
You cant float a fixed element as far as I know.
Think of it this way: All of the three divs will be fixed but looking like they're floating!
Try this CSS:
#header{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100px;
background: black;
}
#left_nav{
position: fixed;
top: 100px;
left: 0px;
width: 10%;
height: 600px;
background: red;
}
#content{
width: 90%;
height: 600px;
background: blue;
position: fixed;
top: 100px;
left: 100px;
overflow: scroll;
}
#just_to_activate_the_scroller{
width: 150px;
height: 1000px;
}
HTML:
<body>
<div id="header"></div>
<div id="left_nav"></div>
<div id="content">
<div id="just_to_activate_the_scroller"></div>
</div>
</body>
I'm trying to do a dynamic layout to my website, but I'm having problems with the menu and the general content. When I'm at 1920x1080, margin and position still fine, but when I decrease this size, the general content come over the fixed menu.
How can I apply this margin between lateral sidebar(where the menu and the logo will be) and the general content?
<div id="header">
<div id="logo">
aaaaaaaaa
</div><!--logo-->
<div id="center">
<div id="wrap">
<ul id="">
<li>Início</li>
<li>Potifólio</li>
<li>Clientes</li>
<li>Sobre</li>
<li>Contato</li>
</ul>
</div>
</div><!--menu-->
</div><!--header-->
<div id="content">
<div id="inicio">
inicio
</div>
<div id="contato" style="background-color:blue">
contato
</div>
</div>
</div><!--box-->
css:
*{margin:0;padding: 0;}
body{
background-color:#fffbe7;
overflow:hidden;
}
html, body, #center {
height: 100%;
position:relative;
margin:0px;
padding:0px;
}
#header{
position: fixed;
}
#center #wrap {
height: 50%;
left: 1%;
margin: 0;
padding: 0;
position: fixed;
top: 50%;
}
#center ul{
list-style: none;
padding:0;
margin:0;
border-right:1px solid #000;
padding-right: 20px;
}
#center ul li a{
color:#333;
text-decoration: none;
font-family: Georgia;
font-size: 30px;
}
#center ul li a:hover{
text-decoration: underline;
}
#header{
width:20%;
}
#content{
position: absolute;
top: 0%;
width:80%;
margin-left:10%;
}
#content div{
height: 400px;
background: red;
}
You can see the code and demo here:
http://jsfiddle.net/7eAJg/1/
Try removing the position:absolute on the content div, because absolute position is from the left side of the window, since your margins are % they are not the same. Let them stack as they should, without forcing the absolute.
Media queries will help you deliver and alter your styles for different sized browsers.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I've been trying to get my footer to display properly, and have combined a number of approaches, but am still getting the same result. The footer sits a fixed number of pixels from the top of the page, and doesn't extend all the way across the page. I need it to display just below the content, no matter the size of the content, and for it to extend all the way across the page.
the CSS:
html, body, #container { height: 100%; }
#container { height: auto !important; min-height: 100%; margin-bottom:-50px;}
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-align:center;
float:left;
position:relative;
body:before;
content:"";
overflow:auto;
margin-top:50px;
padding:10px;
}
#footer, #push{
height:50px;
}
.clearboth {
clear:both;
}
The HTML:
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
You need to make sure that you reference your css file from your html, so your html should look like this, if they are in the same directory you don't need to add the path:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="path_to/YOUR_CSS_FILENAME_HERE.css">
</head>
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
and your css, I took away the left -5%:
#page {
min-height: 100%;
position:relative;
}
#main {
padding-bottom: 50px;
}
#footer {
background-color:#4a4a4a;
position: absolute;
width: 100%;
bottom: 0;
height: 50px;
padding:10px;
font-family:'discoregular';
display: block;
overflow:auto;
text-align:center;
float:left;
margin-top:50px;
}
change the css to the following.You can chage the "bottom" so that it can come up
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-decoration: none;
text-align: center;
width: 100%;
position: fixed;
z-index: 1000;
vertical-align: baseline;
bottom: -50px;
padding:10px;
}
All I added into my footer styles after reading this post was- overflow:auto; - and it's sorted now