CSS div image background.float?

  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

I'm having some trouble with a design. Keep in mind that this site is still heavily under construction...
mywebsite

How do I keep the tag image from shifting during resize? I realize that I can use absolute positioning, but I want the tag to be relative to the 800px width, and not to shift. Also, my links don't work because the tag is a 100% width. Bad coding on my part...

Some help please. :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

I'm pretty sure I'd be able to help if I knew what you wanted. where is the tag image supposed to be? :)
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

Take a look at the link. I want the tag to be at the top of the page, and to the right of "Design" and "Code".
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

try to add the following under the css code for the div that contains that image:
Code: [ Select ]
background-image: url(whatever-it's-called.jpg);
background-position: right;
background-repeat: no-repeat;
  1. background-image: url(whatever-it's-called.jpg);
  2. background-position: right;
  3. background-repeat: no-repeat;

without mentioning absolute positioning or any kind of positioning really. I can't test it now but I think it might work.
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

I have that. Check my css. The only difference is that the background position is 75%, which is where I want the tag at a 1440X900 resolution.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I think you have bigger fish to fry than positioning- check out your website in IE6. You're using a .png transparency as a background image, which won't work without maybe some hacks (personally, I only have a hack to get it working as a foreground image in IE6).

You might want to consider making the tag logo part of the header design or else you could make a div container for it and float it to the right as a foreground image using the hack I was talking about above (google iepngfix.htc).
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

yeah sorry, I couldn't open your css for some reason. probably my administrator at work messing with the system.

I didn't even realise that image has a transparency - I was looking in IE6 and thought it was meant to have a pale blue background.... d'oh! :D
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

Yes, I am familiar with that. In my mind, that problem is negligible because I know how to fix it. I will still have to position an image that doesn't have transparency issues in any case. Lets stick to the task at hand here. All I need to know is how to get this image positioned so that it stays at the very top and to the right of "design" and "code" (as previously stated)
I appreciate that thought, Jameson5555. I realize that that is an issue, but (as previously stated) the site is still HEAVILY under construction. I'm brainstorming, and a transparent image is, as I'm sure you understand, the easiest to work with in firefox.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Is this what it was supposed to look like?
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

That is almost it, but the tag needs to be at the top of the page--above the menu. I can fix that with a negitive top margin, right?
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

Okay. That was easy. I don't know why I couldn't figure it out... What do you think of the design? (See above link) I know I still have to fix the transparency issue.

Thanks for the help!
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

I think the design looks good. what you could work on is statements like
Quote:
Lets stick to the task at hand here. All I need to know is how to get this image positioned so that it stays at the very top and to the right of "design" and "code" (as previously stated)

I understand you're trying to get something done, but it made me feel very much like 'c'mon people hop to it, I haven't got all day here'. which is an attitude fine for people you employ, or whose souls you own, or something. but here it's nice to show a little patience and appreciation for the sheer fact that people are trying to help you out, even if that help is not always in the form you hoped for.

anyhow glad I could be of assistance. feel free to ask if you get stuck again.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

kevsterb007 wrote:
I appreciate that thought, Jameson5555. I realize that that is an issue, but (as previously stated) the site is still HEAVILY under construction. I'm brainstorming, and a transparent image is, as I'm sure you understand, the easiest to work with in firefox.

I guess I don't understand the point of building a site in a way that won't work in all the common browsers is all.. If you're just brainstorming, you could use Photoshop to see what it's going to look like.
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

Yes, I am sorry celandine. I greatly appreciate the help.
jameson: Sorry. I was wrong to say that.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

no worries, we all get carried away with our work sometimes. ask again any time.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Yep, not a problem.. just tryin' to help out :)
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

ok. I have my page exactly the way I want it in Firefox. However, IE is a different story. Why doesn't the design work in IE too? Should I start a new thread? And does it make me a bad programmer because I can't figure this out on my own?
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I ask alot of questions ... so no it does not. CSS is tricky. What is it doing in IE that is not right? The CSS needs to be just right for IE and FF to be friends.
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

Dude, its freakin' out... hah
http://www.pixelcraftwebdesign.com

The tag image is suposed to float over the divs "navbar" and "highlight" it is nested in "navbar"
IE expands the height of "navbar" to the height of the tag image, thus pushing the rest of the content down about 200px, and it looks really bad. Take a look at the site in IE to see.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

Have you tried absolute positioning? Setting position: absolute; removes the element from the page layout altogether.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

Both IE6 and IE7 are a bit off.

IE7 not so much just some menu work, so not as big of a deal.

IE6 appears to be the one with the interesting pixel layout ...

I am not sure if you are using a transparent layer or not, but if you are I am not sure if IE6 supports them ?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

I think IE6 will not support a PNG transparency. Have you thought of making it a transparent GIF and giving it a gray matte? you probably don't like gifs any more than I do, but they can give reasonable results when you set the matte to the exact color of the background.
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

The image is a transparent png, but I've applied the iepngfix.htc, so it should be working.
Spork: If I set the position to absolute it does clear the element, but it throws everything (highlight, navbar, and navtext) off. I guess that would be my best way to go anyway?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

GIF's are pretty all right ... I use them a lot ... nobody ever complains about the quality of my web-images ... just use the photoshop save for web ...
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

In your case kevster (and other transparent png users), I would say transparent pngs might not be the way to go until IE6 can handle them ... as it still plays a big role in the market. There are alternative solutions to using them: gifs, jpgs, pngs but just with the matching back color. Easy enough say have a 10px black border up top and blue content box use that design as the background instead of the transparency.
  • kevsterb007
  • Graduate
  • Graduate
  • kevsterb007
  • Posts: 145

Post 3+ Months Ago

This is what it needs to look like:
http://browsershots.org/png/original/62/6200d41bd5e628850f0dc8ab735e8529.png
Not this:
http://browsershots.org/png/original/fc/fcf030cedf072a8acbee21c52bb8daef.png

Since I've applied the IE png fix, that shouldn't be a problem. I've applied absolute positioning, but that didn't help/made the problem worse! I'm doing something really wrong here! I've never had this much trouble.

Post Information

  • Total Posts in this topic: 26 posts
  • Users browsing this forum: No registered users and 60 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.