CSS being an arse.

M

martynball

New Member
Messages
60
Reaction score
0
Points
0
Bascially, I want the "main_text" div go all the way to the bottom of the page, but for some reason width:100%; won't do it :S

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fenton Gallery - Home</title>
<?php include 'includes/inc_scripts.php'; ?>
</head>
<body>
<div class="header">
  <div class="links" align="center">
    <?php include 'includes/inc_menu.php'; ?>
  </div>
</div>
<div class="navbar" align="center">
  <?php include 'includes/inc_navbar_content.php'; ?>
</div>
<div class="main_text">
  <p class ="g1">Fenton Gallery is now taking Art from all ages. Anyone can easily submit their artwork to our website by simply uploading the picture. We will then check that the Art does not violate our <a class="plain" href="#">Terms and Conditions</a>, then add it to the gallery.</p>
</div>
<div class="bottom-bar" align="center">
  <?php include 'includes/inc_sponser.php'; ?>
</div>
</body>
</html>

CSS:
Code: 
@import "text-styles.css";
@import "gallery-styles.css";
@import "contact-styles.css";
@import "download-styles.css";
@import "database-styles.css";
/* Start Main Styles */

body {                            /*Top header with background image*/
    background-image:url(../images/vista/header.jpg);
    background-repeat:no-repeat;
    background-position:top;
    background-color:#1b1b1b;
}
.header {                        /*Contains background with curved edges and navagation links inside*/
    background-image:url(../images/vista/header_links.png);
    background-repeat:no-repeat;
    height:3.3em;
    margin-top:9.3em;
    background-position:center;
}
.navbar {                        /*Bar going accross page under the navigation links*/
    background-image:url(../images/vista/narbar.gif);
    background-repeat:repeat-x;
    height:3em;
    width:100%;
    left:0px;
    position:absolute;
    margin-bottom:0px;
    z-index:1;
}
.main_text {                    /*Main content div*/
    padding-top:2em;
    background-color:#2a2a2a;
    width:785px;
    height:100%;
    border-left:1px;
    border-right:1px;
    border-left-color:#62c2ff;
    border-right-color:#333333;
    border-style:solid;
    border-bottom:none;
    margin:0 auto;
}
.bottom-bar {
    background-color:#282828;
    bottom:0px;
    width:100%;
    height:1.5em;
    left:0px;
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#333333;
    position:fixed;
}
.wrapper-1 {
    position: relative;
    clear: both;
    background-color:#333333;
    margin:0 auto;
    height:100%;
}
/* End Main Styles */

/*Special*/

.spon-img {
    opacity:0.3;
    filter:alpha(opacity=35);
    margin-left:5em;
}
.spon-img:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
    margin-left:5em;
}
a.img {                /*Removes styles from images*/
    border:0px;
    padding:0px;
    background:none;
    margin:0px;
}
/*END Special*/

/*Menu Links */                    /*Menu link styles*/
a.menu:link {
    color:#CCCCCC;
    text-decoration: none;
    font-family:calibri;
    background-image:url(../images/vista/button_unactive.png);
    background-repeat:no-repeat;
    background-position:center;
    padding:14px;
    padding-left:36px;
    padding-right:36px;
    margin-left:25px;
}
a.menu:visited {
    color:#CCCCCC;
    font-family:calibri;
    text-decoration: none;
    background-image:url(../images/vista/button_unactive.png);
    background-repeat:no-repeat;
    background-position:center;
    padding:14px;
    padding-left:36px;
    padding-right:36px;
    margin-left:25px;
}
a.menu:hover {
    color:#CCCCCC;
    font-family:calibri;
    text-decoration: none;
    background-image:url(../images/vista/button.png);
    background-repeat:no-repeat;
    background-position:center;
    padding:14px;
    padding-left:36px;
    padding-right:36px;
    margin-left:25px;
}
/*END LinkStyle */

http://martynleeball.x10hosting.com/index.php
 
Last edited:
Anna

Anna

I am just me
Staff member
Messages
11,739
Reaction score
579
Points
113
You might wanna try putting height:100% in the body element, the main_text can never be higher then it's surrounding element, in this case the body
 
spadija

spadija

New Member
Messages
48
Reaction score
1
Points
0
I'm pretty sure there is no way to extend a div vertically short of adding content to it to stretch it. If you want to extend the background so it looks like the div does go all the way down, you can make a div that contains the lowest item in the page and apply the background to that. I'm pretty sure it won't work with your absolutely positioned bottom bar though, since absolute positioning breaks the element out of the normal flow.

This picture might clarify what I mean:
Code: 
+------------------------+
| div with background    |
| +--------------------+ |
| | text area          | |
| +--------------------+ |
|                        |
|                        |
|                        |
| +--------------------+ |
| | bottom bar         | |
| +--------------------+ |
+------------------------+


If you want the absolutely positioned bottom bar, you might want to create a footer div after the main_text div and give it a background the ends the page nicely. It won't go all the way to the bottom, but it will look much nicer than a sharp cut off.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
From CSS 2.1, § 10.5 "Content height: the 'height' property":
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
Click to expand...
The height of .main_text is 100% of its parent's (<body>'s) height, which is 100% of its parent (<html>), which is implicitly auto, hence the other heights become auto. If you keep reading the standard, you find:
A percentage height on the root element is relative to the initial containing block.
Click to expand...
The "root element" of an HTML document is (unsurprisingly) <html>. The "initial containing block" is the viewport when a webpage is displayed on a screen (and other continuous media) and the area of paper you can print on when a webpage is printed (or displayed on other paged media). Thus you can set a height (though you should instead set min-height, or be sure to set overflow: auto) on <html> and stretch out .main_text. Of course, if you do that, you'll run afowl of how you're inserting the header image and positioning .navbar. Even so, I recommend trying out this option. Turn the header into an element rather than a background image, and don't absolutely position .navbar.

The page has a few more mistakes and problems.
  • You've got a <body> tag before the </head> close tag, which is followed by a second <body> tag.
  • Inline event handler attributes (such as "onload") don't need the "javascript:" scheme. That's just for attributes that require a URI. Instead, the "javascript:" is being interpreted as a label, which isn't causing a problem, it's just messy.
  • hidediv and commentsShow don't check whether #comments exists and yet are hidediv is called when there's no #comments. Either check that the element exists or (better yet) don't call the function on pages where it doesn't.
  • Any group of things that are related should reflect this somehow; in the case of functions, the relationship should be reflected in the name or namespace. Since JS doesn't have namespaces, the name it is. "hidediv" and "commentsShow" aren't obviously related. Name them either "hideComments" & "showComments", or replace them with more generic "hide" & "show" or "hideElement" and "showElement" functions.
  • These days, there's basically no point in checking for "document.getElementById". If a browser supports JS, it will support the DOM. This points to the real problem:
  • If JS is unsupported/disabled, comments won't be hidden. Furthermore, the "load" event isn't fired until everything loads, such as images and other external objects, which is why you occasionally see the comments briefly flashed on the screen. The default state of #comments should be hidden. If JS is disabled, the "Show comments" link should go to a separate comments page:
    HTML: 
    <script>
function showElement(id) {
    document.getElementById(id).style.visibility = 'visible';
}
</script>
...
<a class="comment-links" onclick="return showElement('comments')" href="comments">Show Comments</a>
Check your error console and validate your pages. You'll catch some errors like these.
 
Last edited:
xav0989

xav0989

Community Public Relation
Community Support
Messages
4,467
Reaction score
95
Points
0
adding to the css
Code: 
html {
        height: 100%;
}
does make the main_text fill all the space, but you'll need more to work a bit more on the design if you choose that option.
 
M

martynball

New Member
Messages
60
Reaction score
0
Points
0
Wow, mission. You are really helpful Lol. And thanks to you other three. :)

Edit: I'm going to re-code the layout.

Edit2: Is there a fix for the show and hide javascript for IE, as it does not work. Works fine in firefox because firefox is ownage.

I HATE Internet Explorer, but the majority of businesses and basic computer users use it... god knows why: slow; loks nasty; needs different code although almost all other browsers don't...

Microsoft just have to be different :(
 
Last edited:
G

greatm

New Member
Messages
25
Reaction score
0
Points
0
There is also the min-height tag, though ie6 doesn't like it and needs the standard height tag to do the same thing so you could do a condition and tell it touse the height tag if in ie6/older and then for every other browser use the min-height tag. I am pretty sure you need to set your body to a height of 100%, but don't remember if you need to set html to 100% as well or not. I use html in my css quite often, so I can't remember if you need to add the height: 100%; bit there or not.

As for why most people/businesses use internet explorer, it is easier. In a business where you have even 100 computers and one, maybe two tech people it is just easier to use the software already installed in the machine, especially if you have to reformat the machines a lot and they are older machines. Internet Explorer is also older so more people are used to the name if nothing else, and I can tell you from personal experience that sometimes it is just easier to get someone to use a browser because it is the same as what they use on thier home computers. So it is partially laziness, but with the less techsavvy employees also needing to use the software it is cheaper to stickwith what they know how to use and not have to take the time (which can be a whole lot longer than one would expect) to train them to use firefox or Opera.

As for looks, I think it is personal preference. I am on windows 7 and I like the look of ie8, though it is mostly windows aero letting me look through to my background which is a nice feature. As for speed, pages load fast enough that the time that could be potentially saved by switching browsers would only be effective after measuring the delays over a year. Internet connection and system matienence affect speed more than broswer alone.

Good luck with your CSS, I hope your redesign works out for you and if it doesn't hopefully the min-height tag will be of use.
 
Last edited:
You must log in or register to reply here.
Top