Re: [css-d] Indents to right of floated object
On Wed, Mar 4, 2009 at 10:51 AM, Michael Slater wrote: > Suppose I have a page with a floated image on the left, and text that wraps > around it. > > Any margins or padding set in the text are relatively to the left edge of > the page, not relative to the right edge of the floated object, so I can't > figure out how to position things away from that edge. In particular, bullet > lists, even with all the proper padding and spacing for normal > circumstances, drop their bullets outside the left margin of the text, since > their padding and margin is being interpreted as being relative to the left > edge of the page. > > For example, see www.webvanta.com/indent_test.html > > Some "solutions" that aren't acceptable for me: > > - Can't set the margin for a div that encloses the text, because it needs to > wrap below the object to the left when the text reaches the bottom of the > object > > - Can't use position:inside because the hanging indent is an important part > of the list formatting > You can do a couple things: 1. not use a list, but add your bullets to classed paragraphs (as background images) with appropriate padding, so that they look like a list. 2. wrap the contents of each li in a span, use position-inside, then give those spans a margin or padding to fudge the indent of position:outside 3. change your design. None of the options are the sort that you dream about, but they all give you the look you want. cheers. __ 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] Help with containers?
On Tue, Mar 18, 2008 at 12:42 PM, John <[EMAIL PROTECTED]> wrote:
> Hello;
>
> First post here...
>
> I am having trouble with setting up a container properly...it works
> for the most part. I need for the background colors contained by it
> to extend as wide as the browser window is — I know some folks have
> those nice 30-inchers! — and that seems to be working with the code
> that I've written, but when you make the browser window very narrow,
> it "breaks" in that you can scroll the page tot he right and see the
> background colors end, and it looks sloppy.
>
> Chances are the average person isn't going to do this, but they MIGHT
> do it and at any rate I'd like to make the little beasty behave right.
>
> I've been playing with this:
>
> #container {
> height:150px;
> width:100%;
> background:rgb(173,173,173);
> }
>
> 150px is the height of the jpg which is part of the area to be
> contained (containered?) and I assume 100% means 100% of the browser
> window, however wide or narrow a person has it on their computer.
A block level element without a width will expand all the way across
the available area all on it's own, without the need to declare a
width of 100%. It's impossible to imagine what the actual problem
might be without looking at your page/code.
j
__
css-discuss [EMAIL PROTECTED]
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] Gentle site check please
> Quoting "Cynthia M. Brumbaugh" <[EMAIL PROTECTED]>:
>
> > Ok, so I am finally getting off the porch and testing my running shoes.
> > Please be gentle but honest.
> >
> > http://www.chekmed.com/med_index.htm
> >
> > This page does validate both html and css.
> >
> > Cynthia
> > Who admits to learning everything she knows about css from this list.
The movement in your left nav on rollover is a little distracting. It
turns into a bad scene when you move your mouse from one of the longer
links, to one of the shorter ones (along the right side of them) and
both links start to "stutter" back and forth between the idle and
hover positions. Try it in Firefox and you'll see what I mean. That's
the only feedback I have after just looking at the page.
After checking out your CSS, though, I see a few things that could
prove to be very dangerous for you as you move along in development,
adding more pages and content.Here are the ones I think will be a big
deal for you:
a { display: block; }
! DANGER ! this will put a text link all on it's own line if it's
within a paragraph or other element. If you're using this for your
nav, add the nav container to the selector so it only targets those
links, ( #navigation a { display:block; }
a:hover{ display: inline; }
This is REALLLY dangerous coming after making it a block element, and
changing it to inline when you hover over it. This can make everything
on your page move around just because someone moved their mouse over a
link. As a general rule, it's safe to assume that changing from block
to inline and inline to block on hover is a dangerous idea.
div#header { position:relative; }
Why? Relatively and absolutely positioned elements are two of the top
causes of woe and heartache among CSS beginners. Use them sparingly
and only if you can't achieve what you want in another way. What are
you trying to achieve with the header being relatively positioned?
Good job on getting nice, valid code in a clean and good looking page
that holds up to font-resizing, and good luck!
j
__
css-discuss [EMAIL PROTECTED]
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] image placement help
On Mon, Mar 3, 2008 at 2:12 PM, Christie <[EMAIL PROTECTED]> wrote: > Hello group, > > I am new to CSS in web design and have a pretty basic question but am unsure > about the best way to solve the problem. Here is the page I am building: > > http://www.arabian-horses-west.com/test.html > > I would like the very top and very bottom graphics to touch the middle so > that it is all connected. Here is a link to the CSS: > > http://www.arabian-horses-west.com/testcss.html > > Any help would be greatly appreciated. > > Thank You, > Christie You have a few problems that are keeping the images from meeting your content area. You give padding to all images after defining special styles for .topbarimg and .bottombarimg. In order for those styles to be applied and override the styles you put on img you need to put them AFTER the img styles in the CSS. There's no reason to have .topbarimg relatively positioned. I'm also not sure what you're trying to achieve with top:25px; on that, but if you really want it 25 pixels from the top of the viewport, you can just give it a top-margin. Change your HTML to put the .topbarimg and .bottombarimg classes on the paragraphs that contain them. Then set those styles to margin:0 auto; and padding:0; Paragraphs have margins created by the browser, so if you don't specify your own, each browser will have its own way with them. good luck! j __ css-discuss [EMAIL PROTECTED] 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] Battling IE's improper z-indexing
On 7/26/07, jennifer ham <[EMAIL PROTECTED]> wrote: > Here's the page (css is embedded): > http://stalkinggear.com/zindex/ie_zindex.html > > Basically what happens in IE is that ONLY the last popup layer appears > over the other images on the page (which are relatively positioned). > All the others are hidden by the relatively positioned divs/images > that come after in the source. ... > What's the best and most elegant way to solve this problem? I'm answering my own question in the hopes that someone might have a better answer. I was able to make it work by dropping the relative positioning of the thumbnails, and positioning each popup absolutely based on the corners of the box that contains all the thumbnails (the "clisting" div which is now relatively positioned). You can see it here: http://stalkinggear.com/zindex/ie_zindex_fix1.html The reason I don't like this is that I have to explicitly state the top and left position of EACH popup div individually. Is there no better way? thanks! jennifer __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Battling IE's improper z-indexing
Hi All I've got something I thought was simple and elegant enough, and worked beautifully in the reasonable browsers. IE (6 & 7) made a huge mess though. Here's the page (css is embedded): http://stalkinggear.com/zindex/ie_zindex.html Basically what happens in IE is that ONLY the last popup layer appears over the other images on the page (which are relatively positioned). All the others are hidden by the relatively positioned divs/images that come after in the source. I did locate an article* that seemed to explain the issue, but the solution seems to be to give each element that misbehaves its own z-index. This is something I'd really like to avoid doing since I'll have more than 20 of these on the page, and ideally I'd like them to come from my content management system and with minimal nonsense. What's the best and most elegant way to solve this problem? thanks! jennifer * http://www.aplus.co.yu/lab/z-pos/index.php __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sidebar content linked to main text
On 7/9/07, Don Zochert <[EMAIL PROTECTED]> wrote: > Hello, all, > > I'm not sure this is even possible--in a three-column (blog) layout, is > there a way to link side-column content with the content of the center > column? The purpose would be to create sidebars (left or right) that > elaborate on a reference in the main text and that are horizontally > aligned with the reference point in the main text, so that the sidebar > maintains its position vis-a-vis the center column text as you scroll > down the page. It seems to be a common design in coffee-table books. > > As a trivial example, say the text in the center column is discussing a > statue of Abraham Lincoln and the Sac chief Blackhawk in Oregon, Ill. A > sidebar might include a photo of the sculptor and a list of his other > works. It would have to be linked somehow to the text in the center > column, so that the two items move together. > > I'm a total novice, but thanks-- > > Don Zochert I whipped up a simplified example of how I would probably do such a thing. I only tested it in FF and IE7, but it seems to hold up okay. It could fall apart rather quickly if your sidebar content is larger than yor main body content it is associated with. This should start you off in the right general direction though. http://stalkinggear.com/sidebar.html jennifer __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 is stealing my content!
I don't know how else to describe it. Even my super simple testcase features the awesome new issue I have discovered. http://stalkinggear.com/ie7testcase/what.html Nothing inside of .left shows up! I'm not entirely certain if it's taking up space or not, but I can tell you that it's not missing, it's more like, invisible. There's a text link in the left hand side, if you mouse over it, you'll get the hand cursor, heck, you can even click on it, and it will take you away! For fun I tried playing with z-indexes. I tried floating everything inside .left (blindly hoping maybe this had somethin to do with hasLayout). Nothing changes. CSS is embedded. HTML and CSS validate (exception of it's dislike of my use of 'orange' but the problem was happening without that too, and I *like* orange.) Any thoughts, suggestions, musings, etc are greatly appreciated! jen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text on one line, left and right justify
On 9/22/06, ~davidLaakso <[EMAIL PROTECTED]> wrote:
> Tracey Zellmann wrote:
> > Probably a beginner question.
> >
> > I have one line of text containing two elements. I want one to be
> > left-justified and one to be right-justified.
> > Something like this:
> >
> > JAMES W. JACOBS,
> > Proprietor
> >
> > I am not sure how to accomplish this.
> CSS
> span {float: right;}
> HTML (the right-float comes first in the source-- the opposite of what
> one might think)
> Proprietor JAMES W. JACOBS,
While that will work, I think this is an awesome opportunity to use a
definition list, especially if you're going to be mentioning other
people and their titles.
Example:
HTML:
JAMES W. JACOBS
Proprietor
CSS:
dt { width: 60%; float:left; clear:left; }
dd { width:35%; float:left; text-align:right; }
Adjust widths to taste. The clear:left is on the dt in the event you
want to add more names/titles.
Cheers!
j
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with floating bullets on a list
Here's what I did to make it happen:
div#sitenav li {
padding: 1px;
margin: 1px;
list-style: none;
text-align:right; /* i added this */
}
div#sitenav ul a {
font-family: arial, sans-serif;
color: #44;
/* display: block; */ /* i removed this */
padding: 5px 5px 5px 45px; /* changed left padding to 45px */
margin: 0;
line-height: 15px;
font-size: .70em;
text-decoration: none;
text-align: right
}
Cheers!
jennifer
On 9/14/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> Ok ... I am sure I have seen this problem addressed somewhere but can't for
> the life of me find it.
>
> I want to have an image bullet float to within a few pixels to the left of a
> menu link. Here is a sample of what is happening and the css file. I would
> like for the "check" image to be a few pixels to the left of each menu / list
> item on hover but can't seem to make it happen. Can anyone help?
>
> Thanks!
>
> Ralph
>
> XHTML file: http://www.goobitron.com/test03.html
>
> CSS file: http://www.goobitron.com/test03.css
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
