zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie kann ich das am besten lösen? [Screenshot inside]

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.06.2009, 16:15
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.06.2009, 17:52
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Wohin soll der Inhalt? Der soll doch zwischen die Bögen, oder?
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.06.2009, 18:06
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 24.06.2009, 18:11
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 25.06.2009, 08:08
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #6 (permalink)  
Alt 25.06.2009, 12:42
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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!
Mit Zitat antworten
  #7 (permalink)  
Alt 25.06.2009, 12:56
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 25.06.2009, 13:07
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Wie gesagt, ich lass mich gerne überraschen
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #9 (permalink)  
Alt 25.06.2009, 13:38
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard

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:
Angehängte Grafiken
Dateityp: jpg beweis.jpg (60,3 KB, 19x aufgerufen)

Geändert von infernalshade (25.06.2009 um 14:05 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.06.2009, 15:23
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ok, überzeugt
Danke, ich werde mir merken, dass es geht, falls ich es auch mal brauche
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:39 Uhr.