/    Sign up×
Community /Pin to ProfileBookmark

layout problems…

Copy linkTweet thisAlerts:
Aug 15.2003

hey…a few of you might remember me..
anyways, i have a few problems with my[URL=http://hh.fateback.com]website[/URL]…
see the orange side bars? i your screen resolution is anything under 1400×1050, the gray box in the middle will extend past the end of the side bars, and the design looks ugly. this is how it’s supposed to look like: [URL=http://hharchive.port5.com/screen.GIF]screenshot of layout[/URL]
see, i’ve set the height of the side bars “#side” and “#sid” to be 100%, but as you can see, i didn’t realize it was only 100% of the current viewable height. is there any way i can set the height of the sidebars to be something like 110% of the height of the contents(the gray box)? i want to have some empty space (say, 50 pixels) after the hit counter (“34” in the picture).
one option is to just make the height 300% and tell the user to not scroll down, but that isn’t very good.
somebody, help me! i’m trying to make my site as accesible as i can…?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWAug 15.2003 — Hi, I don't know if this relates to your problem in some way, but you have two errors http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhh.fateback.com%2Fstyle.css&warning=1&profile=css2 that you need to sort - ignore the warnings as most of them are irrelevant. The only relevant one is the generic font family alternative.


Anyway, moving swiftly on as they say, how about using

border-left: 30px solid orange;

border-right: 30px solid orange;

On your Div. Then set the height of the div to 100%?
Copy linkTweet thisAlerts:
@SirHans004authorAug 15.2003 — my first priority is to get the layout fixed...

good idea, but if i do that, the orange is contained within the gray box... i need them to extend beyond the gray box.
Copy linkTweet thisAlerts:
@SirHans004authorAug 15.2003 — however, if i apply that border to the body instead, the result is close... the sidebars are on the edges, the scrollbar is to the left of the right sidebar, and the sidebars stay out if you scroll down...

is there a way to get the border to be "margined"further to the center?

[URL=http://hharchive.port5.com/sidebars.JPG]image[/URL]

EDIT:i fixed the css validation problems, but if i change height:100%px; to height:100%; the layout is messed up... why ??
Copy linkTweet thisAlerts:
@DaveSWAug 15.2003 — how about applying a % width to your body? use margin:auto; and text-align:center; to center it for IE and Moz.

Response to edit: I don't know, but if you change it to px...
Copy linkTweet thisAlerts:
@SirHans004authorAug 15.2003 — man... doesnt work.

it just makes the gray box fill up everything.. is there any hope for me????
Copy linkTweet thisAlerts:
@SirHans004authorAug 18.2003 — can anybody help me??

EDIT: I've been working an an alternative... and i have finally finished it. however, i do feel sad that i had to sacrifice some sidebars... but it's the only way it can look good on lower resolution screens.

what it would look like on 800x600:

http://home.graffiti.net/sirhans004:graffiti.net/800x600.GIF

what it looks like on my res (1400x1050):

http://home.graffiti.net/sirhans004:graffiti.net/1400x1050.GIF

so, does anybody think this is the only way to go, or should i try to keep it the way it was?

EDIT2: EUREKA!!! I AM A GENIUS!!!

well, i finally fixed it. now it looks perfect on smaller resolutions and bigger ones!!! YESSSSSS!!

go here: http://hh.fateback.com/index2.htm

it should look just like http://hh.fateback.com

YAY!! (I'm just so happy!)
Copy linkTweet thisAlerts:
@DaveSWAug 18.2003 — Perhaps some code like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled</title>

<style type="text/css">

<!--

html, body {

height: 100%

}

body {

background-color: #000000;

color: #ffffff;

width: 90%;

text-align: center;

margin: auto;

}

#content {

width: 90%;

background-color: #000000;

color: #ffffff;

height: 100%;

border-left: 30px solid #ff9900;

border-right: 30px solid #ff9900;

}

-->

</style>

</head>

<body>

<div id="content">hello</div>

</body>

</html>
×

Success!

Help @SirHans004 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...