Hallo,
erstmal der Link zu meinem Blog: http://www.sverebom.de
Ihr könnt das Problem schon sehen. Das Logo links soll vertikal in der Fläche zentriert sein - immer, bei jeder Fenstergröße. Momentan ist das Logo als Hintergrundbild in einen div-Container eingebettet (optimiert für 1027x768), welchen ich nicht so definieren kann, das er die verfügbare Flache komplett ausfüllt.
Wie würdet ihr das Problem lösen? Ich hab so auf Anhieb keine Idee :(
Ach ja, und dann habe ich noch ein kleines Problem mit dem Internet Explorer (was auch sonst). Wenn ihr die Seite mal im IE öffnet, werdet ihr sehen, das die als block definierten Links in der Sidebar die Liste sprengen.
Idee? Ich hab keine ...
Hier noch der aktuelle CSS-Code:
Code
/* Layout */
body, html {
margin: 0;
padding: 0;
font: 10px verdana, arial, helvetica, sans serif;
background: #2778C3 url(images/bg_standard.gif) repeat-y right;
}
#logo {
top: 0;
left: 0;
float: left;
width: 350px;
height: 400px;
position: fixed;
background: transparent url(images/logo_standard.jpg) top left;
}
#page { float: right; width: 600px; color: #787878 }
img { border: none }
/* Content */
#content { float: left; width: 450px }
#content h2 {
margin: 0;
color: #2778C3;
font-size: 12px;
padding: 3px 0 0 3px;
}
#content h3 {
margin: 0;
font-size: 12px;
font-weight: normal;
padding: 10px 0 0 20px;
}
#content p { line-height: 14px; text-align: justify; padding: 0 3px 0 3px }
#content a { color: #2778C3; text-decoration: none }
#content a:hover { color: #F5A50B }
#content ol, #content ul { margin: 0; padding: 10px 20px 0 40px }
#content cite { font-weight: bold }
#content small { color: #ABABAB;padding: 0 3px 0 3px }
#content .post { padding: 12px 20px 0 20px }
#content .border { border-bottom: 1px solid #CDCDCD; padding: 0 3px 3px 3px }
#content .metadata {
color: #ABABAB;
margin: 0 0 8px 0;
text-align: right;
padding: 0 3px 3px 0;
border-bottom: 1px solid #CDCDCD;
}
#content .metadata strong { font-weight: normal }
#content .commentpages { text-align: right; padding: 0 20px 0 20px }
#content .smileys { text-align: center }
#content .edit { padding: 0 20px 0 20px; text-align: right }
#content form { margin: 0; padding: 0 23px 0 20px }
#content input {
width: 140px;
padding: 1px;
color: #686868;
border: 1px solid #ABABAB;
font: 11px verdana, arial, helvetica, sans serif;
}
#content textarea {
width: 400px;
padding: 1px;
color: #686868;
border: 1px solid #ABABAB;
font: 11px verdana, arial, helvetica, sans serif;
}
#content .button {
padding: 0;
width: 60px;
padding: 2px;
border: none;
color: #F5940B;
font-weight: bold;
background: #FFFFFF;
font: 11px verdana, arial, helvetica, sans serif;
}
/* Sidebar */
#sidebar { float: right; width: 150px }
#sidebar ul { margin: 0; padding: 0; list-style: none }
#sidebar li { background: transparent url("images/bord_standard.gif") repeat-x bottom }
#sidebar h2 {
margin: 0;
color: #F5940B;
font-size: 11px;
padding: 14px 0 6px 12px;
}
#sidebar a {
color: #78ACDC;
display: block;
font-weight: bold;
text-decoration: none;
padding: 6px 0 6px 12px;
}
#sidebar a:hover { color: #FFFFFF; background: #78ACDC }
#sidebar p { margin: 0; padding: 5px; line-height: 15px }
#sidebar form { text-align: center; padding: 6px 0 6px 4px }
#sidebar input {
width: 80px;
padding: 1px;
color: #686868;
border: 1px solid #ABABAB;
font: 11px verdana, arial, helvetica, sans serif;
}
#sidebar .button {
padding: 0;
width: 40px;
border: none;
color: #F5940B;
font-weight: bold;
background: #FFFFFF;
font: 11px verdana, arial, helvetica, sans serif;
}
/* Footer */
#footer { clear: both; text-align: center }
#footer p { padding: 15px 150px 0 0; color: #B3B3B3 }
#footer a { color: #78ACDC; text-decoration: none }
#footer a:hover { text-decoration: underline }