14.09.2004, 18:51
|
|||
|
|||
Layout Problem CSS
Guten Tag!
Bin auf des Forum gestoßen, weil ich ein Layout mit CSS verwirklichen will, es aber net schaff. Das Layout soll ungefähr so aussehen: http://www.bellem.net/design1.jpg Die hellblauen Bögen hab ich als .png Dateien vorliegen und per CSS positioniert. Das funktioniert auch, wenn man die Größe des Browserfensters verändert. Das Logo oben rechts und unten Links sind ebenfalls kein Problem. Nur die Mitte bereitet mir Probleme. Ich möchte, dass man in der Mitte dann die Informationen präsentiert. Dabei soll der Text nur in der Box bleiben und nicht drüber hinauslappen. Ich hab 's dann folgendermaßen mit einem <iframe> versucht: Zuerst ein Auszug aus der CSS Datei: Code:
iframe
{
border-style:solid;
border-width:thin;
border-color:#00009C;
background-color:#FFFFFF;
}
#iframe
{
position:absolute;
margin: 105px 110px 105px 110px;
z-index:2;
}
#leftArc
{
position:absolute;
top:0px;
left:0px;
width:282px;
height:325px;
z-index:1;
}
#rightArc
{
position:absolute;
bottom:0px;
right:0px;
width:282px;
height:325px;
z-index:1;
}
Code:
<body class="hintergrund"> <div id="leftArc"> [img]bilder/ArcLeft.png[/img] </div> <div id="rightArc"> [img]bilder/ArcRight.png[/img] </div> <div id="iframe"> <iframe src=""> </div> </body> </html> www.bellem.net/center.html Was mich jetzt stört, ist dass der iframe nicht groß genug ist. Er sollte den ganzen Platz ausfüllen, den er darf (durch margin: 105px 110px 105px 110px; begrenzt). Leider ist dies nicht der Fall und selbst einiege height:100%; oder ähnliches haben nicht funktioniert. Mir ist wichtig, dass das Layout auch bestehen bleibt, wenn man die Größe des Browserfensters verändert, d.h. der Abstand, der durch margin vorgegeben ist, soll immer eingehalten werden. Habt ihr irgendwelche Ideen, wie es klappen könnte, oder besser noch wie ich ohne iframe auskomme? Gruß David [/url] 
|
| Sponsored Links |
|
14.09.2004, 19:17
|
|||
|
|||
|
Re: Layout Problem CSS
Zitat:
 Du hast jetzt alles absolut positioniert und brauchst massig divs - ist gar nicht nötig! Zu den blauen Bögen: definier die doch im Hintergrund - der erste kommt in den body-Hintergrund, und zwar so: body { background:#fff url(bilder/ArcRight.png) no-repeat right bottom; } Dann machst Du ein zweites Div (nur zur Zierde), mit folgenden Angaben: #hintergrund { height:100%; /*brauchen body und html auch noch*/ background:#fff url(bilder/ArcLeft.png) no-repeat top left; } Dieses Div sollte alles andere umschließen - alles weiter also hier rein! So, dann Dein Mitteldiv für den Inhalt. Wenn er nicht zu groß ist, dann kannst Du diesen Trick benutzen: http://css-faq.de/index.php?sid=1884...6&id=2&lang=de Warnung: bei zu kleinem Monitor wird links oben Inhalt abgeschnitten! Mit overflow:auto bekommst Du das Ganze scrollbar - kein Iframe nötig!
|
| Sponsored Links |
|
14.09.2004, 21:41
|
|||
|
|||
|
Danke für die Tipps, aber igrnedwie will die Sache auch nicht wirklich.
Des mit dem Mittelteil hab ich noch gar nicht ausprobiert, es hakt schon bei den Bögen. Meine Css Datei (Ausschnitt): Code:
body
{
height:100%;
font-family:Arial,sans-serif;
font-weight:bold;
color:#00009C;
background:#FFFFFF url(bilder/ArcRight.png) no-repeat right bottom;
}
#hintergrund
{
height:100%;
background:#FFFFFF url(bilder/ArcLeft.png) no-repeat top left;
}
Code:
<html> <body> <div id="hintergrund"> </div> </body> </html>
|
|
14.09.2004, 22:02
|
|||
|
|||
|
Zitat:
|
|
15.09.2004, 08:14
|
|||
|
|||
|
Danke, die Bögen tun jetzt!
Nochmal zu dem Mittelteil: Ich hab mir die Hp von dir angeschaut und des ganze ausprobiert. Es funktioniert auch, aber ich hab mir das ein wenig anders vorgestellt. Bei diesem Beispiel ändert sich nur die Position, aber die Größe nicht. Ich hätte gern ein Feld in der Mitte, dass sich sowohl in der Position, als auch in der Größe an das aktuelle Fenster anpasst. Der Seitenabstand soll also immer gleich bleiben.
|
|
15.09.2004, 09:00
|
|||
|
|||
|
Probier mal diesen Ansatz (ist aber auch ein ziemliches Gerangel): http://spotleid.de/?board=6;action=d...threadid=16205
- mit dem Zentrieren ist das nicht so einfach - ist nämlich im Standard leider nicht mehr vorgesehen.
|
|
15.09.2004, 11:10
|
|||
|
|||
|
Hat auch nicht wirklich geklappt
 Ich habs jetzt mit Frames gemacht, da scheint es zu funktionieren. Trotzdem danke
|
|
17.09.2004, 11:59
|
|||
|
|||
|
Kennst du ne andere Möglichkeit außer mit Frames?
Bei den anderen Möglichkeiten hat mir das *, wie bei <frameset cols="72px,*,72px"> gefehlt. Ich bin gern bereit des nochmal zu überarbeiten, damit es ohne Frames tut. Hab aber im Moment keine Perspektive... Mir is ein weiteres kleines Problemchen, ich hoff mal ihr könnt mir helfen: Ich will einer Seite einen Rahmen geben, wenn ich das mache wird allerdings der untere Rahmen abgeschnitten. Der Scrollbalken is auch Teilweise abgeschnitten. Hier der Code Code:
body
{
height:100%;
font-family:Arial,sans-serif;
font-weight:bold;
color:#00009C;
margin:0px;
overflow:hidden;
}
body.Mitte
{
border-style:solid;
border-width:2px;
border-top-width:0px;
border-bottom-width:10px;
border-color:#00009C;
background:#FFFFFF url(bilder/LogoMitte.png) no-repeat 50% 50%;
overflow:scroll;
padding:10px;
height:100%;
}
Code:
<html> <snip /> <body class="Mitte"> <snip /> </body> </html> <snip />
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| CSS layout problem | donky | CSS | 5 | 05.06.2009 16:56 |
| Problem mit CSS Layout | jojoho | CSS | 9 | 20.07.2008 22:16 |
| layout mit css - problem | xxlcss | CSS | 1 | 30.12.2005 02:25 |
| problem ausrichtung grafik und rand (css layout) | celine@23 | Barrierefreiheit | 1 | 28.12.2005 13:05 |
| includes bei css layout | dan | CSS | 2 | 10.03.2004 18:21 |
Linear-Darstellung
