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

Hilfe ! Problem mit div-Containern ?

S

SN-ServiceMitarbeiter

Neues Mitglied
Hi Freunde,
ich bin gerade dabei mir das Grundgerüst für meine Website zu bauen, natürlich mit HTML und CSS. Aktuell versuche ich eine horizontale Navigationsleiste (Grün im Bild) einzufügen und das unter mein Banner (Rot im Bild) und mein kommendes Logo (Gelb im Bild). Doch nun komme ich nicht weiter beim Abstand des grünen div-Containers zu den anderen. Ich schätze, dass sich der Befehl "margin-top: 10px;" mit einem anderen nicht verträgt, doch nach einigen Stunden ausprobieren und experimentieren, kam ich immer noch nicht weiter.

Hier das Bild:
Unbenannt.jpg

Mein CSS-Skript ist folgendes:
body { background-image: url("../Androidify/Wallpaper.png");
background-attachment: fixed;

text-align: center;
}


#Mainpage {
margin: 0 auto;
width: 980px;
}


#Header {
width: 980px;
}


#Banner {
background: red;
width: 650px;
height: 150px;
float: left;


border-radius: 15px;
-o-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}


#Bar {
float: right;
width: 320px;;
height: 150px;
background: yellow;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}


#Navigation {
Clear: both;
width: 980px;
height: 30px;
background: green;
margin-top: 10px;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}
Zum Vergrößern anklicken....

Damit auch euch das alles klarer wird, hier der HTML-Code:
<html> <head>
<title> SmartNews.de - Tec, Specs & Mehr </title>
<link href="../CSS-Stylesheets/style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="Mainpage">
<div id="Header">
<div id="Banner">
</div>
<div id="Bar">
</div>
</div>
<div id="Navigation">
</div>
</div>
</body>
</html>
Zum Vergrößern anklicken....

Ich hoffer ihr könnt mir helfen.
Danke für schnelle Antworten.
 
Zuletzt bearbeitet:
Hallo.

Du hast das clear falsch gesetzt.
Das muss nach der bar gesetzt werden. In der navigation nützt das überhaupt nichts.

Ausserdem würde ich dir empfehlen einen Doctype zu benutzen.

Gruss
Elroy
 
Sorry bin noch relativ neu mit HTML und CSS, Was ist ein Doctype?

Ich habe nun den Befehl Clear an das Ende der "Bar" gesetzt, doch nun ist es wieder nur Wirrwarr:
Unbenannt.jpg
Der Code sieht jetzt so aus:
#Bar { float: right;
width: 320px;;
height: 150px;
background: yellow;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
Clear: both;
}


#Navigation {
width: 980px;
height: 30px;
background: green;
margin-top: 10px;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}
Zum Vergrößern anklicken....
 
Der Doctype sagt dem Browser, in welchem HTML-"Dialekt" gesprochen wird. Aber wenn Du google nach Doctype fragst, kennt google mehr als 39 Mio. eventueller Antworten :)

Aber das sollte eigentlich keine Empfehlung sein, der Doctype ist in einem HTML-Dokument ein Muss, ansonsten kann nicht vorhergesehen werden, wie sich ein Browser verhält und jeder zeigt vielleicht etwas anderes an.
 
Gerade bei Fragen, die das Aussehen einer Seite betreffen, ist es sinnvoll diese online zu stellen. Wenn Du noch keinen eigenen Webspace hast, dann gibt es genügend Webhoster, die kostenlosen Webspace zur Verfügung stellen, um eine "Problemseite" online zu stellen.
 
BEim Thema Wwebhoster: Habt ihr vielleicht persönliche Erfahrungen und könnt mir einen Empehlen der das kostenlos macht, denn schließlich weiß man nie ob ein Anbieter wirklich seriös ist. Ihr habt doch sicherlich Empfehlungen an mich.
 
Da du das anscheinend nicht hinbekommst:

HTML: 
<!DOCTYPE HTML>

<html> <head>
<title> SmartNews.de - Tec, Specs & Mehr </title>
<link href="../CSS-Stylesheets/style.css" type="text/css" rel="stylesheet">
<style type="text/css">
<!--
body { background-image: url("../Androidify/Wallpaper.png");
background-attachment: fixed;

text-align: center;
}


#Mainpage {
margin: 0 auto;
width: 980px;
}


#Header {
width: 980px;
}


#Banner {
background: red;
width: 650px;
height: 150px;
float: left;


border-radius: 15px;
-o-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}


#Bar {
float: right;
width: 320px;;
height: 150px;
background: yellow;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}


#Navigation {
width: 980px;
height: 30px;
background: green;
margin-top: 10px;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}

#clearen {
  clear: both;
}

-->
</style>
</head>

<body>
<div id="Mainpage">
<div id="Header">
<div id="Banner">
</div>
<div id="Bar">
</div>
<div id="clearen"></div>
</div>
<div id="Navigation">
</div>
</div>
</body>
</html>


Falls das bei dir dann immer noch nicht richtig angezeigt wird mal den Browsercache leeren.


Nachtrag: Zum Thema Webhoster kann ich dir bplaced empfehlen.

Gruss
Elroy
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben