I have the following page (which is reduced and modified from ASP.NET MVC default project):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
body
{
background-color: #fff;
font-size: 62.5%;
margin: 0;
padding: 0;
}
.page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
#header
{
position: relative;
padding: 0;
}
#header h1
{
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #000;
border: none;
line-height: 2em;
}
/* TAB MENU
----------------------------------------------------------*/
#menu
{
clear: both;
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#menu *
{
margin: 0;
padding: 0;
}
#menu ul
{
list-style: none;
width: 12em;
float: left;
}
#menu li
{
position: relative;
background-color: #fff;
border: solid 1px #fff;
}
div#title
{
display: block;
float: left;
text-align: left;
}
</style>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
test</h1>
</div>
<br />
<div id="menu">
<ul>
<li>Menu1</li>
</ul>
<ul>
<li>Menu2</li>
</ul>
<ul>
<li>Menu3</li>
</ul>
<ul>
</ul>
</div>
</div>
</div>
</body>
</html>
When I view it in FireFox, the list in #menu div shows up aligned with the header above flush against the left edge of .page div.
However, in IE6, the list inside #menu is indented. I have a suspicion that it's margin-left: auto that's being inherited by the list element.
How do I fix it so that the list is flush up against the left edge of the #menu div?
Change your class to not include position: relative, but add this to the top:
body * {
position: relative;
}
Change your li class to this:
#menu li
{
background-color: #fff;
border: solid 1px #fff;
}
So bascally just get rid of the position decleration.
Related
I'm just getting back into Web Development and so I'm working on stretching those muscles again. What I wanted to achieve was a Header on top of my vertical menu with the Initials in the background and the full name in the middle of those initials. I was able to do that with the code in codepen, however it quickly becomes broken when resizing the window. I know that is due in part to the position absolute. Is there another way to achieve this effect and have it be scalable, but stay within the lines of the nav?
http://codepen.io/anon/pen/OPPKmq
<html>
<head>
<title>Scottish Arts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<aside>
</aside>
<nav>
<h1 id="navSA">SA<h1>
<h1 id="sa">Socttish Arts</h1>
<ul>
<li><h3></h3></li>
<li>Home</li>
<li>Scottish Arts</li>
<li>Bagpipes</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,h2,h3 {
padding: 0;
margin: 0;
}
#body {
display: flex;
height: 100%;
}
aside {
width: 25px;
height: 100%;
background: url("img/nhtar.gif");
background-repeat: repeat;
border-right: 2px #000 solid;
}
nav {
height: 100%;
width: 15%;
background-color: #7E717A;
border-right: 4px #A2969E solid;
overflow: hidden;
}
nav #navSA {
font-weight: bolder;
text-align: center;
padding: 0;
margin: 0;
font-size: 8em;
color: #A2969E;
}
nav #sa {
padding: 0;
margin: 0;
position: absolute;
top: 60px;
left: 40px;
font-size: 2em;
text-shadow: 2px 2px #7E717A;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: right;
}
nav ul li a {
display: block;
padding: 5px;
background-color: #A2969E;
text-decoration: none;
font-size: 1.5em;
font-family: "Verdana";
font-weight: bold;
color: #fff;
border-bottom: 4px #7E717A solid;
}
nav ul li a:hover {
background-color: #372E34;
}
Giving absolute Position to a child that does not have relative parent , will set it's position relating to BODY .
add position:relative; to nav in css , and everything will be OK ;)
http://codepen.io/anon/pen/LEEwOd
I am trying set the height of the navigation div for my navigation menu.But I am unable to get why it is not adjusting according to the li tag height.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Journeycook</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<div class="wrapper">
<div class="header">
<div class="header-top">
<a href="#" class="logo">
<img src="logo.png" />
</a>
<div class="header-right">
<div class="call">
<img src="call.png" />
1-877-708-1505
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="navigation">
<ul>
<li>
Home
</li>
<li>
Flights
</li>
</ul>
</div>
</div>
</div>
<body></body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
img {
max-width: 100%;
}
a img {
outline: 0;
border: 0;
max-width: 100%;
}
.clearfix {
clear: both;
}
a img {
max-width: 100%;
}
ul, li {
list-style: none outside none;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 100%;
}
.wrapper .header {
margin: 0 auto;
width: 1024px;
}
.header-top {
margin: 3px 0;
}
.header-top a.logo {
display: block;
float: left;
height: 71px;
width: 215px;
}
.header-right {
float: right;
}
.call {
color: #ffc620;
font-size: 39px;
font-weight: bold;
margin-bottom: 10px;
text-align: right;
}
.header-right .call img {
vertical-align: top;
width: 48px;
}
.navigation {
background: #04498E;
border: 1px solid #002E73;
border-radius: 6px;
}
.navigation ul {
}
.navigation ul li {
border-right: 1px solid #1C61A6;
float: left;
}
.navigation ul li a {
color: #FFFFFF;
display: block;
padding: 10px 20px;
text-decoration: none;
}
.navigation ul li a:hover {
background: #ff8c04;
}
.navigation ul li .act {
background: #ff8c04;
}
please experts tell me where i am going wrong
thanks
The reason your navigation DIV is not adjusting to your ul is because of the float you put on it, use clear:both after the ul tag float so your nav div knows to adjust itself
You do not need to declare height on your navigation, if you do it will be fixed height
You have not specified the height for the navigation, simply change the following line and it will work fine:
.navigation { background: #04498E; border: 1px solid #002E73; border-radius: 6px; height:39px; }
got the solution :)
I forget to add clearfix div after ul tag here is the correct html for navigation div
<div class="navigation">
<ul>
<li>
Home
</li>
<li>
Flights
</li>
</ul>
<div class="clearfix">
</div>
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.
I have two links that are a part of my navigation bar that have drop downs. What I would like is a background image for each drop down;an image for fairies, a different image for craniums. I'm pretty close, I think, but I'm unsure as to how to set this up. After reading several posts, the post from Ryan Rahif on May 19 at 18:58 is pretty darned close to what I want. Do I need to create another hover div? Do I need to create a hover for each drop down?
thank u
<!Doctype HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fairies - Tabbed Dropdown</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>World of Fairies</li>
<li>Fairihabitants
<ul>
<li>Fairies</li>
<li class="cranlink">Craniums</li>
</ul>
</li>
<li>Fairi-bitats
<ul>
<li>Dreams</li>
<li>Tinkling Bells</li>
<li>Rain Drops</li>
</ul>
</li>
<li>Fairy Dust</li>
</ul>
</div><!--/#nav-->
</div><!--/#container-->
</body>
</html>
/* CSS Document - Stylesheet.css */
/* BODY AND CONTAINER
-------------------------------------- */
body {
font-size: 76%;
padding: 0px;
margin: 0px;
}
#container {
width: 650px;
padding: 0px;
margin: 0 auto 0 auto;
}
/* MAIN NAVIGATION
-------------------------------------- */
#nav {
float: left;
width: 650px;
height: 50px;
border-bottom: 2px solid #000;
padding: 0px;
margin: 100px 0 0 0;
}
#nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
padding: 0px;
margin: 0px;
}
#nav ul li a {
float: left;
width: 150px;
height: 50px;
background-image: url(../images/fairy-gate.jpeg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
line-height: 50px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 0px;
margin: 0 0 0 10px;
}
#nav ul li a:hover {
background-image: url(../images/bg-nav-hover.png);
background-repeat: repeat-x;
}
/* DROPDOWN MENU - MAIN NAVIGATION
-------------------------------------- */
#nav li ul {
display: none;
}
#nav li:hover ul {
width: 150px;
display: block;
visibility: visible;
position: relative;
top: 0px;
clear: both;
z-index: 1;
}
.cranlink {
background-image:url(../images/craniums.jpg);
Currently having an issue with getting the CSS to display a mockup page correctly. Attempted to do a two column page with a header, menu, left/right column and then the footer. Everything looks good except for the menu portion. The page displays correctly in internet explorer, but it shows a large gap between the start of the menu div and the ul on Firefox and Chrome. Below are my XHTML and CSS.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Template</title>
<link rel = "stylesheet"
type = "text/css"
href = "Layout.css" />
</head>
<body>
<div id = "all">
<div id = "head">
<p>Header</p>
</div>
<div id = "menu">
<ul>
<li>Home</li>
<li>Weapons</li>
<li>Characters</li>
<li>Collectables</li>
<li>Multiplayer</li>
</ul>
</div>
<div id = "left">
<p>Left Content</p>
</div>
<div id = "right">
<p>Content</p>
</div>
<div id = "footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
CSS
#all {
width: 800px;
margin-left: auto;
margin-right: auto;
}
#head {
background-color: black;
border: black solid 1px;
}
#menu {
width: 100%;
background-color: red;
float: left;
}
#menu ul {
margin-left: -2.5em;
}
#menu li {
list-style-type: none;
float: left;
width: 8em;
text-align: center;
border: black solid 1px;
}
#menu a {
display: block;
text-decoration: none;
color: white;
}
#menu a:hover {
background-color: yellow;
}
#left {
float: left;
width: 200px;
background-color: red;
min-height: 30em;
}
#right {
float: left;
width: 600px;
background-color: gray;
min-height: 30em;
}
#footer {
clear: both;
color: white;
background-color: black;
text-align: center;
min-height: 30px;
}
Update Your Ul style
From
#menu ul {
margin-left: -2.5em;
}
TO
#menu ul {
margin: 0;
padding: 0;
}