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

probleme bei der umsetzung

Status
Für weitere Antworten geschlossen.
L

lemuria

Neues Mitglied
hallo
ich muss für die schule eine internet seite in html/css erstellen und habe das zuvor noch nie gemacht.
ich habe mal eine skizze angefertigt wie ich das haben wollte. allerdings scheiterts bei der umsetzung....

show.htm


ich möchte dass der grüne kasten unten die seite abschließt. ich habs ausprobiert mit margin-bottom:0px und padding aber nichts funktioniert.
ganz zu schweigen von dem inhalt.. wie ich den richtig positioniere weiß ich auch noch nicht.
wenn mir jemand helfen würde, wär ich sehr dankbar.
hier ist mein code, wo allerdings nur scheiße bei rauskommt..

body {
font-family:verdana, arial, helvetica, sans-serif;
background-color:rgb(220,220,220);
margin:auto; }

#alles {
width:950px;
margin-top:0px;
border-right: solid 5pt rgb(0,144,54);
border-left: solid 5pt rgb(0,144,54);
background-color:white;
}

#banner {
width:950;
height:107;
}

#navi {
width:237px;
background-color:rgb(244,244,244);
border-right: solid 5pt rgb(244,244,244);
}

#unten {
width:950px;
height:82px;
background-color:rgb(0,144,54);
}


<body>
<div id=“alles“>

<!--Banner-->
<div id=“banner“>
<img src=“bilder/banner.jpg“>
</div>

<!--Navigation-->
<div id=“navi“></div>

<div id=“unten“></div>

</div>
</body>
 
lemuria schrieb:
ich muss für die schule eine internet seite in html/css erstellen und habe das zuvor noch nie gemacht.
Zum Vergrößern anklicken....
Für die Schule oder als Hausaufgabe?
Wenn Du das noch nie gemacht hast, wirst Du sicher auch einige Zeit dafür zur Verfügung haben. HTML & Co sind zwar nicht so besonders schwer, aber man muss schon einiges lernen und etwas Zeit mitbringen, will man ein vernünftiges Ergebnis.

ich habe mal eine skizze angefertigt wie ich das haben wollte. allerdings scheiterts bei der umsetzung.
Zum Vergrößern anklicken....
Bei mir scheiterts leider am Aufruf des Bildes, da hängt sich mein Browser auf.

hier ist mein code, wo allerdings nur scheiße bei rauskommt..
Zum Vergrößern anklicken....
Naja, es ist halt Anfängercode. Da darf man nicht zu viel erwarten. Ich will sagen, es ist noch kein Meister vom Himmel gefallen.

Du musst z.B. erst noch lernen, was HTML überhaupt ist. HTML ist eine Seitenbeschreibungssprache. Mit ihr wird der Inhalt ausgezeichnet, d.h. er bekommt eine Bedeutung. So hat üblicherweise jede Seite eine Überschrift (<h1> bis <h6>), Fließtext (<p>), ein Menü (<ul>), vielleicht mal eine Adresse (<address>) oder ein Zitat (<cite>).
Dein Code ist bisher völlig aussagelos, außer einem Bild steht noch nichts drin. Richtig gut klappt HTML mit CSS erst, wenn man zuerst den Inhalt niederschreibt, dann diesen mit HTML semantisch sinnvoll auszeichnet und erst dann das Stylesheet dazu macht. Macht man es anders, kommt hinterher meist Spaghetticode raus und die Fehler häufen sich. HTML-Code sollte valide (fehlerfrei) sein, sonst sind Darstellungsunterschiede vorprogrammiert. Um denen vorzubeugen, muss das Dokument auch einen DOCTYPE haben, der die verwendete (X)HTML-Version definiert und gleichzeitig alle Browser in den Standards Mode (nicht in den Quirks Mode!) schaltet.

Viele Infos? Ja, aber das gehört dazu. Fragen? Jederzeit!

Gruß,
-Efchen
 
danke für die antwort. es ist mehr oder weniger eine hausaufgabe. wir dürfen auch in der schule dran arbeiten, aber die ist nur einmal die woche und das projekt müssen wir in 2,5 wochen abgeben.
also was html ist weiß ich ;) und die standard sachen wie tabellen und frames habe ich auch schon mal gemacht, aber mit css habe ich noch nie gearbeitet.
worum es mir jetzt ging war eigentlich erstmal nur der aufbau, so dass das gerüst steht.


skizzean6.jpg
 
lemuria schrieb:
es ist mehr oder weniger eine hausaufgabe.
Zum Vergrößern anklicken....
Dann kannst Du hier natürlich keine Lösung erwarten :-)

also was html ist weiß ich ;) und die standard sachen wie tabellen und frames habe ich auch schon mal gemacht, aber mit css habe ich noch nie gearbeitet.
Zum Vergrößern anklicken....
Dann weißt Du auch nicht, was HTML ist. Dein Code hat gezeigt, dass Du Dir dessen nicht wirklich bewusst bist, und wenn Du Tabellen als "Standard Sache" bezeichnest, ist das ein weiteres Indiz.
Schau Dir nochmal an, was ich über HTML geschrieben habe. Tabellen sind z.B. nur dazu da, um tabellarische Daten auszuzeichnen und sind auch nicht wichtiger, als ein <address> oder ein <p>. <p> und <h1> hingegen werden auf so ziemlich jeder Seite vorkommen, <table> hingegen eher selten.
Tabellen zu Layoutzwecken zu missbrauchen ist leider immer noch ein weit verbreiteter Fehler. Und Frames gehören in XHTML 1.1 nichtmal mehr zum Umfang von HTML.
Und ohne CSS gibts kein Layout und kein Design.

worum es mir jetzt ging war eigentlich erstmal nur der aufbau, so dass das gerüst steht.
Zum Vergrößern anklicken....
Kein Layout ohne Inhalt und semantisch sinnvolle Struktur.

Und was genau ist Dein Problem mit dem Layout? Ich sehe, dass Du oft die Einheiten vergessen hast. Außerdem sehe ich kein float, sonst wirst Du den Inhalt nicht neben die Navigation kriegen.

Grüße,
-Efchen
 
ahhh ich wollt doch auch gar keine lösung..!!! ich kriegs nicht gebacken die verschiedenen elemente richtig zu platzieren.. wie zb krieg ich den grünen balken unten ans ende der seite. ich habs ausprobiert, es hat bei mir nicht geklappt. dass der ganze krams mittig steht ging auch nicht. marign:center? ging nicht!
 
lemuria schrieb:
Code: 
body {
    font-family:verdana, arial, helvetica, sans-serif;
    background-color:rgb(220,220,220);
    margin:auto;    }

#alles     {
         width:950px;
         margin-top:0px;
    border-right: solid 5pt rgb(0,144,54);
    border-left: solid 5pt rgb(0,144,54);
    background-color:white;
    }
Zum Vergrößern anklicken....
Mit margin: auto; bewirkst du, dass die Außenabstände rechts und links gleich aufgeteilt werden. Body hat aber kein width . Er erstreckt sich über das ganze Browserfenster und es sind keine Außenabstände zu sehen.
Schreibe margin: auto; in #alles.

Die Rahmenbreite in pt zu schreiben ist keine gute Idee. Die anderen Abmessungen hast du in px angegeben. Die Rahmen beeinflussen die Elementenbreite / Höhe.
#alles ist 950px(width) + 10pt(border) breit.
Damit lässt sich schlecht weiterarbeiten.
Gebe border-width besser in px an.

#banner {
width:950;
height:107;
}
Zum Vergrößern anklicken....
Hier hast du die Einheiten vergessen.
width brauchst du nicht angeben weil das <div> sich auch so bis an die border von #alles horizontal ausdehnt.

Irgendwie fehlt noch eine Box für den Inhalt.

Das mit dem footer würde ich erst angehen, wenn die anderen Sachen sitzen.
 
Zuletzt bearbeitet:
Kann dir wirklich nur die drei links erstmal empfählen.
Dort sind die Grundlagen des CSS zu finden ;)
An sich fählen deinem Code nur paar sachen, wie zB. "float" oder ganz enscheidend, der div welcher deinen "Inhalt" darstellt.
Du brauchst doch 5 <div>s hast aber nur 4 ;)

so schritt für schritt schafst du es schon *g*
- - -
Alles was mit "center" zu tun hat ist veraltet - bald wird es diesen Befehl kaum geben.
Benutze stattdessen:...
Code: 
margin-left:auto; 
  margin-right:auto;



Edit:
*schaut nach unten zu neuro* ja, stimmt das war das mit dem Tag <center> sei veraltet *g*
Nach der nachricht hab alles was mit center zu tun hat versucht umzugehen *lacht*
Kann ich es also hier und dort weiterhin benutzen? *etwas verwirrt*
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben