Make inner div match height of outer div - html

So I am developing a little forum and I ran into a little design problem. The sidebar in each post is supposed to match the height of the content (the text written) but the sidebar only goes to the height necessary to display everything and then stops.
JSFiddle: http://jsfiddle.net/9stPU/5/
CSS:
.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
}
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
}
.forumContent li:last-child {
border-bottom: none;
}
.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}
.forumContent li small {
font-size: 9px;
}
.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}
.forumContent li:hover {
background: #3E5368;
}
.forumContent a li {
float: left;
width: 366px;
}
.forumContent a li:first-child {
width: 100px;
}
.forumContent li .new b {
font-size: 12px;
}
.forumContent li .new {
float: right;
margin-right: 8px;
margin-top: -2px;
font-size: 9px;
background: #2c3e50;
padding: 4px;
border-radius: 6px;
}
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
}
.topicUser h3 {
margin-left: 2 .5px !important;
}
.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7 .5px;
}
.topicUser p {
margin-top: 2px;
margin-left: 3px;
}
.topicContent {
width: 1060px;
float: right;
height: 100%;
}
.topicContent p {
padding: 5px;
}

You can use display:table; properties: DEMO
a single patch to test it ;
li {
display:table;
}
li > div {
display:table-cell;
float:none!important;/* float kills display; so do not use it with display; */
vertical-align:top;
}

Put:
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
position: relative;
}
and
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
position:absolute;
}
notice position properties.
Look here http://jsfiddle.net/9stPU/6/

Related

I can't change the color of my website anymore

I tried to change the color of my website. For example I changed "background-color: #3695F6;" to "background-color: #fff;". but my website background doesn't change. I tried to find a missing
semicolon but I didn't find any. I also tried to delete parts of the Css/Html code which I didn't fully understand but that changed nothing. After all that failed I tried to change a margin on the website from 40px to 100px and nothing changed. I think my Css isn't properly connected. can someone please help.
#charset "utf-8";
body {
font: 0.9em Tahoma, Verdana, Arial;
line-height:172%;
background-color: #fff;
margin: 0px;
}
.center {
display: block;
margin-left: 0px;
margin-right: 0px;
}
#containercontainer {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 30px;
}
/* bovenste kopje ========================================*/
h1.titel {
color: black;
font: Gill Sans, sans-serif;
font-size: 20px;
margin-bottom: -2px;
margin-top: 0px;
}
#titel {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
border-bottom: solid black 1px;
width: 5.5%;
left: 45%;
margin-top: -5px;
position: relative;
margin-bottom: 20px;
}
/* De Slideshow ========================================*/
.fling-minislide {
width:100%;
height:100%;
padding-bottom: 0%;
overflow:hidden;
position:relative;
}
.fling-minislide img{
position:absolute;
animation:fling-minislide 15s infinite;
opacity: 0;
size: 100% 100%;
}
#keyframes fling-minislide {33%{opacity:1;} 60%{opacity:0;}}
.fling-minislide img:nth-child(3){animation-delay:0s;}
.fling-minislide img:nth-child(2){animation-delay:5s;}
.fling-minislide img:nth-child(1){animation-delay:10s;}
#slideshow {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
float: center;
border: solid black 2px;
width: 55%;
margin-bottom: 20px;
height: 300px;
position: relative;
left: 21%;
}
/* Het nieuws blokje ========================================*/
img.nieuws {
margin-top: -20px;
height: 300px;
width: 400px;
position: relative;
border: solid black 2px;
margin-bottom: 20px;
}
p.nieuws {
float: right;
margin-top: -10px;
position: relative;
margin-bottom: 20px;
}
#nieuws {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
width: 78%;
height: 50px;
left: 10%;
position: relative;
margin-bottom: 20px;
}
/* Het vragen blokje ========================================*/
#vragen {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
width: 80%;
height: 1000px;
left: 10%;
position: relative;
margin-bottom: 20px;
top: 300px;
}
p.A{
margin-top: 10px;
font-size: 22px;
width: 250px;
margin-left: 20px;
font-weight: bold;
}
#pointer {
width: 20px;
height: 20px;
position: relative;
background: black;
margin-left: 30px;
}
#pointer:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid white;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -10px;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid black;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
p.vragentop1 {
margin-left: 80px;
margin-top: -25px;
text-decoration: underline;
width: 600px;
}
p.vragentext1 {
margin-left: 80px;
margin-top: -10px;
position: relative;
margin-bottom: 50px;
width: 600px;
}
/* hoveren over plaatje in directie//////////////////////////////////////////////////////////////////////*/
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 30%;
margin-bottom: 16px;
margin-left: 10px;
margin-top: 20px;
padding: 0 8px;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.columnL {
float: left;
width: 30%;
margin-left: 30px;
margin-bottom: 16px;
padding: 0 8px;
margin-top: 20px;
}
.card {
box-shadow: 6px 7px 6px 3px rgba(0,0,0,0.75);
border: solid black 2px;
padding-left: 10px;
}
/*//////////////////////////////////////////////////////////////////////////////////*/
#cbrlogo {
background: #fff;
width: 50px;
}
#container {
width: relative;
padding: relative;
background: #fff;
min-height: 500px;
}
#containercontainer2 {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 30px;
}
.afbeelding_container {
position: relative;
float: left;
margin-left: 0px;
}
.afbeelding_container .tekst_container {
position: relative;
top: 25px;
left: 50px;
color: #00f;
font-size: 36px;
}
.schoon {
clear: both;
}
#overzicht {
margin-left: 25px;
}
.links {
float: left;
width: 320px;
}
#rechts {
float: right;
}
#onder {
clear: both;
}
.breder {
width: 4000px;
}
ul {
padding-left: 35px;
padding-right: 35px;
list-style: none;
background: #00f;
}
hr {
margin: 0px 0;
height: 1px;
border: 1px solid #fff;
border-top: 10px solid #00f;
background-color: #fff;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: none;
}
a:active {
color: blue;
text-decoration: none;
}
.menu {
display: block;
margin: 0px;
padding:0px;
position: absolute;
width: 100%;
background-color: #3695F6;
}
ul.menu {
list-style-type: none;
}
img.menu{
border: solid black 2px;
}
.menu li {
float:left;
position:relative;
width: 200px;
text-align:center;
text-decoration: none;
margin: 0px;
padding: 0;
}
.menu li a {
display: block;
padding-bottom: 20px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
text-decoration: none;
position: relative;
z-index: 100;
}
.menu li a span{
display: block;
padding-top: 10px;
font-weight: 700;
font-size: 20px;
color: black;
font-size: 18px;
}
.menu li:hover span{
color: #FFFFFF;
}
th {
padding: 10px 30px 10px 30px;
}
td {
padding: 0 30px 0 30px;
}
td.muteren {
padding: 0 0 0 10px;
}
tbody:before {
line-height:1em;
display:block;
}
thead {
text-align: left;
}
Body
this problem could be the caching problem try clearing your cache if that doesn't work check how you are linking your css to your HTML file if it's correct you can do the last thing which is add !important to the end of the background color like the example below:
background-color:#fff !important;

CSS: Slider overlaps Drop down Menu on Mobile - Z-Index issue?

Update:
I'm sure this will be easy fix for advanced members. I have created drop down menu with the 'nav' element. For some reason as hard as I try, I cannot get the menu to overlap the slider images below it when you expand it on mobile. I've tried lowering the Z-index on the slider and raising it on the menu. What am I doing wrong? Thanks in advance:
UPDATE: Here is a fiddle link as requested by a comment which includes the HTML. https://jsfiddle.net/wknow6cv/#&togetherjs=ADxkd31O6q
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background: #F5F5F5;
color: #67727A;
font-family: 'Alegreya', Sans-serrif;
margin: 0;
}
h3 {
font-size: 150%;
line-height: 155%;
padding: 5% 0;
font-weight: 400;
}
p{
font-size: 120%;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: center;
}
img{
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header{
background-color: #6991AC;
width: 100%;
height: 120px;
}
h1{
position:absolute;
right: 600px;
top:30px;
}
#top-left-menu {
right: 0px;
}
#logo{
margin: 20px;
float: left;
width: 380px;
height: 60px;
background: url(img/RD.png) no-repeat center;
left: 0px;
top: 0px;
}
p {
font-size: 1.4vw;
}
h3{
font-size: 1.5vw;
}
/*--- Start Navigation --*/
nav{
float: right;
padding: 25px 20px 0 0; /*--top right bottom left--*/
}
#menu-icon{
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul{
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', Sans-serrif;
font-size: 150%;
display: inline-block;
/*makes the links go left from right instead of up and down*/
float: left;
padding: 10px;
}
nav ul li a {
text-decoration: none;
color: #F5F5F5;
}
nav ul li a:hover {
color: #C3D7DF;
}
/*.current{
color: #C3D7DF;
}
/*--End Navigation--*/
.one-fourth {
width: 25%;
float: left;
text-align: center;
font-family: Arial;
color: #F0F0F0;
}
#cloud {
background-color: #C3D7DF;
}
#lock {
background-color: #6991AC;
}
#headset {
background-color: #C3D7DF;
}
#truck {
background-color: #6991AC;
}
.one-fourth i { /*--Icons at one fourth blocks--*/
color: #F0F0F0;
font-size: 410%;
padding: 13% 0 4% 0;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#sec-1 {
background-color: #FFFFFF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
.one-third {
width: 33.3333333%;
float: left;
text-align: center;
color: #FFFFFF
}
#google{
background-color: #A2B1C1;
}
#marketing {
background-color: #BEB9AD;
}
#customers {
background-color: #AADCD2;
}
/*--Start Footer--*/
footer {
background-color: #4682B4;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i { /*--icons--*/
font-size: 220%;
padding: 3% 3% 3% 2%;
color: #C3D7DF;
}
.social i:hover {
color: F5F5F5;
}
footer.second { /*--Socket--*/
border-top: 1px solid #AADCD2;
background-color: #544B59;
max-height: 55px;
text-align: center;
margin: 0;
}
footer.second p {
padding: 5px 0 9px 0;
text-align: center;
}
.carouselbox {
font-family: helvetica,sans-serif;
font-size: 14px;
width: 100px;
position: relative;
margin: 1em;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px #ccc;
overflow: hidden;
}
.content {
margin: 0;
padding: 0;
}
.content li {
font-size: 100px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
}
.new-inner {
height: 800px;
width: 100%;
float: left;
background-color: #FFFAFA;
font-family: Arial;
}
.nip1 {
width: 40%;
}
/*---------Insert Slideshow stuff below------*/
.cycle-slideshow{
width: 100%;
display: block;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
top: 50%;
display: block;
position: absolute;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next {right: 10%}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 9999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: normal;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
/*------------MEDIA QUERIES ARE NOW STARTING-------------*/
#media screen and (max-width: 768px){
p {
font-size: 250%;
}
h3{
font-size: 260%;
}
header{
width: 100%;
}
#logo {
margin: 15px 0 20 -25px;
background: url(img/RD_mobile.png) no-repeat center;
float: left;
width: 170px;
height: 60px;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.one-fourth {
float: left;
width: 100%;
font-size: 30%;
}
.one-fourth i {
font-size: 500%;
padding: 4% 0 1% 0;
}
article {
width: 100%;
}
aside {
width: 100%;
}
.hand-mobile {
display: none;
}
.social i {
font-size: 100%;
}
}
Maybe try to change the media queries nav to position: relative;
EDIT:
Try this instead, change the display: none to inline:
nav ul, nav:active ul {
display: inline;
z-index: 1000;
position: relative;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}

how to bring drop down menu infront of slider

hi i am having provlems with my drop down menu on my index page, the drop down items are hidden below my image slider which is directly below my nav bar, i would like to be able to see the drop down menu items, any help would be greatly appreciated
thank you very much;
here is my html for the nav bar:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="">sports news
<ul>
<li>headlines</li>
<li>when an where</li>
<li>rewind</li>
<li>manager of the week </li>
</ul>
</li>
<li class="about"><a class="active" href="#">music</a></li>
<li class="news">events
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">events</li>
<li class="contact">gallery</li>
<li class="contact">Contact</li>
</ul>
</div>
<div class="cleaner"></div>
and here is my css:
/*
jmc
*/
body {
margin: 0px;
padding: 0px;
color: #4d4638;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background: url(images/tooplate_body.jpg);
background-color: #c2b8a1;
background-repeat: repeat-x;
background-position: top
}
a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
.orange {
color: #FC0;
}
.green {
color: #CF6;
}
p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }
a.more {
clear: both;
display: block;
width: 87px;
height: 31px;
padding-right: 15px;
line-height: 30px;
text-align: center;
color: #000;
font-weight: bold;
background: url(images/tooplate_btn.png);
}
a.more:hover {
text-decoration: none;
color: #960;
}
.float_l { float: left }
.float_r { float: right }
.tooplate_margin { margin: 10px; }
.image_wrapper {
display: inline-block;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 4px;
margin-bottom: 5px;
}
.image_fl {
float: left;
margin: 3px 15px 0 0;
}
.image_fr {
float: right;
margin: 3px 0 0 15px;
}
.tooplate_list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.tooplate_list li {
color:#000;
margin: 0 0 5px 0;
padding: 0 0 0 25px;
background: url(images/tooplate_list.png) no-repeat scroll 0 5px;
}
.tooplate_list li a {
color: #000;
font-weight: normal;
}
.tooplate_list li a:hover {
text-decoration: underline;
}
#tooplate_header {
width: 960px;
padding: 10px 0;
margin: 0 auto;
}
#site_title {
float: left;
}
#site_title h1 {
margin: 30px 0 0 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 278px;
height: 50px;
color: #fff;
text-indent: -10000px;
background: url(images/tooplate_logo.png) no-repeat;
}
/* menu */
#tooplate_menu {
float: right;
width: 632px;
height: 48px;
margin-top: 40px;
background: url(images/tooplate_menu.png)
}
#tooplate_menu ul {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
#tooplate_menu ul li {
float: left;
display: block;
padding: 0;
margin: 0;
display: inline;
text-align: center;
}
#tooplate_menu ul li a {
display: block;
width: 116px;
padding: 9px 4px 9px 0;
margin: 0;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #000000;
text-shadow: 1px 1px 1px #cec8ba;
font-weight: normal;
outline: none;
border: none;
background: url(images/tooplate_menu_divider.png) center right no-repeat
}
#tooplate_menu ul li a:hover, #tooplate_menu ul li .current {
color: #fff;
text-shadow: 1px 1px 1px #3d3728;
}
#tooplate_menu ul .last {
background: none;
}
#search_box {
float: right;
margin: 12px 0 0 0;
width: 170px;
height: 27px;
background: url(images/tooplate_search.png) no-repeat;
}
#search_box form {
clear: both;
width: 170px;
height: 26px;
padding: 0;
margin: 0;
}
#searchfield {
float: left;
display: block;
height: 16px;
width: 130px;
padding: 5px;
font-size: 12px;
color: #ccc;
line-height: 0;
background: none;
border: none;
}
#searchbutton {
float: right;
display: block;
height: 26px;
width: 30px;
padding: 0;
margin: 0;
cursor: pointer;
background: none;
border: none;
}
/* end of menu */
/* slider */
#tooplate_middle {
clear: both;
width: 940px;
height: 307px;
padding: 10px 40px;
margin: 0 auto;
background: url(images/tooplate_middle_home.png) no-repeat
}
#tooplate_middle_subpage {
clear: both;
width: 820px;
height: 207px;
padding: 60px 100px;
margin: 0 auto;
font-family: Georgia, "Times New Roman", Times, serif;
background: url(images/tooplate_middle_subpage.png) no-repeat;
}
#tooplate_middle_subpage h2 {
font-size: 48px;
color: #000;
}
#tooplate_middle_subpage p {
font-size: 18px;
color: #000;
line-height: 30px;
}
#tooplate_middle_subpage a {
color: #507921;
font-weight: normal;
}
#slider {
float: right;
width: 940px;
height: 300px;
overflow: hidden;
}
/* end of slider */
#tooplate_main {
clear: both;
width: 960px;
padding: 30px 0;
margin: 0 auto;
}
.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }
.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }
.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }
#cp_contact_form {
margin: 10px;
padding: 0;
width: 412px;
}
#cp_contact_form form {
margin: 0px;
padding: 0px;
}
#cp_contact_form form .input_field {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form label {
display: block;
width: 100px;
margin-right: 10px;
font-size: 14px;
}
#cp_contact_form form textarea {
width: 400px;
height: 160px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form .submit_btn {
margin: 5px 0px;
padding: 5px 14px;
text-decoration: none;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
}
#map {
margin: 10px;
}
#map img {
width: 300px;
height: 200px;
border: 1px solid #d9d3c5;
background: #b5ac98;
padding: 7px;
margin-bottom: 10px;
}
.news_box {
clear: both;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dashed #333;
}
.news_box h2 {
font-size: 20px;
margin-bottom: 0;
}
.news_box p.date {
color: #000;
}
.news_box img {
float: left;
padding: 4px;
border: 1px solid #000;
margin-right: 30px;
}
.news_box a.more {
clear:none;
float: right;
}
.sb_lp_box {
clear: both;
margin-bottom: 20px;
}
.sb_lp_box img {
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box {
clear: both;
margin-bottom: 30px;
}
.post_box h2 {
font-size: 20px;
margin-bottom: 10px;
}
.post_box p.post_meta {
margin-bottom: 0;
}
.post_box p span.cat a {
color: #507921;
font-weight: 400;
}
.post_box img {
width: 550px;
height: 160px;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box a.more {
float: left;
}
.lbe_box {
clear: both;
margin-bottom: 20px;
}
.lbe_box h3 {
font-size: 16px;
margin-bottom: 0;
}
.lbe_box h3 a {
color: #507921;
font-size: 16px;
font-weight: normal;
}
.lbe_box h3 a span {
font-size: 12px;
color: #507921;
}
.lbe_box p {
margin-bottom: 0;
}
.lbe_box p.date {
font-size: 10px;
font-weight: 700;
color: #507921;
}
#gallery {
margin: 0;
padding: 0;
}
#gallery ul {
margin: 0;
padding: 0;
}
#gallery ul li {
display: block;
float: left;
width: 281px;
margin: 0 30px 30px 0;
padding: 8px;
border: 1px solid #d0c9b8;
background: #b6ac97;
}
#gallery ul .third {
margin: 0 0 30px 0;
}
#gallery ul li a img {
border: 1px solid #ccc;
margin-bottom: 5px;
}
#tooplate_footer_wrapper {
clear: both;
width: 100%;
background: #a19882;
border-top: 10px solid #d0c8b4;
}
#tooplate_footer {
width: 960px;
margin: 0 auto;
padding: 15px 0;
text-align: center;
color: #000;
background: url(images/tooplate_footer.jpg) top center no-repeat
}
#tooplate_cr a {
color: #5fa008;
font-weight: normal;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
#nav ul {
z-index: 9999;
}
thanks again;
From what I can see from the snippet provided, my best guess would be to add:
position:relative;
to your:
#nav ul{
z-index:9999;
}
HOWEVER I cannot see div id="nav" in your html! If you have just not included it in your snippet, that's fine, but if this is also an error and you mean to assign that css to div class="nav", then try changing that whole block to:
.nav ul{
position:relative;
z-index:9999;
}
One final note to remember, assign z-index to elements that ALSO have a position set (be it relative or absolute etc) - as far as i'm aware, z-index doesn't work unless the block has a position attribute set to it also.
Hope this works for you.

Div doesn't expand with text

I am trying to make a forum but the problem is that the div where the text goes doesn't expand in height when the text becomes to long for the div. Instead the text goes outside.
I also need the sidebar (with the userinformation) to expand with the text so it always has the same height as the text.
JSFiddle: http://jsfiddle.net/9stPU/1/
CSS:
.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
margin-left: 50px;
}
.forumContent li {
padding: 5px 0 5px 10px;
margin-left: -40px;
min-height: 41px;
}
.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}
.forumContent li small {
font-size: 9px;
}
.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}
.forumContent li:hover {
background: #3E5368;
}
.forumContent a li {
float: left;
width: 366px;
}
.forumContent a li:first-child {
width: 100px;
}
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
height: 100%;
}
.topicUser h3 {
margin-left: 2.5px !important;
}
.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7.5px;
}
.topicUser p {
margin-top: 2px;
margin-left: 3px;
}
.topicContent {
width: 1060px;
float: right;
height: 100%;
}
ADD :
.forumContent {
...
overflow: hidden; /* ADD THIS */
}
This problem occurs because the height of the container element forumContent is calculated automatically (if it is not specified) as the the sum of the height of non float elements. the height of float elements is not considerate.

Website not rendering correctly in IE - Just cannot get it right. :(

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
}