Wie dieses Layout umsetzen?

[crashonline]

Hi

Ich will eine Seite machen, die aussehen soll, als würde sie auf nem Blatt auf nem sSchreibtisch liegen.

Auf dem Zettel links sollen die Menüpunkte liegen (werden noch handschriftlich in das Bild eingefügt). Auf dem Blatt rechts soll dann der Inhalt erscheinen und ggf auch scrollbar sein.
Ich hatte vor, das Layout mit Photoshop in Slices zu zerlegen und dann die Seite aus den einzelnen Bildern aufzubauen. Aber wie schaffe ich es dann festzulegen, dass der Inhalt (Text und Bilder) genau rechts über dem Blatt Papier erscheint und auch scrollbar ist?

Und wie schaffe ich es, dass die Seite sowohl mit 4:3 als auch mit 16:9 Bildschirmen so funktioniert, dass der braune Hintergrund auch billfüllend ist? (Offensichtliche Lösung wäre natürlich den braunen Hintergrund als Background festzulegen aber die beiden Blätter, die man dann noch als Bilder darüber legen müsste, haben ja keinen glatten Rand... :-?

Ich bin für jede Hilfe dankbar.

Grüße,
Robert

 

[threadi]

Aber wie schaffe ich es dann festzulegen, dass der Inhalt (Text und Bilder) genau rechts über dem Blatt Papier erscheint und auch scrollbar ist?

Per CSS Feste Höhe und Breite sowie "overflow-y: scroll;" geben.

Und wie schaffe ich es, dass die Seite sowohl mit 4:3 als auch mit 16:9 Bildschirmen so funktioniert, dass der braune Hintergrund auch billfüllend ist?

Gar nicht, da man Webseiten nicht an Bildschirmauflösungen anpasst. Man passt sie auf den Viewport an. Den Bereich den ein Browser der Seite auf dem Bildschirm des Betrachters zugestanden wird.
Um deine Frage dennoch zu beantworten: du musst Dich für ein Layout festlegen: entweder alles fest oder alles flexibel machen. Letzteres dürfte bei diesem angepeilten Design nicht möglich sein.

 

[crashonline]

danke dafür schonmal,

leider bin ich kompletter Neuling CSS angeht. Deshalb: feste Höhe und Breite von WAS angeben?
Ein Hinweis wie <diese Art Befehl> reicht mir evtl. schon. kann dann ja selber noch recherchieren... obwohl ich natürlich ein genaues Beispiel auch nicht ablehnen würde... ;-)

 

[Frank]

Ohne Kenntnisse in (X)HTML und CSS kommst du hier nicht weiter.
Es gibt keine Befehle in CSS oder (X)HTML.

Was willst du hören? Es ist nicht mit einem Element oder Attribut getan.

Also, mit anderen Worten, du willst, dass wir das für dich schreiben. Ein detailiertes Beispiel ist in diesem Fall ja nichts anderes als ein für dich fertig umgesetztes Design, da dein Design nicht gerade generell ist.

Wenn du möchtest, dass es für dich umgesetzt wird, welche Gegenleistung möchtest du dann bieten?

Ein Forum ist für die Hilfe zur Selbsthilfe, keine Plattform, auf der fremde Leute für dich arbeiten.
Um so zu tun, als würde es dir etwas bringen, suche nach <div> und lerne CSS.

 

[Arca]

Deshalb: feste Höhe und Breite von WAS angeben?

na von deinen Inhalt

... obwohl ich natürlich ein genaues Beispiel auch nicht ablehnen würde... ;-)

<div id="Beispiel">
  <p>Beispiel</p>
</div>

#Beispiel {
  position:absolute;
  top: 50px;
  left: 50px;
}

Pixelangabe auch Beispiel.

 

[crashonline]

Ohne Kenntnisse in (X)HTML und CSS kommst du hier nicht weiter.
Es gibt keine Befehle in CSS oder (X)HTML.

Was willst du hören? Es ist nicht mit einem Element oder Attribut getan.

Also, mit anderen Worten, du willst, dass wir das für dich schreiben. Ein detailiertes Beispiel ist in diesem Fall ja nichts anderes als ein für dich fertig umgesetztes Design, da dein Design nicht gerade generell ist.

Wenn du möchtest, dass es für dich umgesetzt wird, welche Gegenleistung möchtest du dann bieten?

Ein Forum ist für die Hilfe zur Selbsthilfe, keine Plattform, auf der fremde Leute für dich arbeiten.
Um so zu tun, als würde es dir etwas bringen, suche nach <div> und lerne CSS.

Meine Güte... Ich habe doch gesagt, dass ich mich dann auch gerne selbst weiter belesen werde. Aber falls jemand sowieso ein ähnliches Stückchen Script irgendworumliegen hat, dann täte das ja sicher nicht weh, würde der jenige das posten. Aber das verlange ich ja nichtmal.
Und bevor ich die komplette CSS bibliothek auswendig lerne, frage ich halt vorher lieber mal nach Hinweisen, damit ich weiß wonach ich am besten suchen muss.

Danke natürlich an die anderen hilfreichen Antworten.

 

[Frank]

Naja die Hinweise hast du ja nun. <div> + CSS (position, margin, padding, width, height, border... [merkst du, worauf es hinausläuft? Du brauchst nun mal fast das komplette CSS, sonst kannst du es nicht vernünftig benutzen])

 

[crashonline]

Ok. Danke.

Jetzt weiß ich wenigstens bescheid und muss nicht darum bangen, dass 98% von dem, was ich mir anlesen werde, umsonst sind.

Ich lass euch wissen, wies läuft und... falls es Probleme gibt...

 

[crashonline]

Eine Frage kommt mir zu dem Layout noch, die wohl eher weniger mit HTML und CSS als mit Logik zu tun hat.

Es gibt ja sehr viele unterschiedliche Auflösungen, Seitenverhältnisse und Bildschirmgrößen. Somit hat auch jeder einen anderen Viewport.

Was wäre dann bei diesem Design der beste Ansatz, um das Design auf möglichst vielen Bildschirmen ohne Scrollen und ohne weiße Ränder anzeigen zu können?

 

[Arca]

ich würde dir dann die Prozentangabe anstatt Pixelangabe empfehlen

 

[crashonline]

meine nächste Frage zu diesem Thema beschäftigt sich dann schon sehr mit css und nicht mehr mit HTML.

ich hoffe deshalb, dass es ok ist, wenn ich einen neuen im css-Forum starte. dieser hier kann dann geschlossen werden.

danke