Centering Title with Ajax-gismo

Internet Creating Weather Web Sites
1

I was wondering if anyone had any better format that could be used to center the new design of my site? I am using a

with background image, mouseover with link, and then including the ajax-gismo on the far right? I’m trying to center the title better - keeping the ajaz-gismo on the right (but more vertically centered on the DIV image). Hope that makes sense.

Here is the test site: www.weather-station.org/weather/index.php

Thanks!

  • Mark
2

I think it would be a lot easier to format and control if you tossed the onmouseover stuff… and just basic CSS in DIVs with your background and using normal <a href… for the link etc…

You could most likely do this without frames as well… for a simpler format to work with.

Your dropdown menu’s are getting interferred with the WDL section.

3

Thanks for the info! I wanted to do a <a href… for the link, but I was unable to find a way to do that when using a

. It won’t allow the entire
to be the link. I’m trying to remember why I didn’t use a
for the text, but I believe it was due to it making the ajax-gismo text down one line on the header causing it not to be on the top corner. I would have to re-work the ajax-gismo since that uses a combination of lots of spans in a div.

At this point, I think I might make the background image (which is a div) a set width and still work on trying to the ajax-gismo up higher on the right corner.

I agree - I’m going to get rid of the onmouseover border stuff. I only did that as a test because without it, you can’t really tell it is a link back to the main site. I am not aware of any other way to have an entire

a link.

The only reason I have not fixed the menu going behind WDL is because when setting it to be opaque, it uses more CPU on people’s system. Since I’m not ready to go live with this new format, I left it like it is while I’m still testing. I will change that at some point.

If you know how I can make an entire

a link, that would be a great help. The only way I know is to use the onmouseclick (java) method.

Thanks!

  • Mark
4

Your page is wide… Min 1053px without a scroll bar…

Not sure why you would make the whole div a clickable link. Normally, you would just use the title which would be part of the href. You can do it, but most people would click on the text rather than the background.

While you could use a table to create two sections (left and right), you can easily do this using div’s with the use of float.

Simplify the CSS you are using by adding what you want in your external style sheet and do less inline… Makes it easier to see and work on…

First the header (HTML) stuff. something like:

<div id="pgheader">
    <div class="title">
        <a href="/weather/index.php" title="Mark Hofmann's - Live (Bel Air, Maryland - USA) Weather Station">Mark Hofmann's - Live (Bel Air, Maryland - USA) Weather Station</a>
    </div>
    <div class="gizmo">
        your gizmo code
    </div>
    <div style="clear: both;"></div>
</div>

This basically creates a wrapper for the header with the image you are using as the background.

It then creates a right and left size using float.

The left side is your title. It would look better if it is left justified rather than trying to center it though because it is so long.

The right side is where your gizmo code codes.

Then it clears both floats and ends the header.

Now when you click on the title, it goes to main page.

You then need to add CSS to your external style sheet something like:

#pgheader {
    background: transparent url(/weather/banner1.jpg) no-repeat;
    height: 40px;
}

#pgheader .title {
    float: right;
    margin-left: 20px;
}

#pgheader .gizmo {
    float: left;
    margin-left: 20px;
}

This creates an ID called pgheader. In that ID, there are several classes that will only effect code in the ID div.

.title is what controls the href with the title and link
.gizmo which controls the location of the gizmo

You might need to add padding and/or margin info to adjust the location within each of them.

that should get you started.

5

The width of the main page is one of the reasons I wanted to change my layout from my original (and still current) vertical menu (www.weather-station.org). I figure most people have at least a 1024x768 display, so almost all of it would fit with a slight scrollbar. I normally use at least 1280x1024 on larger displays. One thing I did notice, is that on my current page, it isn’t as wide as my new setup. It should provide more room, but it seems to have grown. I do need to look at that and figure out if I can somehow set a fixed width for all the links that come up in iframes below the banner. Would you have any ideas on that?

Thanks very much for the information and sample codes. I’m still learning CSS and how to properly use divs, etc. Before I read your reply, I did figure out how to wrap it in one div like you suggested originally. I then did more experimenting with CSS options and like the new layout much better now.

I’m still working with the background graphic - my idea onmouserollover, it would get slightly brighter. Not sure if I will keep that option or not. I don’t mind the for the title - but it is the underlining of the link that I’m not that crazy about. It makes my title not look like a real banner. Don’t know if you can change the link link properties to make it something other than underline (like maybe a onmouseover or something).

Still a work in progress, but I am learning a lot and like how it is shaping up. (www.weather-station.org/weather/index.php - test site)

  • Mark
6

Horizontal scroll bars are a huge turn off for most visitors. So it really depends on what your visitors are using as to if the width you are using is good or not.

Line on links is easily disposed of with CSS…

Inline…

<a href="....." style="[color=red][b]text-decoration: none[/b][/color]">....</a>

no underline.

Or…

CSS external assuming the link is between divs id= pgheader …

#pgheader a { [b][color=red]text-decoration: none;[/color][/b] } #pgheader a:hover { [b][color=red]text-decoration: underline; [/color][/b]}

and any link in that section would have no underline for the link unless you hovered over it…

7

Awesome, thanks for the CSS <a href style tip. I will do some experimenting with that.

I didn’t really think about the website size until you mentioned it earlier. It seems to be slightly over 1024 (1058). I think what I will do is try to format things to fit so that there are no horizontal scrollbars when using a 1024 x 768 screen. I would consider that a low end resolution and pretty standard at this point in time. People with 800 x 600 will have to live with scrollbars… :slight_smile: I just can’t fit all the content into that area and consider 1024 x 768 a good benchmark. What I will do, is change my resolution to 1024 x 768 and work with in to make sure that looks proper, and then test higher ones later.

One thing that I still need to resolve is the background image “repeating” issue when you have a really high resolution (especially when using a widescreen monitor). I know you can “turn off” the background image “repeating”, but not sure that is the best way to handle the issue. It would look strange on people with really high end resolutions.

What I might do, is use Photoshop and format the background image to be just plain huge so that even a super high resolution, it will span the entire screen without repeating.

Are you aware of any other methods to handle that particular situation? Those are the only ones that I’m aware of.

Thanks again for all your help!

  • Mark
8

If you use webdeveloper with FF you can resize your browser window to what you want to check with and then do that. Much much better than changing the resolution of your screen.

FF with Webdeveloper is a must if you are doing website design… helps with CSS, images and tons of other things.

http://chrispederick.com/work/web-developer/

One thing that I still need to resolve is the background image "repeating" issue when you have a really high resolution (especially when using a widescreen monitor). I know you can "turn off" the background image "repeating", but not sure that is the best way to handle the issue. It would look strange on people with really high end resolutions.

It is much easier to not follow the width of the visitor but rather use a fixed width for your content and you don’t need to play those games.

That is why most newer websites are using fixed width with either centered or left justified format. If a visitor wants to use the 50" plasma and use something like 3500px wide, your site remains the same size and just fills on the sides or the left side. You no longer have to worry about those types of issues any more and know where your content will be.

Certainly makes it easier to layout the content since you already know how wide it will be.

It is funny to see someone with a large screen monitor use their browser in full screen mode. Must be a windows thing… I use the real estate for other apps and keep the browser around 950px wide which works for most websites. My wife uses full screen for everything on a fairly high resolution screen.

What I might do, is use Photoshop and format the background image to be just plain huge so that even a super high resolution, it will span the entire screen without repeating.

See above… Large size only increases download times. You should only need a low resolution image and stretch it to fit what you need. It is a background and the detail should not matter much.

9

Great, thanks for the info!

I have run into a cross-browser snag. I just noticed that depending on the browser, when the ajax-gismo in the upper right corner starts to display current conditions, it goes over my menu.

IE - Formats fine.
Firefox - Formats fine (after I put a bunch of
in the page after the gismo.
Chrome - Needs even more
to keep it from going over the menu.

The problem is, if I fix chrome, then the banner height is larger in IE. Arrrghh… Is there some way to properly format this so I don’t the issues?

I was also unable to turn off the underlining when testing with the <a href. I was putting it in my .style2 and .style2:hover area since that is what that particular DIV is using.

Thanks again for your continued help… :slight_smile:

  • Mark
10

Not long after I replied, I figured out a way around my problem. I created a table and have the “title” and “ajax-gismo” in the two cells. That keeps the formatting correct on all browsers. Yeah!

I also figured out where I was supposed to put the external CSS for removing the underline on the <a href.

I managed to trim some pixels off the width and it ALMOST fits in 1024x768. The bar still comes up, but it is just a tiny amount. I’m having trouble getting it trimmed that last bit… :slight_smile:

As for the background image - and overall width of the banner, if I force the width to be 1024, then if someone views it at 800x600, it will bring up the scroll bars vs. just resizing. I guess that is just the way that works and not really any other options if you go that route.

I’m caught between stretching the background image vs. fixing the width of the banner to 1024. Personally, I’m using 1280x1024 on the PC that I’m doing the work. I like the way it looks at that resolution, but understand that others might want to view lower or not use up all the real estate with the browser. I guess this is just a personal preference. I might just sleep on that one. My laptop is 1600xsomething - which is when I first noticed the image repeating. Maybe I should just find another image that if it repeats, it doesn’t look strange. That is probably the best solution… :slight_smile:

  • Mark