Hi I'm not sure if I have this in right place but Im working on my first efiction skin right here http://preview.butterfly-dreams.info/fiction/index.php How do I get the text not to overlap and the content to fit all the pages?
this is my style.css so far. I'm very new to coding css.
/* Some definitions used everywhere */
BODY {
color: #000;
margin: 0;
padding: 0;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
background-image: url(' 
');
line-height: 17px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
font-style: italic;
font-size: 12px;
font-weight: normal;
line-height: 11px;
text-transform: none;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
color: #ededed;
}
#menu {
margin-top: 50px;
margin-left: 800px;
background-color: #40524a;
width: 200px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 3px solid black;}
#content {
background-color: #40524a;
width: 600px;
height:600px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 3px solid black;
margin-top: -300px;
margin-left: 190px;
}
#submenu {
background-color: #40524a;
width: 200px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 3px solid black;
margin-left: 800px;
}
#footer {
background-color: #40524a;
width: 650px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 3px solid black;
margin-left: 300px;
margin-top:900px;
}
#infoblock {
background-color: #40524a;
width: 200px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 3px solid black;
margin-left:605px;
margin-top: 275px;}
#rightindex {
background-color: #40524a;
width: 300px;
margin-left:605px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 3px solid black;}
#middleindex {
background-color: #40524a;
width: 600px;
margin-top: -300px;}
A {
color: black;
font-weight: bold;
text-decoration: none;
}
/* hovering links */
A:hover {
color: #000;
font-weight: bold;
text-decoration: none;
}
I'm not seeing any overlapping text when I look at it in Firefox. I would take a stab that it's your line-height declaration though. I'd take it out and let the browser define line height based on your font size.
Some suggestions:
Don't use "text-align: center" in the body tag. That will center your text EVERYWHERE. It's better to center the text only on the items you need it to be centered on and let the rest automatically align to the left.
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
can be shortened to simply:
padding: 10px;
It's good to do this because it means a shorter file to send to the visitor and therefore faster page loading.
If you have different paddings for each side you can use the individual padding-XXXX calls or do:
padding: 10px 5px 20px 1px;
That would be the same as:
padding-top:10px;
padding-bottom:20px;
padding-left:1px;
padding-right:5px;
The order is clockwise from the top: top, right, bottom, left. This also works with margin, border, etc.
Thank you!
