zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertikal Zentriert und 100% breit

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.12.2005, 16:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.12.2005
Beiträge: 4
Grunwalski befindet sich auf einem aufstrebenden Ast
Standard Vertikal Zentriert und 100% breit

Hallo,

ich bin leider recht neu auf dem Gebiet und hab mich wohl an eine etwas zu Große Aufgabe gewagt - ein rein CSS Basiertes Layout ohne Tabellen.
Leider komm ich einfach nicht weiter, alleine weil ich nicht genau weiß wo das Problem liegt. Vielleicht liest dass hier jemand der mir weiterhelfen kann.

Hier 2 Links zum status quo und zu einem Bild wie es aussehen soll...später einmal

http://zaggy.gmxhome.de/vert.htm
http://zaggy.gmxhome.de/vert.jpg

Im Firefox siehst aus als müsste ich nur noch ein wenig kämpfen, aber IE zerschiesst es total und ich habe keine Ahnung warum.


PS:
Ein Eis für den der mir das Problem verrät (also abgesehen davon das ich keine Ahnung habe) und mir raten kann, wie das Layout am besten aufbaue.

PPS:
Achja, die Höhe sollte 70% betragen und das Bild verzerrt mitskalieren, aber ich wär auch zufrieden wenn die Höhe = Höhe des Bildes ist.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.12.2005, 20:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.12.2005
Beiträge: 4
Grunwalski befindet sich auf einem aufstrebenden Ast
Standard

Einen kleinen möglichen Fehler hab ich schon entdeckt "Nicht unnötig Arbeit verursachen, wenn man schon um Hilfe bittet."

Hier also der Code des schon geposteten Links.


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Die brillanten Dilletanten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
html, body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color:#4A100F}

.box1{
position:absolute;
top:13%;
left:0%;
right:0%;
width:100%;
min-height:74%;
background-color:#800C0D;}

.box2{
position:absolute;
top:5%;
bottom:5%
left:0%;
right:0%;
width:100%;
min-height:70%;
border:none;}

.oben{
position:absolute;
top:0px;
left:0px;
width:100%;
height:32px;}

.unten{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:32px;}

.brick{
position:absolute:;
top:0px;
left:0px;
height:100%;
width:141px;}
-->
</style>

<!--[if gte IE 5.5]>
   <style type="text/css">
   <!--
   div{height:7%;}
   -->
   </style>
<![endif]-->

</head>


<body>
<div class="box1">

	[img]pics/border_top.gif[/img]</img>
		<div class="box2">
			
			[img]pics/wall.jpg[/img]</img>

		</div>
	[img]pics/border_bottom.gif[/img]</img>

</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.12.2005, 20:43
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Ich habs nur überflogen, aber was soll

Code:
<!--[if gte IE 5.5]>
   <style type="text/css">
   <!--
   div{height:7%;}
   -->
   </style>
<![endif]-->
werden? Alle divs im IE sollen 7% hoch werden? Bezogen worauf? Unfug.

Und warum soll das Bild mitskalieren? Die Mauer würde sich doch prima als Hintergrundbild eignen, das nur in der y-Achse wiederholt wird.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #4 (permalink)  
Alt 28.12.2005, 20:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.12.2005
Beiträge: 4
Grunwalski befindet sich auf einem aufstrebenden Ast
Standard

Den Wald vor lauter Bäumen nicht sehen...Danke Mann. *verlegegrinst*
Das war der Fehler warum der IE es total zerschossen hat. Soll natürlich 74% sein.

Bleibt noch die Frage ob ich das Bild mit der Höhe des Fensters skalieren/Verzerren kann, oder ob ich die Höhe an die des Bildes anpassen muss.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Die brillanten Dilletanten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
html, body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color:#4A100F}

.box1{
position:absolute;
top:13%;
left:0%;
right:0%;
width:100%;
min-height:74%;
background-color:#800C0D;}

.box2{
position:absolute;
top:5%;
bottom:5%
left:0%;
right:0%;
width:100%;
min-height:70%;
border:none;}

.oben{
position:absolute;
top:0px;
left:0px;
width:100%;
height:32px;}

.unten{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:32px;}

.brick{
position:absolute:;
top:0px;
left:0px;
height:100%;
width:141px;}
-->
</style>

<!--[if gte IE 5.5]>
   <style type="text/css">
   <!--
   div{height:74%;}
   -->
   </style>
<![endif]-->

</head>


<body>
<div class="box1">

	[img]pics/border_top.gif[/img]</img>
		<div class="box2">
			
			[img]pics/wall.jpg[/img]</img>

		</div>
	[img]pics/border_bottom.gif[/img]</img>

</div>
</body>
</html>
Mit Zitat antworten
  #5 (permalink)  
Alt 28.12.2005, 21:03
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Da bleiben noch mehr Fragen:
1) wenn du dem IE sagst, dass alle divs 74% hoch werden sollen, die jemals auf deiner Seite landen, bekommst du ein Problem. Sag es spezifischer.

2) Warum nimmst du die Mauer nicht als background-image mit einem repeat-y?

3) Das vertikale Zentrieren in Ehren, aber was soll passieren, wenn mal etwas mehr Content rein soll? Abschneiden? Mitwachsen? Kleinere Schrift? Scrollbar?

-> Das ist am Ende das, was ein normales Browserfenster schon kann, und dein Bildschirm hat doch schon einen Gehäuserahmen. Da die Bildschirmfläche eh schon klein genug ist, warum dann die nutzbare Fläche noch weiter verkleinern? Bei mir steht der Bildschirm vertikal zentriert in meinem Gesichtsfeld. Das vertikal zentrierte Layout, einen Horizont quasi in den Schirm zu brennen, hat prinzipielle Nachteile für die Zugänglichkeit deiner Seite. Nutz doch lieber den ganzen Schirm und lass den einzelnen Elementen Luft zum Atmen.

</schwaetz>
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #6 (permalink)  
Alt 30.12.2005, 00:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.12.2005
Beiträge: 4
Grunwalski befindet sich auf einem aufstrebenden Ast
Standard

1) Danke. Dass mit der globalen DIV einstellung könnte die Lösung eines zuküfntigen Problems sein

2) Weil ich unwissend war/bin Danke, so dürfte es klappen.

3) Platzmangel ist Absicht, passt aber zum content.

Und deine Bendenken über die Platzbschränkung versteh ich und teile sie auch eigentlich. Aber hier darf eine Ausnahme gemacht werden. Der Inhalt wird sich in Grenzen halten.
Mit Zitat antworten
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
divs vertikal zentriert ausrichten (Formular) Momro CSS 5 21.02.2016 20:17
Text horizontal und vertikal auf Seite zentriert web334 CSS 5 04.01.2015 14:00
Tabellenloses Layout - Horizontal 100% vertikal zentriert. Probleme :( strohy CSS 8 23.02.2007 09:59
Bild vertikal zentriert in einem <div> ausrichten wolfgke CSS 3 07.09.2006 17:12
Suche 3 spaltiges Layout, 80 % Breit, zentriert LittleJoe CSS 4 24.07.2006 18:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:45 Uhr.