View Full Version : Centering Problem
Illera 04-14-2006, 01:34 AM Okay. To start with, my webpage is here: Clicky here (http://www.freewebs.com/thirdexperiment/).
Basically, I want that box-thing to be centered, in the middle of the page. (The navigation is a separate iframe.) When I was using this layout, and needed it centered, I just made that website up there the iframe, and put it all inside a table-frame-thing. Which worked, but was horribly convoluted, frames in frames and such, and I've been wondering about this lately. I'd really appreciate any help.
I don't really know what I'm doing when I make layouts - I knew what I wanted it to look like, and I poured through the code of the hundreds of layouts I have saved until I could piece together what I wanted. So any help is really, REALLY appreciated, and if I've posted this in the wrong place, I'm happy to move or delete it. Thanks in advanced for any help.
(Oh, and how do I make that little task bar that appears [to save the picture] disappear? I think it can be done, and I want to, because it's distracting and ugly [I don't care if people want to right-click and save for some reason, I just don't want the little task bar appearing].)
pubicusqualitas 04-14-2006, 01:58 AM Basically, I want that box-thing to be centered, in the middle of the page. (The navigation is a separate iframe.) When I was using this layout, and needed it centered, I just made that website up there the iframe, and put it all inside a table-frame-thing. Which worked, but was horribly convoluted, frames in frames and such, and I've been wondering about this lately. I'd really appreciate any help
I don't think that's going to be possible except with a lot of time consuming work. The reason being is because the content (from what I can see from your CSS) is absolutely positioned. You'd have to do a lot of guess and check work on that. But if you'd like, I'd be happy to explain it for you.
(Oh, and how do I make that little task bar that appears [to save the picture] disappear? I think it can be done, and I want to, because it's distracting and ugly [I don't care if people want to right-click and save for some reason, I just don't want the little task bar appearing].)
Because I use Firefox, I usually don't that about that detail. But a quick Google search brought up a <META> tag for you to use. Make sure you place that somewhere between your <HEAD> and </HEAD> tags.
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
Ciao.
Illera 04-14-2006, 02:20 AM I don't think that's going to be possible except with a lot of time consuming work. The reason being is because the content (from what I can see from your CSS) is absolutely positioned.
I'm quite happy to put in the time, myself. I spent whole nights awake when I made it the first time around - if you're willing to explain it to me, I'm very happy to learn. And as for absolutely positioned, I'm happy to change that if it would make a difference. That's actually the feature I was playing with the most when I was experimenting, but as I don't much understand what it does it was a bit of a disaster.
And thank you for the meta tag! Worked like a charm.
pubicusqualitas 04-14-2006, 02:42 AM I don't mind explaining it.
If it's at all possible, can I explain it over instant messenger? I'd like it a lot better because of the instant feedback from you and I can help you immediatly. All of my messenger screennames are in profile.
Otherwise, I'll post it here.
pubicusqualitas 04-14-2006, 03:01 AM Okay, I'm sorry about posting for a second time but my edit button isn't working.
I think I'm going to go ahead and tell you what to do, because I figured out it's not as many steps as I thought...
It looks perfect in on my laptop's resolution (1024x768) on Firefox, it looks okay on IE with the same resolution.
But, here it goes. Just open up the document in Notepad or whatever and use the "Find..." feature to find the lines of code in the quote box. Then, replace that line with the code in the HTML box.
#divContainer{position:absolute; width:370; height:422; overflow:hidden; top:55; left:190; clip:rect(0,370,422,0); visibility:hidden}
#divContainer{position:absolute; width:370; height:422; overflow:hidden; top:55; left:350; clip:rect(0,370,422,0); visibility:hidden}
<img src="bg.jpg" style="position:absolute; left:0; top:0;" width="750" height="500">
<div align="center"><img src="http://www.freewebs.com/thirdexperiment/bg.jpg" width="750" height="500"></div>
<div id="navigation" style="position:absolute; left: 42; top: 36; width:117; height:248; overflow:auto;">
<div id="navigation" style="position:absolute; left: 179; top: 45; width:117; height:248; overflow:auto;">
That's it. In each different resolution, it's probably going to look different because of the absolute positioning.
Well, best of luck. Ciao.
J to the izzosh 04-15-2006, 06:05 AM Sure you can center your layout! And it can be in a way that works at all resolutions, too! Excluding resolutions smaller than your layout, of course, but who cares about those, anyway? Take a look at this thread for some information on how to center your layout with absolute positioning; this post (http://www.lissaexplains.com/forum/showthread.php?t=53640#post368538), specifically.
Here is an example of the negative margin method in action: example (http://jfweb.fastmail.fm/center/center.htm).
Oh, and a quick note to you, pubicusqualitas: you should always specify a unit for your measurements and dimensions in CSS. E.g., "width:370px".
Also, if you don't want IE's silly image toolbar to appear above your images, then you're better off implementing them as background images instead of cluttering your document with proprietary metadata.
pubicusqualitas 04-15-2006, 09:02 PM Oh, and a quick note to you, pubicusqualitas: you should always specify a unit for your measurements and dimensions in CSS. E.g., "width:370px".
Thanks. I suppose I wasn't paying attention whenever I posted that last night. I'm usually better at catching my mistakes such as that.
Thanks again. ^_~
Illera 04-16-2006, 01:59 AM Thank you! I'm playing around with the negative margins and I think it's going to work.
J to the izzosh 04-17-2006, 02:48 AM Thanks. I suppose I wasn't paying attention whenever I posted that last night. I'm usually better at catching my mistakes such as that.
Thanks again. ^_~
No problem, mate. I hope that I didn't sound pretentious in pointing that out.
Thank you! I'm playing around with the negative margins and I think it's going to work.
Good luck!
Illera 04-17-2006, 08:33 PM Okay. I'm really sorry to bug you, but it isn't working yet, and I don't know what I'm doing wrong.
Could you glance at the code for me? I left all the css in the main document (as opposed to a separate css doc), so just using View>Source will show it all. (If you don't use IE I could post it here, I suppose, but it's awfully long).
Also, I'm using an absolutely positioned scrolling area. Could that be affecting my ability to center it? (The code for it is all there, but the original paradigm is here (http://www.dhtmlshock.com/scrollers/APScrollableArea/default.asp), if you want to look at it)
Any help is greatly appreciated!
J to the izzosh 04-18-2006, 06:04 AM Well, there's nothing particularly wrong with the CSS code used for centering the element, but there you seem to be a bit confused over how to name your selectors: #divMatting would apply its CSS to an element with the ID of "divMatting" (<div id="divMatting">). Your <div> element has an ID of just "Matting", so your CSS selector should look like this: "#Matting". Fix that and you'll find that it's positioned fine. Fix If you wanted to specify that only a <div> element can have the ID "Matting", then it should look like this: "div#Matting". Here are some examples of selectors:
tag { style; } /* works for elements of the name "tag" */
.class { style; } /* works for elements with a class of "class" */
#id { style; } /* works for elements with an ID of "id" */
tag.class { style; } /* works only for "tag" elements with the class "class" */
tag#id { style; } /* works only for "tag" elements with the ID "id" */
It would also be a good idea to delete "<img src="bg.jpg" style="position:absolute; left:0; top:0;" width="750" height="500">" and set the image as a background image for #(div)Matting:
background:url(bg.jpg); no-repeat top left;
Illera 04-18-2006, 07:20 AM It's centered! Thank you, thank you, thank you, thank you. It looks rather nice like this. : )
As for making the main image a background in the body tag...erm. My ignorance is going to start shining through again, but I don't think I can do that. My actual background isn't a color; it's a texture (bg_square.jpg). Unless you can designate two background images?
But in any case, thank you so much for your help. It was very, very appreciated.
Illera 04-18-2006, 07:23 AM ...ah, eluch. Ignore the background image part of that. ...and set the image as a background image for #(div)Matting. I get it now.
J to the izzosh 04-18-2006, 05:50 PM ...ah, eluch. Ignore the background image part of that. ...and set the image as a background image for #(div)Matting. I get it now.
Yeah, one limiting factor about CSS 1 & 2 is the inability to specify multiple background locations. The current CSS3 working draft has provisions for multiple background images (http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering), positions, etc., but isn't a viable option yet. Fortunately, as you noticed, it's not something really required by your layout. (Begin whining...) Though, of course, when it does become a recommendation will inevitably have a buggered implementation in all of Microsoft's products, anyway. Stupid Microsoft... (Okay, done whining now.)
|