• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem beim ausrichten von DIV-Containern.

P

paddys-party

Neues Mitglied
Hallo liebe Community,

ich habe i-wie ein Problem beim ausrichten von den Div Containern.

Am Anfang hat es noch super geklappt! Und auf einmal war alles verschoben.
Die CSS Eigenschaften habe ich in einer extra Datei geschrieben.

Wenn mir jemand helfen könnte , wäre das Klasse.

Ein kleineres Problem ist , dass ich in den Vaigationsbereich zwar Schrift einfügen kann , so sich aber der Container vom Headbereich entfernt.
Eigentlich ist überall ein Abstand von 10 px vorgesehen.

Dort würde auch Hilfe benötigt.

Danke im Vorraus !

HTML: 
<html>
<head>
    <title>Zumba mit Kerstin</title>
    <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>
    <div id="webseite">
        <div id="head">
            <h1>Willkommen auf ... ZUMBA-MIT-KERSTIN.de</h1>
            <p>Your Zumba, Your fun, Your party ... with Kerstin !</p>
        </div>
        <div id="navi">
        <p><a href="index.html">Home</a> <a href="videos.html">Videos</a> <a href="kerstin.html">Kerstin</a> <a href="zeiten.html">Zeiten</a> <a href="kontakt.html">Kontakt</a> </p>
        </div>
        <div id="main">
            <div id="news">
            <h1><u>NEWS</u></h1>
            <p>ACHTUNG! ACHTUNG! Jetzt endlich online! Die neue Seite von <br />Zumba mit Kerstin ist <br />jetzt endlich da!<br /><br />Hier werden demnächst auch andere News stehen.</p>
            </div>
            <div id="inhalt">
            
            </div>
            <div id="special">
            <h1><u>SPECIAL</u></h1>
            </div>
        </div>
        <div id="foot">
            <p><a href="impressum.html">Impressum</a> | <a href="https://www.facebook.com/charles.reinemer">Design by Prime Time</a></p>
    
        </div>
    </div>
</body>
</html>


Code: 
body {
background-color:black;
text-align:center;
background-image:url(33.jpg);
background-repeat:no-repeat;
background-size:140%;
}

#webseite {
width:1020px;
margin:0 auto;
}

/* Anfang KOPF */

#head {
width:1020px;
height:150px;
background:#7B399C;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-width:4px;
border-color:black;
border-style:solid;
margin-top:20px;
}


#head p {
font-size:25px;
font-weight:bolder;
font-family:Comic Sans MS,Arial Black;
text-shadow: yellow 0.1em 0.1em 0.2em;
}

#head h1 {
padding-bottom:px;
font-size:40px;
font-weight:bolder;
color:#DF18DF;
font-family:Comic Sans MS;
text-shadow: black 0.1em 0.1em 0.2em;
}

/* ENDE KOPF */

/* Anfang NAVIGATION */

#navi {
width:1020px;
height:50px;
background:#DE84DF;
margin-top:10px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
border-width:4px;
border-color:black;
border-style:solid;
}

#navi p {
padding-top:px;
text-align:center;
font-family:Comic Sans MS,Arial Black;
font-weight:bolder;
font-size:20px;
vertical-align:middle;
word-spacing:3.3cm;
text-shadow: black 0.1em 0.1em 0.2em
}

/* ENDE NAVIGATION */


#main {
width:1020px;
}

/* Anfang NEWS */

#news {
float:left;
width:200px;
height:300px;
background:#DF18DF;
margin-top:10px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
border-width:4px;
border-color:black;
border-style:solid;
}

#news h1 {
font-family:Comic Sans MS;
text-shadow: #444444 0.1em 0.1em 0.2em
}

#news p {
font-family:Comic Sans MS;
color:#0000F5;
}

/* ENDE NEWS */

/* Anfang HAUPTFENSTER */


#inhalt {
float:right;
width:795px;
height:620px;
background:#847BDE;
margin-top:10px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-width:4px;
border-color:black;
border-style:solid;
}

#

/* ENDE HAUPTFENSTER */

/* Anfang SPECIAL */

#special {
float:left;
width:200px;
height:300px;
background:orange;
clear:left;
margin-top:20px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
border-width:4px;
border-color:black;
border-style:solid;
}

#special h1 {
font-family:Comic Sans MS;
text-shadow: #444444 0.1em 0.1em 0.2em
}

/* ENDE SPECIAL */

/* Anfang FUSSLEISTE */

#foot {
width:1020px;
height:30px;
background:#18DEC6;
margin-top:5px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
border-width:4px;
border-color:black;
border-style:solid;
float:both;
}

#foot p {

color:black;
padding-top:px;
font-family:Comic Sans MS,Arial Black;
font-weight:bolder;
font-size:10px;
vertical-align:middle;
}




/* ENDE FUSSLEISTE */

/* ATTRIBUTE LINK */

a:link { font-weight:bold; color:white; text-decoration:none; }
a:visited { font-weight:bold; color:white; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:black; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }
 
Hallo,

mach ertsmal die einfachen fehler raus, dann sieht das alles schon ganz anders aus.

- kein DOCTYPE ist das HTML5 oder XHTML oder Klingonisch :O)
- im css steht ne # einfach si rum
- das ist mir neu das es sowas gibt "-o-border-radius:"
- das geht genau so wenig da fehlt eine zahl "padding-top:px;"

wenn das alles änderst sieht das schon anders aus als vorher.

- Navigation hat eine ul li liste zu sein und nicht einfach ein paar links hinschreiben.

Wenn das Online stehlst und auch noch ein test link zeigst kann man viel schneller helfen.


Cheffchen
 
Das Zeichen # hat alles ausgelöst. Läuft jetzt wieder gut. Kurze Frage. Wüsste jetzt nicht , wie ich eine ul oder li Liste so einfüge , dass es in den Bereich reinpasst. Weiterhin hab ich sonst alle Fehler behoben.
 
Hallo,


so ungefähr.

CSS
Code: 
#navihori {
    height: 40px;
    text-align: center;
    width: 1000px;
}
#navihori li {
    display: inline;
}
#navihori a {
    background-color: #FFFF99;
    border: 1px solid #000000;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 3px 2px 10px 0 rgba(0, 0, 0, 0.8);
    color: #336600;
    font-weight: bold;
    margin: 0 2px;
    padding: 3px 8px;
    text-decoration: none;
}
#navihori a:hover {
    background-color: #FFFFCC;
    color: #FC6E00;
    text-decoration: none;
}

#navihori ul li a.rex-current {
    color: #00DF00;
}
Menü Code
Code: 
<div id="navihori">
<ul>
<li><a href="/" class="rex-current">Die ImkereiAktiv</a></li>
<li><a href="/">Die Imkerei1</a></li>
<li><a href="/">Die Imkerei2</a></li>
<li><a href="/">Die Imkerei3</a></li>
</ul>
</div>

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben