CSS Problems |
[eluser]Jamie Rumbelow[/eluser]
Hey! I'm having a few troubles with my layout. Screenshot index.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> style.css Code: @charset "utf-8"; Firstly, the main content div's background does not carry on untill the end of the page (or footer), and secondly, the sidebar's text doesnt fit properly. All the sizes and stuff are fine, i've checked. What am I doing wrong? Thanks, Jamie
[eluser]Jay Turley[/eluser]
Without sounding facetious, I have to point out that it is practically impossible to diagnose CSS or HTML problems without the ability to look at the source code.
[eluser]Jay Turley[/eluser]
Okay, a couple things: First of all, IMHO, if you have a link to a live version of the page, it makes it easier to troubleshoot, as that way there is no disconnect between what you are asking about and the code that helpers might view. For instance, using your CSS above, I pasted it into the html for my personal testing, but that might (although highly doubtful) be the source of a problem. In addition, look at the third point below. Because you and I are not looking at the same code, I can't be sure I am looking at the problem, or didn't inadvertently clean it up when simply cutting and pasting your code. Second, typically, the background of CSS elements only extends as far as the element itself (margins/padding aside). One of the earliest methods of making a column background extend to 100% of the page-height is by use of faux columns (google for it, there's a good ALA article from 2004 on it). Another method I have heard of but not tried is using wrapper divs (http://articles.techrepublic.com.com/510...68973.html). Third, the code you posted doesn't look like the screenshot (I am going to assume it is a previous version in the screenshot). When I pasted the CSS into a <style> tag in the HTML you wrote above, all the text looks fine to me, both sidebar and main column. I was not able to view the issues that were shown in the screenshot (using IE7 and FF2 on Windows XP Pro). Perhaps someone else might have different results.
[eluser]Firestorm ZERO[/eluser]
Move #sidebar before the #main. Note this will only look correct in 1024 res. In higher resolutions, the #sidebar pushes into #main. This is because your margin-left is in 20em. Plus also note the box model. Divs shrink to the size of the content. As Jay said you can solve this either by faux columns, wrapping divs or 100% height. Search google on these methods. Some extra suggestions, if you use Firefox get Firebug and Web developer extensions as they are extremely useful in debugging design layouts.
[eluser]Yunus Khan[/eluser]
Hello, Just write the following code for properly align the sidebar text. #sidebar { float: left; width: 25%; padding-left: 25px; text-align :justify; } If you need more help please give me your expected design screenshot.
[eluser]Jamie Rumbelow[/eluser]
Thanks guys for the help. Sorry I didn't post a link - the thought didnt seem to come across to me. I have firebug installed, and I did use it. Thanks, Jamie
[eluser]GSV Sleeper Service[/eluser]
you'll need to use the 'faux columns' technique to solve the background issue, and the sidebar is a mixture of a clear problem and not enough space for it to fit.
[eluser]Lone[/eluser]
I have only been able to really sort out one way to solve this problem as all of the other ways just start to feel to 'hackish' to me as they have a fix for ever browser - I dont like this as it feels like when new version comes out it will break it. I like setups that need minimal to no 'hacks' for IE etc. Below is my way of solving what you think are tryign to achieve: HTML Code: <div id="main"> CSS Code: #main { The cruicial thing from this setup is the '../images/main_bg.gif' image - this is tiled vertically and should be setup as the background you want to carry down the column.
[eluser]Jamie Rumbelow[/eluser]
Thanks very much! I have everything working now! |
Welcome Guest, Not a member yet? Register Sign In |