This is killing me for hours already :'( Can anyone help me to position the logo and navbar inside the header???
I am trying to put the "logo" inside the header (to the left side) and "navbar" inside the header (to the right side) but even though i tried many different properties my navbar is always outside of the header container... Header should be fixed.
http://jsfiddle.net/L7kPu/10/
<header>
Logo
<ul id="nav" class="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
html, body{
margin:0px; padding:0px; height: 100%; }
section {
height: 100%;
}
header{
z-index: 1;
position:fixed;
width:100%;
background:rgba(0,0,0,0.1);
}
header ul{
float:right;
}
header ul li{
display: inline;
float:left;
}
header a{
color:white;
background:rgba(0,0,0,0.1);
display:inline-block;
padding:0px 30px;
height:60px;
line-height:60px;
text-align:center;
font-family: 'Roboto Slab', serif;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
font-weight:700;
}
Your ul had margin and padding :)
Working Fiddle
header ul{
float:right;
padding: 0;
margin: 0;
}
header ul li{
display: inline;
float:left;
}
header a{
color:white;
background:rgba(0,0,0,0.1);
display:inline-block;
padding:0px 25px;
height:60px;
line-height:60px;
text-align:center;
font-family: 'Roboto Slab', serif;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
font-weight:700;
}
I also changed the left and right padding on the header a for the sake of the fiddle.
Updated Fiddle
Here is the modified css for your code:
#logo {
float: left;
position: aboslute;
}
#nav {
white-space: nowrap;
margin-top: 0;
margin-right: 0;
}
header {
z-index: 1;
position:fixed;
width:100%;
background:rgba(0, 0, 0, 0.1);
height: 60px;
}
Here:
header ul
{
float:right;
margin: 0;
}
header ul li
{
display: inline;
float:left;
margin: 0;
}
Also cleaned up your code a little:
http://jsfiddle.net/L7kPu/17/
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.
I'm having issues with centering the text in my navigation bar. I've tried everything I can think of. Any help would be greatly appreciated.
What I have here is my navigation bars html and css code. I have tried centering it and using other means but am still stuck.
hTML
<div class="content-outer" id="top_nav">
<div class="content-inner">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>
css
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
margin:0;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
float:left;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; float:left; overflow:visible; }
.content-outer .content-inner { width:978px; margin:0 auto; overflow:visible; position:relative; }
Is this what you are looking for?
I removed the extra divs; created a nav element; put margin: 0 auto; on the ul; replaced the float: left on the li with display: inline-block; and there you have it!
HTML
<nav id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</nav>
CSS
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
width: 100%;
}
#top_nav ul {
margin: 0 auto;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
display: inline-block;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
Instead of giving just a margin-right for each li element like I can see in your code margin: 0 56px 0 0;, why you don't give equal margin left and right to each li tag?
For example: margin:0 34px 0 34px;
It could be a quick solution.
Check this DEMO:
http://jsfiddle.net/4n9hq/1/
Here is the answer in simplest form
<nav>
<ul>
<li>Home<li>
<li>Digital</li>
</ul>
</nav>
CSS
ul {
display: block;
text-align: center;
}
li {
display: inline-block;
}
In conclusion: set the "ul" tag to display:block and then center text
My issue is that the first element in my nav bar which is "home" has more spacing than the rest of the elements. I can't seem for the life of me to figure out what it is. All I wanted was to have a centered evenly spaced out navigation bar but it's seeming harder than I thought.
CSS
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
list-style:none;
width:100%;
margin:0 auto;
padding:0;
text-align:center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding: 0;
font-size:1.7em;
text-transform:uppercase;
display: inline-block;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; overflow:visible; }
.content-outer .content-inner { width:100%; margin:0 auto; overflow:visible; position:relative; }
HTML
<div class="content-outer" id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>
That is because you are not properly closing the first li in your list.
<li>Home<li>
should be
<li>Home</li>
Consider running your code through a mark up validator like W3C mark up validator when you are having formatting problems. Many times its something small like a mismatched tag or not properly closing a tag such as in this case.
This is the HTML Can someone please help me? I can't remove the little margin above the navigation.
I've already tried padding:0px and margin-top:0px
<body>
<div id="wrap">
<div class="top_portion">
<img src="img/icbox.png">
</div>
<div id="welcome">
<h1>Welcome to my blog about the married life</h1>
<h3>Ain't much to see here for now!</h3>
</div>
<div id="navigation">
<ul>
<li><a href="#Home">Home</li>
<li><a href="#About">About</li>
<li><a href="#Pictures">Pictures</li>
</ul>
</div>
</div>
</body>
</html>
AND THIS IS THE CSS Sorry it's been a while since I've been back to this website
body {
background-color:white;
font-family: 'Josefin Slab', serif;
}
.top_portion {
width:800px;
height:200px;
background-color:#e2e2e2;
margin:auto;
text-align:center;
border-top:5px;
border-bottom:5px;
border-left:0px;
border-right:0px;
border-style:solid;
border-color:#30474b;
}
.top_portion img {
padding-top:35px;
}
#welcome h1 {
margin-top:0px;
text-align:center;
padding:0px;
margin-bottom:0px;
}
#welcome h3 {
margin-top:0px;
text-align:center;
}
#welcome {
font-family:sans-serif;
margin:auto;
background-color:#e2e2e2;
width:800px;
}
#navigation {
text-align:center;
}
#navigation li {
list-style-type:none;
display:inline;
}
ul {
margin-top:0;
}
ul a {
padding-right:20px;
text-decoration:none;
}
ul a:hover {
text-decoration:underline;
}
It is the h3
Margin:0; does the trick.. Where did you aply the margin:0; earlier?
h3 {margin:0;}
In your case you should change your #welcome h3 to:
#welcome h3 {
margin: 0;
}
DEMO
Try This:
I think its because of the default behavior of Heading.
Style:
html, body
{
padding: 0;
margin: 0;
}
#welcome h3 {
margin-top:0px;
margin-bottom:0px;
text-align: center;
}
/*Or you can try
#welcome h3 {
margin:0;
text-align: center;
}*/
Here is the Demo
I have changed these things in your query
#navigation {
text-align:center;
margin-top:0px;
}
#welcome h1 {
margin-top:0px;
text-align:center;
padding:0px;
margin-bottom:0px;
}
#welcome h3 {
margin-top:0px;
text-align:center;
margin-bottom:0px;
}
workingFiddle
Since you want to remove margin from the top for your navigation bar you could possibly try this:
#navigation {
margin-top: 0px;
border-top: 0px;
}
As, you are including list in your navigation it may eat up some of your space too. Try including this:
#navigation li {
margin-top: 0px;
}
Possibly, you can also try for:
#welcome h3 {
margin: 0px;
margin-bottom: 0px;
}
H3, because this would hold just the line above your navigation bar
how do i make the center like the links are all off to the left i want them to be center top of the web page... any help?? i have done this before but i dont rember how
CSS:
body {
background: #B0FFF5
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left; /*supposed to be there */
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#3B5998;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ffffff;
color:#3B5998;
}
HTML:
<body>
<ul>
<li>Home</li>
<li>Fb Fame</li>
<li>Donate</li>
<li>Facebook</li>
</ul>
</body>
If you want the buttons to line up, no matter what the window size is, set a fixed width and margin: 0 auto:
ul
{
width: 512px;
margin:0 auto;
}
Here is a demo.
Alternatively remove the whitespace between the list items (or use another technique), set their display to inline-block and give the container a text-align: center:
ul
{
margin:0;
text-align: center;
}
li
{
display: inline-block;
}
Here is a demo.
ul
{
list-style-type:none;
margin:0;
padding:0;
width: 400px;
margin: 0 auto;
}
Hope this helps.
ul
{
width:600px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;
}
i remberd how to do it sorry folks