zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout Problem CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2004, 18:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 8
david.bellem befindet sich auf einem aufstrebenden Ast
Standard 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; 
}
Jetzt ein Auszug aus der HTML Datei:
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>
Das ganze seht ihr auf:
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]
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.09.2004, 19:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard Re: Layout Problem CSS

Zitat:
Zitat von david.bellem
... oder besser noch wie ich ohne iframe auskomme?
Sehr gute Idee!

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!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.09.2004, 21:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 8
david.bellem befindet sich auf einem aufstrebenden Ast
Standard

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; 
}
Meine Html Datei (Ausschnitt):
Code:
<html>

<body>	
		<div id="hintergrund">
			
		</div>
	
	</body>
</html>
Wenn ich das mache, sieht man nur den rechten Rand des rechten unteren Bogens. Man sieht ihn nicht vollständig. Irgendeine Idee?[/quote]
Mit Zitat antworten
  #4 (permalink)  
Alt 14.09.2004, 22:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von david.bellem
Wenn ich das mache, sieht man nur den rechten Rand des rechten unteren Bogens. Man sieht ihn nicht vollständig. Irgendeine Idee?
Ja - der wird durch die Hintergrundfarbe des zweiten Containers überdeckt. Die muß auf "transparent", nicht auf "weiß" - sorry - hab ich oben falsch gemacht.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.09.2004, 08:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 8
david.bellem befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 15.09.2004, 09:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 15.09.2004, 11:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 8
david.bellem befindet sich auf einem aufstrebenden Ast
Standard

Hat auch nicht wirklich geklappt
Ich habs jetzt mit Frames gemacht, da scheint es zu funktionieren.
Trotzdem danke
Mit Zitat antworten
  #8 (permalink)  
Alt 15.09.2004, 12:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von david.bellem
Ich habs jetzt mit Frames gemacht.....
Schade.....
Mit Zitat antworten
  #9 (permalink)  
Alt 17.09.2004, 11:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 8
david.bellem befindet sich auf einem aufstrebenden Ast
Standard

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%;
}
und in der html Datei:
Code:
<html>
<snip />
<body class="Mitte">
<snip />
</body>
</html>
<snip />
[/u]
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:10 Uhr.