ComputerBase Menü
Aktuelles

Html/Css Problem mit div Blöcken

A

Abcd12345

Lt. Junior Grade
Registriert
März 2006
Beiträge
483
Hi,

Ich möchte mir eine Website mit div Blöcken erstellen. Um das ganze zu testen wollte ich erstmal die div Blöcke einfärben. Das ganze sollte so aussehen:

header 1000 Pixel Breit, 200 Pixel hoch, Farbe: blau
navi 100 Pixel Breit, Farbe: gelb
content 800 Pixel Breit, Farbe: weiß
commercial 100 Pixel Breit, Farbe: rot

Zur Info: Ich versuche eine Standartmässige Website nachzubauen um für eine Klausur zu üben.

Das Problem ist das ich anstatt der 4 Farbigen Blöcke einfach nur die 4 Wörter untereinander angezeigt werden, wenn ich die Website öffne..


HTML Dokument:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Meine Seite</title>
<link rel="stylesheet" type="text/css" href="design.css"/>
</head>
<body>
<div id="wrap">
<div id="header">
header
</div><!--header-->
<div id="navi">
navi
</div><!--navi-->
<div id="content">
content
</div><!--content-->
<div id="navi2">
navi2
</div><!--navi2-->
</div><!--wrap-->
</body>
</html>

CSS Dokument mit dem Namen "design.css" :

HTML: 
/* _________________________ Global _______________________ */

* {
   margin: 0;
   padding: 0;
{

/* _______________ ID Selektoren - Struktur _________________ */

#wrap {
   float: left;
   width: 1000;
   text-align: left;
{

#header{
   height: 200px;
   background-color: blue;
{

#navi {
   width: 100px;
   background-color: yellow;
{

#content {
   width: 800px;
   background-color: white;
{

#navi 2{
   width: 100px;
   background-color: red;
{
 
Also wenns n Block werden soll, musst du bei den einzelnen divs auch width UND height definieren.
Ich persönlich definieren in der css-datei mit ".header {...}" und rufe es dann in der html mit bspw. "td class = "header"" ab. Aber wenn du es mit divs machen musst; da kenn ich mich leider nicht so gut aus.
 
am einfachsten machst du es dir wenn du die div-blöcke absolut positionierst (natürlich mit prozentualen angaben, damit es auch für jede bildschirmauflösung gerecht wird). wenn dir absolute sachen nicht gefallen, such unter google mal nach "html css layout", da findest du genug anwendungsbeispiele wie man css layouts umsetzt.
 
Wir haben "leider" immer gewisse Vorgaben, an die wir uns halten müssen und dazu gehört auch das Benutzen von DIV Containern.

Ich habe die "breite" extra nicht bei den einzelnen Selektoren defieniert, weil ich glaubte, dass diese vom wrap übernomen wird.

Beispielsweiße beim head dachte ich, dass er die höhe vom wrap vererbt bekommt. Liege ich da falsch?
 
Es geht immer noch nicht. Bin die ganze Zeit am rumprobieren aber es funktoniert nicht :-(

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Meine Seite</title>
<link rel="stylesheet" type="text/css" href="design.css"/>
</head>
<body>
<div id="wrap">
<div id="header">
header
</div><!--header-->
<div id="navi">
navi
</div><!--navi-->
<div id="content">
content
</div><!--content-->
<div id="navi2">
navi2
</div><!--navi2-->
</div><!--wrap-->
</body>
</html>

HTML: 
* {
   margin: 0;
   padding: 0;
{

#wrap {
   float: left;
   width: 1000;
   text-align: left;
{

#header{
   width: 1000;
   height: 200px;
   background-color: blue;
{

#navi {
   width: 100px;
   height: 1000px;
   background-color: yellow;
{

#content {
   width: 800px;
   height: 1000px;
   background-color: white;
{

#navi2 {
   width: 100px;
   height: 1000px;
   background-color: red;
{
 
denk bitte erstmal dran, dass css tags mit { geöffnet werden und mit } geschlossen. du verwendest immer nur {.

danach sieht es schon anders aus, allerdings ist der content noch verrutscht. beachte dabei bitte, dass div-blöcke block elemente sind. d.h. ein "umbruch" nach diesem element ist vorgeschrieben. um das zu umgehen, musst du die eigenschaft display auf inline o.ä. legen (anstatt normalerweise block).
 
So, neues schwerwiegendes Problem: Mir werden jetzt zwar die 4 BLöcke angezeigt jedoch nicht so, wie ich sie haben möchte sondern alle nebeneinander und der header ist ganz schmal

Hier ein Bild davon: http://www.bilder-hochladen.net/files/2821-i-jpg.html

Und hier nochmal mein jetziger Code:

HTML: 
* {
   margin: 0;
   padding: 0;
}

#wrap {
   width: 1000;
   text-align: left;

}

#header{
   float: left;
   width: 1000;
   height: 200px;
   background-color: black;
}

#navi {
   float: left;
   width: 100px;
   height: 1000px;
   background-color: yellow;
}

#content {
   float: left;
   width: 800px;
   height: 1000px;
   background-color: blue;
}

#navi2 {
   float: left;
   width: 100px;
   height: 1000px;
   background-color: red;
}



HTML: 
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Meine Seite</title>
<link rel="stylesheet" type="text/css" href="design.css"/>
</head>
<body>
<div id="wrap">
<div id="header">
header
</div><!--header-->
<div id="navi">
navi
</div><!--navi-->
<div id="content">
content
</div><!--content-->
<div id="navi2">
navi2
</div><!--navi2-->
</div><!--wrap-->
</body>
</html>



Es ist bestimt wieder ein sehr dummer Fehler
 
wenn du noch ein px hinter jede länge schreibst, funktioniert es ;)

Code: 
#wrap {
   width: 1000[B]px[/B];
   text-align: left;

}

#header{
   float: left;
   width: 1000[B]px[/B];
   height: 200px;
   background-color: green;
}
 
Elemente die Text beinhalten sollten niemals eine feste Höhe zu geteilt bekommen!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Master_of_what
[CSS][HTML][JAVA] Zwei Seiten ineinander faden / onclick / mouseover
Antworten
6
Aufrufe
1.928
Master_of_what
Master_of_what
R
HTML bzw CSS zu viel Platz unter dem Inhalt
Antworten
5
Aufrufe
1.417
RATED
R
Cool Master
CSS IE 7-9 Bug z-index
Antworten
4
Aufrufe
2.413
Cool Master
Cool Master
Frostbeule2k
Doctype-Problem im Firefox bzw. CSS Problem im IE
Antworten
5
Aufrufe
2.210
Rossibaer
R
Antoniker
[HTML & CSS] Problem mit Tabellen
Antworten
8
Aufrufe
1.058
dummix
D
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz