|
|||
Wie kann ich das am besten lösen? [Screenshot inside]
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 Geändert von infernalshade (25.06.2009 um 08:18 Uhr) |
Sponsored Links |
|
|||
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? |
|
|||
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> Geändert von infernalshade (25.06.2009 um 08:37 Uhr) |
|
||||
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
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
|
|||
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 |
|
|||
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> 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> 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> Geändert von infernalshade (25.06.2009 um 14:05 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |