Re: [css-d] Containing Element
As far as I can figure out the containing element is always a 'div' surrounding the floated element or the 'browser window' if there is no div in the hierarchy above it . Please do correct me if I have this wrong. thanks, Naz. On 28 Sep 2009, at 16:28, MOHAMMED NASEER wrote: > I'm trying to understand floats and related matters. I have a > question, is the 'containing element' in which an element is floated > either to the left or right - can it be any element, in which the > floated element happens to be nested or wrapped inside of. Or is it > only a block level element which happens to be wrapping that > particular floated element. If you could pls clarify it for me. > thanks, Naz. __ 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] Containing Element
I'm trying to understand floats and related matters. I have a question, is the 'containing element' in which an element is floated either to the left or right - can it be any element, in which the floated element happens to be nested or wrapped inside of. Or is it only a block level element which happens to be wrapping that particular floated element. If you could pls clarify it for me. thanks, Naz. __ 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] width issue
can someone tell me, a newbie, why in code (A) the 'width' works, but
in code (B) it doesn't :
(A) :
#subForm .label {
float: left;
width: 230px; /* <-- WORKS */
margin-right: 10px;
text-align: right;
font-weight: bold;
clear: left;
}
#name, #email, #comments {
background-color: #FBEF99;
font-family: "Lucida Console", Monaco, monospace;
font-size: .9em;
width: 300px;
margin-top: -2px;
}
What is your name?
What is your email address?
Rate your apartment farming skills /* <-- WORKS */
Novice
Intermediate
Advanced
Where did you hear about us?
Select One
Friend
Herban Jungle
Compost Today
Vanity Fair
Any additional comments?
/
(B) :
#subForm .label {
float: left;
width: 230px;
margin-right: 10px;
text-align: right;
font-weight: bold;
clear: left;
}
#name, #email, #comments {
background-color: #FBEF99;
font-family: "Lucida Console", Monaco, monospace;
font-size: .9em;
width: 300px;
margin-top: -2px;
}
fieldset {
clear: left;
border:0;
margin-top: 10px;
}
.first_label {
width: 230px; /*
<-- NOT FUNCTIONING */
font-weight: bold;
text-align: right;
margin-right: 10px;
}
CosmoFarmer 2.0
Home
Features
Experts
Quiz
Projects
Horoscopes
Sign Up: Reader
Subscription Form
What is your name?
What is your email address?
Rate your /* <-- NOT
FUNCTIONING */
Novice
Intermediate
Advanced
Where did you hear about us?
Select One
Friend
Herban Jungle
Compost Today
Vanity Fair
Any additional comments?
( I would imagine 'fieldset' in B to be a block level element just
like 'p' in A, and 'span' in both A and B is inline element - but I
don't see why in A it works but in B it doesn't )
__
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] width issue
thanks 4 ur reply but if u could explain to me why in (A) it's
applied to a 'span' just like in (B), yet it works - the only
difference is that in (B) I've replaced the 'p' tag with a 'fieldset'.
I have tried before using 'display: block', causes the radio buttons
to display on a different line which is something I am trying to avoid
if I can.
On 26 Sep 2009, at 15:00, Alan Gresley wrote:
> MOHAMMED NASEER wrote:
>> can someone tell me, a newbie, why in code (A) the 'width' works,
>> but in code (B) it doesn't :
> [...]
>> fieldset {
>> clear: left;
>> border:0;
>> margin-top: 10px;
>> }
>> .first_label {
>> width: 230px; /*
>> <-- NOT FUNCTIONING */
>> font-weight: bold;
>> text-align: right;
>> margin-right: 10px;
>> }
> [...]
>> Rate your > span> /* <-- NOT
>> FUNCTIONING */
>>
>> Novice
>>
>> > >Intermediate
>>
>> Advanced> label>
>>
> [...]
>> ( I would imagine 'fieldset' in B to be a block level element just
>> like 'p' in A, and 'span' in both A and B is inline element - but
>> I don't see why in A it works but in B it doesn't )
>
>
> Hello,
>
> You can not give a width to a if it is treated as an inline
> element. Does this help.
>
> .first_label {
> display: block; /* Add */
> width: 230px;
> font-weight: bold;
> text-align: right;
> margin-right: 10px;
> }
>
>
>
> --
> Alan http://css-class.com/
>
> Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] Float problem
many thanks for those responses, I have added the fieldset with
clear:left and border:0 for the styling for radio buttons.
But was wondering how I could fine tune the layout, for the fieldset
(radio buttons), like that achieved by the descendent selector,
'subForm .label' which allows the form elements to :
a. move the label or the text to the left side of window,
b. right align them in a column 230px wide,
c. have a gap of 10px between the label/text and the form element in
my case the set of three 'radio buttons'
etc.
and also apply the same styling as the id selectors below where the
form elements are nudged up 2px by the margin-top: -2px
thanking in advance, Naz.
}
#subForm .label {
float: left;
width: 230px;
margin-right: 10px;
text-align: right;
font-weight: bold;
clear: left;
}
..
#name, #email, #comments {
background-color: #FBEF99;
font-family: "Lucida Console", Monaco, monospace;
font-size: .9em;
width: 300px;
margin-top: -2px;
}
...
fieldset {
clear: left;
border:0;
}
...
What is your name?
What is your email address?
Information collected at this site is limited to our network of 9,872
partner affiliates. Your information will only be shared among
them...
Rate your apartment farming
skills
Novice
Intermediate
Advanced
Where did you hear about us?
Select One
Friend
Herban Jungle
Compost Today
Vanity Fair
Any additional comments?
>
__
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] Float problem
that does the job but it's out of place from the rest of the layout due to the border. I tried wrapping it up in a div, applied a class with 'clear:left' and that did the trick :-) On 24 Sep 2009, at 16:31, Thierry Koblentz wrote: >> > > Try to you use a fieldset instead of a p to wrap the radio buttons > and use > clear:left on that fieldset. That you should fix your float problem as > fieldsets create a new block-formatting context and will also > contain the > floats. > Also, using fieldset is more semantic than using paragraphs for this. > > > -- > Regards, > Thierry | http://www.TJKDesign.com __ 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] Float problem
Hi - I was working on a tutorial and they suggested adding 'clear:
left;' to the descendent selector below in order to remove the
problem of next label/question ( in this case: 'Rate your apartment
farming skills' ) wrapping around the float in case where the text for
the question/label before runs more than one line, as is the case with
the second label.
Although this problem is fixed, but now I am running into another
problem in that the next 'input types' ( Novice, Intermediate, and
Advanced ) are wrapping around the long text. How can I best resolve
this - thanking in advance, Naz.
#subForm .label {
float: left;
width: 230px;
margin-right: 10px;
text-align: right;
font-weight: bold;
clear: left;
}
.
What is your name?
What is your email
address? There’s one last step for these labels. Because they’re
floated to the left, if the
text runs more than one line, the question that follows will also try
to wrap around to the right./* ...SECOND LABEL */
Rate your apartment farming
skills
Novice
Intermediate
Advanced
.
__
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] Cascade related question
Hi - I am new to CSS and have problem understanding why a:hover
class's 'background-color' property is not affecting an email link
styled by a descendent selector ( #legal a ) in following code.
a {
color: #207EBF;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #F60;
}
a:visited {
color: #6E97BF;
}
a:hover {
color: #FFF;
background-color: #6E97BF;
border-bottom-color: #6E97BF;
}
#legal a {
color: #66;
border: none;
background: url(images/email.gif) no-repeat left center;
padding-left: 20px;
margin-left: 10px;
}
...
Copyright 2010. mailto:c...@cosmofarmer.com";>E-
mail comments to cs s...@cosmofarmer.com
many thanks, Naseer.
__
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/
