i want to decrease post size. i mean when i post anything in my site i want to increase left and right side space for post.how i can do it?(post write wide size want to be decrease)
my all post css code show below.my site
/***** Post Lead Image *****/
#lead-image { position: relative; width: 610px; height: 320px; margin: 0 10px 20px; padding: 5px; background: url(images/backgrounds/bg-postthumb.gif); }
#lead-image img { display: block; }
/***** Post Meta *****/
.published { position: relative; width: 620px; margin: 0 10px 20px; background: url(images/backgrounds/bg-published.gif) repeat-x 0 0; text-align: center; }
.published p { background: #fff url(images/backgrounds/bg-published-decoration.gif) no-repeat center bottom; display: inline-block; color: #222; font: 1.2em 'VollkornItalic', serif; padding: 0 10px 20px; }
.published p a, .published p a:visited { text-decoration: none; }
.published p a:hover, .published p a:active { text-decoration: underline; }
/***** Post YouTube Video Player *****/
#video-player { position: relative; width: 620px; margin: 0 10px 20px; }
.yt-player { width: 615px; height: 370px; }
/***** Post Entry *****/
.post-columns { position: relative; width: 640px; }
.post-460 { position: relative; width: 460px; margin: 0 10px; float: right; }
.post-620, .periodic-password-post { position: relative; width: 620px; margin: 0 10px; }
.post-940 { width: 940px; margin: 0 10px; }
.post-left-column { position: relative; width: 160px; float: left; margin: 0 0 20px; }
.post-entry { position: relative; }
.post-entry h1, .post-entry h2, .post-entry h3, .post-entry h4, .post-entry h5, .post-entry h6 { margin: 0 0 10px; color: #222; line-height: 1.7; }
.post-entry h1 { font-size: 2.1em; }
.post-entry h2 { font-size: 1.9em; }
.post-entry h3 { font-size: 1.7em; }
.post-entry h4 { font-size: 1.5em; }
.post-entry h5 { font-size: 1.3em; }
.post-entry h6 { font-size: 1.2em; }
.post-entry p { font-size: 1.3em; line-height: 1.7em; margin: 0 0 30px; }
.post-entry blockquote { margin: 0 40px; border-left: 3px solid #464646; padding: 0 0 0 20px; font: 120% 'VollkornItalic', serif; color: #222; }
.post-entry blockquote p { line-height: 1.5em; }
.post-entry ul, .post-entry ol { margin: 0 40px 30px; font-size: 1.3em; line-height: 1.7em; }
.post-entry ul { list-style: disc; }
.post-entry ul ul { margin: 0 0 0 30px; font-size: inherit; list-style: circle; }
.post-entry ul ol { margin: 0 0 0 30px; font-size: inherit; }
.post-entry ul ul li { background: none; padding: 0; }
.post-entry ol { list-style: decimal; }
.post-entry dl { font-size: 1.3em; line-height: 1.7em; }
.post-entry dt { color: #222; font-weight: bold; }
.post-entry dd { margin: 0 0 30px; }
.post-entry code { font: 90% Monaco, Courier, monospace; background: #f1f1f1; padding: 2px; border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; }
.post-entry p a, .post-entry li a,
.post-entry p a:visited, .post-entry li a:visited { text-decoration: none; }
.post-entry p a:hover, .post-entry li a:hover,
.post-entry p a:active, .post-entry li a:active { text-decoration: underline; }
.post-entry table { width: 90%; border-left: 1px solid #d9d9d9; margin: 0 auto 20px; }
.post-entry table caption { line-height: 3em; font-size: 1.2em; font-weight: bold; color: #464646; }
.post-entry table thead, .post-entry table tfoot { background: #f1f1f1; }
.post-entry table th, .post-entry table td { padding: 10px 15px; text-align: left; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; font-size: 1.2em; color: #464646; }
.post-entry tfoot td { text-align: center; }
.post-entry table th { border-top: 1px solid #d9d9d9; font-weight: bold; }
.post-entry table td a, .post-entry table td a:visited { font-weight: bold; text-decoration: none; }
.post-entry table td a:hover, .post-entry table td a:active { text-decoration: underline; }
.post-entry pre { font-size: 1.4em; background: url(images/backgrounds/bg-pre.gif) top left; line-height: 2.3em; width: 600px; overflow: auto; overflow-y: hidden; border: 1px solid #d9d9d9; margin: 0 0 20px; }
.post-entry pre code { background: none; border: none; font-size: inherit; margin: 0 20px; padding: 18px 0; }
.post-entry address { font-style: normal; font-size: 1.3em; line-height: 1.5em; margin: 0 0 20px; }
.post-entry strong { color: #464646; }
/***** Post Entry Password Form ****/
.post-entry form label { font-weight: bold; }
.post-entry form input[type='password'] { width: 280px; padding: 7px 10px; border: 5px solid #f1f1f1; color: #d9d9d9; margin: 5px 0 0; }
.post-entry form input[type='password']:focus { color: #797979; }
.post-entry form input[type='submit'] { width: 140px; height: 40px; margin: 0 0 20px; background: url(images/backgrounds/periodic-sprite-03.png) no-repeat 0 -340px; font-weight: bold; font-family: Arial, "Helvetia Neue", Helvetica, sans-serif; text-transform: uppercase; color: #797979; margin: 10px 0 0; }
.post-entry form input[type='submit']:hover { background-position: 0 -430px; cursor: pointer; }
/***** Shortcodes *****/
.post-entry blockquote.pullquote { margin: 0 20px; padding: 0; width: 35%; border: none; color: #464646; }
.post-entry blockquote.pullquote p { margin: 0; }
.post-entry blockquote.pullright { padding: 5px 0 5px 20px; border-left: 3px solid #464646; }
.post-entry blockquote.pullleft { padding: 5px 20px 5px 0; border-right: 3px solid #464646; text-align: right; }
.checklist { position: relative; }
.checklist ul { list-style: none; }
.checklist li { background: url(images/backgrounds/check.png) no-repeat left .4em; padding: 0 0 0 20px; }
.arrowlist { position: relative; }
.arrowlist ul { list-style: none; }
.arrowlist li { background: url(images/backgrounds/list-arrow.png) no-repeat 0 .4em; padding: 0 0 0 15px; }
.arrowlist li li { background: none; padding: 0; }
.note { position: relative; width: 75%; margin: 0 auto 30px; background: #f1f1f1; border: 1px solid #d9d9d9; padding: 10px 20px 14px; }
.note p { margin: 0; font: 1.4em/1.6em 'VollkornItalic', serif; }
.two_column { position: relative; width: 47%; margin: 0 20px 0 0; float: left; }
.two_column_last { position: relative; width: 47%; margin: 0; float: left; }
.three_column { position: relative; width: 31%; margin: 0 20px 0 0; float: left; }
.three_column_last { position: relative; width: 31%; margin: 0; float: left; }
.four_column { position: relative; width: 23%; margin: 0 20px 0 0; float: left; }
.four_column_last { position: relative; width: 23%; margin: 0; float: left; }
.button, .button:visited { display: inline-block; line-height: 2.5em; text-align: center; background: #e5e5e5 url(images/backgrounds/bg-button.png) repeat-x 0 0; padding: 0 25px; border: 5px solid #d9d9d9; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; margin: 0 0 20px; color: #464646; font-weight: bold; font-size: 1.2em; text-decoration: none; }
.button:hover, .button:active { background-color: #fcfcfc; background-position: 0 -40px; border-color: #b9b9b9; }
/***** Post Images *****/
img.alignleft { margin: 0 20px 10px 0; }
img.alignright { margin: 0 0 10px 20px; }
img.aligncenter { margin: 0 auto; }
/***** Post Images with Captions *****/
.wp-caption { background: #f3f3f3; border: 1px solid #d9d9d9; padding: 4px 0; }
.wp-caption img { display: block; margin: 0 auto; }
.wp-caption .wp-caption-text { text-align: center; margin: 5px 0 3px; line-height: 1; font: 1.2em/1.3 'VollkornItalic', serif; color: #464646; }
div.alignleft { margin: 0 20px 10px 0; }
div.alignright { margin: 0 0 10px 20px; }
div.aligncenter { margin: 0 auto 20px; }
/***** Post Image Galleries *****/
.gallery { margin: 0 0 20px !important; }
.gallery-item img { border: 1px solid #d9d9d9 !important; background: #f1f1f1; padding: 4px; }
.post-entry dd.gallery-caption { margin: 0 0 15px; padding: 0 20px; }
.post-entry dd.wp-caption-text { font-family: 'VollkornItalic', serif; color: #464646; line-height: 1.2em; }
I believe you have fixed the width in every inner container of the div id "left-column" you should make a container inside #left-column and set padding-left and padding-right and make internal div's widths to 100%
Related
ok, i am having problems with the ndex page im re building ( due to flash drive getting corrupted. :(, i want the nav bar to sit flush with the slider which is below it... at the moement the nav bat is way too the left and it doesnt look very good :/ e.g--->
i will give you both my html and my css to refer to:
HTMLof nav and slider
<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 class="">music
<ul>
<li>whats new</li>
<li>the classic corner</li>
<li>hall of fame</li>
</ul>
</li>
<li class="news">on air
<ul>
<li>schedule</li>
<li>presenters</li>
<li>competitions</li>
<li>guests</li>
</ul>
</li>
<li class="contact">events</li>
<li class="contact">gallery</li>
<li class="contact">Contact</li>
</ul>
</div>
<div class="cleaner"></div>
<div id="middle">
<div id="slider">
<img src="images/slideshow/01.jpg" alt="slideshow 01" title="wow" />
<img src="images/slideshow/02.jpg" alt="slideshow 02" title="wow" />
<img src="images/slideshow/03.jpg" alt="slideshow 03" title="wow" />
<img src="images/slideshow/04.jpg" alt="slideshow 04" title="wow" />
<img src="images/slideshow/05.jpg" alt="slideshow 05" title="wow" />
</div>
</div>
CSS:
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/btn.png);
}
a.more:hover {
text-decoration: none;
color: #960;
}
.float_l { float: left }
.float_r { float: right }
.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;
}
.list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.list li {
color:#000;
margin: 0 0 5px 0;
padding: 0 0 0 25px;
background: url(images/list.png) no-repeat scroll 0 5px;
}
.list li a {
color: #000;
font-weight: normal;
}
.list li a:hover {
text-decoration: underline;
}
#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/logo.png) no-repeat;
}
/* menu */
#menu {
float: right;
width: 632px;
height: 48px;
margin-top: 40px;
background: url(images/menu.png)
}
#menu ul {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
#menu ul li {
float: left;
display: block;
padding: 0;
margin: 0;
display: inline;
text-align: center;
}
#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/menu_divider.png) center right no-repeat
}
#menu ul li a:hover, #menu ul li .current {
color: #fff;
text-shadow: 1px 1px 1px #3d3728;
}
#menu ul .last {
background: none;
}
#search_box {
float: right;
margin: 12px 0 0 0;
width: 170px;
height: 27px;
background: url(images/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 */
#middle {
clear: both;
width: 940px;
height: 307px;
padding: 10px 40px;
margin: 0 auto;
background: url(images/middle_home.png) no-repeat
}
#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/middle_subpage.png) no-repeat;
}
#middle_subpage h2 {
font-size: 48px;
color: #000;
}
#middle_subpage p {
font-size: 18px;
color: #000;
line-height: 30px;
}
#middle_subpage a {
color: #507921;
font-weight: normal;
}
#slider {
float: right;
width: 940px;
height: 300px;
overflow: hidden;
}
/* end of slider */
#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;
}
#footer_wrapper {
clear: both;
width: 100%;
background: #a19882;
border-top: 10px solid #d0c8b4;
}
#footer {
width: 960px;
margin: 0 auto;
padding: 15px 0;
text-align: center;
color: #000;
background: url(images/footer.jpg) top center no-repeat
}
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;
}
#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{
position:relative;
z-index:9999;
}
}
Add this to your CSS:
.nav {
margin-right: auto;
margin-left: auto;
clear: both;
}
I made a fiddle for testing:
http://jsfiddle.net/8x1fkpoe/
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.
I'm trying to get the items on one of my pages to line up at the bottom. The realworld example is http://www.silverartcollector.com. You can see on the main page the content area, there are 2 product boxes that have different size images which will be common. I want the bottoms to align so it will look neater. I've tried doing vertical-align:bottom on my main class but it doesn't work, I'm presuming because of the float:left. However, after hours of testing, I can't figure it out. I appreciate any input/help.
Here is the page code:
<div class="float_r" id="content">
<h3>Recent Additions</h3><br>
<div class="product_box">
<img width="150" src="admin/uploads/ONE-7 O.JPG">
<h3>Huck Finn</h3>
<p class="product_price">One Mint</p>
<!--ONE-7<br/>-->
<a class="detail" href="productdetail.php?id=1">Details</a>
</div>
<div class="product_box">
<img width="150" src="admin/uploads/MLM-11 O.jpg">
<h3>Keep Me & Never Go Broke</h3>
<p class="product_price">Mother Lode Mint</p>
<!--MLM-11<br/>-->
<a class="detail" href="productdetail.php?id=20">Details</a>
</div>
</div>
And here is the stylesheet:
/*
Credit: http://www.templatemo.com
*/
body {
margin: 0;
padding: 0;
color: #999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
line-height: 1.4em;
background-color: #2e2e2e;
background-repeat: repeat;
background-image: url(../images/templatemo_body.jpg)
}
a, a:link, a:visited {
color: #08aee3;
font-weight: normal;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.more {
display: inline-block;
width: 80px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 10px;
font-weight: bold;
color: #21bdd0;
background: url(../images/more_but.jpg);
}
a.more:hover {
background: #333;
text-decoration: none;
}
p {
margin: 0 0 10px 0;
padding: 0;
}
img {
border: none;
}
blockquote {
border: 1px solid #ccc;
border-left: 5px solid #000;
padding: 19px;
margin: 20px 0 0 0;
}
cite a, cite a:link, cite a:visited {
font-size: 12px;
text-decoration: none;
font-style: normal;
}
cite span {
font-weight: 400;
color: #333;
}
.templatemo_list {
margin: 10px 0 10px 15px;
padding: 0;
list-style: none;
}
.templatemo_list li {
color:#636363;
margin: 0 0 5px 0;
padding: 0 0 0 15px;
background: url(../images/templatemo_list.png) no-repeat scroll 0 7px;
}
.templatemo_list li a {
color: #636363; font-weight: normal;
}
.templatemo_list li a:hover {
color: #000;
}
h1, h2, h3, h4, h5, h6, h7, h8{
color: #333;
font-weight: normal;
}
h1 {
font-size: 30px;
margin: 0 0 30px;
padding: 5px 0;
}
h2 {
font-size: 26px;
margin: 0 0 25px;
padding: 5px 0;
}
h3 {
font-size: 20px;
margin: 0 0 20px;
padding: 0;
}
h4 {
font-size: 16px;
margin: 0 0 15px;
padding: 0;
}
h5 {
font-size: 14px;
margin: 0 0 10px;
padding: 0;
}
h6 {
font-size: 12px;
margin: 0 0 5px;
padding: 0;
}
h7 {
font-size: 16px;
margin: 0 0 15px;
padding: 0;
line-height:150%
}
h8 {
line-height:150%;
font-size: 14px;
margin: 0 0 15px;
padding: 0;
color: white;
}
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.float_l { float: left }
.float_r { float: right }
#templatemo_wrapper {
width: 960px;
margin: 0 auto;
padding: 0 10px 10px;
}
#templatemo_header {
width: 100%;
padding: 50px 0 10px;
}
#templatemo_menu {
width: 100%;
height: 77px;
margin-bottom: 3px;
background: url(../images/templatemo_menu.jpg) repeat-x
}
#templatemo_middle {
width: 100%;
height: 200px;
margin-bottom: 3px;
padding-bottom: 2px;
background: #fff url(../images/templatemo_middle.jpg) repeat-x bottom
}
#templatemo_main {
width: 100%;
margin-bottom: 10px;
}
#content {
width: 680px;
background: #ffffff;
border: 1px solid #fff;
padding: 15px;
}
#sidebar { width: 240px }
#templatemo_footer {
width: 960px;
text-align: center;
padding: 9px 0px;
background: #121212;
border: 1px solid #3a3a3a
}
#site_title {
float: left;
}
#site_title h1 {
margin: 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 300px;
height: 20px;
font-size: 12px;
text-indent: -10000px;
color: #999;
text-align: left;
background: url(../images/logo.gif) no-repeat top left;
}
#header_right {
float: right;
margin-top: 5px;
}
#header_right a {
color: #ccc;
}
#menu_second_bar {
padding: 5px 10px;
}
#top_shopping_cart {
float: left;
padding: 5px 0;
font-size: 11px;
}
#templatemo_search {
float: right;
}
#templatemo_search form {
margin: 0;
padding: 0;
}
#templatemo_search .txt_field {
float: left;
display: block;
margin-right: 5px;
height: 24px;
line-height: 24px;
width: 300px;
color: #999;
font-size: 12px;
padding: 0 5px;
font-variant: normal;
border: 1px solid #666;
background: #333;
}
#templatemo_search .sub_btn {
float: right;
display: block;
color: #fff;
height: 26px;
font-size: 11px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
border: 1px solid #333;
background: #0ec4f7;
}
.sidebar_box {
position: relative;
background: #4c4a4a;
margin-bottom: 20px;
}
.sidebar_box h3 {
font-size: 14px;
font-weight: 700;
padding: 10px;
width: 220px;
height: 20px;
margin-bottom: 0;
background: url(../images/templatemo_sidebar_header.jpg) no-repeat; color: #999
}
.sidebar_box span.bottom {
position: absolute;
bottom: -26px;
left: 0;
width: 240px;
height: 26px;
background: url(../images/templatemo_sidebar_bottom.jpg)
}
#sidebar .sidebar_box .content {
padding: 10px 10px 0;
}
#sidebar .sidebar_list {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar .sidebar_list li {
display: block;
margin: 0;
padding: 3px 0;
border-top: 1px solid #595858;
border-bottom: 1px solid #343434;
}
#sidebar .sidebar_list li.first {
border-top: none;
}
#sidebar .sidebar_list li.last {
border-bottom: none;
}
#sidebar .sidebar_list li a {
color: #d6d3d3;
}
#sidebar .sidebar_list li a:hover {
color: #fff;
text-decoration: none;
}
.bs_box { clear: both; margin-bottom: 20px }
.bs_box img { float: left; margin-right: 10px; border: 4px solid #3d3d3d }
.bs_box h4 { margin-bottom: 0 }
.bs_box h4 a { font-size: 12px; color: #08aee3; font-weight: 700}
.bs_box .price { font-size: 12px; font-weight: 700; color: #fff }
.product_box {
float: left;
width: 225px;
text-align: center;
margin: 0 0px 0px 0;
}
.product_box img {
margin-bottom: 5px;
}
.product_box h3 {
font-size: 11px;
color: #000;
font-weight: 700;
margin-bottom: 10px;
}
.product_box .product_price {
color: #8fb410;
font-size: 14px;
font-weight: 700;
}
.product_box .add_to_card {
float:left;
display: block;
width: 140px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
background: url(../images/add_to_cart.jpg);
margin-left: 42.5px;
}
.product_box .detail {
float: left;
display: block;
width: 140px;
height: 28px;
line-height: 28px;
text-align: center;
background: url(../images/detail.jpg);
margin-left: 42.5px;
}
.checkout input {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 5px;
}
#contact_form {
padding: 0;
width: 312px;
margin-bottom: 40px;
}
#contact_form form {
margin: 0px;
padding: 0px;
}
#contact_form form .input_field {
width: 300px;
padding: 5px;
color: #222;
background: #fff;
border: 1px solid #dedede;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
margin-top: 5px;
}
#contact_form form label {
display: block;
width: 100px;
margin-right: 12px;
font-size: 13px;
}
#contact_form form textarea {
width: 300px;
height: 200px;
padding: 5px;
color: #222;
background: #fff; border: 1px solid #dedede;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
margin-top: 5px;
}
#contact_form form .submit_btn {
padding: 5px 12px;
background-color: #000;
border: 1px solid #fff;
color: #fff;
font-size:14px;
margin: 10px 0px;
}
.faq h3 { font-size: 14px; margin: 30px 0 5px }
.content_half {
width: 320px;
}
.content_13 {
width: 220px;
margin-right: 10px;
}
.no_margin_right {
margin-right: 0;
}
#templatemo_footer {
color: #707070;
}
#templatemo_footer a {
color: #999;
}
.question {
position:relative;
display: inline-block;
text-align:center;
left:-1em;
top:-5em;
padding: 10px 0px 0px 0px;
width: 174px;
height: 58px;
color:black;
font-weight:bold;
font-size: 13px;
line-height: 1.3em;
background: url('../admin/images/bubble.png') left top no-repeat;
opacity:0;
z-index:1;
}
.yes{
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #434d17;
text-shadow: 0px 1px 0px #fff;
background: url('../admin/images/buttony.png') left top no-repeat;
}
.cancel {
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #fff;
text-shadow: 0px 1px 0px #000;
background: url('../admin/images/buttonn.png') left top no-repeat;
}
.mint_box {
float: left;
width: 300px;
text-align: left;
margin: 0 10px 10px 0;
}
}
I think an inline-block approach would do what you want:
.product_box {
display: inline-block;
margin: 0;
text-align: center;
vertical-align: bottom;
width: 225px;
}
You could use relative positioning to move the div down, however, you would need to give the Keep Me & Never Go Broke div a unique id
add to div
id="whatever_u_want_to_call_it"
then style the id to have a relative position
#whatever_u_want_to_call_it{
position: relative;
bottom: -215px;
}
When I mouse over the services link the right hand side hover keeps disappearing. I have looked at the css and I cant seem to find where to fix it. This website is http://www.aoaluminiumproducts.com.au and my CSS is as below:
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: 0.8em/1.5 "arial",sans-serif;
color: #303030;
background: #990000;
}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
img
{ border: 0;}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #43423F;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
h2
{ font: normal 200% 'century gothic', arial, sans-serif;
color: #1293EE;}
h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;
color: #1293EE;}
h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;
color: #000;}
h6
{ color: #362C20;}
a, a:hover
{ outline: none;
text-decoration: underline;
color: #CC0000;}
a:hover
{ text-decoration: none;}
.left
{ float: left;
width: auto;
margin-right: 10px;}
.right
{ float: right;
width: auto;
margin-left: 10px;}
.center
{ display: block;
text-align: center;
margin: 20px auto;}
blockquote
{ margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;}
ul
{ margin: 2px 0 22px 17px;}
ul li
{ list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;}
ol
{ margin: 8px 0 22px 20px;}
ol li
{ margin: 0 0 11px 0;}
#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto;
margin-right: auto;}
#header
{ background: #990000;
height: 240px;}
#logo
{ width: 810px;
position: relative;
height: 120px;
background: #150517; url(logo.png) no-repeat;}
#logo #logo_text
{ position: center;
top: 20px;
left: 0;}
#logo h1, #logo h2
{ font: normal 300% 'century gothic', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0;}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover
{ padding: 22px 0 0 0;
color: #FFF;
letter-spacing: 0.1em;
text-decoration: none;}
#logo_text h1 a .logo_colour
{ color: #FAF700;}
#logo_text h2
{ font-size: 100%;
padding: 4px 0 0 0;
color: #DDD;}
#menubar
{ width: 877px;
height: 72px;
padding: 0;
background: #150517; url(menu.png) repeat-x;
}
ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}
ul#menu li
{ list-style: none;}
ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
display: block;
float: left;
height: 37px;
padding: 29px 26px 6px 26px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #451C1B url(menu_select.png) repeat-x;}
ul#menu li ul#sub_nav
{
/*border:1px solid red;*/
position: absolute;
left: 0; top:35px;
padding: 15px 0;
width: 170px;
margin:0;
display:none;
background:#150517;
}
ul#menu li:hover #sub_nav
{
display:block;
}
#site_content
{ width: 900px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #DCDCDC;}
.sidebar
{ float: right;
width: 200px;
padding: 0 15px 20px 15px;}
.sidebar ul
{ width: 178px;
padding: 4px 0 0 0;
margin: 4px 0 30px 0;}
.sidebar li
{ list-style: none;
padding: 0 0 7px 0; }
.sidebar li a, .sidebar li a:hover
{ padding: 0 0 0 40px;
display: block;
background: transparent url(link.png) no-repeat left center;}
.sidebar li a.selected
{ color: #444;
text-decoration: none;}
#content
{ text-align: left; position: absoulte;
width: 595px;
padding: 0;}
#content ul
{ margin: 2px 0 22px 0px;}
#content ul li
{ list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 6px 0;
padding: 0 0 4px 25px;
line-height: 1.5em;}
#footer
{ width: 878px;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
height: 33px;
padding: 24px 0 5px 0;
text-align: center;
background: #000000;
color: #b1b1b1;
text-transform: uppercase;
letter-spacing: 0.1em;}
#footer a
{ color: #FFF;
text-decoration: none;}
#footer a:hover
{ color: #FFF;
text-decoration: underline;}
.search
{ color: #5D5D5D;
border: 1px solid #BBB;
width: 134px;
padding: 4px;
font: 100% arial, sans-serif;}
#colours
{ height: 0px;
text-align: right;
padding: 66px 16px 0px 300px;}
.form_settings
{ margin: 15px 0 0 0;}
.form_settings p
{ padding: 0 0 4px 0;}
.form_settings span
{ float: left;
width: 200px;
text-align: left;}
.form_settings input, .form_settings textarea
{ padding: 5px;
width: 299px;
font: 100% arial;
border: 1px solid #E5E5DB;
background: #FFF;
color: #47433F;}
.form_settings .submit
{ font: 100% arial;
border: 1px solid;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #7D0F0F;
color: #FFF;}
.form_settings textarea, .form_settings select
{ font: 100% arial;
width: 299px;}
.form_settings select
{ width: 310px;}
.form_settings .checkbox
{ margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;}
.separator
{ width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;}
table
{ margin: 10px 0 30px 0;}
table tr th, table tr td
{ background: #DCDCDC;
color: #DCDCDC;
padding: 7px 4px;
text-align: left;}
table tr td
{ background: #DCDCDC;
color: #DCDCDC;
}
#testimonials{
width: 133px;
padding: 45px 45px 35px;
background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2);
min-height:90px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#testimonials ul{ list-style:none;}
#testimonials p.text{ font-size:11px;}
#testimonials p.author{
color: #878787;
font-size: 16px;
font-style: italic;
text-align: left;
}
#testimonials p.author a,
#testimonials p.author a:visited{
color:#6aa42a;
}
If your intention is to make a drop down menu, then your li tag is missing position:relative property and sub menu gets stuck to the top of the page on the left. What you meant by hover keeps disappearing — I'm not so sure.
Hi the main thing is that you have defined position:absolute into your child id without defining position:relative to your parent id so that's why you hover drop-down is going some-where top.
so i have updated your css apply this one i hope this will work fine:-
ul#menu li {
list-style: none outside none;
position: relative;
}
ul#menu li ul#sub_nav {
background: none repeat scroll 0 0 #150517;
display: none;
margin: 0;
position: absolute;
top: 72px;
width: 155px;
}
Your Complete Updated CSS
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: 0.8em/1.5 "arial",sans-serif;
color: #303030;
background: #990000;
}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
img
{ border: 0;}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #43423F;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
h2
{ font: normal 200% 'century gothic', arial, sans-serif;
color: #1293EE;}
h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;
color: #1293EE;}
h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;
color: #000;}
h6
{ color: #362C20;}
a, a:hover
{ outline: none;
text-decoration: underline;
color: #CC0000;}
a:hover
{ text-decoration: none;}
.left
{ float: left;
width: auto;
margin-right: 10px;}
.right
{ float: right;
width: auto;
margin-left: 10px;}
.center
{ display: block;
text-align: center;
margin: 20px auto;}
blockquote
{ margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;}
ul
{ margin: 2px 0 22px 17px;}
ul li
{ list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;}
ol
{ margin: 8px 0 22px 20px;}
ol li
{ margin: 0 0 11px 0;}
#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto;
margin-right: auto;}
#header
{ background: #990000;
height: 240px;}
#logo
{ width: 810px;
position: relative;
height: 120px;
background: #150517; url(logo.png) no-repeat;}
#logo #logo_text
{ position: center;
top: 20px;
left: 0;}
#logo h1, #logo h2
{ font: normal 300% 'century gothic', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0;}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover
{ padding: 22px 0 0 0;
color: #FFF;
letter-spacing: 0.1em;
text-decoration: none;}
#logo_text h1 a .logo_colour
{ color: #FAF700;}
#logo_text h2
{ font-size: 100%;
padding: 4px 0 0 0;
color: #DDD;}
#menubar
{ width: 877px;
height: 72px;
padding: 0;
background: #150517; url(menu.png) repeat-x;
}
ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}
ul#menu li {
list-style: none outside none;
position: relative;
}
ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
display: block;
float: left;
height: 37px;
padding: 29px 26px 6px 26px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #451C1B url(menu_select.png) repeat-x;}
ul#menu li ul#sub_nav {
background: none repeat scroll 0 0 #150517;
display: none;
margin: 0;
position: absolute;
top: 72px;
width: 155px;
}
ul#menu li:hover #sub_nav
{
display:block;
}
#site_content
{ width: 900px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #DCDCDC;}
.sidebar
{ float: right;
width: 200px;
padding: 0 15px 20px 15px;}
.sidebar ul
{ width: 178px;
padding: 4px 0 0 0;
margin: 4px 0 30px 0;}
.sidebar li
{ list-style: none;
padding: 0 0 7px 0; }
.sidebar li a, .sidebar li a:hover
{ padding: 0 0 0 40px;
display: block;
background: transparent url(link.png) no-repeat left center;}
.sidebar li a.selected
{ color: #444;
text-decoration: none;}
#content
{ text-align: left; position: absoulte;
width: 595px;
padding: 0;}
#content ul
{ margin: 2px 0 22px 0px;}
#content ul li
{ list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 6px 0;
padding: 0 0 4px 25px;
line-height: 1.5em;}
#footer
{ width: 878px;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
height: 33px;
padding: 24px 0 5px 0;
text-align: center;
background: #000000;
color: #b1b1b1;
text-transform: uppercase;
letter-spacing: 0.1em;}
#footer a
{ color: #FFF;
text-decoration: none;}
#footer a:hover
{ color: #FFF;
text-decoration: underline;}
.search
{ color: #5D5D5D;
border: 1px solid #BBB;
width: 134px;
padding: 4px;
font: 100% arial, sans-serif;}
#colours
{ height: 0px;
text-align: right;
padding: 66px 16px 0px 300px;}
.form_settings
{ margin: 15px 0 0 0;}
.form_settings p
{ padding: 0 0 4px 0;}
.form_settings span
{ float: left;
width: 200px;
text-align: left;}
.form_settings input, .form_settings textarea
{ padding: 5px;
width: 299px;
font: 100% arial;
border: 1px solid #E5E5DB;
background: #FFF;
color: #47433F;}
.form_settings .submit
{ font: 100% arial;
border: 1px solid;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #7D0F0F;
color: #FFF;}
.form_settings textarea, .form_settings select
{ font: 100% arial;
width: 299px;}
.form_settings select
{ width: 310px;}
.form_settings .checkbox
{ margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;}
.separator
{ width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;}
table
{ margin: 10px 0 30px 0;}
table tr th, table tr td
{ background: #DCDCDC;
color: #DCDCDC;
padding: 7px 4px;
text-align: left;}
table tr td
{ background: #DCDCDC;
color: #DCDCDC;
}
#testimonials{
width: 133px;
padding: 45px 45px 35px;
background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2);
min-height:90px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#testimonials ul{ list-style:none;}
#testimonials p.text{ font-size:11px;}
#testimonials p.author{
color: #878787;
font-size: 16px;
font-style: italic;
text-align: left;
}
#testimonials p.author a,
#testimonials p.author a:visited{
color:#6aa42a;
}
I'm new to this but here goes. I have been developing this website http://www.panelmaster.co.uk and i have managed to solve the majority of design problems but one!
If you take a look at the site in IE the right column seems to drop down and is not aligned with the right and centre column. This problem only occurs in IE as upon testing i found it was fine in firefox and safari.
I have provided below the CSS for the website.
I would appreciate if you guys can help me with the problem.
Thanks in advance. :)
==========================
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #666;
background-image: url(images/templatemo_body_top.jpg);
background-color: #90857c;
background-repeat: repeat-x;
background-position: top;
text-align: left;
}
a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #073475; text-decoration: underline; }
h3 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h2 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h1 {
color: #696969;
font-size: 20px;
font-weight: bold;
}
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.float_l { float: left; }
.float_r { float: right; }
.margin_r20 { margin-right: 20px; }
#templatemo_body_wrapper {
width: 100%;
background: url(images/templatemo_body_bottom.png) repeat-x bottom center;
}
#templatemo_wrapper {
width: 970px;
padding: 0 10px;
margin: 0 auto;
background: url(images/templatemo_wrapper_top.jpg) no-repeat top center;
}
/* header */
#templatemo_header {
clear: both;
width: 890px;
height: 60px;
padding: 20px 40px
}
#templatemo_header #site_title {
float: left;
padding-top: 15px;
}
#site_title a {
font-size: 24px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
#site_title a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title a span {
display: block;
margin-top: 5px;
font-size: 14px;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
}
/* end of header */
/* menu */
#templatemo_menu {
clear: both;
width: 970px;
height: 80px;
background: url(images/templatemo_menubar.png) no-repeat;
}
#search_box {
width: 990px;
height: 35px;
text-align: right;
}
#search_box form {
margin: 0;
padding: 5px 40px;
}
#search_box #input_field {
height: 20px;
width: 300px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#search_box #submit_btn {
height: 24px;
width: 100px;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
color:#666666;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#templatemo_menu ul {
width: 890px;
height: 35px;
margin: 0;
padding: 7px 40px;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
margin-right: 40px;
font-size: 13px;
text-decoration: none;
color: #fff;
font-weight: normal;
outline: none;
}
#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
color: #162127;
}
/* end of menu */
/* contetnt */
#templatemo_content_wrapper {
clear: both;
padding: 0px 0;
}
#templatemo_content {
float: left;
margin-left: 10px;
width: 550px;
}
#banner {
margin: 0 0 10px 0;
}
#templatemo_content #content_top {
width: 550px;
height: 20px;
background: url(images/templatemo_content_top.png) no-repeat;
}
#templatemo_content #content_bottom {
width: 550px;
height: 20px;
background: url(images/templatemo_content_bottom.png) no-repeat;
}
#templatemo_content #content_middle {
width: 510px;
padding: 5px 20px 0px 20px;
background: url(images/templatemo_content_middle.png) repeat-y;
}
#content_middle p {
text-align: justify;
}
.templatemo_sidebar_wrapper {
width: 200px;
}
.templatemo_sidebar {
width: 197px;
padding-right: 3px;
background: url(images/templatemo_sidebar_middle.png) repeat-y;
}
.templatemo_sidebar_top {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_top.png) no-repeat;
}
.templatemo_sidebar_bottom {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_bottom.png) no-repeat;
}
.templatemo_sidebar .sidebar_box {
clear: both;
padding-bottom: 20px;
}
.sidebar_box1 {
padding: 15px;
}
.sidebar_box h2 {
color: #2d84ad;
font-size: 16px;
padding-left: 25px;
font-weight: bold;
margin: 0 0 10px 10px;
background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat;
}
.sidebar_box .sidebar_box_content {
padding: 15px;
background: url(images/templatemo_sidebar_box_top.png) top repeat-x;
}
.sidebar_box img {
border: 1px solid #999;
margin-bottom: 5px;
}
.sidebar_box .discount {
margin: 5px 0 0 0;
font-weight: bold;
}
.sidebar_box .discount span {
color: #C00;
}
.left_sidebar_box .discount a {
font-weight: bold;
color: #000;
}
.sidebar_box .categories_list {
margin: 0;
padding: 0;
list-style: none;
}
.categories_list li {
padding: 0;
margin: 0;
}
.categories_list li a {
display: block;
color: #201f1c;
padding: 5px 0 5px 20px;
background: url(images/list.png) center left no-repeat;
}
.categories_list li a:hover {
color: #439ac3;
text-decoration: none;
}
.news_box {
clear: both;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #999;
}
.news_box h4 {
padding: 2px 0;
margin: 0;
}
.news_box h4 a {
font-size: 12px;
font-weight: normal;
color: #1893f2;
}
#newsletter_box label {
display: block;
margin-bottom: 10px;
}
#newsletter_box .input_field {
height: 20px;
width: 155px;
padding: 0 5px;
margin-bottom: 10px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
}
#newsletter_box .submit_btn {
float: right;
height: 30px;
width: 80px;
margin: 0px;
padding: 3px 0 15px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
}
.product_box {
float: left;
width: 223px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #CCC;
text-align: center;
}
.product_box img {
margin-bottom: 10px;
}
.product_box h3 {
color: #2a2522;
font-size: 12px;
margin: 0 0 10px;
}
.product_box p {
margin-bottom: 10px;
}
.product_box p span {
color: #cf5902;
font-size: 14px;
font-weight: bold;
}
.product_box .detail {
float: right;
}
.product_box .addtocard {
float: left;
font-weight: bold;
padding-right: 20px;
background: url(images/templatemo_shopping_cart.png) bottom right no-repeat;
}
/* end of content */
/* footer */
#templatemo_footer_wrapper {
background: url(images/templatemo_footer.png) repeat-x;
}
#templatemo_footer {
width: 910px;
height: 85px;
padding: 50px 40px 30px 40px;
margin: 0 auto;
text-align: center;
color: #a9a098;
}
#templatemo_footer a {
color: #d7d1cc;
font-weight: normal;
}
#templatemo_footer a:hover {
text-decoration: none;
color: #FFFF33;
}
#templatemo_footer .footer_menu {
margin: 0 0 30px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #d7d1cc;
}
.footer_menu li a {
color: #d7d1cc;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
/*twitter*/
#twitter_div {border-top: 0px;}
#twitter_div a {color: #0000ff !important;}
#twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;}
#twitter_update_list li {list-style-type: none; padding-right: 5px; }
#twitter_update_list li a {color: #0000ff; padding-right: 5px;}
#twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;}
#twitter_div a, #twitter_update_list li a {text-decoration: none !important;}
#twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}
Try moving the DIV with the class "templatemo_sidebar_wrapper" inside the DIV with the class "templatemo_content_wrapper".
On another note, there is quite a bit wrong with your site. I'm not trying to frustrate you or put you down, but you really should invest a serious amount of time into learning web design. It took me about 1 minute and 45 seconds to load your site which has a footprint of almost 10MB. This is extremely unacceptable by any standard. I would highly recommend switching to www.squarespace.com or something similar. I can tell you right now that it would cost more money to have a web design company fix your site than it would to have them design one from the ground up.
In its current state, your website will likely hurt your business more than it will help. Good luck.
Edit: Move "templatemo_sidebar_wrapper float_r" inside "templatemo_content_wrapper" (I'm not sure this is going to work...you have a lot going on on this page). Your code currently looks like this:
<div id="templatemo_content_wrapper">
<div class="templatemo_sidebar_wrapper float_l"></div>
<div id="templatemo_content"></div>
<div id="content_bottom"></div>
</div>
<div class="templatemo_sidebar_wrapper float_r"></div>