17 replies [Last post]
draney
Offline
Regular
Atlanta, GA
Last seen: 14 years 18 weeks ago
Atlanta, GA
Joined: 2007-02-14
Posts: 25
Points: 0

I have a 2-column layout, with a sidebar on left and content on right. Plus there is a third column to the right to hold a background image only. The navigation links are CSS formatted list in the content column and the H1 tag which follows the navigation list is what I am having trouble with.

Problem Page: http://roswelltreeremoval.com/problem.htm
The H1 tag is formatted to clear: left so it doesn't begin on the same line as the nav list, but it is actually down below the content of the sidebar div for some reason. I only want it to clear the nav list.

Can anyone help me??

THANKS

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 48 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

You don't want to use clear

You don't want to use clear on the h1. all you need to do is to contain the floating list items in the ul. The h1 is block level and will start below the ul anyway. It is doing that now (after removing the clear: left;) only the ul has no content because the lis are floating (removing them from the document flow). So the h1 begins under this no height ul but it's content is pushed over by the floats. Simply adding overflow: hidden to the ul will make it contain it's floating children, giving it height, and pushing the h1 down to where you want it.

Now, do you actually want your page to be so wide as to force a horizontal scrollbar? I think you need to rethink your third column.

draney
Offline
Regular
Atlanta, GA
Last seen: 14 years 18 weeks ago
Atlanta, GA
Joined: 2007-02-14
Posts: 25
Points: 0

??? Third Column

First... Thanks for the quick feedback. That fixed it.

The only reason for the 3rd column was to try and get the blue glow to be positioned at the top right corner of the fluid width content column. I could not get it to go there any other way. Is there a way to get that glow to be positioned there without the 3rd column? I also was trying to use the max-width and min-width on the #wrap-inner div and wanted the glow to visually fill the void on wide monitors.

Thanks again!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 13 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Your page appears to have

Your page appears to have the BOM (byte order mark) problem. It has some unacceptable characters typically placed there by an editor not saving the file properly. It will likely force IE into quirks mode.

As to how to do your nice effects on a two column design, I have a full width template on my server, can't remember where though! My ftp is down right down, so I'll post the link later.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Try putting the image on

Try putting the image on body as background.

body {
  background: white url(glowing.jpg) top right no-repeat;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 13 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

if you want an example, post

if you want an example, post again asking for it. Otherwise I'll assume that Gary has answered your question.

draney
Offline
Regular
Atlanta, GA
Last seen: 14 years 18 weeks ago
Atlanta, GA
Joined: 2007-02-14
Posts: 25
Points: 0

RE: Try putting the image on

Gary,

Won't that display the full glowing image in the upper right corner?

The effect I am trying to achieve is to show only a potion of the image unless the viewport is wider than the max-width setting. Thus, on a wide display, the content area would fill the max-width and leave a wide blank area on the right. In those cases, I wanted the glow to be seen extending out beyond the width of the content area. It is displaying correctly right now in Firefox and IE7, except there is a horizontal scroll bar. I would prefer to have the glow image in the background, but want it to float with the top right corner of the content area and only be fully visible in a wide browser window.

Can I do that??

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Have you tried it? It is

Have you tried it? It is easier to answer a posteriori.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

draney
Offline
Regular
Atlanta, GA
Last seen: 14 years 18 weeks ago
Atlanta, GA
Joined: 2007-02-14
Posts: 25
Points: 0

Have you tried it?

OK, I have edited the test page and added the image to the body tag, but maybe I am not doing it the way you intended. The image gets placed at the top right corner of the window and is always fully visible. I want the image to bleed off the screen if the browser window is less than 1024 pixels wide. but if the window is wider, the image should show more. Also, it should never be behind the content div.

It's like what I want is a fixed left column, liquid middle column and a liquid right column, but the right column is only supposed to show in a wide window. Am I making any sense?

Here is the link to the current page:
http://roswelltreeremoval.com/problem.htm

And to the previous version of the page for comparison:
http://roswelltreeremoval.com/problem-old.htm

Thanks for your help!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

At issue is the round corner

At issue is the round corner bg image on content. Make the wrap a bit smaller value, and you'll see. Get rid of the rounded corner images to see more difference.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

draney
Offline
Regular
Atlanta, GA
Last seen: 14 years 18 weeks ago
Atlanta, GA
Joined: 2007-02-14
Posts: 25
Points: 0

I don't understand

I changed the width of the wrap-inner div from 99% to 50% and it is worse now. See the current page:
http://roswelltreeremoval.com/problem2.htm

My monitor display is 1680 pixels wide and I have the browser open full-screen. There is a larger gap between the edge of the content div and the glow image now.

The glow needs to be positioned flush left against the right edge of the content div. Then it will mate with the other piece of the glow that is positioned at the top right corner of the content div. And the glow needs to float with the fluid layout to maintain that relationship with the content div, no matter how wide the window is.

As always, your help is much appreciated.

THANKS!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Look at this image,

Look at this image, http://roswelltreeremoval.com/images/bg-content.gif

If you remove the blue part, making it transparent, I think you'll have a good look.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

draney
Offline
Regular
Atlanta, GA
Last seen: 14 years 18 weeks ago
Atlanta, GA
Joined: 2007-02-14
Posts: 25
Points: 0

Don't want to loose the blue part

That is the left side of the blue glow. If I remove it, the other part of the blue glow will have a hard left edge and not look good. Also, that does nothing to change the current positioning of the right portion of the glow http://roswelltreeremoval.com/images/bg-right.jpg

I have attached an image of how it looks on my computer. All I want to do is make the right glow nestle up to the edge of the the other part of the blue glow, so there is no gap there. AND if the browser is resized to a more narrow width, I want the right glow to just run off the side of the screen, preferably without causing a horizontal scroll bar.

Muchas Gracias!!

AttachmentSize
problem2.jpg 52.63 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

There's not much point in

There's not much point in worrying about 1600px wide windows. :shrug:

Here's something to try, {background-position: 760px top;}

To get exactly what (I think) you want would require a bit of restructuring to create a relationship between the inner wrap and its container.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

draney
Offline
Regular
Atlanta, GA
Last seen: 14 years 18 weeks ago
Atlanta, GA
Joined: 2007-02-14
Posts: 25
Points: 0

Restructuring?

I don't want the background glow to be in a fixed position. The content area has a liquid width and so the glow should have a liquid position too.

Can you give me any idea how to restructure it to get that effect?

Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Personally, I wouldn't

Personally, I wouldn't bother. I'd fix the width of the content at about 760px, and set the glow at 760px on the body.

Perhaps one of the others would have an interest in taking up this problem.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 48 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

apparently I opened up a can

apparently I opened up a can of worms. Sad
One thing you might try is to absolutely position the div with the blue glow in relation to the content. The AP would not cause a horizontal scrollbar should the window shrink smaller than it's (the blue glow) width.

I only suggested the rethink because I thought it was wrong to introduce the scrollbar for that image.

draney
Offline
Regular
Atlanta, GA
Last seen: 14 years 18 weeks ago
Atlanta, GA
Joined: 2007-02-14
Posts: 25
Points: 0

Question

Is there a way to absolutely position that div and have its position vary according to the width of the content div? If so, can you get me started?

Thanks