|
 |
|
|
|
| Thread title: HTML/CSS Help Please |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
02-05-2011, 08:20 PM
|
#1
|
Status: OG
Join date: Apr 2006
Location: California
Expertise: Design, Music, Xhtml, Css
Software: Photoshop, Coda, FL Studio
Posts: 2,007
|
 HTML/CSS Help Please
Hey guys I'm really having a lot of trouble with this, I tried reading a bunch of tutorials but none of them really fit for my layout.
Basically I need the page to stretch to 100% of the browser height with the footer at the bottom.
Right now It cuts off at the end of the content. I got the footer to stick earlier, but then the content background wasn't stretching. It gets tricky because of the header and navigation at the top, and the 2 background images.
Here's the html version:
http://worldofkewl.com/html/
Help would greatly be appreciated. Thanks.
|
|
|
|
02-06-2011, 02:09 AM
|
#2
|
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
Posts: 2,097
|
Have a look at the "sticky footer" technique.
|
|
|
|
02-06-2011, 05:02 AM
|
#3
|
Status: OG
Join date: Apr 2006
Location: California
Expertise: Design, Music, Xhtml, Css
Software: Photoshop, Coda, FL Studio
Posts: 2,007
|
Thats for when you want the footer to scroll with the page right? I'm looking to have the blank space stretch to 100% of the screen, you know?
|
|
|
|
02-06-2011, 09:01 AM
|
#4
|
Status: Junior Member
Join date: Sep 2010
Location: Romania & U.S.
Expertise: Coding and Design
Software: Photoshop and Notepad++
Posts: 89
|
|
|
|
|
02-06-2011, 05:43 PM
|
#5
|
Status: OG
Join date: Apr 2006
Location: California
Expertise: Design, Music, Xhtml, Css
Software: Photoshop, Coda, FL Studio
Posts: 2,007
|
Originally Posted by DigiTheme 
|
Yeah I read that earlier and actually followed it. The problem is is the middle section cuts off after theres no more content.
|
|
|
|
02-28-2011, 05:12 PM
|
#6
|
Status: Junior Member
Join date: Jul 2009
Location: Tijuana, México
Expertise: Web Design,CSS,Photoshop
Software: Photoshop, TopStyle, Firefox
Posts: 43
|
Have you tried with a clear div? Use an empty div after your last content and add this values "width:100%; clear:both;" value.
Hope that helps.
|
|
|
|
02-28-2011, 09:36 PM
|
#7
|
Status: I'm new around here
Join date: Jul 2010
Location: Ohio
Expertise: Design
Software: Photoshop, Dreamweaver, Flash
Posts: 2
|
Did you find a solution? If not, I've ran into the same issue to. Here's my fix.
body{
width:100%;
height:100%;}
make sure your footer is outside of the main div or wrapper and apply the attribute:
bottom:0;
|
|
|
|
03-05-2011, 07:19 AM
|
#8
|
Status: I'm new around here
Join date: Mar 2011
Location:
Expertise:
Software:
Posts: 1
|
Here are the code for my style sheet:
body {margin: 0px; padding: 0px; font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
background: url(domepaper.jpg) no-repeat 0% 0%}
|
|
|
|
03-08-2011, 09:18 AM
|
#9
|
Status: I'm new around here
Join date: Jul 2010
Location: california,US
Expertise: SEO,SEM,web design,web develop
Software: firefox
Posts: 20
|
HTML/CSS Help Please
You should use outer table or div size in 100% not in fixed pixels,when you open your application in different platform it automatically adjust.
|
|
|
|
04-24-2011, 01:33 PM
|
#10
|
Status: I'm new around here
Join date: Apr 2011
Location: Connecticut, United States
Expertise: design/development
Software: Coda, Photoshop
Posts: 6
|
Yeah, by default most browsers put a margin/padding on the borders of any page. In order to remove this, simply write this at the top of your stylesheet:
Code:
* {
margin:0;
padding:0;
border:none;
}
That will "reset" the styles and remove the margin border.
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|
|
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed