L8V2L Posted May 20, 2014 Share Posted May 20, 2014 (edited) /*check this out in example page. See how the color change or take on another color. I'm guessing this due to it being to close to each other, but the second solid line isn't being touch. And even the dashed bottom line contain a blue green color to it. Any thoughts on this phenomena? ... it might just be my display... but if so then still need to be recognize to know of such an result.*/<!DOCTYPE html><html><head><style>p {border:1px solid red;}p.dotted {outline-style:solid;}p.dashed {outline-style:dashed;}p.solid {outline-style:solid;}p.double {outline-style:double;}p.groove {outline-style:groove;}p.ridge {outline-style:ridge;}p.inset {outline-style:inset;}p.outset {outline-style:outset;outline-width:2em;}</style></head><body><p class="dotted">A dotted outline</p><br/><br/><pre></pre><p class="dashed">A dashed outline</p><p class="solid">A solid outline</p><p class="double">A double outline</p><p class="groove">A groove outline</p><p class="ridge">A ridge outline</p><p class="inset">An inset outline</p><p class="outset">An outset outline</p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</body></html>/*And there is no different between groove, ridge, inset, outset, and solid... unless I'm missing something; if so please tell me... The simple fact that it does add a solid surface to the outline prove that they are properties of the outline, but does not varies to my eyes to styles the outline.*/ Edited May 20, 2014 by L8V2L Link to comment Share on other sites More sharing options...
davej Posted May 20, 2014 Share Posted May 20, 2014 Making it wider makes it a little easier to see... <!DOCTYPE html><html><head><meta charset="utf-8"><title>css</title><style>p {border:1px solid red;outline-width:10px;margin:35px 5px;}p.dotted {outline-style:dotted;}p.dashed {outline-style:dashed;}p.solid {outline-style:solid;}p.double {outline-style:double;}p.groove {outline-style:groove;}p.ridge {outline-style:ridge;}p.inset {outline-style:inset;}p.outset {outline-style:outset;}</style></head><body><p class="dotted">A dotted outline</p><p class="dashed">A dashed outline</p><p class="solid">A solid outline</p><p class="double">A double outline</p><p class="groove">A groove outline</p><p class="ridge">A ridge outline</p><p class="inset">An inset outline</p><p class="outset">An outset outline</p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.<p>check this out in example page. See how the color change or take on another color. I'm guessing this due to it being to close to each other, but the second solid line isn't being touch. And even the dashed bottom line contain a blue green color to it. Any thoughts on this phenomena? ... it might just be my display... but if so then still need to be recognize to know of such an result.</p><p>And there is no different between groove, ridge, inset, outset, and solid... unless I'm missing something; if so please tell me... The simple fact that it does add a solid surface to the outline prove that they are properties of the outline, but does not varies to my eyes to styles the outline.</p><a href="http://www.w3schools.com/css/css_outline.asp">Reference</a></body></html> Note that comment symbols have to be used carefully... In the CSS only use /* this comment style */ In HTML you must use <!-- this comment style -->in Javascript you have two choices /* this */ or the // to end of line comment Link to comment Share on other sites More sharing options...
L8V2L Posted May 20, 2014 Author Share Posted May 20, 2014 If your speaking on the style, then I did that, to which lead me to seeing the (I read a word that mean the opposite of intuition/tuition, but I can't think, nor find it) unexpected result. Link to comment Share on other sites More sharing options...
L8V2L Posted May 20, 2014 Author Share Posted May 20, 2014 (edited) What does this mean?"Relatively positioned elements are often used as container blocks for absolutely positioned elements."I having trouble wrapping my head around relative position too. It being relatively to it's position meaning that was the position is set to relative, then zero position is it's relative position... right? and again what does this mean? "Relatively positioned elements are often used as container blocks for absolutely positioned elements."What does this mean?"An absolute position element is positioned relative to the first parent element that has a position other than static." Edited May 20, 2014 by L8V2L Link to comment Share on other sites More sharing options...
davej Posted May 20, 2014 Share Posted May 20, 2014 Yes, absolute positioning is not "absolute" if the immediate parent is relative positioned. However the main thought to keep in mind is that absolute and relative positioning should not be used unless you really need to use them. You can google this to find example tutorials. Link to comment Share on other sites More sharing options...
L8V2L Posted May 20, 2014 Author Share Posted May 20, 2014 Yes, absolute positioning is not "absolute" if the immediate parent is relative positioned. However the main thought to keep in mind is that absolute and relative positioning should not be used unless you really need to use them. You can google this to find example tutorials.That's to restricted to say, I'll feel as if it would be better if you word it as, "only apply it if you can't produce your vision in another way." Link to comment Share on other sites More sharing options...
thescientist Posted May 20, 2014 Share Posted May 20, 2014 or just using the right tool for the job. in most cases, the box model will be enough to accommodate most standard layouts. Link to comment Share on other sites More sharing options...
L8V2L Posted May 21, 2014 Author Share Posted May 21, 2014 or just using the right tool for the job. in most cases, the box model will be enough to accommodate most standard layouts.For a beginner what is the right tool? One will use what applied to one. Link to comment Share on other sites More sharing options...
thescientist Posted May 22, 2014 Share Posted May 22, 2014 For a beginner what is the right tool? One will use what applied to one. I just told. or just using the right tool for the job. in most cases, the box model will be enough to accommodate most standard layouts. use the box model. http://www.w3schools.com/css/css_boxmodel.asp Link to comment Share on other sites More sharing options...
davej Posted May 22, 2014 Share Posted May 22, 2014 For a beginner what is the right tool? One will use what applied to one. Learn to use FLOAT correctly. Link to comment Share on other sites More sharing options...
L8V2L Posted May 23, 2014 Author Share Posted May 23, 2014 How to use the keyword "this" correctly to target? In your own words please. Link to comment Share on other sites More sharing options...
thescientist Posted May 23, 2014 Share Posted May 23, 2014 How to use the keyword "this" correctly to target? In your own words please. what does this have to your original question? are you trying to ask a Javascript question now? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now