Specific example of image floated over UL

[thedaver]

I have a heavily formatted UL (via CSS) and am having trouble getting an image to float in the upper right of the DIV container for the UL.

Anybody have a link to a tutorial? I'm starting at a semi-basic level but trying to work with existing, advanced CSS code.

Thanks!
Dave.

D.E.R. Management - IT Project Management Consulting

http://www.dermanagement.com/

 

[dmacster]

I'm not sure I understand the question. Are you just looking to fix position on a background image?

 

[Vragabond]

Can you show us the link to your page (failing that, the code)? I am sure we'll be able to help you out then.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[thedaver]

Most kind of you to offer to spot check the page itself!

http://www.distilledweb.com/

The problematic image is the FireFox 300x250 image. I want it floated, "relative" upper right... It's in roughly the correct position now. Problem is that the UL is being pushed "under" the box, instead of wrapping around it. Not working this as a background image.

Sorry for the ambiguity in my question, was trying not to be specific to my site... THANKS!

Dave.

ps. There's a little bit of trial-and-error garbage in my css/layout.css so please be kind.

D.E.R. Management - IT Project Management Consulting

http://www.dermanagement.com/

 

[BillyRayPreachersSon]

If you give your "items" div a position of "relative", then you can absolutely-position your "floatboxright" span at top:0 and right:0. Then you no longer need to float it.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Aah - if you want your LI content to wrap around the image, that might not be the best bet... It depends on your needs, though.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[thedaver]

I'm obviously working with the specific theme from Gregarius... it's making me nuts... I added the following "position: relative;" entries to css/layout.css and doesn't seem to change on FFox

div#items {
  position: relative;
}

----skip down-----

/** the main divs (nav, side, content, footer, ...) inherit this class */
div.frame {
 padding: 15px;
 position: relative;
}

D.E.R. Management - IT Project Management Consulting

http://www.dermanagement.com/

 

[thedaver]

And yes, I want the UL to wrap around the image...
Worst case, I'd go with the image overlaid via z-index... thoughts?

D.E.R. Management - IT Project Management Consulting

http://www.dermanagement.com/

 

[BillyRayPreachersSon]

My post about absolute positioning would provide your 'worst case' scenario.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

How come I can't see this image on the link you provided? I know you were looking for general advice on how to do that, but most of the times the solution would have to be worked out specifically for your problem. General advice is to just float the image without any positioning (on any elements in question). That should make the list float around the image.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[thedaver]

Vragabond,
Thanks for checking... the URL has been backedout to a previous version... it's a little broken now too.

I'm going to try another theme/approach and see if I can get the site to look the way I want.

Thanks for everyone's comments!

D.E.R. Management - IT Project Management Consulting

http://www.dermanagement.com/