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

Erneutes Problem!!

Status
Für weitere Antworten geschlossen.
H

hero1504

Neues Mitglied
Jo ich schon wieder hehe,

Also ich habe wieder mal ein problem:
und zwar bin ich grade bei der lektion wo es um floats geht
so da stand dann das ich in meiner css datei im #navi ein float einfügen soll habe ichauch so gemacht aber auf einmal haben sich die ganzen links verschoben wieso?? hab ich was falsch gemacht??
außerdem möchte ich meine contentbox neben dem bilder link bekommen aber zentriert das macht man wie ich jetzt schon erfahren habe mit float ich bekomme es aber einfach net hin hoffe ihr könnt mir helfen.
Bild:
Kostenloser Bilder Upload Service - Gratis Bilder hochladen / uploaden ohne Anmeldung

Code: 
body
{
background-color: #FCF6CF;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

h1
{
color: #000080;
text-align: center;
text-decoration: underline;
}

#header
{
border-top: 3px solid #990000;
border-right: 3px solid #990000;
border-bottom: 3px double #003300;
border-left: 3px double #003300;
background: #FFCC00 url(banner1.gif) no-repeat center;
margin: 15px 15px 30px;
} 

#navi
{
float:left;
background-color: #FFCC00;
margin: 15px;
width: 100px;
font-size: 0,9em;
border: 1px solid #000080;
}

#navi2
{
background-color: #FFCC00;
margin: 15px;
width: 100px;
font-size: 0,9em;
border: 1px solid #000080;
}

#navi3
{
background-color: #FFCC00;
margin: 15px;
width: 100px;
font-size: 0,9em;
border: 1px solid #000080;
}

#navi4
{
background-color: #FFCC00;
margin: 15px;
width: 100px;
font-size: 0,9em;
border: 1px solid #000080;
}

#navi5
{
background-color: #FFCC00;
margin: 15px;
width: 100px;
font-size: 0,9em;
border: 1px solid #000080;
}

#navi6
{
background-color: #FFCC00;
margin-left: 15px;
width: 100px;
font-size: 0,9em;
border: 1px solid #000080;
}

#content
{
margin: 15px 400px 30px;
text-align: center;
border: 1px solid #8A2BE2;
width: 600px;
background: #FFCC00
}
mfg
sven
 
Zuletzt bearbeitet von einem Moderator:
Ich glaub du hast n grundlegenden Fehler.. Deine Navi sollte so aussehen:
HTML: 
<ul id="navi">
    <li><a href="..">Bilder</a></li>
    <li><a href="..">Partner</a></li>
</ul>
Dann floatest du die ganze Naviliste nach links und der Inhalt ist dann rechts daneben, statt nur den ersten Navieintrag.
 
Man kann dein Problem nur dann genau beurteilen, wenn man sowohl den HTML-code als auch den CSS-Code hat. Denn beides spielt ja zusammen.
So wie es aber aussieht, verwendest du für jeden Link einen Div #navi1, #navi2 usw.
Das ist nicht erforderlich und sogar falsch.

#navi bedeutet: Es handelt sich um einen "Kasten", der lediglich als #navi deklariert ist. Nicht mehr und nicht weniger. Die float-Eigenschaft positioniert ihn links.

Dieser Kasten enthält dann eine Liste (ul). Das ist eine Aufzählung von einzelnen Listenpunkten (li) und diese wiederum beinhalten die einzelnen Links.

Versuch dich doch mal wirklich an den Kurs zu halten. Geh ihn systematisch von Anfang an durch, dann kommst du auch zum richtigen Ergebnis.
Nichts überstürzen, auch wenn das schwer ist. Schließlich will man ja schnell Erfolge sehen. Es ist aber m.E. wichtig, dass man sich da langsam vorantastet, auch wenn einem das ein oder andere nicht so stark interessiert.
 
ich habe es jetzt mal geändert es sitzt aber immer noch net so wie es soll?
Kostenloser Bilder Upload Service - Gratis Bilder hochladen / uploaden ohne Anmeldung

Code: 
body
{
background-color: #FCF6CF;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

h1
{
color: #000080;
text-align: center;
text-decoration: underline;
}

#header
{
border-top: 3px solid #990000;
border-right: 3px solid #990000;
border-bottom: 3px double #003300;
border-left: 3px double #003300;
background: #FFCC00 url(banner1.gif) no-repeat center;
margin: 15px 15px 30px;
} 

#navi
{
float:left;
background-color: #FFCC00;
margin: 15px;
width: 100px;
font-size: 0,9em;
border: 1px solid #000080;
}

#content
{
text-align: center;
border: 1px solid #8A2BE2;
width: 600px;
background: #FFCC00
}
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine erste CSS-Seite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<h1>Meine erste CSS Seite</h1>
</div> <!--Ende header-->
<ul id="navi"> <li><a href="bilder.html">Bilder</a></li>
 <li><a href="partner.html">Partner</a></li> </ul>
<!--Ende navi-->
<div id="content">
Ich bin der Content Container
</div> <!--Ende Content-->
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Damit kann man schon mehr anfangen:
Sieh mal:

#navi
{
float:left;
background-color: #FFCC00;
margin: 15px;
width: 100px;
font-size: 0,9em;
border: 1px solid #000080;
}
Zum Vergrößern anklicken....

Du hast der #navi 15px margin gegeben. So wie das dasteht bedeutet es, die Navi hat oben, rechts, unten und links 15px Außenabstand.

Dein #content sieht so aus:


Code: 
#content
{
text-align: center;
border: 1px solid #8A2BE2;
width: 600px;
background: #FFCC00
}

Er hat keinerlei margin. Folglich ist die Navi 15px weiter unten angeordnet als der Content.
Nimm also mal bei der #navi die margin-Angabe für oben und unten weg.
Dann sieht es so aus:
Code: 
#navi
{
float:left;
background-color: #FFCC00;
margin-left: 15px;
margin-right: 15px;
width: 100px;
font-size: 0,9em;
border: 1px solid #000080;
}

Dann füge mal noch das in den CSS-Teil ein:
Code: 
ul, li {margin: 0;padding: 0; list-style: none;}
Weil unterschiedliche Browser auch unterschiedliche Werte verwenden, wird hier eine Vereinheitlichung vorgenommen. (Darauf sollte im Kurs noch ein Hinweis eingebaut werden)

Schließlich musst du den #content noch nach rechts verschieben, damit er von der #navi nicht überdeckt wird. Das ist deshalb erforderlich, weil die #navi gefloatet ist.

#content
{
margin-left: 145px;
text-align: center;
border: 1px solid #8A2BE2;
width: 600px;
background: #FFCC00
}
Zum Vergrößern anklicken....

Damit solltest du ein Stück voran kommen.
Vermutlich willst du jetzt die ganze Seite noch zentrieren.
Da wirst du hier fündig:
Horizontale Zentrierung mit CSS
 
Hallo,

wozu hast Du um Deinen Header noch einen Header gemacht? Also wozu hast Du Dein Block-Element <h1> (die Überschrift) nochmal in ein weitestgehend aussageloses, weiteres Block-Element gepackt? Das ist so, wie wenn Du ein Geschenk in zwei verschiedene Sorten Papier einwickelst. :-)

Das Element <div> dient zum Gruppieren mehrerer Tags zwecks gemeinsamer Formatierung in CSS. Da Du hier nur ein Tag drin hast, wird nichts gruppiert und das Element ist sinnfrei.

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben