homepage Welcome to WebmasterWorld Guest from 107.22.45.61
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Border not long enough to reach bottom section
szkoda




msg:3591927
 2:34 pm on Mar 5, 2008 (gmt 0)

Two Questions,

Q1
I have a border line going down the sidebar in my website but in some cases it is not long enough to reach the bottom section of the page i.e if the pages main content stretches too far down the page then the border line will not reach the bottom.

is there any way to connect two div boxes so the border will reach the bottom section of the page?

Q2 i have google adsense in the sidebar on my page but as i designed my website in 1600x1200 when i switch to 1024x768 the google ads spill over into the main content. is there any way to force it to stay in the sidebar?

 

Kate82




msg:3593014
 3:04 pm on Mar 6, 2008 (gmt 0)

Q1: Can you give us an example of your code? specifically the css for your divs and the code on the page?

Q2: again has to do with your css, can you put it in here?

szkoda




msg:3593366
 8:04 pm on Mar 6, 2008 (gmt 0)

i'll warn you now - im a complete newbie at all this so excuse my ignorance.

I have two style sheets, this is the code for the first one:

body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;

}

.twoColLiqLtHdr #container {
width: 90%;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: #333333;

}

.twoColLiqLtHdr #header {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-color: #333333;
border-bottom: solid #000000 10px;

}

.twoColLiqLtHdr #header h1 {

margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */

padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

}

/* Tips for sidebar1:

1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width.

2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.

3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.

*/

.twoColLiqLtHdr #sidebar1 {
float: left;
width: 24%; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
background-color: #333333;
border-right: solid #000000 10px;

}

.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {

margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */

margin-right: 10px;

}

/* Tips for mainContent:

1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.

2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).

3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.

*/

.twoColLiqLtHdr #mainContent {
margin: 0 180px 0 26%; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */

}

.twoColLiqLtHdr #footer {
padding: 0 10px;
background-color: #333333;
border-top: solid #000000 10px;

}

.twoColLiqLtHdr #footer p {

margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

}

/* Miscellaneous classes for reuse */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

float: right;

margin-left: 8px;

}

.fltlft { /* this class can be used to float an element left in your page */

float: left;

margin-right: 8px;

}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

And this is the second one:

* {
margin: 0px;
padding: 0px;
}

body {
padding-top: 20px;
background-color: #000;
color: #aca9a9;
font-family: verdana, arial, sans-serif;
font-size: 10px;
text-align: center;
letter-spacing: 1px;
}

a {
color: #fff;
text-decoration: none;
}

a:hover {
color: #ea9a2e;
}

span {
display: none;
}

img {
border: none;
}

ul {
list-style-type: none;
}

li {
list-style-type: none;
}

p {
margin: 7px 0px 10px;
text-align: justify;
line-height: 12px;
}

.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}

#container {
margin: 0px auto;
text-align: left;
background: url('images/content_bgcolor.gif') #2f2e2e repeat-x 0px 0px;
border: #860b09 2px solid;

width:778px;
voice-family: "\"}\"";
voice-family:inherit;
width:774px;
}

#container {
padding: 0px;
}

#body_image {
margin: 0px 0px 0px 194px;
height: 431px;
width: 580px;
background: url('images/header_image.png') transparent no-repeat 100% -1px;
z-index: 1;
position: absolute;
overflow: hidden;
}

/* Page Header */

#page_header {
width: 774px;
height: 60px;
background: url('images/header_background.gif') repeat-x 0px 0px;
overflow: hidden;
}

#page_header h1 {
width: 330px;
height: 51px;
background: url('images/website_name.gif') no-repeat 42px 12px;
float: left;
}

#page_header h3 {
width: 230px;
height: 51px;
background: url('images/header_welcome.gif') no-repeat 23px 12px;
float: left;
}

/* Page Menu */

#page_menu {
margin-bottom: 20px;
width: 774px;
height: 30px;
background: url('images/menu_background.gif') repeat-x 0px 0px;
}

#page_menu ul {
height: 30px;
}

#page_menu li {
padding: 0px 18px 0px 12px;
height: 30px;
background: url('images/menu_list_bg.gif') no-repeat 12px 0px;
float: left;
}

#page_menu li a {
width: 123px;
height: 30px;
display: block;
overflow: hidden;
cursor: pointer;
z-index: 2;
position: absolute;
}

#page_menu .online a {
background: url('images/menu_online.gif') no-repeat 50% 11px;
}

#page_menu .downloads a {
background: url('images/menu_downloads.gif') no-repeat 50% 11px;
}

#page_menu .community a {
background: url('images/menu_community.gif') no-repeat 50% 11px;
}

#page_menu .about a {
background: url('images/menu_about.gif') no-repeat 50% 11px;
}

#page_menu li span {
width: 123px;
height: 30px;
display: block;
overflow: hidden;
}

#page_menu li a span {
display: none;
}

/* Page Forms */

#page_forms {
border-right: #860b09 2px solid;
float: left;
}

#page_forms input {
padding-top: 5px;
padding-bottom: 2px;
color: #c6c4c4;
background-color: #373837;
border: #5b5d5b 1px solid;
font-family: tahoma, arial, sans-serif;
font-size: 13px;
font-weight: bold;
}

#page_forms input.button {
padding: 0px;
border: none;
cursor: pointer;
}

/* User Login */

#userlogin_header {
border-width: 2px 0px;
border-color: #860b09 #000 #860b09;
border-style: solid;
}

#userlogin_header h2 {
width: 196px;
height: 29px;
background: url('images/userlogin_header.gif') no-repeat 50% 0%;
}

#userlogin {
height: 235px;
width: 196px;
overflow: hidden;
}

#userlogin form {
margin: 12px 0px 10px;
width: 196px;
text-align: center;
}

#userlogin form strong {
display: block;
width: 70px;
height: 24px;
margin-bottom: 3px;
float: left;
clear: left;
}

#field_username, #field_password {
display: block;
clear: both;
}

#button_enter {
margin: 0px auto;
width: 40px;
float: none;
clear: both;
display: block;
}

#field_username strong {
background: url('images/userlogin_login.gif') no-repeat 50% 6px;
}

#field_password strong {
background: url('images/userlogin_password.gif') no-repeat 50% 6px;
}

#userlogin input {
margin-right: 2px;
margin-bottom: 12px;
width: 122px;
float: right;
clear: right;
}

#userlogin input.button {
margin: 7px 0px;
width: 40px;
height: 18px;
float: none;
clear: both;
}

#userlogin_links {
padding: 10px 12px 0px;
border-top: #860b09 2px solid;
}

#userlogin_links a#register {
background: url('images/userlogin_register.gif') no-repeat 0px 0px;
display: block;
}

#userlogin_links a#notregister {
background: url('images/userlogin_notregister.gif') no-repeat 0px 0px;
display: block;
}

#userlogin_links a strong {
width: 170px;
height: 20px;
display: block;
cursor: pointer;
}

/* Site Search */

#sitesearch_header {
border-top: #860b09 2px solid;
}

#sitesearch_header h2 {
width: 196px;
height: 25px;
background: url('images/sitesearch_header.gif') no-repeat 50% 100%;
}

#sitesearch {
width: 196px;
border-bottom: #860b09 2px solid;
}

#sitesearch form {
margin: 12px 5px 20px;
width: 186px;
height: 25px;
clear: both;
overflow: hidden;
}

#sitesearch input {
padding: 2px 0px;
width: 154px;
float: left;
font-size: 12px;
}

#sitesearch input.button {
width: 24px;
height: 20px;
float: right;
}

/* Content Body */

#content_body {
clear: left;
float: left;
width: 774px;
}

#clearthis_contentbody {
width: 774px;
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
}

.content_header {
background: url('images/content_header_bg.gif') repeat-x 0px 0px;
}

.content_entry {
padding: 23px 0px 0px;
}

.content_entry .thumbnail {
margin: 5px 0px 15px;
float: left;
border: #a09e9e 1px solid;
}

.content_entry .thumbnail img {
float: left;
}

.content_entry .entry_text {
padding-right: 15px;
width: 210px;
float: right;
text-align: justify;
}

.content_entry .entry_text h3 a{
padding-bottom: 5px;
color: #c71212;
font-size: 10px;
font-weight: normal;
}

/* Recent Reviews */

#reviews_box {
padding: 15px 10px;
float: left;
}

#reviews {
width: 378px;
}

#reviews .content_header h2 {
width: 142px;
height: 20px;
background: url('images/reviews_header.gif') no-repeat 0px 0px;
}

#reviews .content_entry {
width: 378px;
}

/* Play Now */

#playnow_box {
padding: 15px 12px;
float: right;
}

#playnow {
width: 351px;
}

#playnow .content_header h2 {
width: 100px;
height: 20px;
background: url('images/playnow_header.gif') no-repeat 0px 0px;
}

#playnow .content_entry {
width: 351px;
}

#playnow .content_entry .thumbnail {
margin-left: 3px;
}

#playnow .content_entry .entry_text {
padding-right: 10px;
width: 200px;
}

/* Page Footer */

#page_footer {
padding: 15px 10px;
color: #e5e0e0;
font-size: 12px;
text-align: center;
letter-spacing: 0px;
}

#page_footer a {
color: #e5e0e0;
text-decoration: underline;
}

#page_footer a:hover {
color: #bb1414;
}


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved