wondering why this div is over to the right
in [CSS]
|
Prev: Tabs Using CSS1
Next: IE vs. Screenreader
From: TheBicyclingGuitarist on 8 May 2010 23:01 On May 8, 7:27 pm, TheBicyclingGuitarist <Ch...(a)TheBicyclingGuitarist.net> wrote: > On May 8, 1:54 pm, dorayme <dora...(a)optusnet.com.au> wrote: > > > > > > > In article > > <27e7b2e9-c6a3-40e7-922d-c0117bd59...(a)a16g2000prg.googlegroups.co > > m>, > > > <div class="wrap"> > > <div></div> > > <div></div> > > <div></div> > > <div></div> > > ... > > <div></div> > > </div> > > > with > > > .wrap div {...} > > > instead of > > > <div class="thumb"></div> > > <div class="thumb"></div> > > <div class="thumb"></div> > > <div class="thumb"></div> > > ... > > <div class="thumb"></div> > > > with > > > .thumb {...} > > > -- > > dorayme > > Oh no. I am not getting something here. I made a wrapper div > (class="wrap") containing all the divs formerly classed as thumbleft. > Then I renamed the thumbleft class in the style2.css file. How do I > make the rules for the wrapper div apply to the divs contained within? > Sorry if it's a stupid question. I never learned how to do that yet.http://www.TheBicyclingGuitarist.net/studies/index2.htmandhttp://www.TheBicyclingGuitarist.net/css/style2.css- Hide quoted text - > > - Show quoted text - I *think* I fixed *part* of the problem by making the declaration div.wrap div { style rules in here; } What about the p inside the div.wrap div? Do I declare its style by saying div.wrap.div p { style rules in here; } and what about that conditional statement in the head of the index2 document? How do I label that? div.wrap div?
From: dorayme on 9 May 2010 01:51 In article <2ada45c3-1bfc-4aa8-be8c-4d8bf6b4c47d(a)g39g2000pri.googlegroups.co m>, TheBicyclingGuitarist <Chris(a)TheBicyclingGuitarist.net> wrote: > On May 8, 1:54 pm, dorayme <dora...(a)optusnet.com.au> wrote: > > In article > > <27e7b2e9-c6a3-40e7-922d-c0117bd59...(a)a16g2000prg.googlegroups.co > > m>, > > > > > > <div class="wrap"> > > <div></div> > > <div></div> > > <div></div> > > <div></div> > > ... > > <div></div> > > </div> > > > > with > > > > .wrap div {...} > > > > instead of > > > > <div class="thumb"></div> > > <div class="thumb"></div> > > <div class="thumb"></div> > > <div class="thumb"></div> > > ... > > <div class="thumb"></div> > > > > with > > > > .thumb {...} > > > > -- > > dorayme > > Oh no. I am not getting something here. I made a wrapper div > (class="wrap") containing all the divs formerly classed as thumbleft. > Then I renamed the thumbleft class in the style2.css file. How do I > make the rules for the wrapper div apply to the divs contained within? > Sorry if it's a stupid question. I never learned how to do that yet. > http://www.TheBicyclingGuitarist.net/studies/index2.htm and > http://www.TheBicyclingGuitarist.net/css/style2.css If you have a bunch of elements and you want to make them all the same style, there are different ways to do this. One way is to class each element separately and put the style rule that targets this class. That is what you were doing. In this case it is divs of the class "thumb". Another other way is to use what is called *descendant selecting*. You order that all div descendants of this container should have some one style. Let's assume you have a container for your divs. <div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> </div> and styled as ..thumb {color: #c00; background: #ccc; float:left; width: 4em; height: 4em;} This is equivalent in output to <div> <div></div> <div></div> <div></div> </div> when styled as div div {color: #c00; background: #ccc; float:left; width: 4em; height: 4em;} This latter styling is saying to style anything that is a div within a div. The only divs in divs are the thumb boxes. The thumb divs are not in each other so no danger of confusion. If the thumb divs had further divs inside them, you would not use this simple technique alone. If you did have further divs in all the child divs of the containing div then you *could* stop trouble of unwanted styles by following the descendant selector style above with another: div div div {color: #000; background: #fff; float:none; etc} Or you could have used in the first place what is called a child selector <div> <div></div> <div></div> <div></div> </div> with div>div {color: #c00; background: #ccc; float:left; width: 4em; height: 4em;} You can class or id the container if you like or if it is necessary to distinguish the divs in it from the divs in some other container. If you do this, you might say <div class="thumbwrapper"> <div></div> <div></div> <div></div> </div> along with ..thumbwrapper div {color: #c00; background: #ccc; float:left; width: 4em; height: 4em;} or ..thumbwrapper>div {color: #c00; background: #ccc; float:left; width: 4em; height: 4em;} I tend to go for the simplest thing that will work. Sometimes this is a good policy. Sometimes in hindsight, there is better. -- dorayme
From: Thomas 'PointedEars' Lahn on 12 May 2010 06:27
BootNic wrote: > Mainstream support for ie6/7 & xp will soon be over. 65 days and > counting. I wonder where your information comes from. *Iff there are no further Service Packs* for the corresponding Windows versions, Mainstream Support for Internet Explorer 6 and 7 on Windows XP will be retired by 2010-07-13. No date has been announced yet for Internet Explorer 7 on Windows Vista Service Pack 1. In fact, Internet Explorer 7 also runs on Windows Vista Service Pack 2, for which Mainstream Support will be retired by 2011-04-30 *iff there are no further Service Packs*. <http://support.microsoft.com/gp/lifeselectindex#I> <http://support.microsoft.com/gp/lifeadditionalproducts#Internet_Explorer> You should also be aware that because of bugs in newer versions it may be necessary, and it is possible by default to put IE 8 and perhaps also its potential successor into a Compatibility Mode in which rendering will work like IE 6 or IE 7. For example, in my experience it has been necessary to force IE 8 into IE 7 Compatibility Mode (using a `meta' element) if you want to have the `z-index' property to work properly there. So your expectations are pretty unrealistic even if we would not consider users who are continuing to use a version of IE long after the end of its product lifecycle because they do not have a choice (as it is the case for IE 5.01). PointedEars -- Use any version of Microsoft Frontpage to create your site. (This won't prevent people from viewing your source, but no one will want to steal it.) -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.) |