Wie kann ich das am besten lösen? [Screenshot inside]

infernalshade · #1 (**permalink**) 24.06.2009, 16:15

Hallo!

Schaut euch mal diesen Screenshot an: ImageBanana - frage.jpg

Wie würdet ihr es lösen (evtl per CSS?!) dass ich den Inhalt der Seite bis oben an den Rand und auch bis unten an den Rand hinbekomme (Also weiter als der gekennzeichnete graue Bereich)?

Ich könnte den oberen und unteren "Bogen" über den <div> mit den Inhalt legen und dann einfach die obere und untere Grafik für den Bogen transparent machen damit der Text durscheint, jedoch könnte man dann den Text nicht markieren bzw irgendwas anklicken (Link z.b.)

Wenns nicht anders geht werd ich es so machen, aber ich hoffe ihr habt noch bessere Ideen!

Danke!

Grüße,
infernalshade

Praktikant · #2 (**permalink**) 24.06.2009, 17:52

Wohin soll der Inhalt? Der soll doch zwischen die Bögen, oder?

infernalshade · #3 (**permalink**) 24.06.2009, 18:06

Der Inhalt kommt zwischen den oberen und den unteren Bogen, ja.

Da ein <div> aber nur 4-eckig sein kann und nicht x-eckig, kann der Inhalt nur in dem grauen Bereich sein. Ich will aber das der Text noch weiter nach oben rutschen kann noch weiter in den Bogen rein, weist du wie ich meine?

Praktikant · #4 (**permalink**) 24.06.2009, 18:11

Also. Du könntest einen Div haben, der alles Umschließt und den oberen Bogen beinhaltet.
Der darinliegende div beinhaltet den unteren Bogen und umschließt den Inhalt, die Navigation und die Links unten.
Dann hast du 3 divs nebeneinander (float), einmal die Navi, dann den Inhalt, dann die Links (Sidebar oder so).
Die Bilder müssen als Hintergrundbilder rein, du musst das dann nur noch per CSS alles ausrichten.
Aber ich halte das Für nicht so sinnvoll, da du dann immer schauen musst, dass der Inhalt nicht über die Bilder geht.

infernalshade · #5 (**permalink**) 25.06.2009, 08:08

Da es sich um ein CMS handelt und der Kunde nachher ran darf scheidet diese Lösung leider aus...

Gibt es denn eine Möglichkeit einen Text um ein transparentes Feld floaten zu lassen? Ich stell mir das so vor:

Ich slice den Bogen am oberen Rand in 2 Teile, damit ich einen Grafikteil in den "Header" packen kann und den anderen in einen nach rechts gefloateten div innerhalb des Inhalts.

Wenn es ne 4-eckige normale Grafik ist würde der Text ja da drum herum floaten, aber gibts eine Möglichkeit das der Text checkt das er auch in das transparente reinfloaten darf??

Grüße,
infernalshade

EDIT: Hab nen Link gefunden wo es eine Möglichkeite gibt: http://meyerweb.com/eric/css/edge/raggedfloat/demo.html
Aber du liebe Güte zig Grafiken machen für sowas?

EDIT 2: Hab die Lösung...ich werds auch so machen wie in dem Link oben beschrieben, zwar nicht ganz genau so aber scho irgendwie *g*.

Also, schaut mal diesen Screenshot an: http://img3.imagebanana.com/view/ki7mzf1y/frage2.jpg
Ich lege in den "Header" den kompletten Bogen als Hintergrund. Der <div> mit dem Inhalt liegt über diesem "Header". IN diesem <div> sind nochmal 2 <div>s drin, einer float:left und einer float:right... und in diesen gefloateten <div>s sind dann die blau und rot (auf dem Screenshot) markierten geclearten <div>s...also:

HTML-Code:

<div id="header"></div>
<div id="inhalt">
     <div id="floatlinks">
          <div id="links-zeile1"></div>
          <div id="links-zeile2"></div>
     </div>
     <div id="floatrechts">
          <div id="rechts-zeile1"></div>
          <div id="rechts-zeile2"></div>
          <div id="rechts-zeile3"></div>
          <div id="rechts-zeile4"></div>
     </div>
     <div id="eigentlicherinhalt">
          Inhalt....
     </div>
</div>

Praktikant · #6 (**permalink**) 25.06.2009, 12:42

Ich denke nicht, dass es klappen wird, da du oben ja 8 div's nebeneinander brauchst, aber ich lasse mich gerne von dem Gegenteil überzeugen, wenn du es geschafft hast

infernalshade · #7 (**permalink**) 25.06.2009, 12:56

wieso brauche ich 8 div's nebeneinander? ich brauch genau 2 nebeneinander, einer mit float:left und einer mit float:right...in diesen beiden liegen dann untereinander die "positionierenden div's"!

Grüße,
infernalshade

Praktikant · #8 (**permalink**) 25.06.2009, 13:07

Wie gesagt, ich lass mich gerne überraschen

infernalshade · #9 (**permalink**) 25.06.2009, 13:38

Also...kopier das mal 1:1 in ein HTML Dokument:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
div#wrapper { margin:0 auto; width: 950px; position:relative; }

div#header { width:946px; height:100px; border:2px solid #00CC33; color:#00CC33;}

div#inhalt { border:2px solid #CCCCCC; width:850px; height:500px; position:absolute; left:50%; margin-left:-425px; top:50px; background-color:#FFFFFF; }

div#links-zeile1 { float:left; clear:left; width:200px; height:15px; border:2px solid #0066FF; }
div#links-zeile2 { float:left; clear:left; width:100px; height:15px; border:2px solid #0066FF; }

div#rechts-zeile1 { float:right; clear:right; width:200px; height:15px; border:2px solid #FF0000; }
div#rechts-zeile2 { float:right; clear:right; width:140px; height:15px; border:2px solid #FF0000; }
div#rechts-zeile3 { float:right; clear:right; width:90px; height:15px; border:2px solid #FF0000; }
div#rechts-zeile4 { float:right; clear:right; width:50px; height:15px; border:2px solid #FF0000; }
-->
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">Header...</div>
    <div id="inhalt">
         <div id="links-zeile1"></div>
         <div id="links-zeile2"></div>
         <div id="rechts-zeile1"></div>
         <div id="rechts-zeile2"></div>
         <div id="rechts-zeile3"></div>
         <div id="rechts-zeile4"></div>
         <div id="eigentlicherinhalt">
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
         </div>
    </div>
</div>
</body>
</html>

Dann schau dir die Seite im IE an und im FF...im IE funktionierts genau so wie ich meinte, im FF fangen die rechten floats erst ab dem letzten linken an!

Aber mit einem hattest recht, die floatenden elemente müssen alleine stehen da ein eltern-div drum rum, sonst wie ein normaler floatender div fungiert!

EDIT: HA, und es funktioniert doch!!

Man darf nur nicht erst alle links ausgerichteten und dann alle rechts ausgerichteten sondern von zeile zu zeile, in meinem beispiel also so:

HTML-Code:

         <div id="links-zeile1"></div>
         <div id="rechts-zeile1"></div>
         <div id="links-zeile2"></div>
         <div id="rechts-zeile2"></div>
         <div id="rechts-zeile3"></div>
         <div id="rechts-zeile4"></div>

anstatt so:

HTML-Code:

         <div id="links-zeile1"></div>
         <div id="links-zeile2"></div>
         <div id="rechts-zeile1"></div>
         <div id="rechts-zeile2"></div>
         <div id="rechts-zeile3"></div>
         <div id="rechts-zeile4"></div>

EDIT 2: Hier der Beweis in Screenshot-Form:

Praktikant · #10 (**permalink**) 25.06.2009, 15:23

Ok, überzeugt

Danke, ich werde mir merken, dass es geht, falls ich es auch mal brauche

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wie am besten diese "Film strip gallery" einfügen (anfänger)	butters	CSS	8	21.10.2010 17:04
Tutorials in Blogs - Was ist am Besten?	hubspe	Site- und Layoutcheck	14	02.09.2009 16:58
clear:both; wie am besten lösen?	riot	CSS	2	17.06.2006 18:16
CSS-Layout: Wie am besten realisieren?	iBlogging	CSS	5	13.02.2006 22:35
Navigation... wie am besten	Y05h1	(X)HTML	11	16.02.2005 19:22