i've been trying for 2 hours to align the navigation bar nicely under the header image, but it just won't do it.The first 4 list items align in a row, but the last one goes under them, + the nav bar is not centered like i want it to be. I have searched for answers everywhere, and nothing works. Help will be greatly appreciated.
p.s. i am new to css and html so be gentle.
<html>
<head>
<style>
body {
background-image: url("http://i.imgur.com/SwKXk23.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
body {
margin: 0;
}
.header {
width: 100%;
height: auto;
background-color: none;
padding-top: 24px;
}
.headerContent {
width: 1024px;
height: auto;
margin: 0 auto;
}
.headerContent a img {
width: 659px;
height: 144px;
margin: 0px auto;
display: block;
}
.nav {
width:750px;
margin:0 auto;
list-style:none;
}
.nav li {
float:left;
}
.nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
.nav ul li{
height: 40 px;
background: #A14F53;
}
.nav ul li{
list-style-type: none;
width: 150px;
float: left;
}
.nav ul li a{
text-decoration: none;
color: black;
line-height: 40px;
display: block;
border-right: 1px solid #CCC;
text-align:center;
}
.nav ul li a:hover{
background-color:#F9C1B5;
}
.headerBreak{
width: 100%;
height: o%;
border bottom: 2px solid #128e75;
}
</style>
</head>
<body>
<div class="background">
<div class="header">
<div class="headerContent">
<a href="#">
<img style="border:0;width:900px;height:250px;" alt=""
title="" src="http://i.imgur.com/5NhCbxu.png">
</a>
</div>
<div class="nav">
<ul id="nav">
<li>Pagina principala</li>
<li>Despre noi</li>
<li>Clientii nostri</li>
<li>Produse</li>
<li>Contacte</li>
</ul>
</div>
</div>
<div class="headerBreak"></div>
</div>
</body>
</html>
You haven't given the nav bar enough width. Change the .nav rule:
.nav {
width:750px; <------- adjust this
margin:0 auto;
list-style:none;
}
I changed your width to 800px instead of 750px and now the menu fits on one line and is centred.
Here's a fiddle: https://jsfiddle.net/macg14fs/
Your .nav is too narrow for the content so it has wrapped. Press F12 on your browser to discover the interactive debug tools. After that, invest some time in learning about bootstrap.
With a Fiddle it would be much easier to know whats the problem, but try this:
#nav {
width: 100%;
}
#nav > li {
display: inline-block;
margin: 5px 5px 5px 5px;
text-align: center;
}
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 am trying to develop a website which contains dropdown menu and in the next division below menu there is a slider division but when mouse is hover on menu the submenu displays and the slider division is shifts down.
So can anyone suggest how I can accomplish the task
The code is as follows
<html>
<head>
<style type="text/css">
#header{
height: 90px;
}
#navigation{
height: 30px;
background-color: #0099FF;
border: 1px solid #0099FF;
border-radius: 10px;
z-index:1000;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
padding-right: 40px;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFFFFF;
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
}
ul li a:hover {
background: #00CCFF;
}
li:hover ul {
display: block;
z-index: 1000;
}
li:hover li {
float: none;
}
li:hover a {
background: #00CCFF;
}
li:hover li a:hover {
background: #D2F5FF;
}
#drop-nav li ul li {
border-top: 0px;
}
#clearmenu{
clear: left;
}
#sliderandnews{
height: 300px;
}
#slidermain{
height: 300px;
width: 65%;
float: left;
}
#news{
height: 300px;
width: 33%;
border: 2px solid #F0FFFF;
border-radius: 20px;
float: right;
background-color: #F0FFFF;
}
.clear{
height: 40px;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="navigation">
<ul id="drop-nav">
<li>Home</li>
<li>About Us</li>
<li>Academic Programs
<ul>
<li>BBA</li>
<li>BCA</li>
<li>BE</li>
</ul>
</li>
<li>Faculties</li>
<li>Admission</li>
<li>Downloads</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="sliderandnews">
<div id="slidermain">
This section is changes its position on mousehover
</div>
<div id="news">
</div>
</div>
</body>
</html>
The problem is that your elements are relative positioned. So, when the submenu appears, all elements below are shifted down. You can add absolute positioning to navigation bar, and determine its displacement from top using the top property in CSS. This allows you to eliminate #header (which has only the role to give a top margin).
#navigation{
position:absolute;
top:90px;
}
Similarly you can do with the #sliderandnews block. Since you've given an absolute positioning to navigation menu, navigation is removed from HTML elements flow inside the page. To compensate this, you have to add a proper top margin to this element.
#sliderandnews{
height: 300px;
margin-top:190px;
}
And here's the final fiddle.
In the #nav ul li, i cant seem to fix the position of the text without changing the size of the block. Whenever I try to use padding, the size of the block changes. How can I move the text without changing the size of the block? Here is the code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
background-color: #FFC0CB;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
overflow: auto;
background-color: red;
margin: 0px;
}
#headTable
{
float:right;
}
#logo
{
background-color: green;
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
font-size: 35px;
padding-top: 20px;
color: black;
float: left;
margin: 20px 50px;
}
#headTable ul li:hover
{
background-color: blue;
color:red;
}
#nav
{
clear: both;
width:100%;
height: 95px;
background-color: purple;
}
#nav ul
{
overflow: auto;/*
background-color: yellow;*/
margin: 0px;
padding: 0px;
}
#nav ul li
{
background-color: black;
color:white;
font-size: 30px;
list-style-type: none;
text-decoration: underline;
margin: 20px;
padding: 10px 10px 10px 20px;
float: left;
/*text-indent: 0px;
*/}
#page
{
float: left;
margin: 10px;
height:700px;
width:700px;
background-color: #FFC0CB;
}
#page p
{
padding:100px 0px 0px 50px;
font-size: 20px;
color: navy;
}
#content
{
height: 1000px;
width: 1334px;
position: absolute;
margin:0px;
background-color: #00B2EE;
}
#top
{
float: right;
position: relative;
margin: 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
#low
{
position: relative;
clear: both;
float: right;
margin:-300px 10px 10px 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Wow</li>
<li>Doge</li>
<li>Such fun</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
You need to set the width for an li element, and wrap the nav text in span tags. Then you can move them left or right and the width of the nav li will not change.
<li><span>Menu</span></li>
<li><span>Blog</span></li>
<li><span>Ins</span></li>
<li><span>BBC</span></li>
<li><span>Contact</span></li>
<li><span>Wow</span></li>
<li><span>Doge</span></li>
<li><span>Such fun</span></li>
#nav ul li{width:70px;background-color: black;color:white;font-size: 30px;list-style-type: none;text-decoration: underline;margin: 20px;padding: 10px 10px 10px 20px;float: left;}
#nav ul li span{margin-left:70px;}
See a working solution here: http://jsfiddle.net/mtruty/73uav/
I have created demo of my problem so far.
Demo
The issue I am having is I require the menu image to sit on top of the div and push the whole 'imgDiv' down as if it was hiding behind it. Now I can achieve something close but placing the 'menumobile. directly underneath the 'imgDiv' but it pushes the content down but also causes a problem with it's position.
so my goal is for the image to be sat floating at the centre of the top on top of the 'imgDiv' and when clicked it reveals the menu and pushes down the whole of the 'imgDiv' and not just the content but I am struggling to make it work.
<center><div id="menumobile">
<div id="nav-mobile">
<img src="img/menu.png" alt="Menu" class="menuimage"/>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
<br /><br />
</div>
</div>
</center>
<div id='imgDiv'>
<div>
<div class="containeralt">
<h1>Header</h1>
<br />
<span class="icon lush-arrow-circle-down" style="font-size: 50px; color: #FFFFFF;"></span>
</div>
</div>
</div>
Please ignore center tags I am just using them for the purpose of the demo.
$(document).ready(function() {
$('#nav-mobile ul').hide();
$('#nav-mobile a').click(function(e) {
$('#nav-mobile ul').slideToggle(200);
});
});
#imgDiv {
position:relative;
height:75%;
width:100%;
background-image:url(http://walljpg.com/wp-content/uploads/2014/04/blurry-backgroundgriscomkz-dpilzwd3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #666666;
display:table;
text-align: center;
background-attachment:fixed;
position:relative;
margin-top: -20px;
}
#imgDiv > div:first-child {
display:table-cell;
vertical-align:middle;
width:100%;
}
#nav-mobile > a {display:inline-block;}
#menumobile{
background-color: transparent;
text-align:center;
margin-top: 40px;
margin-bottom:40px;
z-index: 999999;
}
#nav-mobile, #nav-mobile ul, #nav-mobile li {
position: relative;
background: none;
}
#nav-mobile ul {
margin: 0;
padding: 0;
width: 100%;
padding: 20px 0 60px 0;
}
#nav-mobile ul li {
width: 100%;
display: block;
padding: 20px 0 20px 0;
margin: 0;
}
#nav-mobile ul a{
color: #000;
text-decoration:none;
font-size: 16px;
}
#nav-mobile ul a:hover {
background: none;
color: #FFF;
}
#nav-mobile ul li:hover {
}
.menuimage{width: 30px; height: 30px;}
Try adding these properties to your ul tag : position and z-index as shown below.
#nav-mobile ul {
margin: 0;
padding: 0;
width: 100%;
padding: 20px 0 60px 0;
position:absolute;
z-index:999;
}
Let me know if this is the behaviour you expect. Hope it helps!
I have the following code for my nav bar and can't seem to center it on the website. What am I doing wrong? Removing float: left does nothing for positioning.
Thanks.
css
ul#list-nav {
list-style: none;
margin: 20px auto;
padding: 0px;
width: 800px;
}
ul#list-nav li {
display: inline;
}
ul#list-nav li a {
text-decoration: none;
padding: 5px 0;
width: 100px;
float: left;
background: #485e49;
color: #eee;
text-align: center;
border-left: 1px solid #fff;
}
ul#list-nav li a:hover {
background: #a2b3a1;
color: #000
}
html
</head>
<body>
<div id="as">
<ul id="list-nav">
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</body>
It is already centered, it's just that you are using explicit width for your menu so consider decreasing your menu width
Demo
CSS
ul#list-nav {
list-style:none;
margin:20px auto;
padding:0px;
width:800px;
border: 1px solid #ff0000;
overflow: hidden;
}
Currently I've made it 205px
CSS
ul#list-nav {
list-style:none;
margin:20px auto;
padding:0px;
width:205px;
border: 1px solid #ff0000;
overflow: hidden;
}
Fixed demo
You will need to add display: block;
You need to wrap your nav bar in a wrapper div and then set the margin of that div to auto like so:
<style>
#wrapper {
margin: auto;
}
</style>
<div id="wrapper">
<!-- (your nav bar code here) -->
</div>
I believe following should do the trick;
<div id="as" align="center">