[Hilfe] Div zieht sich über ganze Bildschirmbreite

Gewinner09 · 30 Oktober 2009

Schönen guten Morgen.
Ich bin neu hier und auch völliger Neuling in Sachen Html und CSS.
Seit 3 Tagen bin ich dabei meine kleine Homepage zu schreiben.
Habe mein Wissen von selfhtml.
Schreibe alles peer Windows editor(soll für mich damit besser zu verstehen sein)
Ich bin Praktikant einer Computerfirma und hatte die Aufgabe
Eine Überschrift darunter ein Bild rechts davon ein Text und darunter ein Image mit dem Jahr zu setzen. Das sollte alles zentriert der HP liegen.
War soweit kein Problem. Ich hatte es erst mit einer tabelle gemacht. Klappte.
Dann sollte ich dies mit divs umsetzen. bis dahin kein Problem.
Danach hatte ich mir überlegt ein Menu mit divs anzulegen.
Klappte alles super.
Nur als ich mein Quelltext ein bischen anschaulicher machen wollte(via einrücken; Leereichen entfernen usw) muss ich irgendwas gelöscht oder verändert haben, sodass meine Überschrift,Bild Text und Bild des Jahres auf die Ausen gerutscht sind :(:(
saß Gestern ein paar Stunden dran aber konnte den Fehler nicht ausfindig machen...
Daher meine Frage:
Könntet ihr mir helfen meinen Fehler u finden????

meine Webseite:
http://ken.websei.com/index.html
ps: habe die border gleich 1 gesetzt, damit man sehen kann wo die divs sind, die ich verwendet habe.
Ausenrum ein div und innen jeweils ein div für jedes Element.

lg Gewinner09

prm · 30 Oktober 2009

Wenn du noch einen Link reinstellst, dann kann man sicherlich auch helfen.
Ansonsten eher nicht. ;-)

_Thor_ · 30 Oktober 2009

Gewinner09 schrieb:
Ich hatte es erst mit einer tabelle gemacht. Klappte.

Tabellen sind für tabellarische Daten, nicht für das Layout.

Dann sollte ich dies mit divs umsetzen. bis dahin kein Problem.

Das Element <div> ist für das gruppieren mehrerer Elemente, ebenfalls nicht für das Layout.

Danach hatte ich mir überlegt ein Menu mit divs anzulegen.

Ein Menü ist eine Liste von Verweisen, also <ul>. Ein <div> hat dort nichts zu suchen.

Könntet ihr mir helfen meinen Fehler u finden????

Ohne Link zur Seite nicht, aber ein paar Fehler hab ich dir ja schon genannt.

Ausenrum ein div und innen jeweils ein div für jedes Element.

Du scheinst den Sinn von HTML noch nicht verstanden zu haben. HTML ist eine Auszeichnungssprache. D.h. sie dient nur dazu, deinem Inhalt eine Bedeutung zu geben. Sie ist nicht für das Layout zuständig. Das macht CSS.

Alles in <div> zu schreiben macht keinen Sinn, weil <div> ein neutrales Element ist, welches dem Inhalt keine Bedeutung gibt.

Lies dir diesen Artikel (EinfÃ¼hrung | Webdesign mit XHTML und CSS) mal aufmerksam und bis zum Schluss durch, der wird dir helfen, den Sinn von HTML zu verstehen. Dort findest du auch Beispiele und Erklärungen.

Wenn ich jetzt mal deine Beschreibung der Seite kurz in HTML darstellen soll, müsste das in etwa so aussehen.

HTML:

<body>
  <div id="wrapper">
    <h1>Überschrift</h1>
    <img src="" alt="" title="Ich bin das Bild" />
    <p>Hier ist der Text</p>
    <img src="" alt="" title="Ich bin das Bild unter dem Text" />
  </div>
</body>

Das wars! Mehr HTML ist nicht nötig. Das Layout und die Formatierungen werden mit CSS gemacht.

Gewinner09 · 30 Oktober 2009

Mein Projekt

den fehler hatte ich gefunden, aber danke für deine Erläuterungen.
so wies jetzt ist sollte es aussehen, nur das mit dem zurrück button ist noch ein bischen falsch(sollte oben links sein

Bei versuchsanstallt, habe ich schonmal ein doctype eingefügt, aber dadurch ist einiges verrutscht...
bitte nimm mir nicht übel, warum ich alles mit divs mache/gemacht habe.
ich bin noch nicht soweit. in sachen css weiß ich nur, das ich per stylesheets die parameter für meine divs im body angeben kann.
lg

prm · 30 Oktober 2009

Einen doctype solltest du generell auf jeder Seite einbauen, um unterschiedliche Darstellungen in FF und IE zu vermeiden.

Jeder fängt mal an. Aber wenn du es dir gleich richtig angewöhnst, dann kannst du von vornherein Fehler vermeiden.
Frage dich also immer, ob du überhaupt einen Div benötigst, oder ob man das mit spezifischeren Elementen einfacher lösen könnte.
Hier mal als Beispiel:

Code:

<div align="center">

		<h2>Mein erstes Projekt</h2>

		</div>

Auf den Div kannst du verzichten, indem du h2 lediglich noch ein

Code:

text-align:center;

zuweist.

Gewinner09 · 30 Oktober 2009

okay.
hab jetztn bishen dran rumgebastelt.
Wie findet ihr mein Home button?

PP
habe nun eine seperate .css datei angelegt für meine styles.
habe den "index" sowie " Versuchsanstallt" da drin.
Sind momentan, die selben, da in versuchsanstallt rumgebastel, für gut empfunden und in index kopiert.
Jetzt will ich aber was an Versuchsanstallt verändern, würde sich ja dann der Index mit ändern.
muss ich dann im index zB die Namen ändern und in der css datei das selbe nur mit anderen Namen einfügen??

_Thor_ · 30 Oktober 2009

Gewinner09 schrieb:
Wie findet ihr mein Home button? PP

Garnicht so schlecht, aber das <div> ist dort noch überflüssig. Ebenso die absolute Positionierung.

habe nun eine seperate .css datei angelegt für meine styles.

Das ist sehr gut.

muss ich dann im index zB die Namen ändern und in der css datei das selbe nur mit anderen Namen einfügen??

Du kannst den Elementen verschiedene ID's geben und diese dann in der CSS-Datei ansprechen, oder du legst für deinen Testbereich eine eigene CSS-Datei an. Das bleibt dir überlassen.

Gewinner09 · 30 Oktober 2009

danke:)

Garnicht so schlecht, aber das <div> ist dort noch überflüssig. Ebenso die absolute Positionierung.

aber wie soll ich denn ohne das div die paratmeter ala class="Home" angeben???

Du kannst den Elementen verschiedene ID's geben und diese dann in der CSS-Datei ansprechen, oder du legst für deinen Testbereich eine eigene CSS-Datei an.

laut Chef ist eine .css datei besser.
wie meinst du das mit den ID's?? ich habe es so gelöst, dass ich in der Css datei durch Kommentare die verschiedenen Styles optisch getrennt habe( hier beginnt der Style von Index.... hier endet der Style von index) und dann das a1, was im moment bei Versuchsanstallt ja gleich ist, b1 zu nennen oder so.
Das mit den ID's zuweißen ist da ja deutlich einfacher, könntest du mir das mal erklären?
lg

_Thor_ · 30 Oktober 2009

Gewinner09 schrieb:
aber wie soll ich denn ohne das div die paratmeter ala class="Home" angeben???

Die Attribute lassen sich nicht nur divs zuweisen.

HTML:

<ul class="home">
  [...]
</ul>

Besser wäre es allerdings, wenn du Namen verwendest, die das Element beschreiben. class="navigation" wäre hier besser.

Was du vermeiden solltest wäre etwas wie class="red", wenn du dort den Text in roter Schrift haben möchtest, denn vielleicht entscheidest du dich später mal dafür, die Schrift jetzt lieber grün zu haben, dann änderst du zwar einfach die Farbe in der CSS-Datei, aber im Code steht noch überall class="red", obwohl die Schrift grün ist. Nimm da lieber Bezeichnungen, die allgemein gültig sind, z.B. "color1, color2, color3".

laut Chef ist eine .css datei besser.

Bei kleinen Seiten ist das richtig, aber wenn es größer und komplexer wird, bietet es sich an, mehrere kleine Dateien zu erstellen, das bleibt übersichtlicher und einzelne Dateien lassen sich leicht auswechseln.

wie meinst du das mit den ID's?? ich habe es so gelöst, dass ich in der Css datei durch Kommentare die verschiedenen Styles optisch getrennt habe( hier beginnt der Style von Index.... hier endet der Style von index) und dann das a1, was im moment bei Versuchsanstallt ja gleich ist, b1 zu nennen oder so.
Das mit den ID's zuweißen ist da ja deutlich einfacher, könntest du mir das mal erklären?

Das hast du ja schon richtig gemacht. In der CSS-Datei kannst du jetzt verschiedene Styles für a1 und b1 festlegen.

Gewinner09 · 30 Oktober 2009

Das hast du ja schon richtig gemacht. In der CSS-Datei kannst du jetzt verschiedene Styles für a1 und b1 festlegen.

mhh ich dachte du meinst, das ich dem ganzen style ne id zuweiße und die dem jweiligen html quelltext zuweiße.
Habe nun folgendes Prob. wie nenne ich dann überschriften zB um??
hatte für h1 im style stehen;
h1 {font-size...}
h2{....}
wie benenne ich die um???Denn sollte ich beim Index h1 umbennen, würde sich auf der Testseite ja auch die Überschrift ändern.
wollte es so lösen
.h11 {.....}
<h1 class="h11">blaaa</h1>
scheint aber nicht zu klappen...

und der body style?
muss ich doch auch umbenennen sonst würde die Testseite ja vom body her gleich mim index sein, sollte ich was bei der Testseite verändern. weißt du?

gibt es diese sache mit der ID?
das ich sag
<style class="style 1"> </style>
aber in der css lass ich das<style></style> ja weg....

_Thor_ · 30 Oktober 2009

Gewinner09 schrieb:
mhh ich dachte du meinst, das ich dem ganzen style ne id zuweiße und die dem jweiligen html quelltext zuweiße.

Nein, das geht nicht. Da würde es sich dann anbieten, 2 verschiedene CSS-Dateien zu erstellen und dann die jeweilige auf der Seite einzubinden.

Denn sollte ich beim Index h1 umbennen, würde sich auf der Testseite ja auch die Überschrift ändern.

Zum testen solltest du immer eine eigene Datei anlegen.

Gewinner09 · 30 Oktober 2009

also ist es besser, für jede Seite, eine css Datei anzulegen??
weil irgendwie bekomme ich das nicht hin, jede Seite in einer cssDatei unabhängig von ihren Styles zu machen:(

[Hilfe] Div zieht sich über ganze Bildschirmbreite

Gewinner09

Neues Mitglied

prm

Aktives Mitglied

_Thor_

Aktives Mitglied

Gewinner09

Neues Mitglied

prm

Aktives Mitglied

Gewinner09

Neues Mitglied

_Thor_

Aktives Mitglied

Gewinner09

Neues Mitglied

_Thor_

Aktives Mitglied

Gewinner09

Neues Mitglied

_Thor_

Aktives Mitglied

Gewinner09

Neues Mitglied

Neueste Beiträge