Hi,
I'm having problems getting 2 divs to display side-by-side correctly.
I've done the google bit, but cannot find anything which is similar
enough to what I want. Most of the descriptions I've found seem to use
individual ID= (versus class=) - I don't understand how "cascading"
works in those circumstances. :(
Anyway, I have two specific questions.
1) Why are the 2 lower DIV's being rendered OUTSIDE their containing DIV?
2) The "Div text" in those 2 DIVs is being rendered Black - it should be
Blue and Red (left/right respectively). The CSS validates, but if I
remove the "color: inherit;" from div.mine then the coloured text is
correct, but I get a css validation warning (not an error).
Would someone mind helping me out a little please.
The page can be found at http://www.screwy-ut.myby.co.uk/ - it is a
*very* simple test page to help me understand what is going on.
TIA
--
Steve.
Reply-to is valid, but temporary. 9 4269
This is a CSS question rather than HTML, but anyway ...
On Wed, 12 Oct 2005 14:41:06 GMT, Screwball <mu*******@snea kemail.com>
wrote: Anyway, I have two specific questions.
1) Why are the 2 lower DIV's being rendered OUTSIDE their containing DIV?
Because they are floated, and you don't have a clear in the containing
DIV.
2) The "Div text" in those 2 DIVs is being rendered Black - it should be Blue and Red (left/right respectively).
You've specified the colour two ways: as 'inherit' in 'mine' and as a
specific colour in 'blue' and 'red', so the browser has to choose one of
them. I think you're then being bitten by precedence rules - 'mine' is
specified as being applied to DIVs only and so is more specific (but I
have to recheck the rules on this every time myself). You could fix the
precedence, but it would be better to just specify the colour only once.
The page can be found at http://www.screwy-ut.myby.co.uk/ - it is a *very* simple test page to help me understand what is going on.
--
Stephen Poley http://www.xs4all.nl/~sbpoley/webmatters/
Stephen Poley wrote: This is a CSS question rather than HTML, but anyway ...
On Wed, 12 Oct 2005 14:41:06 GMT, Screwball <mu*******@snea kemail.com> wrote:
Anyway, I have two specific questions.
1) Why are the 2 lower DIV's being rendered OUTSIDE their containing DIV?
Because they are floated, and you don't have a clear in the containing DIV.
I just added "clear: both" to div.mine - result is that the right-hand
div has now dropped down so although it is still to the right, it's top
is below the bottom of the left one :( 2) The "Div text" in those 2 DIVs is being rendered Black - it should be Blue and Red (left/right respectively).
You've specified the colour two ways: as 'inherit' in 'mine' and as a specific colour in 'blue' and 'red', so the browser has to choose one of them. I think you're then being bitten by precedence rules - 'mine' is specified as being applied to DIVs only and so is more specific (but I have to recheck the rules on this every time myself). You could fix the precedence, but it would be better to just specify the colour only once.
Am I losing the plot here? I thought that the whole idea of "cascading"
rules was that each "level" down inherited (most) of it's parent's
attributes, but that they could be overridden if required? Similar to
classes in many OO programming languages.
Bear in mind that this is a learning exercise - I am rather new to all
this stuff ;)
--
Steve.
Reply-to is valid, but temporary.
On Wed, 12 Oct 2005 18:53:15 GMT, Screwball <mu*******@snea kemail.com>
wrote: Stephen Poley wrote: This is a CSS question rather than HTML, but anyway ...
On Wed, 12 Oct 2005 14:41:06 GMT, Screwball <mu*******@snea kemail.com> wrote:
Anyway, I have two specific questions.
1) Why are the 2 lower DIV's being rendered OUTSIDE their containing DIV?
Because they are floated, and you don't have a clear in the containing DIV.
I just added "clear: both" to div.mine - result is that the right-hand div has now dropped down so although it is still to the right, it's top is below the bottom of the left one :(
OK, I guess my answer was a bit too brief. I suggest you play a bit with
floats and clears in a simpler layout to get a feel for what is going
on. You need a clear *in* the DIV. In other words you need an HTML
element within div.mine, after the floats, with the clear property on
it. (<BR> is commonly used, and apparently always works, though the spec
actually says IIRC you need a block-level element). 2) The "Div text" in those 2 DIVs is being rendered Black - it should be Blue and Red (left/right respectively).
You've specified the colour two ways: as 'inherit' in 'mine' and as a specific colour in 'blue' and 'red', so the browser has to choose one of them. I think you're then being bitten by precedence rules - 'mine' is specified as being applied to DIVs only and so is more specific (but I have to recheck the rules on this every time myself). You could fix the precedence, but it would be better to just specify the colour only once.
Am I losing the plot here? I thought that the whole idea of "cascading" rules was that each "level" down inherited (most) of it's parent's attributes, but that they could be overridden if required? Similar to classes in many OO programming languages.
Bear in mind that this is a learning exercise - I am rather new to all this stuff ;)
OK, let's try to explain this simply. You have <div class="mine left">
This applies both the class mine (with color: inherit) and class left
(with color: blue;). Clearly the browser can't apply both these rules
simultaneously. It is actually applying color: inherit. The reasons for
this are quite logical but a little complicated. It is caused by the
fact that in your CSS you say "div.mine" but only "left", not "div.left"
(see section 6.4 of the CSS spec for the details).
I suggest that rather than try to understand the details at this stage,
you try to avoid applying both rules at the same time. Perhaps what you
really want to do is apply "mine" to the outer class and "blue" (only)
to the inner class. But then you'll need another class to apply the
padding.
I hope this is enough to point you in the right direction. If you play a
bit further it should become obvious.
--
Stephen Poley http://www.xs4all.nl/~sbpoley/webmatters/
On Wed, 12 Oct 2005 18:53:15 GMT, Screwball <mu*******@snea kemail.com>
wrote: Similar to classes in many OO programming languages.
Nope. Almost entirely the opposite in fact.
Stephen Poley wrote: On Wed, 12 Oct 2005 18:53:15 GMT, Screwball <mu*******@snea kemail.com> wrote:
Stephen Poley wrote:
This is a CSS question rather than HTML, but anyway ...
On Wed, 12 Oct 2005 14:41:06 GMT, Screwball <mu*******@snea kemail.com> wrote:
Anyway, I have two specific questions.
1) Why are the 2 lower DIV's being rendered OUTSIDE their containing DIV?
Because they are floated, and you don't have a clear in the containing DIV. I just added "clear: both" to div.mine - result is that the right-hand div has now dropped down so although it is still to the right, it's top is below the bottom of the left one :(
OK, I guess my answer was a bit too brief. I suggest you play a bit with floats and clears in a simpler layout to get a feel for what is going on. You need a clear *in* the DIV. In other words you need an HTML element within div.mine, after the floats, with the clear property on it. (<BR> is commonly used, and apparently always works, though the spec actually says IIRC you need a block-level element).
I thought that *was* a simple layout to play with :o
So you're saying that I have to clear AFTER the floated divs in order to
get them to work correctly? Most curious - I shall try that in the morning. 2) The "Div text" in those 2 DIVs is being rendered Black - it should be Blue and Red (left/right respectively).
You've specified the colour two ways: as 'inherit' in 'mine' and as a specific colour in 'blue' and 'red', so the browser has to choose one of them. I think you're then being bitten by precedence rules - 'mine' is specified as being applied to DIVs only and so is more specific (but I have to recheck the rules on this every time myself). You could fix the precedence , but it would be better to just specify the colour only once.
I spent AGES playing with "div.mine left" "div.mine.l eft" etc adnauseam
- most of which combinations screwed up the layout completely.
What you saw was the closest I could get.
Am I losing the plot here? I thought that the whole idea of "cascading" rules was that each "level" down inherited (most) of it's parent's attributes, but that they could be overridden if required? Similar to classes in many OO programming languages.
Bear in mind that this is a learning exercise - I am rather new to all this stuff ;)
OK, let's try to explain this simply. You have <div class="mine left"> This applies both the class mine (with color: inherit) and class left (with color: blue;). Clearly the browser can't apply both these rules simultaneously. It is actually applying color: inherit. The reasons for this are quite logical but a little complicated. It is caused by the fact that in your CSS you say "div.mine" but only "left", not "div.left" (see section 6.4 of the CSS spec for the details).
Ahh - so I'm applying 2 distinct and unrelated rules to the same item
(the div)? that might explain my confusion. What I was attempting to do
(probably wrongly) was to take a div (in this case "mine") and
effectively "subclass" it - ie. derive a class from it with some
attributes being overridden. This is clearly not the way to go - back to
the books (and the drawing board). I suggest that rather than try to understand the details at this stage, you try to avoid applying both rules at the same time. Perhaps what you really want to do is apply "mine" to the outer class and "blue" (only) to the inner class. But then you'll need another class to apply the padding.
As above, i think you can probably see what I was trying to achieve and
how. It seems to need more "classes" than I had, at first, thought were
necessary.
I hope this is enough to point you in the right direction. If you play a bit further it should become obvious.
Yes, it should be. I'll play a bit further and try to make sense of it all.
Thank you for your explanation - appreciated.
--
Steve.
Reply-to is valid, but temporary.
Andy Dingley wrote: On Wed, 12 Oct 2005 18:53:15 GMT, Screwball <mu*******@snea kemail.com> wrote:
Similar to classes in many OO programming languages.
Nope. Almost entirely the opposite in fact.
Then I must be totally misunderstandin g the concept of a "cascading
style". Would you mind elaborating on your reply a little?
--
Steve.
Reply-to is valid, but temporary.
Screwball wrote: Then I must be totally misunderstandin g the concept of a "cascading style".
You and every other experienced OO coder I've seen dive into CSS
(myself included).
Would you mind elaborating on your reply a little?
If I had a snappy explanation of it, I'd write a CSS book.
The difference is the use of weightings (the cascade) in the scope of
CSS selectors, compared to the simple over-ruling that we know from OO.
The cascade is not a simple matter!
There's also the question of CSS rule granularity. Cascades are
evaluated at the level of the individual rules, not the "method" (the
{} block).
Lie & Bos's book is the only vaguely readable and accurate explanation
of this that I've seen. I found the spec and Meyer's book much less
useful (although both are worth reading for other issues).
Andy Dingley wrote: Screwball wrote:
Then I must be totally misunderstandin g the concept of a "cascading style".
You and every other experienced OO coder I've seen dive into CSS (myself included).
I'm SO glad it's not just me.. Would you mind elaborating on your reply a little?
If I had a snappy explanation of it, I'd write a CSS book.
:)
The difference is the use of weightings (the cascade) in the scope of CSS selectors, compared to the simple over-ruling that we know from OO. The cascade is not a simple matter!
That much is becoming clear!
There's also the question of CSS rule granularity. Cascades are evaluated at the level of the individual rules, not the "method" (the {} block).
Lie & Bos's book is the only vaguely readable and accurate explanation of this that I've seen. I found the spec and Meyer's book much less useful (although both are worth reading for other issues).
I have the Meyer book - I have found it to be very useful (in general
terms). The specifics though (as it this case) are maybe not as clear as
they could be.
I need to re-read that section carefully in light if the above.
Thanks for the reply - appreciated.
--
Steve.
Reply-to is valid, but temporary.
On 13 Oct 2005 07:36:08 -0700, in comp.infosystem s. www.authoring.html
, "Andy Dingley" <di*****@codesm iths.com> in
<11************ **********@g47g 2000cwa.googleg roups.com> wrote: Screwball wrote:
Then I must be totally misunderstandin g the concept of a "cascading style".
You and every other experienced OO coder I've seen dive into CSS (myself included).
CSS confuses me in the context of any of my previous computer
experience. Kind of impressive for something with no loops or calls or
anything procedural.
[snip]
--
Matt Silberstein
Do something today about the Darfur Genocide
Genocide is news | Be A Witness http://www.beawitness.org
"Darfur: A Genocide We can Stop" www.darfurgenocide.org
Save Darfur.org :: Violence and Suffering in Sudan's Darfur Region http://www.savedarfur.org/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Preston Crawford |
last post by:
I know this is probably a dumb question so please be patient with me. I've
been doing HTML since 1994, but mostly for projects that had to be as
completely compatible as possible and mostly existing projects. So that
meant dealing with the traditional table layouts (i.e. using tables for
the entire structure of a page). I'm just not getting to use DIVs solely
for the layout of a page. The one problem I'm having is that I'm trying to
setup...
|
by: Aaron |
last post by:
I have the following divs:
<div style="background-image: url(images/house_01.jpg); width: 249px;
height: 346px;"></div>
<div style="background-image: url(images/house_02.jpg); width: 251px;
height: 346px;"></div>
Since by default, the display property is set to block, they show up on
different lines. Since each div contains half of a complete background
image, I need then to show up side-by-side. The thing is, when I set the
|
by: Jamie Jackson |
last post by:
I'd like to get a couple of divs centered in a container (let's say
the container is a td, but it could also be a div).
Here's what I have now (div2 and div3 are floated left):
+---------------------------+
|+----+ +-------+ |
||div2| | div3 | |
|| | | | |
|| | | | |
|| | | | |
|
by: squidco |
last post by:
I've been trying to wean myself off of tables. I've been reading about
the float property, and have implemented a couple of sites using divs
instead of tables, and generally I'm happy with the results.
Still, I'm having problems constructing a generalized approach to
laying divs side by side without being very specific about the width of
each div. The code below makes 3-columns of content, but unfortunately
if the visitor resizes the...
|
by: Mel |
last post by:
i need to have as many as 5 divs side by side on the same line without a
break. if browser displays a horizontal scrollbar, its ok with my users and
they can resize it.
something like the following:
X X X X X
where each 'X' is a div with my stuff inside them and i dont want it to look
like
| |
by: Rick Brandt |
last post by:
Sorry, I don't have a sample web page, but hopefully the crude illustration
below will suffice.
Given that the space within the dashed upper and lower lines is a div across the
entire width of the page and that the areas are spans that sit on the
left side of that div, is there a simple CSS way to make the "additional span"
be justified to the right side of the containing div?
I have been experimenting with different strategies and...
|
by: Wes Groleau |
last post by:
I have a huge pile of open-source PHP, far too big for me to
wrestle it into submission. It generates nested tables
MANY layers deep.
What I am trying to do is extract several small pieces from it and put
each of those in a box (in a new file) and arrange those boxes my way.
The layout I want is (you'll need fixed width font):
+-----+-----+-----+-----+
|
by: Mike P |
last post by:
How would I show or hide a div that is using client side Javascript
based upon a server side variable?
Here are my divs :
<div id="idButton5" class="otherLeftBarLink" onmouseover="javascript:
changeStylesMouseOver('5');" onmouseout="javascript:
changeStylesMouseOut('5');" onclick="location='/AddProject.aspx'">
<div class="leftBarLinkText">
Add Project
|
by: jeddiki |
last post by:
How do I get these 2 divs to be side by side ?
I have been trying to apply the float logic to a couple
of divs on the same screen, but without success.
There is a main div that holds two sub-divs
The LHS sub-div ( class= listerTop) is a listing and
the RHS sub-div i( class=ad_big_box ) is a set of images.
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| |
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |