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

Unerklärlichen Balken entfernen, bitte um Hilfe

Q

Quegra

Neues Mitglied
Hallo,
wahrscheinlich ist es nur für mich unerklärlich, aber ich fange halt gerade erst an HTML und PHP zu lernen.
Hier ist ein Screenshot, damit ihr seht, was mein Problem ist:
http://puu.sh/3mkcC.png
Zwischen dem pinken Hintergrund und dem Border soll keine freie Fläche sein.
Hier der Code dafür:
index.php:
HTML: 
		<div style="width:1280px;margin:0px auto;text-align:left;border:5px solid;">			<div id="head"><?php include ('inc/head.inc.php'); ?></div>			<div id="nav"></div>			<div id="content"></div>			<div id="footer"><?php include ('inc/footer.inc.php'); ?></div>		</div>
styles.css:
HTML: 
body       		{				min-width:1280px;				text-align:left;                                background-image:url(img/pattern.gif);                        }
#head		{				height:100px;				background-color:#FFDDDD;			}

Ist wahrscheinlich etwas einfaches, aber ich finde es einfach nicht :(
Vielen Dank für die Mühe mir kurz zu helfen!
 
Könntest Du bitte einen Link zur betreffenden Seite zeigen ODER den kompletten erzeugten HTML-Code inkl. CSS? Dann könnte man auch beurteilen was hier falsch läuft. Mit dem PHP-Code kann man das nicht sagen.
 
Hallo,

wie @threadi, wie immer, richtig sagt zeige link, da es ein css problem ist.

Als kleiner tipp vor ab, binde als erstes eine reset.css ein, die findest im netzt, dann deine da nach.
Die entfernt alle abstände und sorgt gerade bei anfänger dazu das nur das gemacht wird was sagst.

Als ganz großer tip Firefox Firebug ist ein super tool wo mit deine Seite prüfen kannst wo was wieso so ist :O)
Einfach mal F12 drücken wenn deine Seite mit Firefox offen hast (geht auch local).

Cheffchen
 
Dein HTML-Code ist nicht vollständig: der Doctype fehlt. Außerdem hast Du den head und body doppelt drinne, wie Du schon selbst erkannt hast. Bevor Du dich also weiter über die Darstellung wunderst, korrigiere den erzeugten HTML-Code, so dass ein valider HTML-Code raus kommt.
 
Worauf beziehst Du dich damit?

Quegra schrieb:
Gibt es auch eine Alternative für Chrome User?
Zum Vergrößern anklicken....

Eine reset.css gilt für alle Browser. Valider HTML-Code ist auch für alle Browser Voraussetzung. Hier gibt es keine Alternativen.

Dein HTML-Code sieht jetzt besser aus. Allerdings frage ich mich wieso Du HTML5 gewählt hast aber keine HTML5-Elemente, z.B. für den <header>, verwendest. Stattdessen hast Du eine div-Wüste. Das spielt für die Darstellung keine Rolle, ist nur unsauberer Stil.

Unabhängig davon kann ich bei deinem HTML-Code nicht erkennen wo da ein Balken sein sollte. Meinst Du den Rahmen per border der im umgebenden div steht?
 
Alternative für Chrome User war auf das empfohlene Tool von Cheffchen bezogen.

Woran erkenne ich denn, dass ich HTML 5 verwende? Kann ich irgendwo nachlesen, welche Elemente ch davon benutzen könnte?

Und ich dachte man muss so eine div Wüste haben, damit man das Layout nicht mit Tabellen gestalten muss, wie soll ich das besser machen?

Der Balken ist zwischen Border und dem Kopfteil, siehe ersten Screenshot.

Danke für eure Hilfe! :-)
 
Den Firebug gibt es auch für Chrome. Für andere Browser gibt es entsprechende Alternativen, die sogar größtenteils schon vom Browser mitgeliefert werden.

Welchen HTML-Standard Du verwendest, legt man mit dem Doctype fest. Du hast dir ja offenbar den HTML5-Doctype herausgesucht, daher nahm ich an Du wüsstest worum es geht. Hier nochmal eine Liste und eine Erklärung zur Bedeutung der Doctypes allgemein:
SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei
Und zu HTML5 kann man auch direkt bei der Quelle für HTML-Standards nachlesen:
8 The HTML syntax

Weder div- noch Tabellen sollte man als Grundgerüst einer Webseite verwenden. div-Elemente dienen einzig zum Gruppieren von Elementen, haben jedoch keinerlei semantische Bedeutung für die darin stehenden Inhalte. Bei HTML5 wurden (endlich) Elemente eingeführt die es erlauben auch Kopf-, Inhalts- und Fußbereiche entsprechend semantisch auszuzeichen. Wenn Du HTML5 verwendest, dann solltest Du also auch gleich diese (neuen) Elemente mit berücksichtigen. Das hat wie gesagt auf das Aussehen der Seite keine Auswirkung, kann aber beim Einlesen der Seite durch Suchmaschinen vorteilhaft sein.

Wenn ich mir deinen HTML-Code anschaue kann ich ehrlich gesagt keinen Grund für diesen Balken erkennen. Du hast auch im CSS-Code noch Fehler drin ("margin: left" gibt es nicht), die sind dafür aber imho nicht der Grund. Daher wäre es gut (wie schon gesagt) wenn man sich das (auch mit der Grafik im Hintergrund) irgendwo online anschauen könnte.
 
Das mit dem margin:left habe ich schon entfernt, da habe ich nur mit den Eigenschaften etwas rumgespielt und vergessen diese zu entfernen.

Wenn ich das richtig sehe, sollte man deiner Meinung nach direkt mit HTML5 anfangen, wenn dem so ist lese ich mir dazu mal den ganzen Kram durch, der sich finden lässt.

Ich mache das alles offline mit XAMPP, kann ich das irgendwie temporär online zur verfügung stellen? Oder soll ich alles einmal in ein Archiv packen und euch hier zum Download anbieten?

Und ich habe noch eine Frage:
wenn ich bei einem div Element float:left benutze, dann funktioniert die automatische Bestimmung der Höhe nicht mehr. Folglich rutscht die Navigation in den Fußbereich :/
 
ok hab jetzt bloss uberflogen so beim grillen. reset.css ist ok.
die setzt abstände auf null. bei dir ist bestimmt ein addon was stört.
füge die ein und gefolgt von deiner.

chrom kannst auch f12 drücken und rumprobieren.

cheffchen
 
Cheffchen schrieb:
bei dir ist bestimmt ein addon was stört.
füge die ein und gefolgt von deiner.
Zum Vergrößern anklicken....

:?:
Was meinst du mit dem zweiten Teil?
Ich habe bereits probiert die Seite im Inkognito Modus aufzurufen (also ohne AddOns) und der Problem bleibt bestehen. Beim Aufruf mit meinem Android Handy sieht es auch falsch aus, ich denke mal AddOns kann man dann auschließen, oder?


HTML5 lernen: neue strukturierende Elemente
Da schaue ich mir gerade die Videos an und laut dem Kerl war es damals vollkommen normal so eine div Wüste zu haben und da alte Browser nicht mit den neuen Tags klarkommen ist das vielleicht gar nicht soo schlecht, oder?

Ich weiß jetzt nicht was ich weiter nehmen soll :/

Und viel Spaß beim Grillen! Bei dem Wetter hier ist das leider kaum möglich :(
 
Kostenfreien Webspace findest Du z.B. in dieser Liste:
Kostenloser Webspace, Kostenlose Homepage - Gratis Speicherplatz für Ihre Homepage im Internet
wobei man darauf achten sollte einen Webspace zu erwischen der nicht noch selbst HTML-Code einbindet wodurch der eigene nicht valide wird ;) Zum Download wird sich das hier wohl niemand anschauen.

Das div's weiterhin so beliebt sind liegt einfach daran, dass man sie als Blockelemente zum Gruppieren mitunter braucht. Man muss nur eben auch die Grenzen kennen. Sobald man etwas anders lösen kann sollte man auf dieses Element verzichten, wie z.B. beim header oder footer. Nicht jeder hat bisher den Zweck von semantischer Bedeutung erkannt, sie steht aber sogar in den oben verlinkten HTML5-Vorgaben ;)
 
Ich habe inzwischen noch einmal alles neu gemacht, also nicht mehr so viele divs und mehr neue HTML 5 Tags und habe dabei auch herausgefunden, dass diese Fläche dort ist, weil der Zeilenabstand nach oben von den h1 Überschriften so groß ist.
h1{
display: inline;
}
löst das Problem.
Vielen Dank für eure Hilfe! :-)

Es wird wahrscheinlich nicht so lange dauern, bis das nächste Problem ansteht :/
 
Dadurch machst Du das Element zu einem Inline-Element, welches nicht mehr die volle Breite einnimmt - was aber bei dieser Art Darstellung ratsam wäre. Ich bin mir nicht sicher was für einen Zeilenabstand Du meinst? Meinst Du das was man per line-height regeln kann, oder padding? Wirkt das reset.css wirklich?
 
Okay, ich dachte eigentlich den Zeilenabstand, den man per line-height regeln, kann aber es hat doch nicht funktioniert. Ich lasse es jetzt einfach als Inline-Element, so funktioniert es ja.
Wie kann ich feststellen, ob das reset.css wirkt?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben