Webseite ohne Frame oder iFrame realiesieren

Status
Nicht offen für weitere Antworten.
J

jakobwak

Mitglied
Hi,

ich würde meine nächste Webseite gerne ohne Frames oder iFrames programmieren( ka wie man die Technik meint). Am leichtesten ist es wenn ihr euch gleich anschaut was ich meine, deshalb hab ich mal eben ein simples Beispiel "designt".

http://www.wakolbinger.net/jakob/beispiel.jpg

Die rote Navigation(das schmale Stück) soll immer weiter nach unten gehen, natürlich nur so weit wie auch Schrift vorhanden ist. Wie muss ich das Design nun zerschneiden? Reicht dafür Html aus? Wie muss ich das programmieren?

Ich hoffe es ist gemeint was ich meine

danke

mfg
 
Inzwischen funktioniert es :)

Hmmm, also so grob kann ich drei Bereiche unterscheiden:

  1. So'n schwarzen Balken oben. Soll vermutlich mal den Titel der Seite beinhalten, resp. die Überschrift.
  2. Dann einen mehr oder weniger roten Block links. Soll vermutlich mal die Navigation enthalten.
  3. Und dann den eigentlichen Inhaltsteil.
Also ein ganz klassisches Layout. So auf Anhieb drei Blöcke (div?). Um das fehlerhafte Box-Modell des IE zu entschärfen, würde ich da vier Blöcke draus machen: Einen oben, einen darunter, und innerhalb dieses zwei nebeneinander. Also möglicherweise 4 div-container. Wobei man die Navigation anstatt als div auch sehr gut als ul oder ol einrichten kann. Jeder Block bekommt den geeigneten Hintergrund, bei Titel und Inhalt einfach nur Farbe, bei Navigation ein Bild (als Fallback Farbe rot nehmen). Und schon passt es.
 
vielen dank für die Antwort

leider muss ich zugeben dass ich nicht allzu viel verstanden habe bzw. jetzt kaum alles richtig programmieren würde. vielleicht liegts daran dass ich schon lange nicht mehr mit Html gearbeitet habe :/

es wäre nett wenn du es vielleicht etwas ausführlicher erklären könntest oder sogar es sogar am beispielbild vorführen oder mir sonst irgendeinen verständlichen quelltext geben könntest

sorry für die mühen
 
Hier ein Lösungsansatz:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#head
{
width: 100%;
height: 100px;
background: #000000;
color: #ffffff;
}

div#nav
{
width: 200px;
background: #ff0000;
float: left;
}

div#content
{
margin-left: 220px;
border: 1px solid #000000;
}
-->
</style>

</head>
<body>

<div id="head">head</div>

<div id="nav">nav</div>

<div id="content">content</div>

</body>
</html>
 
Hi,

bei div#nav fehlt noch background-image, sonst wird's ein durchgehender rechteckiger Block. Als Fallback nützlich, aber so wie von Dir gezeichnet sieht es besser aus :)

Und noch ein kleiner Tip am Rande: div#head und div#nav selektieren über eine ID. Pro Seite kann nur ein Element eine bestimmte ID haben. Das ist für den Titel und die Navigation richtig. Für den Inhalt könnte es interessant sein, davon mehrere (untereinander) zu haben. Dann wäre statt einer ID ein Klassenname angebracht. Also div.content { ... }.

Im html (zwischen den body-Tags) sähe das dann ungefähr so aus:
HTML: 
<div id="head">
    <h1>Titel</h1>
</div>
<div>   <!-- der Hilfscontainer -->
    <div id="nav">
        <!-- hier die Navi einfügen -->
    </div>
    <div class="content">
        blah blubber schwafel
    </div>
</div>

Die Navigation könnte man als Liste einfügen, dann bräuchte diese Liste entsprechende Formatierungen. Ggf. könnte man dann anstatt des nav-div's diese Liste nehmen.

Ach ja, und noch eine Kleinigkeit: Bei der von Dir verwendeten Grafik für die Navi mußt Du darauf achten, daß sie bei nur wenigen Navi-Items lang genug ist, sonst wird das untere Ende der Navi abgeschnitten. Länger macht Nix, dann gibst Du im css für den Hintergrund einfach an: repeat: no-repeat;

Sorry, wenn ich das nur so ungefähr umreiße, aber nur selber denken macht schlau :-)

Nachtrag: Und denk bei style an margin und padding, da Du ja die drei Felder nahtlos aneinander kleben willst, also ohne Lücke dazwischen.
 
Zuletzt bearbeitet:
vielen dank für die antworten

sorry wenn ich so faul bin und immer gleich ins forum renne :( ;)

ich hab mich jetzt ein wenig damit auseinandergesetzt und verstehe jetzt die Grundlagen. jetzt aber noch 2 Fragen:

1.wie kann ich das "wiederholen" der navigation abhängig von dem Text im Content-Bereich abhängig machen?

2.Inspector hat es ja schon angesprochen, aber genau das ist mein Problem. Ich will ja das sich meine Navigation wiederholt, aber blos das schmale Stück. Wird das zu kompliziert oder geht das?

mfg
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück