Before 1 min I started in developing a website.
At first I started in making the position of the header fixed then I made the wrapper div that called "all" but this div didn't appear please give me a solution.
body {
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-family: Haettenschweiler;
}
#header {
height: 60px;
background: #363333;
position: fixed;
width: 100%;
}
.header {
margin-left: auto;
margin-right: auto;
width: 70%;
}
#logo {
float: left;
font-size: 40px;
color: white;
}
#menu {
float: right;
margin-right: 200px;
}
.menu{
list-style-type:none;
}
.menu li{
float:right;
font-size:24px;
display:block;
min-width:125px;
text-align:center;
margin-left:5px;
}
.menu li a{
min-width:125px;
display:block;
color:white;
text-decoration:none;
}
#all {
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family: Gloucester MT;
}
#left{
float:left;
background:yellow;
width:13%;
}
#right{
float:right;
background:yellow;
width:13%;
}
#center{
margin-left:auto;
margin-right:auto;
background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div class="header">
<div id="logo">1111</div>
<div id="menu">
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<div id="all">
<div id="left">sadf</div>
<div id="right">sasadf</div>
<div id="center">sadf</div>
</div>
</body>
</html>
Display your .all div with position: relative; and set a top value equals to the height of the header.
This is because if you do not set position: relative; it is being displayed taking as reference the parent(the webpage) so it is the reason why your .all div is displayed in the top-left corner of your webpage.
The header is displayed above of your .all div because it is fixed, and fixed elements goes out of the normal flow.
body {
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-family: Haettenschweiler;
}
#header {
height: 60px;
background: #363333;
position: fixed;
width: 100%;
}
.header {
margin-left: auto;
margin-right: auto;
width: 70%;
}
#logo {
float: left;
font-size: 40px;
color: white;
}
#menu {
float: right;
margin-right: 200px;
}
.menu{
list-style-type:none;
}
.menu li{
float:right;
font-size:24px;
display:block;
min-width:125px;
text-align:center;
margin-left:5px;
}
.menu li a{
min-width:125px;
display:block;
color:white;
text-decoration:none;
}
#all {
position: relative;
top: 60px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family: Gloucester MT;
}
#left{
float:left;
background:yellow;
width:13%;
}
#right{
float:right;
background:yellow;
width:13%;
}
#center{
margin-left:auto;
margin-right:auto;
background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div class="header">
<div id="logo">1111</div>
<div id="menu">
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<div id="all">
<div id="left">sadf</div>
<div id="right">sasadf</div>
<div id="center">sadf</div>
</div>
</body>
</html>
The #all div is sitting behind the #header div.
It's concealed by the height of this div because when you set an element's position to absolute or fixed you're taking it out of the flow of the document.
Declaring a padding-top rule, equal to, or great than the height of #header will push #all down far enough into view.
Example:
#all {
padding-top: 60px;
}
In-browser Developing & Troubleshooting Tip
If you inspect these elements through your browser's developer tool you can see how they stack in relation to each other. For example, chrome will highlight the element on your screen when you hover over the mark-up of said element in the developer tool console/IDE.
Because your #header div has position:fixed it will not affect the positioning of other elements (i.e #all div). So the divs get rendered on top of each others. Try removing position:fixed from header if there's no need for it. Otherwise you have to manually move the #all div downwards a bit.
Related
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<style>
body,html,aside,article,header,nav,footer,ul,section,div,li,ul{
padding:0;
margin:0;
}
aside,article,header,nav,footer,section,div,ul {
display:block;
margin:0;
padding:0;
}
html {
background:#F1C4F2;
}
body {
width:1000px;
background:#FF53A9;
margin: 0 auto;
font-size:12px;
}
#header{
width:98%;
background-color:#F081F3;
padding:1%;
color:white;
font-size:1.2em;
}
#nav {
width:98%;
background-color:#C043AA;
font-size:1.1em;
padding:1%;
}
ul{
margin:0 auto;
width:100%
}
li {
list-style:none;
float:left;
margin-right:8%;
color:white;
}
OR
/*
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
*/
</style>
<body>
<div id="header">
some.com
</div><!--HEADER-->
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gallery</li>
<li>Upcoming Projects</li>
<li>Videos</li>
</ul>
</div><!--NAVIGATION-->
<div id="footer"> </div> <!--FOOTER-->
</body>
</html>
I have 'UL' tag inside a 'NAV' <DIV>,for my navigation i have created a 'LI' items and floated it and when i apply ""margin:0 auto"" it doesn't apply.
Even when I use ""display:inline-block""(this section is commented out) to 'LI'.Js
Fiddle link: jsfiddle
Try to add text-align:center for your <ul> and remove float:left from <li> and use display:inline-block; Demo
ul {
margin:0 auto;
width:100%;
text-align:center;
}
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
This will center your ul and i've also added overflow:hidden so that the floats are contained (the li).
ul {
margin: 0 auto;
width: 50%;
overflow: hidden;
}
You were applying margin:0px auto to a 100% width element which wont work.
The result: fixed
Firstly, the ul is centered but it's 100% wide so I am assuming that, in fact. you want the list items centered in the ul.
So, remove any floats, set text-align:center on the ul and make the li display as inline-block
* {
padding: 0;
margin: 0;
}
html {
background: #F1C4F2;
}
body {
width: 1000px;
background: #FF53A9;
margin: 0 auto;
font-size: 12px;
}
#header {
width: 98%;
background-color: #F081F3;
padding: 1%;
color: white;
font-size: 1.2em;
}
#nav {
width: 98%;
background-color: #C043AA;
font-size: 1.1em;
padding: 1%;
text-align: center;
}
ul {
background: blue;
}
li {
list-style: none;
display: inline-block;
color: white;
margin: 0 2%;
}
<body>
<div id="header">
some.com
</div>
<!--HEADER-->
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gallery</li>
<li>Upcoming Projects</li>
<li>Videos</li>
</ul>
</div>
<!--NAVIGATION-->
<div id="footer"></div>
<!--FOOTER-->
I'm having a small issue with some CSS/HTML. I'm unsure what it is. I think its me being stupid but i'm unsure...
The issue is this white line:
CSS
body{
width: 100%;
color: white;
margin: 0 0;
}
.main-header nav{
height: 40px;
width: 100%;
background-image:url('img/menu-bg.png');
padding: 15px 0px;
}
.main-header .logo{
float: left;
vertical-align: middle;
line-height: 12.5px;
}
.main-header .logo a:hover{
color:white;
text-decoration:none;
font-size: 150%
}
.main-header ul{
float: right;
list-style: none;
vertical-align: middle;
line-height: 12.5px;
}
.main-header ul li{
display: inline;
padding: 5px 5px;
}
.main-header nav a{
color:white;
text-decoration:none;
font-size: 150%
}
.main-header nav a:hover{
text-decoration:underline;
color: #FFBB00;
}
.main-header .nav-line{
width: 100%;
padding: 3px 0px;
background-color: #FFBB00;
color: #fff;
overflow: hidden;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Project 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<nav>
<div class="logo">
<h2>Project 2</h2>
</div>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Features</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Team</li>
</ul>
</nav>
<div class="nav-line"></div>
</header>
</body>
</html>
The Logo is pushing the line. Its line height is too tall to fit into the parent, so, setting .main-header .logo {line-height: 11px;} solves it.
Note that this is not the only solution, but is the solution which points the origin of the gap. You could also solve this by setting a height on the parent and overflow hidden.
Removing the overflow:hidden from the .nav-line div fixes it.
jsFiddle example
Or add overflow:auto; to your nav:
.main-header nav {
height: 40px;
width: 100%;
background:#000;
padding: 15px 0px;
overflow:auto;
}
jsFiddle example
Either way your top container content is pushing the content below it down by about a pixel.
I think your problem is the img/menu-bg.png who have one line of white pixels or 60% black.
Why you don't use background:#000; ?
For some unknown reason z-index doesn't seem to work. I try to make the submenu. i.e. the 2nd bar. To go over the #content which it fails to do....
http://jsfiddle.net/PaD2v/
HTML
<html>
<head>
<title>Мэрия Skrillax-RP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="master.css" />
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Poiret+One&subset=cyrillic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="master.js"></script>
</head>
<body>
<div id="wrapper">
<div id="banner"><img src="http://i.imgur.com/f2EWgQP.png?1"><p id="banner text"></div>
<ul id="navigation">
<li>Главная Страница</li>
<li>Задачи
<ul class="submenu">
<li>Охрана</li>
<li>Министерство Обороны</li>
<li>Министерство Юстиций</li>
<li>Министерство Культуры</li>
<li>Министрество</li>
</ul>
</li>
<li>Список Сотрудников
<ul class="submenu">
<li>Hello</li>
<li>Hello2</li>
</ul>
</li>
<li>Вакансии</li>
<li>Авторизация</li>
</ul>
<div id="content">
<p>Hello! Welcome to the www.mayor.freeiz.com!<br><br> Currently I am working on adding different types of information</p>
</div>
</div>
<div id="footer">Hello</div>
</body>
</html>
CSS
html {
height:;
}
body {
background-image: url("http://www.gtagaming.com/images/potd/200604/10501.jpg");
background-attachment: fixed;
background-size: 100% 100%;
height:100%;
}
#wrapper {
width:1024px;
min-height: 100%;
margin:0 auto;
}
#banner {
height:216px;
}
#navigation {
position:relative;
list-style-type:none;
font-size: 18px;
background-color: orange;
font-family: 'EB Garamond', serif;
opacity:0.8;
z-index: 15000001;
}
#navigation>li {
float:left;
}
#navigation a {
display:block;
padding:10px 10px;
color:white;
font-weight: bold;
width:183.81px;
height:40px;
text-align: center;
background-color: blue;
border-left:1px solid black;
text-decoration:none;
}
#navigation a:hover {
background-color:white;
color:blue;
border-top:3px solid red;
opacity:0.9999;
margin-bottom: -3px;
}
#banner h1 {
font-size: 20px;
text-align: center;
position: relative;
top: 1024px;
}
#content {
position:relative;
height:500px;
background-color:white;
opacity:0.9;
clear: both;
z-index:1;
}
#content p{
position:relative;
top:6px;
font-size: 30px;
z-index:1;
}
#footer {
vertical-align: bottom;
background-color: orange;
width:1024px;
height:50px;
margin:0 auto;
}
.submenu {
display:none;
position:relative;
}
.submenu li {
border-top: 2px solid black;
}
#navigation li:hover .submenu {
display:block;
z-index:99999999999999999999999999999999999999;
}
instead of relative position in your .submenu use absolute position
css
.submenu {
display:none;
position:absolute;
}
working demo
Relative positioning doesn't take the element out of the normal document flow. Consequently, when it appears it takes up space like a normal div and pushes everything beneath it down.
To remove it from the normal document flow so that it just sits on top of everything, use position: absolute. In this case, the thing we want to sit on top of everything is the submenu, so apply it to .submenu.
I have placed a image in my footer and i want it to center but i wont work
I want my image centered so i hope someone can help me take a look at my code
HTML
<div class="center">
<ul>
<li></li>
</ul>
</div>
CSS:
.center
{
width: 84px;
margin: 0 auto;
}
.center ul
{
width: 209px;
line-height: normal;
}
.center ul li
{
float: left;
margin-right: 11px;
}
.center ul li.last
{
margin-right: 0px;
}
.center ul li a
{
display: block;
height: 33px;
width: 33px;
}
.centering_ {background: transparent url('../images/hello.png') no-repeat;}
EDIT:
Here is a example in jsFiddle: http://jsfiddle.net/XJbaM/
In my code i have two icons in my footer, what i want is remove the right icon en center de left icon in my footer, the text above the icons is already centered
SOLVED
Add a wrapper div like this.
<div>
<ul>
<li>
<div class="wrapper">
</div>
</li>
</ul>
and the css for wrapper:
.wrapper {
margin:0 auto;
width: /* how big your img is PX EM % etc */;
text-align:center;
}
I TESTED THIS IN MY BROWSER AND IT WORKS. HERE IS THE EXACT CODE I USED: A MIX OF YOURS AND MINE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.center
{
width: 784px;
margin: 0 auto;
border: 1px solid #000;
}
.center ul
{
width: 709px;
line-height: normal;
}
.center ul li
{
float: left;
margin-right: 11px;
border: 1px solid #000;
width:500px;
}
.wrapper {
margin:0 auto;
width:500px;
text-align:center;
}
.center ul li.last
{
margin-right: 0px;
}
.center ul li a
{
display:inline-block;
height: 33px;
width:100px;
}
.clear {
clear:left;
}
.centering_ {background-image:url(img/activenav.png);
background-repeat:no-repeat;}
</style>
</head>
<body>
<div class="center">
<ul>
<li><div class="wrapper"></div></li>
</ul>
<div class="clear">ss</div>
</div>
</body>
</html>
NOW WHERES MY PIRATES BOOTY?
Place the tag < CENTER > and < /CENTER > around the whole div. It will center the div.
<CENTER>
<div class="center">
<ul>
<li></li>
</ul>
</div>
</CENTER>
Can anyone plese explain to me why my image in the footer css doesn't appear as the background? I have both a small unordered list that serves as a navigational menu and the footers main content floated to the left and right respectively, I feel like they are obstructing, however I figured their default value would be transparent.... Any hints please? I am new to this.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>title</title>
<style type="text/css" media="screen, print, projection">
body{
background: #DAA520;
}
#wrap {
width:1000px;
margin:0 auto;
background: white;
}
#alldivs{
}
#header{
background: blue;
height: 150px;
}
#nav{
background: yellow;
padding: 0px;
margin: 0px;
background:white repeat-x;
width:100%;
float:left;
border: 1px solid #42432d;
border-width:1px 0;
}
#nav li{
display: inline;
padding: 0px;
margin: 0px;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#FFFFF0;
float:center;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:blue;
}
#main{
background: white;
float: left;
width: 780px;
padding: 10px;
}
#sidebar{
background: gray;
float: right;
padding: 10px;
width: 180px;
}
#footer{
width: 1000px;
height: 150px;
clear: both;
background-image:url(linktopicture.jpg);
}
#footernav li{
display: inline;
}
#footernav a:link,
#footernav a:visited {
color:gray;
text-decoration:none;
text-transform:uppercase;
padding-left: 15px;
}
#footer ul{
float: left;
width: 500px;
margin: 0px;
padding-top: 35px;
padding-bottom: 3px
text-align: left;
}
#footercontent {
width: 490px:
float: right;
text-align: right;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<br>
<div id="alldivs">
<div id ="wrap">
<div id="header"><img src="linktopicture" alt="text"/> </div>
<ul id="nav">
<li id="home">HOME</li>
<li id="services">SERVICES</li>
<li id="contact">CONTACT</li>
</ul>
<div id="main"><p>
main content
</p></div>
<div id="sidebar">sidebar space</div>
<div id="footer">
<ul id="footernav">
<li id="footernavhome">HOME</li>
<li id="footernavservices">SERVICES</li>
<li id="footernavcontact">CONTACT</li>
</ul>
<div id="footercontent">
<p>
blahh
</br>
blahhh
</p>
</div>
</div>
</div>
</div>
</body>
</html>
You need to contain and clear your floats in the footer, which will allow the background to appear.
Here's an overly-simplified example from your original markup:
<div id="footer">
<ul id="footernav">
...
</ul>
<div id="footercontent">
...
</div>
<!-- Here's the Magic -->
<br style="clear: both; display: block;" />
</div>
There are many ways to clear floated elements, but arguably the most common and easiest to implement is the clearfix approach — or the updated and highly-recommended micro clearfix method.
An example of using a "clearfix" would become:
<div id="footer" class="clearfix">
<ul id="footernav">
...
</ul>
<div id="footercontent">
...
</div>
</div>
if you do not want a full break, add:
<span class="cleaAll"></span>
To your html where RJB said, add:
.clearAll {
display:block;
height:1px;
}
To your css,
Hope it helps.