When I resize my browser windows I am getting some unexpected behavior from IE and Chrome. The navigation menu does not stay locked in place.
I know the problem has something to do with the long text that is right justified with the logo. In this case, the "Comic Subscription..." text. When the "C" of this text comes to the edge of the last navigation menu item, that is when the navigation menu drops.
IE screenshot:
Internet Explorer http://www.jaylefler.com/ie.png
Chrome screenshot:
Chrome http://www.jaylefler.com/chrome.png
Firefox screenshot:
Firefox http://www.jaylefler.com/firefox.png
<!DOCTYPE html>
<html>
<head>
<title>Demolition Comics Subscription Management System</title>
<style>
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
padding: 0;
background-repeat:no-repeat;
background-color:#FAF8CC;
}
nav {
width: 100%;
height: 30px;
background-color:rgb(255,200,0);
border-bottom:1px solid #000;
font-weight: bold;
}
nav ul{
padding:0;
margin: 0;
min-width: 755px;
overflow: hidden;
}
nav ul li{
float: left;
margin:0;
padding:0;
list-style:none;
background-color:rgb(255,200,0);
border-right:1px solid #000;
}
nav ul li a{
text-align:center;
text-decoration:none;
width:150px;
height: 25px;
padding-top: 5px;
display:block;
color:#000;
}
nav ul li ul{
position:absolute;
visibility:hidden;
min-width: 150px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
margin-left: -1px;
}
nav ul li:hover ul{
visibility: visible;
}
nav ul li ul li {
float: none;
width:200px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
nav ul li ul li a {
text-align:center;
width:200px;
}
nav a:hover {
background-color:#000;
color:rgb(255,200,0);
}
#logo {
background-color: black;
width: 100%;
min-width: 800px;
color: rgb(255,200,0);
height: 100px;
margin:0px;
}
#logo img {
padding: 10px;
vertical-align: middle;
}
.left_part, .right_part {
height: 100px;
}
.left_part {
float: left;
}
.right_part {
float:right;
width:500px;
margin-top: 10px;
text-align: right;
}
.right_part a {
line-height: 10x;
color: rgb(255,200,0);
vertical-align:middle;
text-align:right;
text-decoration:none;
padding: 25px;
}
#contents, #footer {
background:#fff;
width:1024px;
padding:20px;
padding-top:5px;
}
#contents {
margin:15px auto 0;
border: 5px solid black;
border-bottom: 0;
border-radius: 15px 15px 0 0;
/*box-shadow: 6px 6px 4px 4px #000;*/
box-shadow: 10px 15px 5px #888888;
min-height: 550px;
background-color:#F0F7FF;
}
#footer {
background-color: rgb(255,200,0);
border-radius: 0 0 15px 15px;
/*box-shadow: 6px 6px 4px 4px #000;*/
box-shadow: 10px 10px 5px #888888;
border: 5px solid black;
border-top:1px dashed #000;
color:#000;
margin:0 auto 40px;
}
.bigHead {
font-size: 2em;
margin-top: 0px;
margin-bottom: 10px;
margin-right: 22px;
}
.littleNavi {
font-size: 1em;
}
</style>
</head>
<body>
<div id="logo">
<div class="left_part">
<img src="demo.gif">
</div>
<div class="right_part">
<div class="bigHead">Comic Subscription Management</div>
<div class="littleNavi">CONTACT US - FAQ - ABOUT</div>
</div>
</div>
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
<div id="contents">
<h2>Hello ladies and gentlemen!</h2>
</div>
<div id="footer">
Text here
</div>
</body>
</html>
Add position: absolute; to nav and margin:45px auto; to #contents
The problem seems to be that the <nav> is not clearing the floated list items.
Add overflow:hidden; to your <nav> element, and the problem should be resolved. overflow:hidden; will force a container to expand to the height of its floated children.
Related
This is my nav:
a{
text-decoration:none;
color:black;
}
nav{
display:inline;
margin:auto;
margin-bottom:0;
padding:0;
background-color:white;
border: 1px solid white;
border-radius:12px;
}
nav > ul{
list-style-type:none;
display:inline;
}
nav > ul > li{
display:inline;
font-size: 20px;
font-weight: 200;
border:2px solid transparent;
border-bottom: 2px solid #078930;
margin-right:2%;
}
<nav>
<img src='http://www.gymnasium-allermoehe.de/Bilder/Frankreich/Flagge.jpg' style='width:75px;height:50px;border-radius:12px 0px 0px 12px;'>
<ul>
<li class='info'><a href='http://manuel03.bplaced.net/guyane/index.html'>Info</a></li>
<li class='nature'><a href='http://manuel03.bplaced.net/guyane/nature.html'>Nature</a></li>
<li class='cayenne'><a href='http://manuel03.bplaced.net/guyane/cayenne.html'>Cayenne</a></li>
<li class='kourou'><a href='http://manuel03.bplaced.net/guyane/kourou.html'>Kourou</a></li>
</ul>
<img src='http://paradiseintheworld.com/wp-content/uploads/2012/02/french-guiana-flag.png' style='width:75px;height:50px;border-radius:0px 12px 12px 0px;'>
</nav>
The problem is that the nav has always 100% width of it's parent tag.
I cant specify a width, because I work with percent and images.
So what can I do that the nav takes only the space it needs?
The ul is has a lower height than the images.
As you mentioned in comments, I suppose you're trying to vertically align middle img and ul elments. If so, you should add vertical-align: middle; to those elements, like so:
a{
text-decoration:none;
color:black;
}
nav{
display:inline;
margin:auto;
margin-bottom:0;
padding:0;
background-color:white;
border: 1px solid white;
border-radius:12px;
}
nav img {
vertical-align: middle;
}
nav > ul{
list-style-type:none;
display:inline;
vertical-align: middle;
}
nav > ul > li{
display:inline;
font-size: 20px;
font-weight: 200;
border:2px solid transparent;
border-bottom: 2px solid #078930;
margin-right:2%;
}
<nav>
<img src='http://www.gymnasium-allermoehe.de/Bilder/Frankreich/Flagge.jpg' style='width:75px;height:50px;border-radius:12px 0px 0px 12px;'>
<ul>
<li class='info'><a href='http://manuel03.bplaced.net/guyane/index.html'>Info</a></li>
<li class='nature'><a href='http://manuel03.bplaced.net/guyane/nature.html'>Nature</a></li>
<li class='cayenne'><a href='http://manuel03.bplaced.net/guyane/cayenne.html'>Cayenne</a></li>
<li class='kourou'><a href='http://manuel03.bplaced.net/guyane/kourou.html'>Kourou</a></li>
</ul>
<img src='http://paradiseintheworld.com/wp-content/uploads/2012/02/french-guiana-flag.png' style='width:75px;height:50px;border-radius:0px 12px 12px 0px;'>
</nav>
Why not simply use Flexbox...use inline-flex for the nav and flex for the ul
a {
text-decoration: none;
color: black;
}
nav {
display: inline-flex;
margin: auto;
margin-bottom: 0;
padding: 0;
background-color: white;
border: 1px solid white;
border-radius: 12px;
}
nav>ul {
list-style-type: none;
display: flex;
padding: 0;
margin: 0;
align-items: center;
background: #efefef;
}
nav>ul>li {
font-size: 20px;
font-weight: 200;
border: 2px solid transparent;
border-bottom: 2px solid #078930;
margin: 0 5px;
}
<nav>
<img src='http://www.gymnasium-allermoehe.de/Bilder/Frankreich/Flagge.jpg' style='width:75px;height:50px;border-radius:12px 0px 0px 12px;'>
<ul>
<li class='info'><a href='http://manuel03.bplaced.net/guyane/index.html'>Info</a></li>
<li class='nature'><a href='http://manuel03.bplaced.net/guyane/nature.html'>Nature</a></li>
<li class='cayenne'><a href='http://manuel03.bplaced.net/guyane/cayenne.html'>Cayenne</a></li>
<li class='kourou'><a href='http://manuel03.bplaced.net/guyane/kourou.html'>Kourou</a></li>
</ul>
<img src='http://paradiseintheworld.com/wp-content/uploads/2012/02/french-guiana-flag.png' style='width:75px;height:50px;border-radius:0px 12px 12px 0px;'>
</nav>
I have a menu bar which is the header for my web application i have taken a label to bind the username who is getting logged in and a button logout the problem is my label and the button should be in the menu bar only though they are in the menu but the button logout can be clearly seen that it is getting seperated from menu i need to place button to the right and the label to the left of the button.How can i do this.
Below is my css code
/*---Reset----*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,block
{
padding: 0;
margin: 0;
}
/*body*/
body {
background-color:rgb(237,237,237);
font-family:"Arial",Helvetica,sans-serif;
font-size: 12px;
}
/*Page*/
.wrapper {
width:1430px;
margin:auto;
}
/*Home Page*/
.content {
width:100%;
background-color:rgb(254,254,254);
border:1px solid rgb(224,224,224);
border-radius:5px 5px 5px 5px;
float:left;
margin-top:8px;
margin-bottom:8px;
min-height:600px;
}
/*Menu*/
.menu {
background-color: rgb(10,110,178);
width: 100%;
margin: 0px 0px 10px;
padding: 0px;
height: 40px;
color: rgb(243,243,243);
border-radius: 5px 0 0 5px;
}
.navigation_first_item {
border-left: 0px;
border-radius: 5px 0 0 5px;
}
.navitem_s {
float: left;
border-right: 1px solid rgb(10,85,125);
border-left: 1px solid rgb(67,153,200);
height: 40px;
background-color: rgb(14,79,114);
}
.menu ul {
}
.menu ul li {
float:left;
display:block;
list-style:none;
border-right:1px solid rgb(10,85,125);
border-left:1px solid rgb(67,153,200);
}
.menu ul li.navigation_first_item:hover {
border-radius:5px 0px 0px 5px;
}
.menu ul li a {
font-size:13px;
font-weight:bold;
line-height:40px;
padding:8px 20px;
color:rgb(255,255,255);
text-decoration:none;
}
.menu ul li:hover {
background-color: rgb(14,79,114);
border-right: 1px solid rgb(14,89,130);
}
.clear {
clear: both;
}
/*Footer*/
.footer {
height: 50px;
background-color: rgb(10,110,178);
color: rgb(255,255,255);
border-radius: 5px 5px 5px 5px;
}
.footer h2 {
padding: 15px;
text-align: center;
}
For css code you could do
*
{
padding: 0;
margin: 0;
}
instead of
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,block
{
padding: 0;
margin: 0;
}
Also, it seems like you are asking about how to set the placement of your radio buttons. Create an id or class (which you seem to have done) and use the css to place before the labels.
I am a bit confused on your question and what you are asking though.
Update:
<div style="float: left;text-align:right; width: 45%;"> <asp:Button ID="Logout" runat="server" OnClick="Logout_Click" Text="Logout" Height="41px" Width="60px" style="font-weight:bold;background-color:rgb(10,110,178);float:right;color:white"/><li id="Logout" runat="server"><a href="logout.aspx" id="Rpf" runat="server">Logout</li> </div>
I'm a bit new to HTML/CSS and I'm having some trouble with creating properly positioning elements inside my navigation bar.
My li elements are overflowing out of the bar.
This is my code atm:
HTML
<body class="body">
<div class="navbar">
<ul class="pull-left">
<li>Home</li>
<li>News</li>
<li>About</li>
</ul>
<ul class="pull-right">
<li>Login</li>
<li>Sign Up</li>
<li>Support</li>
</ul>
</div>
<div class="jumbotron">
</div>
CSS
.body {
border: solid red 3px;
margin: 0px
}
.navbar {
background-color: #99CCFF;
border:3px solid green;
display:block;
}
.navbar ul{
display:inline;
font-family: Arial;
}
.navbar ul li{
color:white;
display:inline-block;
border: solid black 1px;
margin: -6px 10px 0px 10px;
padding: 5px;
background-color: #0099FF;
text-transform: uppercase;
transition: background-color 0.5s;
}
.navbar ul li:hover{
background-color: black;
}
.navbar ul li a{
text-decoration:none;
display: block;
}
.jumbotron {
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
height: 600px;
}
.pull-left {
float:left;
padding-left: 10px;
}
.pull-right {
float:right;
padding-right: 10px;
}
JSFIDDLE
How do I make my buttons stay inside the navbar and expand it automatically?
I looked through a lot of similar posts and tried a couple of things, however I couldn't quite get it to work.
The reason is you must specify overflow property.
Here you must specify overflow:auto; with height:auto;(optional as it's default even if not specified)
CSS
.navbar {
background-color: #99CCFF;
border:3px solid green;
display:block;
height:auto /* Not mandatory as is default if not specifed */
overflow:auto;
}
Fiddle
Html file is this
<body class="body">
<div class="navbar">
<ul class="pull-left">
<li>Home</li>
<li>News</li>
<li>About</li>
</ul>
<ul class="pull-right">
<li>Login</li>
<li>Sign Up</li>
<li>Support</li>
</ul>
<div class="clearBoth"></div>
</div>
<div class="jumbotron">
</div>
</body>
Css is this
.body {
border: solid red 3px;
margin: 0px
}
.navbar {
background-color: #99CCFF;
border:3px solid green;
display:block;
/*height:25px;*/
}
.navbar ul{
display:inline;
font-family: Arial;
}
.navbar ul li{
color:white;
display:inline-block;
border: solid black 1px;
margin: -6px 10px 0px 10px;
padding: 5px;
background-color: #0099FF;
text-transform: uppercase;
transition: background-color 0.5s;
}
.navbar ul li:hover{
background-color: black;
}
.navbar ul li a{
text-decoration:none;
display: block;
}
.jumbotron {
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
height: 600px;
}
.pull-left {
float:left;
padding-left: 10px;
}
.pull-right {
float:right;
padding-right: 10px;
}
.clearBoth{clear: both;}
I'm trying to create a basic drop-down menu. Whenever I however over "blog", the "wiki" link seems to get dragged into it.
Here's a screenshot to show what I mean:
As you can see, "wiki" is below "march". I want to have "march" drop down from "blog" and keep "wiki" along the green line.
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius: 15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header ul ul {
display: none;
}
#header ul li:hover > ul {
display: block;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
padding: 2px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here's a JSFiddle.
So I cleaned up the css and it seems to work now.
Here is your html below
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here is the new css below:
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius:15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
#header ul a
{
text-decoration:none;
font-weight:700;
line-height:32px;
padding:0 15px;
}
#header ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#header ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
padding:0
}
#header ul li:hover > ul
{
display:block
}
Be sure to compare to see the differences between your css and my css. If this is is not what you wanted please get back to me.
I have attached a picture so you can see what kind of problem I am receiving. I want the navigation menu to line up with the navigation container so they appear as the same element. The picture shows the last element of the navigation menu "E-MAIL" and then the container that it sits within is just a yellow strip (as indicated in the code below).
I have tried working with negative margins on the navigation container but no solution as of yet.
web graphic http://jaylefler.com/webgraphic.png
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
#logo {
background-color: black;
width: 100%;
color: rgb(255,200,0);
}
#logo img {
padding: 10px;
}
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
#navMenu {
width: 760px;
height: 30px;
background-color:rgb(255,200,0);
border:1px #000 solid;
font-weight:bold;
margin-left: -2px;
}
#navMenu ul{
margin:-1px 0 0 0;
padding:0;
line-height:32px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
position:relative;
background-color:rgb(255,200,0);
float:left;
border:1px #000 solid;
}
#navMenu ul li a{
text-align:center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top: 31px;
margin-left: -2px;
}
#navMenu ul li:hover ul{
visibility: visible;
}
#navMenu a:hover {
background-color:#000;
color:rgb(255,200,0);
}
.left_part {
background:black;
}
.right_part {
background:yellow;
float:right;
white-space:nowrap;
display:inline;
text-overflow:ellipsis;
overflow:hidden;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
</style>
</head>
<body>
<div id="logo">
<div class="left_part">
<img src="demo.gif">
</div>
<div class="right_part">
</div>
</div>
<div id="navContainer">
<div id="navMenu">
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
</div>
</div>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>
#navmenu {
width: 760px;
height: 30px;
background-color: #FFC800;
border: 1px black solid;
border-top: 0; /* REMOVE TOP BORDER */
margin-left: -2px;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
height: 30px; /* MATCH HEIGHT */
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
I did a little cleanup. Since I don't have your logo image i removed that part of the code, I guess you will manage to add that yourself.
Here is a simplified code that fixes your problem:
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
padding: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
nav {
width: 100%;
height: 30px;
background-color:rgb(255,200,0);
border-bottom:1px solid #000;
}
nav ul{
padding:0;
margin: 0;
overflow: hidden;
}
nav > ul{
min-width: 755px;
}
nav ul li{
float: left;
margin:0;
padding:0;
list-style:none;
background-color:rgb(255,200,0);
border-right:1px solid #000;
}
nav ul li a{
text-align:center;
text-decoration:none;
width:150px;
height: 25px;
padding-top: 5px;
display:block;
color:#000;
}
nav ul li ul{
position:absolute;
visibility:hidden;
top: 31px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
margin-left: -1px;
}
nav ul li:hover ul{
visibility: visible;
}
nav ul li ul li {
float: none;
}
nav a:hover {
background-color:#000;
color:rgb(255,200,0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>