I was playing around with a little nav menu and pseudo elements and I was wondering why the tiny light orange square I have created displays on the first child element but not the other elements when it is copied over and put in the nth-child(2).
body {
margin: 0;
}
* {
margin: 0;
padding: 0;
}
#orangeNavBar {
height: 45px;
width: 627px;
background-color: #E87966;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
ul {
list-style: none;
}
ul li {
float: left;
font-family: times new roman;
font-size: 1.1em;
font-weight: bold;
color: black;
height: 45px;
box-sizing: border-box;
padding: 10px 20px;
border: 1px solid black;
}
ul li:first-child::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
ul li:nth-child(2)::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
<div id="orangeNavBar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
Because
ul li:nth-child(2)::after
only selects the second item
You need
ul li:nth-child(n+2)::after
so each child after the first one is selected.
body {
margin: 0;
}
* {
margin: 0;
padding: 0;
}
#orangeNavBar {
height: 45px;
background-color: #E87966;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
ul {
list-style: none;
}
ul li {
float: left;
font-family: times new roman;
font-size: 1.1em;
font-weight: bold;
color: black;
height: 45px;
box-sizing: border-box;
padding: 10px 20px;
border: 1px solid black;
}
ul li:first-child::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
ul li:nth-child(n+2)::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
<div id="orangeNavBar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
Related
I am trying to create a Navigation Menu with dropdown sub-menus. When I am trying to change "display" property from "None"to "Block" for Nested it is not working. Here below is code.
In the Code I have created Main Navigation Menu under with class="nav". and dropdown required on hover over elements in nav class.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS</li>
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
Use !important in this style because your styles applied on id(which has highest priority in CSS) are not getting overridden by your style.
.nav>ul>li:hover ul {
display: block !important;
}
Also incase of products. the ul was not inside the li element.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block !important;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
OR
Change your id to class in case of products and services and your code will work without important as well.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
.products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
.products li {
padding: 9px 0px;
}
.services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
.services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul class="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul class="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
This is an issue of specificity: you set the display: none; on an id selector, which has very high specificity, but set display: block; on a very low specificity selector: the descendant selector. The id will override that selector no matter where they show up in the cascade. Consider abstracting your display:none to only be a descendant selector (removing that property from #products, etc.), and it should work fine:
.nav>ul>li ul{
display: none;
}
Some helpful reading:
https://www.w3schools.com/css/css_combinators.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Navigation Menu with dropdown sub-menus
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
.products {
list-style-type: none;
width: 100px;
height: 150px;
position: absolute;
top: 165px;
right: 206px;
background-color: #f9f9f9;
margin: 0px;
padding: 10px 10px;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
}
.products li {
color: black;
padding: 9px 0px;
background-color: white;
}
.products li:hover {
background-color: #ddd;
}
.services {
list-style-type: none;
width: 100px;
height: 147px;
position: absolute;
top: 165px;
right: 85px;
background-color: #f9f9f9;
margin: 0px;
padding: 10px 10px;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
}
.services li {
color: black;
padding: 9px 0px;
background-color: white;
}
.products li:hover {
background-color: #ddd;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
I would remove the display: none from the services and products css because IDs have high specificity and will override other rules. While !important might temporarily solve this issue, I would not rely on !important as it could cause more issues later on.
You can declare a non-hovered rule with display: block alongside your current hovered rule.
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li ul {
display: none;
}
.nav>ul>li:hover ul {
display: block;
}
</style>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
I was wondering but I have been spending a lot of time trying to find a way to make my li from my ul stretch across but I seem not to be able to do it. It's very similar to the nav bar of This website and This website.I am asking if someone can help me with this.
Thank you. Best I can provide is a basic nav hover bar
.dropdown-btn {
width: 100%;
height: 50px;
background: white;
line-height: 50px;
display: none;
}
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
margin-bottom: 1px;
position: sticky;
top: 0;
padding: 0px 0px;
border: none;
}
ul {
text-indent: 0px;
}
nav:hover {
height: 50px;
}
.navbar-tab {
display: block;
}
.hover-list {
position: absolute;
}
.navbar-tab-1 {
background: #d60d8c;
float: left;
border: none;
}
.navbar-tab-1+.navbar-tab-1 {
border-bottom: none;
}
.hover-list {
border-top: black 3px solid;
}
.navbar-tab {
padding-left: 20px;
display: block;
}
.navbar-tab {
max-width: 1240px;
}
.navbar-tab-1 {
padding-right: 68px;
width: auto;
}
.hover-list li {
background-color: #e2e2e2;
border-bottom: 1px white solid;
font-size: 15px;
text-indent: 20px;
height: 35px;
line-height: 35px;
width: 100vw;
border-top: none;
float: left;
}
ul li ul li {
display: block;
}
ul li {
font-size: 19px;
}
ul {
padding: 0px;
list-style: none;
font-family: arial;
margin: auto;
}
.navbar-tab-1:hover {
color: black;
transition-duration: .2s;
}
ul li {
font-family: 'Raleway', sans-serif;
font-weight: 400;
line-height: 50px;
list-style: none;
}
ul li a {
text-decoration: none;
color: black;
}
ul li ul li{
display: none;
transition-duration:
}
.hover-list li:hover{
background-color: #f5f5f0;
transition-duration: .2s;
}
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Test1</li>
<li class="navbar-tab-1 select">
Test2
<ul class="hover-list select">
<li>Item1</li>
</ul>
</li>
</ul>
</nav>
Maybe something you are looking for
body {
margin:0;
}
.dropdown-btn {
width: 100%;
height: 50px;
background: white;
line-height: 50px;
display: none;
}
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
margin-bottom: 1px;
position: sticky;
top: 0;
padding: 0px 0px;
border: none;
}
ul {
padding-left: 0;
position: relative;
list-style: none;
margin-bottom: 0;
}
nav:hover {
height: 50px;
}
.navbar-tab {
display: block;
}
.hover-list {
position: fixed;
max-height: 0;
transition: max-height 1s;
padding: 0;
width: 100vw;
overflow: hidden;
left: 0;
top: 66px;
}
.hover-list > li {
width: 100%;
}
.navbar-tab-1 {
background: #d60d8c;
float: left;
border: none;
}
.navbar-tab-1+.navbar-tab-1 {
border-bottom: none;
}
.navbar-tab {
padding-left: 20px;
display: block;
}
.navbar-tab {
max-width: 1240px;
}
.navbar-tab-1 {
padding-right: 68px;
width: auto;
}
.hover-list li {
background-color: #e2e2e2;
border-bottom: 1px white solid;
font-size: 15px;
text-indent: 20px;
height: 35px;
line-height: 35px;
border-top: none;
float: left;
}
ul li ul li {
display: block;
}
ul li {
font-size: 19px;
}
ul > li:hover ul {
max-height: 500px;
}
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Test1</li>
<li class="navbar-tab-1 select">Test2
<ul class="hover-list select">
<li><a>Item1</a></li>
</ul>
</li>
</ul>
</nav>
I'm trying to center the text in my navbar and my social links too, but I just can't. I've searched on google, tried everything, it doesn't work. I'm a beginner btw. I've tried every solution I've found on google for about 1hr and all I did is getting mad. damn
I don't get it. In the snippet everything works fine, it is centered as I want. But in my PC, it looks like this: pic
Can you explain to me why does it happen?
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
width: 100%;
margin: 0;
}
#bara-wrap {
position: absolute;
top: 0;
width: 100%;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 45em;
float: left;
}
.social {
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
</nav>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</div>
</header>
Remove the butoane class and copy the posted right now css file and paste it into your css file....
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
img{
margin-top: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul li {
margin-top: 25px;
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
use this one i made some changes in your html and css.
html
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</nav>
</div>
</header>
css
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
I'm trying to design my nav (4 items in total) to be in circles each spaced about 20 px apart, located on the top right of my screen. I got everything to "work" design wise, however, now that every nav item appears how I want it (in its own a circle), when I go to have them all positioned on the upper right the first 3 nav items have disappeared and only the 4th nav item is visible. Please help!
HTML:
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
CSS:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: absolute;
top: 50px;
right: 100px;}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}
What about this:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 120px;
float: left;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
Try:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}
It's because your navbutton elements have position: absolute so they overlap each other, i.e. only the last one is visible.
Try this snippet:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 20px;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
If you want the navigation to be in the top right corner of the page use this CSS:
#nav {
position: absolute;
top: 0;
right: 0;
}
#nav li {
display: inline-block;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 100px;
margin: 20px;
}
#nav{
position:absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
margin: 20px;
float:left;
}
I have been trying to days now to get this website completed ... however, when viewing it in IE (compatibility mode) the header is all messed up. :(
The website is here: http://nageela.einfal.com/
This is actually the first design I've converted into a Wordpress theme, so it's been very challenging.
If anyone has any suggestions, I'd really appreciate it, I've grown so very frustrated with this! I'm not an IE user myself, though the client is it seems.
Thanks,
Jennifer
Your layout breaks mostly because of positioning issues in IE7 (and IE6). See the attached css, the lines I have changed is marked /*FIXED*/.
/*
Theme Name: Camp Negeela
Author: Mafiakitty Web Design & Development
Author URI: http://www.mafiakitty.com/
Description: Custom Theme
Version: 1.0
Tags: custom, canada, mafiakitty, design, creative
*/
* {
margin: 0;
padding: 0;
outline: none;
}
a:link, a:visited, a:active {
color: #630001;
}
a:hover {
color: #134077;
}
html, body {
height: 100%;
}
body {
background-color: #f7921e;
font-family: Verdana, Arial, Helvetica, san-serif;
font-size: 12px;
color: #666;
line-height: 1.8;
}
.newcampers {
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/campers.png);
width: 518px;
height: 19px;
margin-left: 58px;
cursor: default;
top: 230px;
position: absolute;
}
.bed {
background-color: #e4e2d6;
margin: 0 auto 0 auto;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
}
#wrapper {
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
}
.floatleft {
float: left;
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/left.png);
margin-top: 0;
width: 43px;
height: 182px;
margin-left: 1px;
position: absolute; /* FIXED */
}
.floatright {
float: right;
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/leaves-top.png);
background-repeat: no-repeat;
margin-top: 0;
width: 488px;
height: 334px;
right: -10px;
position: absolute;
}
.photo {
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/photo.png) no-repeat;
width: 275px;
height: 263px;
margin-right: 62px;
margin-top: 50px;
position: absolute; /* FIXED */
right: 0;
}
.board {
float: right;
background: url(http://nageela.einfal.com/wp-content/themes/nageela//img/bg.png);
margin-top: -10px;
width: 379px;
height: 500px;
}
.board div.video {
float: right;
background: url(http://nageela.einfal.com/wp-content/themes/nageela/video.png);
background-repeat: no-repeat;
width: 62px;
height: 108px;
margin-top: 207px;
margin-right: 175px;
}
.board a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
.board div.free {
float: right;
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/free.png);
background-repeat: no-repeat;
width: 141px;
height: 74px;
margin-top: -215px;
margin-right: 135px;
}
.board div.pic {
float: right;
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/pic.png);
background-repeat: no-repeat;
width: 61px;
height: 13px;
margin-top: 136px;
margin-right: 272px;
}
.board div.sign {
float: right;
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/sign.png);
background-repeat: no-repeat;
width: 138px;
height: 46px;
margin-top: -203px;
margin-right: 15px;
}
#header {
height: 262px;
background: #e4e2d6 url(http://nageela.einfal.com/wp-content/themes/nageela/img/hdbg.jpg);
margin-top: 0;
padding: 0;
}
/*FIXME*/
a.logo {
width: 570px;
height: 76px;
margin-top: 37px;
margin-left: 0px;
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/logo.png);
position: absolute;
float: left;
left: 55px; /* FIXED */
}
a.logo span {
display: none;
}
#content {
width: 520px;
float: left;
margin-left: 24px;
padding-top: 5px;
clear: both;
padding-left: 10px;
/*margin-top: -52px; FIXED*/
display: inline;
}
.post {
width: 520px;
margin-bottom: 50px;
margin-top: 0px;
}
.post h2 a {
color: #24446b;
font-weight: normal;
text-decoration: none;
font-size: 24px;
}
.post span.post-info {
color: #CCCCCC;
font-size: 10px;
padding-bottom: 10px;
width: 560px;
float: left;
}
.post p {
line-height: 22px;
margin-bottom: 10px;
}
.post div.cats {
border-top: 1px solid #ececec;
padding-top: 10px;
}
#sidebar {
width: 379px;
float: right;
margin-right: 0px;
}
#footer {
clear: both;
width: 960px;
height: 350px;
background: #e4e2d6 url(http://nageela.einfal.com/wp-content/themes/nageela/img/footer.jpg);
margin-bottom: 0px;
padding: 0px;
margin-left: 0px;
}
/*
.comments template styles
*/
.comments {
float: left;
padding: 0;
}
.comments input[type=text], textarea {
width: 350px;
}
textarea {
width: 450px;
}
.comments fieldset {
padding: 20px;
border: 1px solid #CCC;
margin: 10px 0 20px 0;
}
.comments p {
padding: 0 0 10px 0;
}
.comments h2 {
padding: 0 0 15px 0;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
img.avatar {
float: right;
}
.newspaper {
float: right;
background: url(img/newspaper.png) bottom;
background-repeat: no-repeat;
width: 382px;
height: 350px;
padding-bottom: 0px;
margin: 0px;
}
.inner {
width: 382px;
height: 300px;
text-align: center;
margin-bottom: 0px;
padding-bottom: 0px;
}
#dropmenu, #dropmenu ul {
top: -80px;
list-style-type: none;
list-style-position: outside;
position: relative;
line-height: 1.5em;
z-index: 200;
width: 100%;
font-weight: bold;
}
#dropmenu {
position: absolute;
top: 180px;
}
#dropmenu a {
display: block;
padding: 0.25em 1em;
color: #f7921e;
text-decoration: none;
}
#dropmenu a:hover {
background: #711a19;
color: #fff;
}
#dropmenu li {
float: left;
position: relative;
}
#dropmenu ul {
position: absolute;
display: none;
width: 12em;
top: 1.9em;
left: -1px;
}
#dropmenu ul a {
border-left: 1px solid #c8c8c8;
background: #10253a;
}
#dropmenu li ul {
border-top: 1px solid #c8c8c8;
width: 14.1em;
}
#dropmenu li ul a {
width: 12em;
height: auto;
float: left;
border-bottom: 1px solid #c8c8c8;
}
#dropmenu ul ul {
top: auto;
}
#dropmenu li ul ul {
left: 12em;
margin: 0px 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
display: none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
display: block;
}
#contact-area {
width: 300px;
margin-left: 320px;
float: right;
position: absolute;
bottom: 40px;
}
#contact-area input, #contact-area textarea {
background-color: #61502c;
padding: 1px;
width: 125px;
font-family: Helvetica, sans-serif;
font-size: 1.2em;
margin: 5px 0px 5px 0px;
border: 2px solid #61502c;
color: #372d24;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #630001;
}
#contact-area input.submit-button {
width: 61px;
height: 13px;
float: right;
background: url(img/submit.png) 0 0 no-repeat;
border: 0px;
cursor: pointer;
text-indent: -9999px;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.2em;
color: #e4e2d6;
}
#contact-area .formin {
background: url(img/form.png);
width: 137px;
height: 37px;
position: absolute;
top: -53px;
left: 50px;
}
.contactin {
background: url(img/contact.png);
width: 270px;
height: 39px;
position: absolute;
top: -54px;
margin-left: -258px;
}
.contactin p {
float: left;
margin: 18%;
border: 0px ;
width: 80%;
display: inline;
font-family: Helvetica, sans-serif;
font-size: 1.2em;
line-height: 2.2;
color: #ffffff;
}
.contactin a:link {
color: #f6d60b;
}
/* rotator in-page placement */
div#rotator {
height: 245px;
position: absolute; /* FIXED */
left: 640px; /* FIXED */
top: 65px; /* FIXED */
}
/* rotator image style */
div#rotator ul li img {
border: 1px solid #ccc;
padding: 4px;
background: #FFF;
}
/* rotator css */
div#rotator ul li {
float: right;
position: absolute;
list-style: none;
}
div#rotator ul li.show {
z-index: 500
}