16 replies [Last post]
fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

What I am trying to do is have rounded edges on the bottom of one of my Divs, but the Div shrinks and expands depending on window size. However, my Divs background image never changes.

Here is my CSS:

html {
    min-width: 945px;
} /*IE7*/
body {
    color: #393733;
    margin: 0;
    padding: 0 20px;
    text-align: center;
    background: #D9F3CF;
}
body, td, th, textarea, input, select, h2, h3, h4, h5, h6 {
    font: 83%/1.4 arial, helvetica, sans-serif;
}
a { color: #105CB6; cursor: pointer; outline: none !important; }
a:visited { color: #105CB6; }
a:hover, a:focus { color: #003; }
a:active { color: #000; }
#container {
    text-align: left;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    border-top: 1px solid #539637; 
}
#h {
    background: #539637;
    color: #fff;
    float: left;
    width: 100%;
    margin-top: -1px; 
    margin-bottom: 1px;
    position: relative;
    z-index: 99999;
    height: 44px;
}
#h-sec {
    height: 18px;
    overflow: hidden;
    background: #9E7D96 url(images/menu-secondary.gif) 100% 100% no-repeat;
    clear: both;
    float: left;
    width: 100%;
    padding: 0 !important;
    z-index: 1200000; /*smaller than submenu*/
}
#h h1, #h .site-name {
    font-size: 100%;
    margin: 0;
    float: left;
}
#h h1 a, #h .site-name a {
    display: block;
    height: 44px;
    width: 256px;
    text-indent: -2000em;
    z-index: 1000; /* need for FX and IE */
    background: url(/images/menu-current.gif) 0 0 no-repeat;
}
#h h1 a:hover, #h h1 a:focus, #h .site-name a:hover, #h .site-name a:focus {
    cursor: pointer; /* IE7 */
    background-position: 0 -44px;
}

To see the page in question, visit: http://www.k2hub.com/test.php

Any help is greatly appreciated.

fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

No one has any thoughts?

No one has any thoughts?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Rounded corners with CSS3 -

Rounded corners with CSS3 - http://border-radius.com/

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

Deuce wrote: Rounded corners

Deuce wrote:

Rounded corners with CSS3 - http://border-radius.com/

This would be the perfect solution, except for the fact that it does not work in IE.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Rounded corners are just

Rounded corners are just decoration, really. The web is not paper and you should give up the idea that your site must look identical on every browser. If the page will be just as usable to the visitor such minor details of style are not terribly important and not, in my opinion worth much work.

Thus the fact that the CSS3 radius property may not work on IE is, in my opinion, rather beside the point. It will not hurt the user in any way and if they somehow find out that there are nice curvy corners in other browsers and they want them on theirs, then that might encourage them to upgrade their own browser, which would be good for everybody.

So I agree with the proposition that you should just use the CSS3 border-radius property.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

Point taken Ed, and it's a

Point taken Ed, and it's a good one.

However, I'm inclined to believe that, as much as I hate it, IE is still the most common browser, and I shy away from using any option which leaves out the majority of my users, whether it is just a decoration or not.

In any case, rounded corners are my objective, but not my question.

My question was, how would I set a Background Image to shrink to fit a div that has a Max-Width that is smaller than the width of the Background Image. I was told that you just needed to float the Div, but this doesn't work, or I missed some step which I can't find.

Rounded corners aside, does anyone have an answer to my original question?

fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

Bump...

Bump...

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well, I've looked at your

Well, I've looked at your page and it is essentially content free. I can't see any unusual behavior on viewpoint resize and I can't understand what you are asking.

Why don't you get a page with some actual content, mark it up semantically and then apply CSS after you've done that? The whole point of CSS is to separate content from presentation. But you don't have any actual content so your page is rather meaningless.

But if you can't frame your question in a way that I can understand, it might perhaps be that I am particularly stupid, or it might be that others can't understand what you are asking either. In the former case I won't be able to help you much, but being stupid that won't matter much anyway. In the latter case perhaps you might benefit from considering how to ask your question in a way that people can understand.

My opinion, for what little it may be worth, is that trying to "design" a "layout" for a page without first having actual content in it is putting the cart before the horse.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

What I am asking is really

What I am asking is really quite simple, but perhaps a better step by step explanation will help to shine a light on the true issue...

First lets say you have a GIF that is 1600px wide, this way it is large enough to fill even the highest resolutions.

Next... You have a DIV that has a Min-Width of 945px and a Max-Width of 1600px it also is set up to expand to fill the Viewport, up to 1600px (of course).

The code for the DIV looks like so:

#container {
    text-align: left;
    margin: 0 auto;
    max-width: 1200px;
    min-width: 945px;
    position: relative; 
}

Now the GIF, you remember I referred to it briefly earlier, that is a background image of another DIV (lets call it h ) that is nested inside of the container DIV. Here is the code for that:

#h-sec {
    height: 18px;
    overflow: hidden;
    background: #9E7D96 url(/images/menu-secondary.gif) 100% 100% no-repeat;
    clear: both;
    float: left;
    width: 100%;
    padding: 0;
    z-index: 1200000;
}

So all of this, even to a novice CSS Creator (much like myself), should be pretty straight forward.

The issue I am having is that I want the background image in the h DIV to be shown completely, and not be cut off when the container DIV is less than 1600px. This is the only reason I listed a link to the example page, to show what currently happens to the background image, and that is that it gets cut off on the left.

Basically, this whole issue came up because I know it is possible because if you look at Digg.com this is how they have set up the DIV, and I have several projects where I would like to implement this method.

So if anyone understands what I am asking, and has a possible answer to what is different with Diggs code compared to mine, then please let me know.

However, if you would just like to let me know why I am going about this the wrong way, I am aware of other solutions, but am only interested in a CSS solution to do this. So thanks anyway.

Like I said Digg.com has it in place, and it works perfectly for them, so I've even tried to just copy their code directly and it still doesn't work the same. So, any help on this would be great.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

fjl3 wrote: First lets say

fjl3 wrote:

First lets say you have a GIF that is 1600px wide, this way it is large enough to fill even the highest resolutions.

Well what you have on your site is a solid color, so why would you use an image for that when you can just specify a background colour?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

No... what I have is a green

No... what I have is a green bar on top, with a purple bar below.

http://www.k2hub.com/test.php

This image is the background image, giving the impression of a DIV with rounded corners...

Here is an example in use at Digg.com,on the left. As well as my design, on the right:

As you can see... Digg has a rounded corner on the left and right, but I am only getting it on the right.

Digg is also using an image called menu-secondary and it is 1600px, the same as mine.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well, since Digg is an

Well, since Digg is an example of terrible coding practice, I wouldn't use it as an example of anything. And I am much too lazy to, er, "digg" through all the terrible code on that site to figure out how they do it.

I think your whole approach to web design is wrong and based on an incorrect approach. You may disagree of course, but it makes it hard for me to be of much help.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

I don't know if you'd

I don't know if you'd noticed, but this site does exactly what you want too?

Verschwindende wrote:
  • CSS doesn't make pies

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

You need to attach the

You need to attach the background to two different elements in order for what your trying to do to work. One on the left and one on the right. I can't give you code, as it's to general, and where you attach them depends on your structure...

I went to digg's web site, but didn't look at the code, my guess is they have it attached to a div and the ul for the menu.

fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

thepineapplehead wrote: I

thepineapplehead wrote:

I don't know if you'd noticed, but this site does exactly what you want too?

I did notice, but this site uses the solution which is not compatible with IE. And as much as I would enjoy an IE free world, that is sadly not the case.

fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

Ed Seedhouse wrote: Well,

Ed Seedhouse wrote:

Well, since Digg is an example of terrible coding practice, I wouldn't use it as an example of anything. And I am much too lazy to, er, "digg" through all the terrible code on that site to figure out how they do it.

I think your whole approach to web design is wrong and based on an incorrect approach. You may disagree of course, but it makes it hard for me to be of much help.

wow

fjl3
fjl3's picture
Offline
newbie
Ventura, CA
Last seen: 12 years 10 weeks ago
Ventura, CA
Timezone: GMT-7
Joined: 2010-05-29
Posts: 10
Points: 11

I found a solution, thanks

I found a solution, thanks guys