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;
}
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class = "wrapper">
<header>
<div class = "CentralHeader">
<div class = "LinkBar" id = "HeaderBar" >All</div>
<div class = "SampleMenu">
<ul>
<li>Movies</li>
<li>Events</li>
<li>Sports</li>
<li>Plays</li>
</ul>
</div>
</div>
</header>
<main>
<div class = "main">
<div class = "TopMovies" >
</div>
<div class = "JustForYou">
</div>
</div>
</main>
</div>
</body>
<style type="text/css">
.wrapper{
height: 100vh;
display: flex;
flex-direction:column;
}
header{
height: 400px;
border-bottom: 4px solid beige;
}
main{
flex:1
}
.LinkBar {
cursor: pointer;
width: 140px;
height: 37px;
border: 1px solid #c02c3a;
margin-top: 50px;
margin-left: 300px;
background-color: #c02c3a;
text-align: center;
padding-top: 9px;
color: white;
display: inline-block;
}
div.SampleMenu ul {
list-style-type: none;
width: 140px;
background-color: Grey;
margin-left: 300.5px;
padding: 0;
margin-top: 0px;
display: none;
border-top: 2px solid #fff;
}
div.SampleMenu ul li {
color: White;
padding: 0;
}
div.SampleMenu ul li a {
color: white;
display: block;
padding: 10px;
font-size: large;
text-align: center;
}
#HeaderBar:hover~.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
}
.main{
width:auto;
height: 500px;
border:2px groove red;
}
</style>
</body>
</html>
In the above segment,the container space of "header" is altered on hovering the LinkBar.On hovering ,the dropdown is displayed with the mentioned height for the header but in normal state,header height is decreased.When the CSS property for the wrapper tag is removed ,the functionality i.e container space for header is available as mentioned in CSS (400px).What is causing the height of the header to be dynamic?
If you want the menu to overlap the header, you need to add "position: absolute;" to the menu (div.SampleMenu ul in your case to be specific) and "position: relative;" to the header.
You should read more about the ways of positioning and how they interact with each other.
So I know the file path is right as chrome tools show me its all valid, I just can't see the image. I am assuming I have missed something really obvious.
The intention is the spacer class divs are opaque as a result you will see a nice image of Rome at the back of the site which will reappear each time div class spacer is reached.
CSS
header {
width: 100%;
height: 100px;
background-color: black;
color: grey;
position: absolute;
}
body {
margin: 0;
}
.parallax {
background-image: url("rome.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content{
width: 100%;
height: 300px;
background-color: black;
}
.spacer {
width:100%;
height:250px;
opacity: 0.2;
}
#logo{
float: left;
margin-left: 25px;
font-size: 30px;
margin-top: 35px;
}
#menu ul li {
color: white;
display:inline;
font-size: 25px;
float: right;
padding-right: 30px;
padding-left: 0px;
margin-top: 35px;
list-style-image: none;
}
li a:hover {
color: white;
}
a:link, a:visited {
color: Grey;
text-decoration: none;
}
#media (max-width: 732px) {
#menu ul li {font-size: 12px;
}
#logo { font-size: 15px;
margin-top: 40px;
margin-left: 10px;
}
}
#media (min-width: 946px) {
li {font-size: 12px;
}
ul {
margin-right: 45px;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name = "viewport" content= "width=device-width">
<meta name = "keywords" content = "web design, mobile website, affordable design, professional website">
<meta name = "autor" content = "Simon Dean">
<title>Spartan Design</title>
<link rel = "stylesheet" href="./css/style.css">
</head>
<body>
<header>
<h1 id = "logo"> Spartan | Design </h1>
<nav id = "menu">
<ul>
<li> Contact Us </li>
<li> Portfolio </li>
<li> Home </li>
</ul>
</nav>
</header>
<div class="parallax"></div>
<div class = "spacer">
</div>
<div class = "content">
Shity shity shit
</div>
<div class = "spacer">
</div>
</body>
</html>
I am going through a tutorial right now but for some reason my code (even though it looks the same) it won't display correctly. I was hoping someone could explain why the header doesn't display black across the top and the image won't auto size.
<html>
<head>
<title> Englightenment Web Site </title>
<style type = "text/css">
* {margin: 0; padding: 0;}
body {
font-family: arial;
background-color: #ebebeb;
}
#header {
background-color: black;
height: 100px;
width: 100px;
}
.container {
width: 960px;
height: auto;
margin: 0 auto;
}
#logoArea {
width: 300px;
height: 100px;
background-image: url(tree.jpg);
float: left;
}
#navArea
{
height: 100px;
float: right;
}
#nav
{
list-style: none;
margin-top: 30px;
}
#nav a
{
color: white;
text-decoration: none; /*removes underline*/
}
#nav li
{
float: left;
margin-left:30px;
background-color: #252525;
padding: 8px;
bording: 1px solid silver;
border-radius: 5px;
}
#nav li:hover
{
background-color: gray;
}
.page
{
background-color: white;
padding: 20px;
}
</style>
</head>
<body>
<div id = "header">
<div class = "container">
<div id = "logoArea"></div>
<div id = "navArea">
<ul id = "nav">
<li> Home </li>
<li> Forum </li>
<li> Enlightener </li>
<li> Contact </li>
</ul>
</div>
</div>
</div>
<div id = "mainArea">
<div class = "container page">
<h3> One Can't Understand without First Listening </h3>
</div>
</div>
</body>
</html>
So I resized the original image to fix the size of my css format for the logo. It now works. Guess you need an exact pic size initially? Seems a little off but oh well I got it to fix.
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 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.