----- Original Message -----
From: Kenoli Oleari
To: CSS Mailing List
Sent: Monday, April 14, 2008 2:27 PM
Subject: [css-d] Combining multiple stylesheets and a padding question
Two questions:
Re combining multiple stylesheets--
Can someone provide me with the exact syntax for linking multiple
stylesheets so they can be linked in an html head with a single link
call. What I want to do is to have one link in the head of my html
document that links to a number of stylesheets or to one stylesheet
that is somehow linked to a number of other stylesheets.
I need both the syntax for linking the stylesheets to a single
stylesheet and the syntax that needs to be in the html head.
I've found references that say that this can be done using @import
within a stylesheet linking it to others or link tags within a
stylesheet with a common title attribute but I can't figure out the
correct syntax at each end for doing this.
Re padding --
Why do the dimensions of a div get bigger when I change the padding
in the div? I thought padding simply indented content from the outer
dimension of a div. Is there any way to create "padding" in a div
and keeping the outer dimensions of the div the same without
decreasing the size of the div by the amount of the padding?
Here is the style where the padding is causing the size of the div to
expand:
.titleDiv {
position:relative;
float: left;
width: 451px;
height:87px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 12px;
background-color: #FF00FF;
}
Thanks,
--Kenoli
Kenoli.
I think what you want is in this example:
@import 'global.css';
@import 'nav.css';
@import 'right.css';
@import 'left.css';
which can be in the top a stylesheet which is linked in the HTML.
The reason that the <div> size increases with the padding (and margins) is
because the browser calculates the over-all size of the div as the sizes you
state for the <div> and then adds the padding and margins to work out the
over-all size. If you want to keep the <div> to your chosen size, then subtract
any padding and margins from the appropriate width or height.
i.e.
.divsize {
width:100px;
height:100px;
margin:0;
padding:0;
}
will give you a box of exactly 100px wide x 100px high.
.divsize {
width:100px;
height:100px;
margin:10px 0 10px 0;
padding:0 5px 0 5px;
}
will give you a box of 110px wide x 120px high.
so using your example to get back to the size you actually state, you'd have
to redefine like:
.titleDiv {
position:relative;
float: left;
width: 427px; /* was 451px */
height:63px; /* was 87px */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 12px; /***** Don't forget that this is padding on all sides so has
to be counted double in the width/height calc! *****/
background-color: #FF00FF;
}
I hope this helps.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
______________________________________________________________________
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/
