Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Div Layout; Fragen zum Coden“

Juna

Noch nicht viel geschrieben

Hallo, ich versuche grad mir ein Div Layout (HTML) zu machen.

Hab soweit alles fertig, jetzt muss der Inhalt aber noch eingefügt werden (die Seiten mit den Inhalten sollen sich nämlich in einem iframe öffnen.)

Welche Codes brauch ich da? (einmal für die Startseite, also home.html und dann für die Links in der Navi).


btw. ich weiß, dass es da auch unter Google und selfhtml was zu finden gibt, aber ich finde nicht das Richtige :eek:
 

blackout

Schaf im Wolfspelz

igitt iframe :x
wenn du den benutzt kannste auch gleich tabellen nehmen.

wenn du schon ein komplettes css-layout machen willst dann nimm als "iframe" auch ne css-box und bind die jeweiligen dateien per php ein.

hier ein beispiel für kompletten div-aufbau...
Code:
 <div style="width: 1000px; height: 192px; background-image: url(images/header.png);"></div>
<div style="width: 1000px; height: 510px; overflow: hidden;">
  <div style="height: 510px; width: 39px; float: left; background-image: url(images/margin_left.png);"></div>
  <div style="width: 166px; height: 510px; float: left;">
    <div style="width: 166px; height: 54px; background-image: url(images/menu_top.png);"></div>
    <div id="menu1">[url="index.php?content=link1"][/url]</div>
    <div id="menu2">[url="index.php?content=link2"][/url]</div>
    <div id="menu3">[url="index.php?content=link4"][/url]</div>
    <div id="menu4">[url="index.php?content=link4"][/url]</div>
    <div id="menu5">[url="index.php?content=link5"][/url]</div>
    <div id="menu6">[url="index.php?content=link6"][/url]</div>
    <div id="menu7">[url="index.php?content=link7"][/url]</div>
    <div id="menu8">[url="index.php?content=link8"][/url]</div>
    <div id="menu9">[url="index.php?content=link9"][/url]</div>
    
    <div style="height: 168px; width: 166px; background-image: url(images/menu_bottom.png);"></div>
  </div>
  <div style="width: 774px; height: 510px; float: left; background-image: url(images/content.png);">HIER KOMMT DEIN CONTENT REIN, EGAL OB IFRAME ODER CSS-INLINESTYLE</div>
  <div style="width: 21px; height: 510px; float: left; background-image: url(images/margin_right.png);"></div>
</div>
<div style="height: 128px; width: 1000px; background-image: url(images/footer.png);"></div>
so, es ist angerichtet :)
 

Juna

Noch nicht viel geschrieben

Hm, also ich hatte es bisher so:

Code:
<div style="position:absolute; left:160px; top:450px; z-index:2">
<iframe src="home.html" name="content" frameborder="0" width="660" height="900"> 

</iframe>
</div>

Warum funktioniert das eigentlich so nicht?
 

Tim

Hutträger

@blackout

wenn schon denn schon:

Du benutzt zwar CSS richtig, aber dein Menü ist verkorkst, ein Menü ist nicht anderes als ne Liste, also sollte selbige auch dafür genutzt werden. Ganz abgesehen davon, dass man doch nicht für jeden einzelnen Link ne eigene ID definieren muss ;)
 

Juna

Noch nicht viel geschrieben

Naja, ich möchte, dass meine Page später auch mal Inhalt hat *g*

Also die Seiten hab ich ja schon alle online gestellt, aber das sieht so aus:
 

dummwiebrot

Nicht mehr ganz neu hier

Hi,
The requested URL /home.html was not found on this server

Das gleiche bei profil.html, tagesbericht1.html, gedankenfetzen.htm und credits.htm

Kontrolliere nochmal, ob du alle Dateien hochgeladen hast. Wenn ja, dann überprüfe mal den Pfad zu den Dateien.
Da du unterschiedliche Dateiendungen verwendest, kontrolliere das auch noch mal.
Sinnvoll wäre es auch, dich für eine Dateiendung zu entscheiden, also entweder .html oder .htm

Greetz dwb
 

Juna

Noch nicht viel geschrieben

Naja, wie gesagt hochgeladen sind sie, Dateiendungen sind auch kontrolliert und angegeben, wie ich oben schon gepostet hab.
 

blackout

Schaf im Wolfspelz

@waldii
a) so wie mein code dasteht stimmt deine kritik...
b) ich hab ordentlich was gekürzt, sonst hätte die verständlichkeit druter gelitten. das mit den individualeigenschaften für jeden menüpunkt hängt mit der einbindung der graphischen elemente und dem mouseover zusammen. dass ich meine div-suppe nicht ins stylesheet schreib hat seinen ursprung in der übersichtlichkeit... ich komm damit besser klar.
 

dummwiebrot

Nicht mehr ganz neu hier

Wenn die Dateien hochgeladen sind, dann müssten sie eigentlich auch gefunden werden.

Der Quelltext deiner Index ist fehlerhaft:

Code:
<title>Junas Blog</title>
<meta name="author" content="Juna">
<meta name="generator" content="HTML EDITOR">
<meta http-equiv="imagetoolbar" content="no">

<body leftmargin=0 topmargin=0>
<div style="position: absolute; top: 0; left: 0; width: 0; height: 0">
<body background="bg.gif">
[img]Blog Header.jpg[/img]
</div>

</head>
<body link="#f2dfa7" vlink="#f2dfa7" alink="#f2dfa7">

<style type="text/css">

body{scrollbar-face-color:#000000;
           scrollbar-arrow-color:#AEACD3;
           scrollbar-track-color:#000000;
           scrollbar-shadow-color:#AEACD3;
           scrollbar-highlight-color:#AEACD3;
           scrollbar-3dlight-color:#000000;
           scrollbar-darkshadow-color:#AEACD3;
</style>


<div style="position:absolute; left:0px; top:0px; z-index:1">
[img]Blog Layout.jpg[/img]
</div>

Die 2 öffnenden Body-tags haben im head nix zu suchen, und die "style type=text/css" gehört in den head und nicht in den body. Das sind nur 3 von insgesammt 61 Fehlern allein in deiner index.html.

Greetz dwb
 

blackout

Schaf im Wolfspelz

da ich zu faul bin zu zählen und hab das ganze mal durch den validator gejagt... naja, nicht sehr guter stil ;)

entweder du hast massive php-felher oder vergessen aufzuräumen nach ner (wirklich heftigen) copy+paste-orgie ;)
 

Juna

Noch nicht viel geschrieben

Hm, gut, berichtigt hab ich solche Fehler noch nicht, ich wollte es eigentlich erst Mal probieren und dachte der Hauptfehler läge woanders. Aber anscheinend muss ich die "kleinen Fehler"( :cry: ) dann doch erst beheben, bevor das klappen kann...

*an die Arbeit mach*

Achja, Danke :)
 

blackout

Schaf im Wolfspelz

hey also wenn 2 body-tags im head-tag ein kleiner fehler ist, was ist dann ein großer?
Code:
 <!doctype html>
<head=title"titel">
  <body>
    <div<div<div<div<div<div<div TEXT </table src="body.txt">
</html>
;)
 

dummwiebrot

Nicht mehr ganz neu hier

blackout schrieb:
da ich zu faul bin zu zählen und hab das ganze mal durch den validator gejagt... naja, nicht sehr guter stil ;)

Gezählt hab ich auch nicht, hab TIDY (Firefox-Erweiterung).

@Juna
viel Spass beim berichtigen. :D Wenn du Hilfe brauchst meld dich.

Greetz dwb
 

dummwiebrot

Nicht mehr ganz neu hier

Ich würde dir folgenden empfehlen:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

Alle Doctype-Deklarationen findest du unter

Greetz dwb
 

blackout

Schaf im Wolfspelz

man kann doch keinen doctype empfehlen 8)
es gibt halt n paar zur auswahl je nachdem in welcher sprache du die seite schreiben willst, und du musst dir den aussuchen, der deinen ansprüchen genügt. mit stylesheet etc ist transitional ein richtiger, aber man kann nicht sagen "das ist der beste"...
das ist wie mit kaffee: wer ihn schwarz will kann nicht sagen, mit milch wäre er schlechter; er wäre halt anders und für einen anderen geschmack und andere ansprüche.

EDIT
AHAHAHAHA google.de hat keinen doctype ich glaub ich spinn... dementsprechend valid ist auch sein code 8)
 

dummwiebrot

Nicht mehr ganz neu hier

Von besser oder schlechter war ja auch gar keine Rede :)
Ich hatte den Eindruck, das Juna in Sachen html und css noch Anfängerin ist, deshalb die Empfehlung, und da sie auch keine Ahnung vom Doctype hatte, werden ihre Dokumente vermutlich auch nicht die strengeren Vorschriften für "strict"e Doctypes erfüllen.

Greetz dwb
 

blackout

Schaf im Wolfspelz

naja aber wenn sie rumprobiert und bestimmte elemente nicht angezeit werden kommt sie sicher nich drauf dass es am doctype liegt...
 

dummwiebrot

Nicht mehr ganz neu hier

Wenn etwas nicht oder falsch angezeigt wird, dann liegt das nicht am doctype sondern am fehlerhaften html-Code.
Dagegen hilft nur die Fehler zu suchen und zu beheben (www.validome.org ist da sehr hilfreich), oder die DTD wegzulassen. Der Doctype würde dann so aussehen:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Damit werden die Browser (wie beim Weglassen des Doctypes) in den "quirks mode" versetzt. Das heißt, die Browser versuchen die Fehler zu verbessern/ignorieren und raten, wie die Darstellung vom Webmaster geplant ist.

Greetz dwb
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben