Html - How to abosulte align off center?

[Vladimer]

Hey guys.

So I have started trying to build my site. The design is still going to have some minor tweaking done to the layout, color, and that annoying white box in the center.

But as it stands its currently just one big picture as a background to help me see what it would look like online.

With the design that I'm trying to make. It is basically centered in your browser. Not how would I actually build my content around that?

Its HTML with an external style sheet.

All the websites I find that have some tutorials either mention firefox doesn't show absolute positioning well or they have to be using IE6+ or opera to actually have it properly aligned.

Now I just started learning this so what im trying to hopefully find is something like this: http://www.iangraham.org/books/xhtml1/chap13/center-position.html

Can I correctly build the site in that manner? For example if I want the links at the top to be left of center then use left:-300px; and the normal left:150px; to go right from center..

And on that specific page it says "Mozilla/Navigator 6, as this is the only browser that currently supports CSS 2 positioning correctly. " which is basically the opposite what everyone else says... So I'm rather confused as to how to approach this.

Logically there has to be something that works because I use Firefox and there are plenty of websites that are centered and look and function fine.

Thanks for looking :)


EDIT: Should say that the links and such would be CSS right? because they would appear on every page so I should really be saying I'm trying to align off center with CSS for the most part

[tracknut]

I'm not sure what you're asking, exactly. Sites can be built that are centered in your browser - it is probably the most common way a site is laid out. Absolute positioning should (imo) be used more as a last resort, rather than jumping right in and planning your build that way. It may be needed, and it may not. But you didn't provide a link to your site, or even the picture of it, so I'm not sure what to recommend.

By the way, any site that's giving you instructions for Netscape is probably very old...

Dave

[Vladimer]

Sorry I must of skipped over that.

** Link Removed **

** Link Removed ** is what I have going of the template so far. If you view page source. The current way that im trying to get the footer to be on the left hand side while still centered on the page regardless of the page size looks like a little bit too much coding for one thing.

My problem that im trying to grasp is that if I just use the normal align center then everything is just going to be all centered but not on the sides. Like the links for example.

[tracknut]

You've got quite the mix of things going on there :) I'll throw out a couple thoughts, maybe they'll give you some ideas.

Firstly, you've got an odd mix of languages going on here. "align=center" is probably something you want to remove from your vocabulary - it's old html styling that is no longer relevant. Use CSS for your styling.

Then fundamentally I think you're missing something about centering. You have a site that's 940 pixels wide, that you want centered. The whole thing, right? The banner at the top, the gray content area, and your footer - all are in a centered 940px area. And then the whole page, regardless of how large the user's browser is, has your background-slice replicated across it.

So, without sitting down to write your code for you (i.e. big disclaimer, I haven't tested anything), I'd say your code should look like:

<div id=outside_container> <!-- whole page, with background-slice.jpg repeating as it is now) -->
<div id=container>
<ul id=main_menu> .... </ul> <!-- this is your menu along the top of the page -->
<img src="images/background.jpg">
<p>Welcome to my web site.... </p>
<!-- that set of thumbnails, etc ->
<div id=footer>
<!-- footer here --> </div>
</div>
</div>

Then in your css, your outside_container is fine as is, then you center your container, by styling with: width:940px;margin:0 auto, so the entire "container" div is centered. Then you don't center the footer div, op position it absolute, you just let it left-justify in your container. In fact in the footer you have the navigation that's left-justified, and the copyright is right justified, which is done with a <span style="text-align:right">Copyright blah blah</span> right inside the footer div.

I hope that gets you going in the right direction... if not just let me know and I'll spend a bit more time on it.

Dave

[Vladimer]

No that actually helps a lot. I found a site that validates the HTML and CSS so I cleaned it up a bit since there wasn't much on there and there was 13 errors :confused:

Just too clarify a couple things (few things). I have the margins in CSS set for auto now so its centered.

<ul id=main_menu> would be a list correct? so if I get the list to go horizontally instead of the deafult vertical that should work for the buttons, even though they are spaced a little apart?

Then for the footer, are you saying to put the footer div inside the container so it can be justified left that way? Otherwise im not quite sure how to get the footer div to justify off of the container since it would be 'outside' the container.

and finally with </span>, you answered my next future question :) If i use two <span>'s, one surrounding the navigation on the bottom set to left and another surrounding the copyright set to align right. That should have them both on opposite sides on the bottom if I understood that right

Thank you so much the help

[tracknut]

<ul id=main_menu> would be a list correct? so if I get the list to go horizontally instead of the deafult vertical that should work for the buttons, even though they are spaced a little apart?

Yes, typically a navigation menu is declared as a "list of menu items", in terms of semantics. Though in the case of a horizontal list of items you could also just fake it as text (home | contact | gallery). But a list gives you styling options that are pretty clean:

css:
#main_menu ul {list-style:none}
#main_menu li {width:120px;display:inline-block}

html:
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

You could replace my "item 1" with an image if your navigation is not built from text.


Then for the footer, are you saying to put the footer div inside the container so it can be justified left that way? Otherwise im not quite sure how to get the footer div to justify off of the container since it would be 'outside' the container.

Absolutely. You want your container div to surround and center your whole site. Then from the footer's perspective (or any other divs inside the container), it might be centered (say your footer was just your copyright and you wanted it centered on the page), but in your case your footer is 940px wide and has a left and a right justified component in it.


and finally with </span>, you answered my next future question :) If i use two <span>'s, one surrounding the navigation on the bottom set to left and another surrounding the copyright set to align right. That should have them both on opposite sides on the bottom if I understood that right

Exactly.

Dave

[Vladimer]

Alright so first off a big thanks, that helps a lot. I managed to get the footer done and other small tid bits figured out, but cant seem to figure out the positioning inside the container.

Oddly enough I'm starting from the bottom moving up. I'm trying to position the 'realviewphotography.com' link which is an image to the top right hand portion of the header image.

Here is a good example of what im trying to figure out.
http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml
on number 9 there. Positioning CSS inside a container. I set my container to 'relative' position and the others to 'absolute' although whenever I set the 'top, right, left' it still goes off the actual browser walls and not the container.

As far as I can tell it looks like there example, where my div is inside the container.

I think I have the same 'problem' with my footer. Technically not a problem since it looks like it should on my end. But I was under the impression that I was aligning left/right from within the container. But going back and taking another look to understand it. I believe that since I set the 'width' of the footer and centered it. It has nothing to do with the greater container.

and this is all on ** Link Removed **

[tracknut]

Regarding the absolute and relative positioning, I tend to use those as a last resort - something I don't think your site requires. You have two choices: position everything absolute & relative, as it seems you're headed, or the other option is to use the block model the way css was designed, and let the blocks fall in place as defined. For example you have a content div, 940px wide, centered on the page. If you put a div inside it, that div will (by default) be 100% wide (which, given it's inside your 'content', will be 940px), and will be placed just below the previous content (or right at the top if this is the first div). Then if you add another div, it will again be 100% wide, and sit just below the previous div. If you wanted a bit of space between this divs, you add it via a margin on the top of the second div (or the bottom of the first). I happen to prefer this second method for layout, but either will work.

You've got a bit of a mix of the two flavors, which I think is making you feel like the code is twice as hard as it needs to be. For example you've defined your footer with a width, and margin:0 auto. Why? It's already (by the way you've enclosed it in your content) a 940px wide area, and the content div is what you wanted centered. Then also you've positioned it exactly 950px down from the top of the screen, presumably ignoring the margins and such you just set. I don't know if I'm making my point or not :)

In any event, on your site the only thing I see as needing some positioning is the stuff that overlaps (link PS layers) on other things - specifically the items you've placed on top of your header image.

Dave

[Vladimer]

So it turns out I made a silly mistake that was causing me all that grief. Everything you said makes good sense.

I took out the lines of code in the footer but everything jumped to the sides of the browser. So I figured I had the same problem as I just mentioned. But then I looked at the container and it just hit me!

I didn't have a width set! >.<

So the container was basically unlimited in width and that's why it was going off the browser edges. Now I took out those extra lines you mentioned and will try to stick with one format :)


Alright, now with laying it all out. If I got you correctly..

Ideally I should remove the absolute positioning for things like the content and footer. Leave it at relative positioning and just set margins to have them lower on the page?

For example the content portion would have a set height for the div and a margin set to be a certain distance from the top and then the footer would have a set height and a margin set to lower it a little from the end of the content to the bottom.

And then leave the absolute positioning for the links up top (gallery/contact/etc..) and the realview...com link

Thanks!

[Vladimer]

If I could pick your brain a little more :)...

I cant figure out why I have this persistent black line on the top of the page and google keeps pointing me elsewhere.

I tried making the navigation at the top with the list command <ul>. After formatting it with float left and removing the default styles from it like the bullets it almost looks right.. But I end up with this black line across the top of the page and the list is indented. Although im sure the indent is easy to fix with a couple extra words, or removing an extra style... The line at the top of the page has me a bit lost. It moves the entire page down.

Here is what it looks like when I get the list set up. (first attachment)

Then when set the div the list encompasses to 'absolute' and position it from the top and left 0 in hopes it raises it. All it does is raise the background image but leaves the site as it is. (second attachment)

So my solution was to just drop the whole list and just simply put all the pictures in one div and it works and looks perfectly. Is this frowned upon? or is it an ok practice.

On my page source the div navigation that was in list form is the one in <!-- -->

Thanks again

[Hikin Mike]

So my solution was to just drop the whole list and just simply put all the pictures in one div and it works and looks perfectly. Is this frowned upon? or is it an ok practice.

On my page source the div navigation that was in list form is the one in <!-- -->

Thanks again

If it works, don't worry about it. ;) I prefer using actual text as much as possible, mainly for SEO, but it's also easier to change text quickly then having to re-do a image. If you're going to stick with the images, I suggest using some type of hover image...a different color or something to indicate this is a clickable link. Make sense?

[Hikin Mike]

One more thing. I see your using 'alt' tags for your images, which is good, but I also include 'title' tags on my images because Firefox doesn't recognize 'alt' tags.

[Vladimer]

If it works, don't worry about it. ;) I prefer using actual text as much as possible, mainly for SEO, but it's also easier to change text quickly then having to re-do a image. If you're going to stick with the images, I suggest using some type of hover image...a different color or something to indicate this is a clickable link. Make sense?

That's what I figured too :)

My idea was to just use a simple roll over. So the roll over image I have just has a bit of a character glow around it so it doesn't look to cheesy. Just need to figure out some javascript to make it work since the CSS ones I've found are mostly for colored boxes and such, and not actual rollover images.

One more thing. I see your using 'alt' tags for your images, which is good, but I also include 'title' tags on my images because Firefox doesn't recognize 'alt' tags.

Thanks for the tip. I'll add it tomorrow, off to bed for today :)

Thanks!

[Hikin Mike]

That's what I figured too :)

My idea was to just use a simple roll over. So the roll over image I have just has a bit of a character glow around it so it doesn't look to cheesy. Just need to figure out some javascript to make it work since the CSS ones I've found are mostly for colored boxes and such, and not actual rollover images.



Thanks for the tip. I'll add it tomorrow, off to bed for today :)

Thanks!

Not true. You can add rollover images using CSS. I did that for my 'Gallery' link. I use text, except for the 'triangle arrow', that's a small image.

A sample rollover image using CSS:

.navigation a {
background: url('images/link.gif') no-repeat;
}
.navigation a:hover {
background: url('images/hover.gif') no-repeat;
}

If you haven't seen this, it's worth reading it through: CSS Tutorial (http://www.w3schools.com/css/)

[Vladimer]

Ill give that a shot. I saw those a few times but stayed away from it because '.navigation a' would mean all the links in '.navigation' right? So swapping out the image in the back works fine with a text navigation because its the same image across the whole bar and it is just the text that changes.

Where as my navigation is just a bunch of pictures and not text =/

So the way I understand it (which is not very well mind you) is that for each navigation box I would have to have its own '.navigation_home a' '.navigation_contact a' to be able to use a different picture for each..

Am I totally off in my thinking here? :o

Thanks for the link though, I've been reading that site for awhile. They have great info for css and html

[Hikin Mike]

So the way I understand it (which is not very well mind you) is that for each navigation box I would have to have its own '.navigation_home a' '.navigation_contact a' to be able to use a different picture for each..

Basically, yes. I was bored, so I threw something together to show you what I'm talking about:

This is your new HTML for your nav bar:

<div id="navigation">
<a href="Index.html" class="home"></a><img src="images/sep.png" alt="picture of seperator" />
<a href="about.html" class="about"></a><img src="images/sep.png" alt="picture of seperator" />
<a href="gallery.html" class="gallery"></a><img src="images/sep.png" alt="picture of seperator" />
<a href="contact.html" class="contact"></a><img src="images/sep.png" alt="picture of seperator" />
<a href="#" class="blog"></a>
</div>Here's a sample for your #navigation CSS. I only did the 'Home Page' and obviously, I didn't actually make the hover image.

#navigation .home a {
background:url('image/home.png') no-repeat;
}
#navigation .home a:hover {
background:url('image/home_hover.png') no-repeat;
}

[Vladimer]

Thanks for writing it out. I tried it but I cant seem to get it to work at all. I've tried adding width and height, having '#navigation .home' '#home' and everything else I could find on the net.

Anytime I use

#navigation .home a {
background:url('image/home.png') no-repeat;

}
#navigation .home a:hover {
background:url('images/home_over.png') no-repeat;
}

It modifies every link on the website.

Could it be that .png does not get supported through css? Because when I get the page to not reformat itself the places are blank.

[Hikin Mike]

Could be because I didn't try it. :o I'll look at it in more depth after dinner... ;)

[Vladimer]

lol alright thanks man. Besides .png support im not sure what else it could be. I've read everything I could find on it and tried every variation of the code but no dice.

The reason I went with the .png was because the other transparency format is .gif but when it exported it from PS it looked horrible. It looked like someone spit on the screen :confused: So I went with .png for transparency and it looks like its suppose to. At least when it shows up :)

[Hikin Mike]

I did noticed I had a typo:
#navigation .home a {
background:url('image/home.png') no-repeat;
}

It should say: #navigation .home a {
background:url('images/home.png') no-repeat;
}

Back to cooking...

[Vladimer]

Sorry thats my bad. I just copied it back into the post from yours and didn't change the first one. My copy in the website has the correct directory for both.

I had both set to the correct directory and even tried using the entire http://www... url as well.

[Hikin Mike]

No big deal, it doesn't work anyway. It looks like you need text to make it work and a jpg or gif. Maybe Dave can shed more light. I'm still a 'noob' when it comes to CSS/HTML. :)