Liebe Community
Ich habe zu meiner Webseite Michael Ritter ein zweispaltiges Testlayout erstellt, da ich die Webseite ausbauen möchte. Dieses Testlayout gibt's hier Michael Ritter . Ich möchte nun fragen, ob das CSS so tragfähig ist. Valide ist es, und der Effekt entspricht dem Gewünschten. Manches in meinem Code finde ich etwas eigenartig bzw. funktioniert eher zu meiner Verwunderung, zum Beispiel die komischerweise nötige Angabe
zu #rechts. Hier der Code:
Wird das was? Ich danke für das kritische Feedback.
Lg Xeno
Ich habe zu meiner Webseite Michael Ritter ein zweispaltiges Testlayout erstellt, da ich die Webseite ausbauen möchte. Dieses Testlayout gibt's hier Michael Ritter . Ich möchte nun fragen, ob das CSS so tragfähig ist. Valide ist es, und der Effekt entspricht dem Gewünschten. Manches in meinem Code finde ich etwas eigenartig bzw. funktioniert eher zu meiner Verwunderung, zum Beispiel die komischerweise nötige Angabe
Code:
margin-top: 38px;
Code:
* {
margin:0;
padding:0;
}
html {
background-color:#B4DC00;
height:100%;
}
body {
background-color:#FFFFFF;
font-family:Verdana, sans-serif;
margin:20px auto;
width:960px;
min-height:95%;
}
p {
margin:0 20px 20px 20px;
padding-bottom:10px;
}
table {
margin:0 20px 20px 20px;
border:none;
border-collapse:collapse;
}
td {
padding:4px;
padding-right:10px;
text-align:left;
}
th {
text-align:left;
padding:4px;
}
h1, h2, h3 {
margin:0 20px 10px 20px;
}
h1 {
font-size:120%;
}
h2 {
font-size: 115%;
}
h3 {
font-size: 110%;
}
ul {
padding-bottom:20px;
}
a, span {
text-decoration:none;
}
img {
text-align:center;
border:0;
}
a:link {
color:#0000FF;
}
a:visited {
color:#FF4B4B;
}
a:hover { color:#FF0000;
}
span {
color:#0000FF;
}
.linkliste li {
margin:0 0 0 37.5px;
}
.linkliste {
margin:0 0 20px 0;
}
#navi {
list-style-type:none;
padding:0;
float:left;
width:100%;
background-color:#EAF7A8;
margin:0 0 15px 0;
border-radius:10px;
box-shadow:3px 3px 8px #777777;
}
#navi li {
float:left;
position:relative;
display:block;
line-height:1.5;
width:110px;
text-align:center;
font-size:15px;
}
#navi span {
background-color:#FFFF00;
}
#navi li a, span {
padding:10px;
display:block;
background-color:#EAF7A8;
border-radius:10px;
}
#navi li a:hover {
color:#FF0000;
background-color:#FFD700;
border-radius:0;
}
#navi li:first-child a:hover {
border-radius:10px 0 0 10px;
}
#navi li ul {
position:absolute;
left:-999999px;
top:auto;
}
#navi li:hover ul {
left:0;
}
#navi li ul li {
display:block;
text-align:left;
width:100%;
font-size:11.5px;
border-radius:0;
}
#navi li ul li a {
border-radius:0;
}
#navi li ul li:last-child a {
border-radius:0 0 10px 10px;
}
#navi li ul li:first-child a:hover {
border-radius:0;
}
#hauptbild {
float:left;
margin-bottom:5px;
}
#anfang {
margin-bottom:20px;
font-size:200%;
}
#header {
padding:20px 0 20px 0;
margin-bottom:10px;
background-color:#B4DC00;
}
#inhalt {
margin-bottom: 10px;
background-color:#B4DC00;
}
#links {
width:700px;
min-height:960px;
background-color:#FFFFFF;
float:left;
}
#rechts {
min-height:960px;
background:#F6FF68;
margin-left:700px;
margin-top: 38px;
}
#rechts:after {
content:"";
display:block;
clear:both;
}
#footer {
padding:10px 0 0 0;
background-color:#B4DC00;
}
#footer p {
background-color:#EAF7A8;
height: 35px;
margin:0 0 20px 0;
padding-left: 20px;
line-height:280%;
font-size:15px;
border-radius:10px;
box-shadow:3px 3px 8px #777777;
}Wird das was? Ich danke für das kritische Feedback.
Lg Xeno
