CSS absolute positioning?
newbie
Posted: Tue, 2008-07-22 12:09
Hi,
I am trying to stop my contents box overlapping my logo when the screen is of a certain size. I dont want to use browser resizing methods but wondered wheather css absolute positioning may work?
I know this is a big cartel site but I have access to the stores full css/html.
http://www.sohotuna.bigcartel.com/
Thanks
Nick
Leader
Posts: 847
Joined: 2008-02-04
Location: Netherlands
Well, I dunno why but you've
Posted: Tue, 2008-07-22 12:33
Well, I dunno why but you've made your logo a child of the main big box.
<body id="home" class="theme"> <div id="store" class="clearfix"> <div id="header"> <div class="body"> <a id="body-link" href=http://www.sohotuna.bigcartel.com/></a> </div> </div>When I look quickly with Aardvark at your page, the store/clearfix box seems to have a definite space on the left or so... it does not expand to the left all the way (but it does slide towards it when the browser is resized). If it had a left margin equal to the width of your logo, and if the logo were NOT its child and places outside, (in a box), and floated left... there are so many containers in the page I'm not sure what I'd break playing with it, but if store/clearfix had a definite left margin, it should not be able to slide over to the left side as the browser window shrinks.
Were it my page, I'd do it like this:
body background as black and the logo as a background image, but only just wide enough of an image to have the stripes, no wider.
logo text (as a p I think) floated left, with the anchor holding the image (and covering p's text, which would be Soho Tuna). The rest of the page would be sitting in a widthless box (your "store" box) with a left margin equal to the width of p/a who's floated left. This way, "store" can never touch the logo.
If you could not change the HTML like that, then yeah you could absolutley position that a.body-link, and give it a huge z-index... but this would not stop store/clearfix box from sliding in that direction... instead, it would likely slide UNDER the logo which I would think is worse, cause after people see the logo once they are then focussed on the right side. Since the a.body-link is a child of store/clearfix, you couldn't ONLY set a left margin too, as that would affect a.body-link as well. You might be able to use abso-po'd a.body-link AND a left margin on the store/clearfix, but that's only if you only have CSS access and cannot change the HTML, as it's very hack-y and could be brittle.
I'm no expert, but I can fake one on teh Interwebz
Enthusiast
Posts: 267
Joined: 2008-07-18
Location: US
I would avoid AP. One
Posted: Tue, 2008-07-22 13:56
I would avoid AP.
One solution is create a 2 column fixed with layout. Set the outermost (parent) container at 990px in order to have the page render without an horizontal scroll bar at resolution 1024. Either the logo or the product image (or both) will need to reduced.
Another way would be to set the left col for the logo at a fixed width, with no width set on the right col.
Assign a min-width of 990px on the parent container (again you'll need to reduce the images) and a max-width of 100%. Use "IE expressions" to feed IE/6 min-max width (not supported)-- or use javascript to do it for 6.
Either way, and regardless of what you finally decide to do, validate the markup (you've got a slew of errors to attend to).
Regular
Posts: 34
Joined: 2008-07-10
Location: UK
CSS or XHTML...
Posted: Tue, 2008-07-22 14:57
I think the solution is to be a little creative with the XHTML and CSS.
I think you might find the good old Header / Contentlayout an advantage here? Cleverly using background images and columns to achieve you desired layout.
Well I'll leave the innovation up to you, but try to think from outside the box.
Regards
id="css"
#css {
background:too tired for this!
}
newbie
Posts: 9
Joined: 2008-07-09
Thanks for the advice so
Posted: Tue, 2008-07-22 15:02
Thanks for the advice so far, Its pretty safe to say I'm a css novice so I am just going to read your answers again to make sure I undertand what you mean.
Do appreciate your advice.
Thanks
Nick
newbie
Posts: 9
Joined: 2008-07-09
Stomme poes wrote:Well, I
Posted: Tue, 2008-07-22 19:07
<body id="home" class="theme"> <div id="store" class="clearfix"> <div id="header"> <div class="body"> <a id="body-link" href=http://www.sohotuna.bigcartel.com/></a> </div> </div>When I look quickly with Aardvark at your page, the store/clearfix box seems to have a definite space on the left or so... it does not expand to the left all the way (but it does slide towards it when the browser is resized). If it had a left margin equal to the width of your logo, and if the logo were NOT its child and places outside, (in a box), and floated left... there are so many containers in the page I'm not sure what I'd break playing with it, but if store/clearfix had a definite left margin, it should not be able to slide over to the left side as the browser window shrinks.
Were it my page, I'd do it like this:
body background as black and the logo as a background image, but only just wide enough of an image to have the stripes, no wider.
logo text (as a p I think) floated left, with the anchor holding the image (and covering p's text, which would be Soho Tuna). The rest of the page would be sitting in a widthless box (your "store" box) with a left margin equal to the width of p/a who's floated left. This way, "store" can never touch the logo.
If you could not change the HTML like that, then yeah you could absolutley position that a.body-link, and give it a huge z-index... but this would not stop store/clearfix box from sliding in that direction... instead, it would likely slide UNDER the logo which I would think is worse, cause after people see the logo once they are then focussed on the right side. Since the a.body-link is a child of store/clearfix, you couldn't ONLY set a left margin too, as that would affect a.body-link as well. You might be able to use abso-po'd a.body-link AND a left margin on the store/clearfix, but that's only if you only have CSS access and cannot change the HTML, as it's very hack-y and could be brittle.
I have had a good read of this and as I said in a previous post, I am a css novice. I'm sorry to say i'm a little lost.
Nick
Leader
Posts: 847
Joined: 2008-02-04
Location: Netherlands
Well, the question is, how
Posted: Wed, 2008-07-23 08:54
Well, the question is, how much of your HTML can you change? This being someone's template and all.
That's the most important question here. I think my setup, had I had my way with the HTML, is the easiest solution IF all your pages are setup that same way...
The absolute positioning solution is only good when you have access to the CSS but NOT the HTML. Which is why it's a sort of hacky last resort.
So, answer that question and we can go from there. Although, you did have another thread here, and I think you could change the HTML right, becuase you set id's on the body element?
An image of what I'm talking about:
http://stommepoes.nl/sohotuna.gif
With code something like:
<body id="home" class="theme"> <p id="storename">Soho Tuna<a href="sohotuna.bigcartel.com"> </a></p> <div id="store" class="clearfix"> <div id="header"> </div> etc...So, the p comes first so we can float it left (the easiest way to float stuff is to put it first in source), and then you have "the rest of the page" inside that div id="store" and the whole "body" class thingie is removed.
Now I didn't measure really well the actual width of your logo, so in my image I have width: 350px but that may not be accurate. What we'll do is take that HUUUUUUGE background image, and reduce it to just the stripes-- we can edit them in gimp I think so that it's only a few pixels high and tiles down along the left side. The part with the name, Soho Tuna, will be a separate image-- and if we position it well (with the width of the image and margins etc) the Soho Tuna part will look like it's part of the larger image-- this will reduce your image loading time by major boku time. This will reduce your server costs if you're renting a server!
The <a> inside the <p> will make the <p> clickable and will hold the image-- which will cover the text. The text will show for people with images off, or are blind in the first place (like Google). Either way, a clickable link, smaller image sizes, faster loading-- and with a left margin on the Restofthepage, it should never get covered up by your "store" page section.
*edit, done.
Oh and you're missing a body tag on your main page... Every HTML page MUST have a body (although your page works because every document is also assumed to have a body, so our browsers are looking at that code and kinda inserting a <body> tag themselves... but not a good thing.
*edit okay, this is what I have:
http://stommepoes.nl/SohoTuna/sohoexample.html
The thing is, in IE6, because that image has a width (and it will in your page in any case), IE6 drops the right side because it thinks there isn't enough room for the float and the "Store" to stay side-by-side... the solution to this being wrapping the whole page in a <div> container with a set width greater than the totals widths of your float and your store boxes (as David already said) I didn't check in IE7 or even any other browsers or machines, as this was pretty much just lining up pictures. You may want to shrink your images a bit as well... you are using a lot of screen real estate with that logo.
See that bg.gif is pretty tiny, and sohotuna is its own image, and see what you have when you turn images off? (of course nothing on the right side as it's just the photo I took of your site : )
I'm no expert, but I can fake one on teh Interwebz
newbie
Posts: 9
Joined: 2008-07-09
Yes I have full access to
Posted: Wed, 2008-07-23 11:17
Yes I have full access to the stores HTML, which includes pages such as; Layout, Home, Products, Product, Cart, Checkout etc.
Will have a full read through your reply shortly as I am at work at the mo.
Thanks for your help so far
Nick