AW: [CSS] CSS-Contest 2012 WIPs
So jacky, hab mal reingeschaut bei dir. Das erste was auffällt, du machst kein reset für Browserspezifische Abstände, das gibt dann immer Überraschungen, wenn man 's in verschiedenen Browsern anschaut. Also ganz am Anfang
Die 10px padding vom body kannste rausnehmen, die brauchts nich.
Deine h2 hab ich mal nach unten geschoben, wie in deinem Bild
Code:
header h2 {
width:250px;
font-size:14px;
padding:260px 0 0 600px;
}
Bei deiner nav hab ich mal ein paar Hintergründe rausgenommen, reicht wenn die nav die hat, genau so auch die runden Ecken. Schau einfach mal rein...
Code:
/*--------------------Navigation--------------------------*/
#mainNav {
position:fixed;
z-index:100;
top:312px;
width:900px;
background:#000;
border-radius:6px;
box-shadow:#ccc 1px 1px 4px;
padding:10px;
}
#mainNav ul {
width:600px;
top:312px;
list-style-type:none;
float:left;
}
#mainNav li {
float:left;
}
#mainNav a{
color:#C03;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
padding:5px 10px;
}
#mainNav a:hover{
color:#999;
background:#4e4e4e;
border-radius:6px;
}
/*------------------------------Suchen-------------------------*/
#mainNav form{
font-size: 10px;
float:right;
}
#screenReaderText {
font-size:12px;
}
#searchfield {
color:#000;
background:#FFF;
font-size:9px;
border:none;
border-radius:6px;
padding:5px 10px;
}
#contest .inner h3 #mainNav #search .screenReaderText {
display:none;
}
form#search .screenreaderText {
font-size:8px;
}
Jetzt noch zum footer Problem, selbiges wie oben, Hintergründe und runde Ecken entfernt. Ich seh grad, du hast an der html geschraubt, wir haben keine ID footer, sondern nur ein Element und dieses musst du in der CSS mit"footer", nicht mit "#footer" ansprechen. Kopier dir nochmal die originale Datei, sonst gibts später Probleme mit dieser. Hinzu kommt noch ein kleiner Rechtschreibfehler bei position, weshalb das Ding auch nicht sticky ist. Hab das mal so weit geändert
Code:
footer{
background-color:#000;
position:fixed;
bottom:0;
width:900px;
height:25px;
margin:auto;
border-radius:6px 6px 0 0;
}
footer .inner{
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
text-decoration: none;
}
footer .inner #info {
font-size: 12px;
text-align:center;color:#CCC;
}
footer .inner a{
color:#ccc;
}
Das wird aber nur funktionieren, wenn du dir wieder die originale html holst. Momentan ist bei dir .inner außerhalb vom footer und hat die ID footer,
HTML:
<footer></footer>
<div class="inner" id="footer">
<p id="info">Der CSS-Contest ist ein Contest auf <a href="http://www.psd-tutorials.de/" rel="external">psd-tutorials.de</a> | Teilnehmer: <a href="http://www.psd-tutorials.de" rel="author external">Teilnehmer</a> | <a href="teilnehmer/style.css">CSS</a></p>
</div>
wenn du mit dieser Konstellation weitermachst gibts nachher ne böse Überraschung beim hochladen auf den Contestserver. Auch im head hast du Sachen entfernt. Also, wie gesagt, hol dir das Original zurück. Wenn du Änderungen vornimmst, nur am Text (Name und/oder "über Teilnehmer"-Text), nicht an den Elementen.
Da fällt mir ein, für alle, die es lokal ohne XAMPP testen, ladet euch jQuery runter, legt es in den Ordner und passt den Link an. Dann läuft das auch lokal. Ich binde halt immer die latest ein, weil so immer die aktuellste Version benutzt wird.
:lol: 2 DIN-A4 Blätter akkurat zusammen gefaltet 
