[css-d] Bullet lists and floating images
I see what you mean. When I want to have an image next to a bullet list, I float the image to the right instead of the left. Is this cheating? :-) Is this an option for you? Carolyn __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Flowing block elements around floated elements
Is there any way to get block elements to not overlap nearby floated
elements?
In my specific case, I've got a { float: right } image with text beside
it. Normally, the text flows around the image just fine, but the
inclusion of a blockquote (or, presumably, any other block element)
within the section of text adjacent to the image results in the
blockquote extending right for the full width of the container, going
behind the image.
What can be done to get the blockquote to size itself such that it
does not overlap the image?
--
Dave Sherohman
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flowing block elements around floated elements
You can solve this quite easily. Figure out the right margin you need to have it end to the left of the image... For example, if the image is 200px and is flush with the right side of the content area, and you want 10 px of whitespace between the image and the blockquote then add margin-right:210px to the blockquote. Hope it helps, Brian Hazelton __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] absolute positioning on top of an iframe
Hi All, I am trying to find out if I can place javascript buttons on top of an iframe. The iframe contains photos and text and the buttons are for previous/next. I've noticed so far that the absolute positioning is very different in all browsers (I started in FF3, but it's way off in IE and Safari) - so that made me worry whether it was possible and whether the functionality would work as well. Any thoughts, suggestions? Thanks. Ruth __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] absolute positioning on top of an iframe
Could you give us an example? I'm guessing something like: div id=wrapper div id=prne a href=#prevPrevious/a a href=#nextNext/a /div div id=ifra iframe src=photo.html/iframe /div /div Would be something I'd do... maybe! Ta, ~Mx __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Sprites and positioning links
First: If this is a repost I apologize: I chose plain text in GMail
but in my Sent box it appears it was sent as Rich Text, so I'm
attempting a plain text message again ...now for the 3rd time, with
most html tags stripped out ... it got bounced a few times now :-(
If you've already stopped reading, I'll understand ;-))
---
Hi,
I am trying to use css sprites to create rollover links on several
different spots on an image.
Essentially: an image map.
I've pieced the code below together from a few online articles and
having been finding the image coordinates using photoshop.
My dilemma is this: for the first two links overview and metadata
everything works as expected. But for the third one lib, no matter
what I do, the rollover effect seems anchored to the left corner.
I've included the code below, in case there are any obvious errors
that I am too blind on inexperienced to see ;)
Here is the working link ... I've used a .png image so it loads a little slowly.
the link:
liberto.info/cssplay/sprite2.html
Any help would be greatly appreciated :-)
Tony
the css:
.myspriteClass {
background: url('newsprite.png');
background-position: -223px -223px; width: 600px; height: 446px;
}
/* links on image */
a#overview {
height:26px;
width:590px;
display: block;
background:url('newsprite.png') 0px 0px no-repeat;
overflow: hidden;
}
a#overview:hover {
display: block;
background:url(newsprite.png) -223px -1115px no-repeat;
overflow: hidden;
}
a#metadata {
height:27px;
width:192px;
display: block;
background:url('newsprite.png') 223px 253px no-repeat;
overflow: hidden;
}
a#metadata:hover {
display: block;
background:url(newsprite.png) -223px -1140px no-repeat;
overflow: hidden;
}
a#lib {
height:27px;
width:317px;
display: block;
background:url('newsprite.png') 426px 254px no-repeat;
overflow: hidden;
}
a#lib:hover {
display: block;
background:url(newsprite.png) -426px -1147px no-repeat;
overflow: hidden;
}
the html
div class=myspriteClass
a id=overview href=# /a
a id=metadata href=# /a
a id=lib href=# /a
/div
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sprites and positioning links
Anthony, one problem is that you declared the links as display:block. This is correct, but in order to have the lib link appear to the right instead of below metadata you will need to float metadata to the left. By default, a block level element is 100% width and therefore pushes the next element to be below it, you need it to the right and floating metadata will allow lib to come onto the same line. The second issue is that the images are not lining up 100%, i think this is an error in the actual image though. Sincerely, Brian __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
