✔ Arbeiten ohne Frames mit einem Hintergrundbild 590*650px

Status
Nicht offen für weitere Antworten.
Kalma

Kalma

Erfahrenes Mitglied
Hey,

ich habe ein Problem (wie so oft...)

ich will eine Seite machen, wo ich ein Bild hab (im Anhang), was jedoch eine Feste größe hat, also mit Rand und so.

Ich will aber keine Frames verwenden.

Wie bekomme ich das hin?


MfG
David
 

Anhänge

  • 26062attachment.gif
    26062attachment.gif
    17,5 KB · Aufrufe: 35
Könntest Du das Problem bzw. Dein Vorhaben etwas präzisieren?


[editpost]

Wenn Du ein Frameset mit CSS "nachbauen" willst, dann probiere es doch mal so:

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">
<!--
.wrapper {
width: 500px;
height: 551px;
background: url(http://www.tutorials.de/forum/attachments/html/26062d1158002569-hintergrund2.gif);
position: relative;
}

.leftCol {
position: absolute;
left: 15px;
top: 150px;
width: 120px;
height: 380px;
}

.content {
position: absolute;
left: 140px;
top: 150px;
width: 345px;
height: 380px;
overflow: auto;
}

.content p {
margin: 0;
padding: 0 5px 5px 5px;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="leftCol">leftCol</div>
     <div class="content">
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
     </div>
</div>

</body>
</html>
Die Maße habe ich jetzt mal der angehängten Grafik entnommen, von daher müßtest Du die Dimensions- und Positionsangaben dem Originalformat anpassen.
 
Hey,

also, ich versuche, mein Problem "genauer" zu schildern:

Ihr seht, ich habe ein Hintergrund-Bild gemacht, das aber unten, oben, rechts und links nen Rand hat, der auch deutlich sichtbar ist.

Nun, wenn ich die Seite machen will, und einen Text habe, der über den Rand hinausgeht, sieht das e aus.
Das ist ja nur durch (meines wissens) 2 Methoden zu lösen:
  1. Frames
  2. Der Hintergrund wandert mit

Mit dem 2. Meine ich das so wie bei dieser Seite:
http://flowingtide.de/

Dort hört der Hintergrund im Prinzip "nicht auf". Halt nur, wenn der Text zu Ende ist.

Wie macht man das?
David

@pamax: Wo steht das denn auf deiner Seite, wie das geht :rolleyes: :-( :google:
 
Habe vorhin in meinem Beitrag noch eine Lösungsmöglichkeit angehängt ;)

Und da wir hier über eine CSS-Lösung reden, schiebe ich den Thread auch mal ins entsprechende Board.
 
Hey,

danke für den Vorschlag, aber da wäre dann ja ein Frame drin, was ich allerdings nicht wollte/will.

Obwohl ich grad sehe, das ich da wahrscheinlich ganz normal meinen PHP-Teil reinmachen könnte:
PHP: 
 <?php
   if (($_GET['section'] == "") OR ($_GET['section'] == "index"))
    { include "news.php"; }
 ?>

Geht es denn auch noch anders?
Also, das der untere Rand immer mitwandert?

David
 
David Flögel hat gesagt.:
... aber da wäre dann ja ein Frame drin, was ich allerdings nicht wollte/will...
Zum Vergrößern anklicken....
Also ich sehe im oben stehenden Qelltext keinen Frame. Wo soll der sein?
David Flögel hat gesagt.:
Geht es denn auch noch anders?
Also, das der untere Rand immer mitwandert?
Zum Vergrößern anklicken....
Ja, es geht auch noch anders. Du müsstest dein Hintergrundbild in drei Teile zerlegen: Einen oberen (Header), einem mittleren (Content) und einen unteren Teil (Footer). Dein Layout legst du dann in drei untereinander liegenden Blöcken an, von denen jeder das entsprechende Teilbild als Hintergrund erhält.
 
Ja, es geht auch noch anders. Du müsstest dein Hintergrundbild in drei Teile zerlegen: Einen oberen (Header), einem mittleren (Content) und einen unteren Teil (Footer). Dein Layout legst du dann in drei untereinander liegenden Blöcken an, von denen jeder das entsprechende Teilbild als Hintergrund erhält.
Zum Vergrößern anklicken....

Wie denn? Gibts dafür Beispiele^^?

David

Hier sind übrigens die Frames: http://www.dflab.de
 
Hier mal ein grob skizziertes Modell:

Code: 
.wrapper {
width: 590px;
}

.head {
height: 150px;
background: url(...);
}

.content {
background: url(...) repeat-y; /* Hintergrundgrafik in der Vertikalen wiederholen */
}

.foot {
height: 20px;
background: url(...);
}
HTML: 
<div class="wrapper">
    <div class="head"></div>
    <div class="content"></div>
    <div class="foot"></div>
</div>
 
Hey,


so in etwa habe ich es auch probiert.
Nur macht er bei mir zwischen jedem "div" einen riesen Absatz :(

Und wie bringe ich da die linke Spalte mit ein :-[?

David
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück