- This topic is empty.
-
AuthorPosts
-
August 23, 2012 at 11:28 am #39483thelumpsterMember
For some reason module content in the left column of the link before runs off the bottom of the screen. The DIV stops where it is supposed to, but modules don’t extend the container DIV. Any help would be appreciated
http://traffikcone.com/joomla_harrylevy/hl/heres the css:
@charset "UTF-8";
/* CSS Document */
body{
padding:0;
margin:0;
background:url(../images/background_blue_white.gif);
background-repeat:repeat-x;
background-attachment:fixed;
}
div#container {
background:url(../images/main_background.png) repeat-y; background-position:14px 200px;
position:relative;
width : 1000px;
margin: 0 auto;
padding-top: 0;
text-align:left;
}
div#branding { z-index : 1; position : relative; width : 100%; height : 165px; }
div#branding h1 {margin:0px; z-index : 2; position : relative; left : 10px; top : 0px; width: 980px; height : 205px; background : url(../images/header_main.png) no-repeat;text-indent:-9999px; }
div#phone { z-index : 8; position : absolute; right : 55px; top :58px;font-family: Georgia,"Arial Black", Arial, sans-serif; font-size:30px; font-weight:bold;line-height:1em; text-align:right; color:#ffffac;width:160px;}
div#email a{ z-index : 9; position : absolute; right : 55px; top :117px;font-family: Georgia,"Arial Black", Arial, sans-serif; font-size:18px; font-weight:bold;line-height:1em; text-align:right; color:#ffffac;text-decoration:none; }
/* MAIN NAV Styles*/
#mainNav {
float:left;
z-index : 3
background-color:#BA0000;
width:752;
z-index:1;
display:block;
left: 200px;
top: -23px;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
div#mainNav ul, div#mainNav li {
font-family: Georgia, "rosewood-std-fill", Georgia, serif; font-weight:bold;
display: inline;
margin:0;
padding:0;
list-style:none;
}
div#mainNav a{
display:block;
padding:0 5px 0 5px;
border-right:2px solid #f04e38
}
div#mainNav a:link{
padding-top:5px;
padding-bottom:5px;
color:#FFC;
float:left;
text-decoration:none;
}
div#mainNav a:visited{
padding-top:5px;
padding-bottom:5px;
color:#FFF;
float:left;
text-decoration:none;
}
div#mainNav a:hover{
background-color:#ffffac;
color:#BA0000;
padding-top:5px;
padding-bottom:5px;
}
div#mainNav li i {
display:none;
}
div#left {
background:#F04E38;
/*background:url(../images/left_menu_back.png) no-repeat 0 100%; */
width:151px;
margin:0px 0px 0px 56px;
padding:26px 5px 0px 5px;
float:left;
position: absolute;/* this gives IE6 hasLayout to properly clear */
top:195px; bottom: 0px;
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
div #mainContent {
display:block;
float:left;
margin-left:215px;
width:730px;
padding-top:10px;
position: relative;/* this gives IE6 hasLayout to properly clear */
}
//side menu styles
#menu_sub_01 {
}
div#menu_sub_01 ul {padding:0px 0px 0px 0px; margin:0 0 20px 0;list-style:none; font-family: "rosewood-std-fill", Georgia, serif; font-weight:bold;}
div#menu_sub_01 li a:link{display:block;text-decoration:none; color:#ffffff;background-color:#BA0000; font-size:12px;text-align:right; padding: 5px;margin:0px 0 4px 0;}
div#menu_sub_01 li a:visited{display:block;text-decoration:none; color:#ffffff;background-color:#BA0000; font-size:12px;text-align:right; padding: 5px;margin:0px 0 4px 0;}
div#menu_sub_01 li a:hover{display:block;text-decoration:none; color:#632023;background-color:#ffffac; font-size:12px;text-align:right; padding: 5px;margin:0px 0 4px 0;}
div#menu_sub_01 li a:active{display:block;text-decoration:none; color:#854146;background-color:#Fcfdde; font-size:12px;text-align:right; padding: 5px;margin:0px 0 4px 0;}
/* get rid of the annoying LOF showcase item Number*/
div#menu_sub_01 li i {
display:none;
}
/* ~~ The footer ~~ */
div #footer {color:#ffffac;
text-align:center;
padding: 5px;margin:0px 0 2px 0;
height:35px;
background:url(../images/footer_back.png) 0 100%;
margin 0px;
padding: 2px;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
div #footer p { font-size:14px;font-weight:bold; }
div #footer a:link { color:#fff; text-decoration:none;}
div #footer a:hover{ text-decoration:none; color:#BA0000;background-color:#ffffac;}
div #footer a:visited{ color:#fff; text-decoration:none;}
August 23, 2012 at 2:14 pm #108363TheDocMemberYour #left div has an absolute position, so it’s not going to extend your content div.
August 23, 2012 at 3:38 pm #108375thelumpsterMemberThanks, I think you could be right. Been having problems with my positioning. If I remove or change to relative it throws everything out of whack. Any suggestions on how to fix it?
August 23, 2012 at 5:12 pm #108380TheDocMember1) Remove the absolute position from #left
2) Remove the margin-left from #mainContent
3) Add float: right; to #mainContentThat should be enough to get ya started!
August 23, 2012 at 7:05 pm #108388thelumpsterMemberYour a STAR!,
thank you very much, it was the margin-left that kept throwing any changes out.
Much appreciated
:D -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.