CSS positioning troubles

  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

I am currently trying to learn more about CSS positioning, becuase I find it eaiser than tables, and speedier. I have a layout that someone wants me to code for them and there are a couple of things that I dont know how to do, that I need to know to code this thing. First thing is, I dont know anyway to make the <div>'s height go all the way down the page other than making a small slice of the part I want, and making it the background. Also the backround for the sections of the site have gradients to them, I would like to know if there is anyway of expanding the picture in the background, instead of having it repeat. Any help is appreciated, thank you :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • bjhess
  • Student
  • Student
  • User avatar
  • Posts: 77
  • Loc: Owatonna, Minnesota

Post 3+ Months Ago

I googled to this thread. Hopefully linking to another forum is OK.
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

it says i need a login to view the thread, and that costs $ :(
  • bjhess
  • Student
  • Student
  • User avatar
  • Posts: 77
  • Loc: Owatonna, Minnesota

Post 3+ Months Ago

Could be a link restriction thing. Try pasting this into your browser location field:

http://www.webmasterworld.com/forum83/303.htm
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

The only way I've found to control the positioning on height in the css is to use pixels. rtm might be able to offer an alternative. In the meantime, try his tute on absolute positioning:

http://www.caffeinefuelled.net/layouts/ ... solute.php
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

bjhess wrote:
Could be a link restriction thing. Try pasting this into your browser location field:

http://www.webmasterworld.com/forum83/303.htm

Already tried it, still says I require a login

ATNO/TW wrote:
The only way I've found to control the positioning on height in the css is to use pixels. rtm might be able to offer an alternative. In the meantime, try his tute on absolute positioning:

http://www.caffeinefuelled.net/layouts/ ... solute.php

Ive already read those to learn css positioning :) , but sadly nothing about the height arutomatically going the entire height of the page :(
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Quote:
but sadly nothing about the height arutomatically going the entire height of the page


Yeah -- know what you mean. I'm not sure it's possible yet. Perhaps with CSS3 -- I haven't looked much at those specs yet. But I know what you are talking about. I've run into the same issue.
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

ATNO/TW wrote:
Quote:
but sadly nothing about the height arutomatically going the entire height of the page


Yeah -- know what you mean. I'm not sure it's possible yet. Perhaps with CSS3 -- I haven't looked much at those specs yet. But I know what you are talking about. I've run into the same issue.

I dont want to be forced to change the design of this layout...its too cool :x ...but ill probably have to
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Post the link to your page. I won't be able to look at it again until later tomorrow, but perhaps someone can spot something that can be done to fix it.
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

ATNO/TW wrote:
Post the link to your page. I won't be able to look at it again until later tomorrow, but perhaps someone can spot something that can be done to fix it.

well its not really a page its more like an image at the moment, im trying to get everything planned and figured out ahead of time, so i dont code it then have to change a bunch a stuff...here is the link to the image
http://www.bizarroproductions.com/tests/layout.jpg
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

That is pretty slick! I get the feeling you are going to have to experiment with the code quite a bit to get the final result to look like that in most browsers.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

I'm not sure if you can expand background images or not :scratchhead: What I do know is if you can & try it with a gradient it's going to make it look really nasty.

If you ask me your picture is begging to be used in whole as a div background, with transparent background SWFs absolutely positioned in place with Z-Indexed divs, loading content :D
  • bjhess
  • Student
  • Student
  • User avatar
  • Posts: 77
  • Loc: Owatonna, Minnesota

Post 3+ Months Ago

Bobbo171 wrote:
bjhess wrote:
Could be a link restriction thing. Try pasting this into your browser location field:

http://www.webmasterworld.com/forum83/303.htm

Already tried it, still says I require a login


Well, I can't think of any other options. At work I can just click on the link and I'm viewing as a guest. At home, I can't click on the link, but can paste it in my browser. :(

Oh well...
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Bobbo171 wrote:
Already tried it, still says I require a login

I'm registered on that site and registration is free...
  • bjhess
  • Student
  • Student
  • User avatar
  • Posts: 77
  • Loc: Owatonna, Minnesota

Post 3+ Months Ago

Carl wrote:
Bobbo171 wrote:
Already tried it, still says I require a login

I'm registered on that site and registration is free...


True dat. And there is some very useful content over there.
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

my bad, i can get a login...i thought it cost money becuase of all the credit card logos they had on the page it brought me to...anyway I read some of that and I came up with an idea, but I dont know how to use the get availabeheight javascript thing?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Ack, javascript for a page layout, how is it going to look to those (foolish) 10% who have JS off? Javascript is the only way I know of getting the div columns to all match up nicely, and IMO it is not a viable technique for laying out a page, hence no mention on my site ;)

Anyhoo, streching the background-image, as opposed to tiling, should be coming in CSS3, and it will be several years before CSS3 is truely viable (due to browser compatibility and people getting round to getting the new browsers etc etc etc)

Now looking at the layout you posted (which is nice BTW), I cant see why you can't do it with faux columns, using tiling :? I take it it is that big empty section that is going to stretch. How come you can't use a 400 byte image like:

http://www.caffeinefuelled.net/richard- ... bgtile.gif

tiled vertically on the body, then overlay the rest of the layout graphics on top of it?

Faux columns:
http://www.caffeinefuelled.net/layouts/ ... olumns.php
Includes a link to the more in-depth ALA tutorial as well.
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

there is only one problem with using a bg image and tiling it that I had thought of before. With the gradients there, the image for the top of the content would have a huge height, around 135px then making the text in the content that far from the top of the content box, but before In this thread or a different one someone mentioned layering if that works how I image it would, would that mean that I can have the content on a layer above the images and stuff for the layout?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Sorry should have looked closer at the sample image. Anyway, this is still workable. You have a repeating background image on the body element. Then the content would go in a div, and you then put the vert fade as a a bg image on that content div. Because the content is above the body, the second image will cover the lower one, but not push the content down.

Of course you want the content pushed down a little so you use padding-top for that ;)

Couple of tips for layout images:
1) try not to use image tags, use bg images where possible, as it all stays the same for every page, so stick it in the external CSS file
2) Try to put the background images on existing elements, like putting that vert fade on the existing content div.

ALA also have a fantastic tutorial about layering background images without having to add loads of extra tags:
http://www.alistapart.com/articles/customcorners/

actually there is a follow up tutorial as well:
http://www.alistapart.com/articles/customcorners2/

Not the same thing as you are looking for but it should give you some really good ideas how to sort out your layout efficiently ;)
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

okay, I think I understand what you just said...but lemme check :oops: . What you are saying is to have a div with the top of the content box image in it as a non repeating bg, and add some padding, so that I can put text over that, and the background that is below it...correct?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Sounds like you got it, as long as you mean "behind" instead of "below" - same thing really, but just clarifying the point :)
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

Okay cool, Time to test this out...Thank You, and everyone who posted thier help here :D :D

Post Information

  • Total Posts in this topic: 22 posts
  • Users browsing this forum: No registered users and 50 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.