Headline vertikal zentrieren / Fußzeile ordentlich platzieren @ tutorials.de: Tutorials, Forum & Hilfe

Pendergast · 27.11.05 12:37

Ich hab zwei Probleme mit meinem Stylesheet.

a) In einem Kopfbereich (<div id="head">) möchte ich eine Headline vertikal zentriert anzeigen, und zwar browserunabhängig (was mir nicht gelingen möchte).

b) Ich habe ein zweispaltiges Design, welches in einen Content-Bereich (<div id="Inhalt">) und in einen Info-Bereich (<div id="Info">) unterteilt ist. Die beiden Bereiche sollen natürlich nebeneinander angezeigt werden, weshalb ich den Info-Bereich als floating div definiert habe. Allerdings kommt es mitunter vor, dass der Info-Bereich höher ist als der Content-Bereich, und das Seitenende (<div id="footer"> und <div id="bottom">) überlagert. Diese beiden divs sollen natürlich erst unter Info- und Content-Bereich angezeigt werden und nicht einfach immer direkt unter dem Content-Bereich. Mag mir auch nicht gelingen.

Mittlerweile bin ich dazu übergegangen, nur noch planlos überall irgendwelche Werte im Stylesheet zu ändern in der Hoffnung, dass ich irgendwann mal zufällig eine funktionstüchtige Kombination treffe.

Da halt ich es dann doch für besser, wenn ich mal nachfrage. Kann mir jemand weiterhelfen?

Website:

HTML-Code:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="_style.css" />
  </head>
  <body>
    <div id="head">
      <h1>Titel</h1>
    </div>
    <ul id="menu">
      <li><a href="1.php">Link 1</a></li>
      <li><a href="0.php" style="color: #66F">Link 0</a></li>
    </ul>
    <div id="Info">
      Infobox mit Zusatzinfos und weiteren Links
    </div>
    <div id="Inhalt">
      Eigentlicher Seiteninhalt
    </div>
    <div id="footer">
      Fußzeile
    </div>
    <div id="bottom">
	
    </div>
  </body>
</html>

Stylesheet:

Code :

@charset "utf-8";
 
html {
    background-color: white;
}
 
body {
    font-size: 100.01%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 8%;
    margin-right: 8%;
    background-color: white;
    color: #11111A;
    font-family: Arial, "Trebuchet MS", Tahoma, Verdana;
    font-size: 12px;
    line-height: 125%;
}
 
img {
    border:none
}
 
#head {
    padding: 1px;
    background-image: url(images/banner.png);
    background-position: right;
    background-repeat: no-repeat;
    height: 50px;
}
 
#head h1 {
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
}
 
#bottom {
    padding: 1px;
    background-image: url(images/banner2.png);
    background-position: right;
    background-repeat: no-repeat;
    height: 50px;
}
 
#menu {
    background-color: #191970;
    margin: 0;
    padding-top:3px;
    padding-bottom: 3px;
    line-height: 140%;
    vertical-align: bottom;
    text-align: center;
    font-size: 11px;
    list-style-type: none;
    padding-left: 12px;
    padding-right: 12px
}
 
#menu li {
    display: inline;
}
 
#menu li a {
    padding-right: 15px;
    padding-left: 15px;
    color: white;
}
 
#footer {
    background-color: #cd853f;
    margin: 0;
    line-height: 100%;
    vertical-align: bottom;
    text-align: center;
    font-size: 10px;
    list-style-type: none;
    padding-top:3px;
    padding-bottom: 3px;
    padding-left: 12px;
    padding-right: 12px;
}
 
#footer a {
    color: black;
}
 
a:link, a:visited {
    color: #cd853f;
    text-decoration: none;
}
 
a:hover, a:active {
    color: #cd853f;
    text-decoration: underline;
}
 
 
fieldset {
    padding: 6px;
    background: white;
    border: 1px dotted #191970;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 6px;
}
 
fieldset legend {
    color: #fff;
    background-color: #cd853f;
    font-size: smaller;
    padding: .1ex .5ex;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    font-weight: bold;
}
 
table {
    background-color: white;
    border-spacing: 1px;
    margin-left: 0px;
    margin-right: 20px;
    width: 95%;
}
 
tr.head {
    background-color: #191970;
    font-size: 11px;
    color: white;
    font-weight: bold;
}
 
tr.r0 {
    background-color: #ffefd5;
    font-size: 11px;
}
 
tr.r0x {
    background-color: #ffefd5;
    font-size: 11px;
}
 
tr.r0x td {
    border-bottom: 1px solid #cd853f;
}
 
tr.r1 {
    background-color: white;
    font-size: 11px;
}
 
tr.r1x {
    background-color: white;
    font-size: 11px;
}
 
tr.r1x td {
    border-bottom: 1px solid #cd853f;
}
 
tr.footer {
    background-color: #cd853f;
    margin: 0;
    padding: 0;
    padding-top:3px;
    padding-bottom: 3px;
    line-height: 100%;
    vertical-align: bottom;
    text-align: right;
    font-size: 7pt;
    list-style-type: none;
}
 
td {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
}
 
td.newsinfo {
    vertical-align: top;
    text-align: center;
    font-size: 0.8em;
}
 
td.news {
    vertical-align: top;
    text-align: left;
}
 
div#Info {
    font-size: 0.9em;
    float: right;
    width: 16em;
    margin: 0 0 1.1em;
    padding: 0.5em;
    color: #666;
    border-left: 1px dotted #666;
}
 
div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0;
}
 
div#Info p {
    font-size: 1em;
}
 
div#Inhalt {
    margin: 0 16em 0 0;
    padding: 0.5em 0;
    min-height: 250px;
}
 
* html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}
 
div#Inhalt h2 {
    font-size: 1.5em;
    margin: 0.2em 0;
}
 
div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
}

Maik · 27.11.05 14:11

Mein Lösungsvorschlag für ein zweispaltiges Layout mit vertikal-zentrierter Headline, sowie einem Footer, der unterhalb des Inhalts und den Infos angeordnet ist

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div.wrapper
{
border: 1px solid #000;
}

div.headline
{
line-height: 50px;
background: #efefef;
}

div.info
{
float: right;
background: #dfdfdf;
width: 200px;
}

div.content
{
background: #ffffff;
margin: 0 200px 0 0;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

div.footer
{
background: #efefef;
}

div.headline p, div.info p, div.content p, div.footer p
{
margin: 0;
}
-->
</style>

</head>
<body>
<div class="wrapper">
     <div class="headline"><p>headline</p></div>

     <div class="info"><p>info</p></div>

     <div class="content"><p>content</p></div>

     <div class="clear">&nbsp;</div>

     <div class="footer"><p>footer</p></div>
</div>

</body>
</html>

Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

Pendergast · 27.11.05 17:35

Dankeschön für das Weisen des rechten Weges!

Pendergast · 27.11.05 23:15

Hab noch nen kleinen Verbesserungswunsch, den ich wieder nicht gescheit selbst hinbekomme: Der Info-Bereich soll immer direkt bis zum Footer heranlangen, damit die Hintergrundfarbe in der Spalte nicht plötzlich wechselt, wenn der Content-Bereich länger ist. Hab versucht die Höhe zu vererben oder die Höhe auf 100% zu setzen. Leider erfolglos.

Auch fehlgeschlagen ist der Plan, die gewünschte Hintergrundfarbe des Info-Bereiches im body-Tag zu definieren und den Rest einfach mit einem weißen Hintergrund zu belegen - das birgt wiederum ungewünschte Effekte, wenn der Content kürzer ist als die Infos.

Mal gucken, wann ich das Kriegsbeil mit CSS begraben kann

Maik · 28.11.05 06:28

In diesem CSS-Modell besitzt die Info-Box immer die gleiche Höhe wie die Content-Box, es entsteht somit keine Lücke zum Footer:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div.wrapper
{
border: 1px solid #000;
}

div.outer
{
border-right: 200px solid #dfdfdf;
}

div.inner
{
width: 100%;
}

div.headline
{
line-height: 50px;
background: #efefef;
}

div.content
{
background: #ffffff;
margin: 0 200px 0 0;
}

div.info
{
float: right;
background: #dfdfdf;
width: 200px;
margin-right: -200px;
position: relative;
z-index: 10;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

div.footer
{
background: #efefef;
}

div.headline p, div.info p, div.content p, div.footer p
{
margin: 0;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="headline"><p>headline</p></div>

     <div class="outer">
     <div class="inner">
          <div class="info"><p>info</p></div>

          <div class="content"><p>content</p><p>content</p><p>content</p></div>

          <div class="clear">&nbsp;</div>
     </div>
     </div>

     <div class="footer"><p>footer</p></div>
</div>

</body>
</html>

Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

Pendergast · 28.11.05 09:22

Ok, das hat etwas länger gedauert, bis ich dahinter gestiegen bin, wie du das anstellst.

Auf sowas muss man erstmal kommen.

Danke!

Pendergast · 28.11.05 10:15

So langsam wünsch ich mir das gute alte Table-Design zurück

Quatsch, man will ja mit der Zeit gehen.

Opera, Netscape, Mozilla und Firefox tun was sie sollen, nur beim IE (6.0 XP SP 2 @ VMware) gibt's einen weniger lustigen Effekt: Bei Größenänderungen des Browserfensters springt der Text aus der Infoleiste in den Contentbereich und lässt sich erst wieder durch Reload des Inhaltes an seine Stammposition bewegen.

Wo war ich nicht gründlich genug beim Wissenstransfer?

HTML-Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="_style.css" />
        	<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/* <![CDATA[ */
#head {
	padding: 1px;
	background-image: url(images/hmsbanner.png);
	background-position: right;
	background-repeat: no-repeat;
	height: 50px;
	max-height: 50px;
	line-height: 50px;
}

#head p {
	white-space: pre;
	font-size: 2em;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

#bottom {
	padding: 1px;
	background-image: url(images/hmsbanner2.png);
	background-position: right;
	background-repeat: no-repeat;
	height: 50px;
}

#menu {
	background-color: #191970;
	margin: 0;
	padding-top:3px;
	padding-bottom: 3px;
	line-height: 140%;
	vertical-align: bottom;
	text-align: center;
	font-size: 11px;
	list-style-type: none;
	padding-left: 12px;
	padding-right: 12px
}

#menu li {
	display: inline;
}

#footer {
	background-color: #cd853f;
	margin: 0;
	line-height: 100%;
	vertical-align: bottom;
	text-align: center;
	font-size: 10px;
	list-style-type: none;
	padding-top:3px;
	padding-bottom: 3px;
	padding-left: 12px;
	padding-right: 12px;
}

div#Info {
	font-size: 0.9em;
	float: left;
	width: 16em;
	margin-left: -17em;
	padding: 0.5em;
	color: #666;
	z-index: 10;
	position: relative;
}

div#Inhalt {
	margin: 0 0 0 1em;
	padding: 0.5em 0;
}

* html div#Inhalt {
	height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}

div#main {
	border-left: 16em solid #ffefd5;
}

div#innermain {
	width: 100%;
}

div#clear {
	clear: both;
}
/* ]]> */
</style>
	</head>
	<body>
		<div id="head">
			<p>Titel</p>
		</div>
		<ul id="menu">
			<li>...</li>
		</ul>
		<div id="main">
			<div id="innermain">
				<div id="Info">
					%BOX%
				</div>
				<div id="Inhalt">
					%CONTENT% 
				</div>
				<div id="clear">
					&nbsp;
				</div>
			</div>
		</div>
		<div id="footer">
			&nbsp;
		</div>
		<div id="bottom">
			&nbsp;
		</div>
	</body>
</html>

Maik · 28.11.05 11:13

Das von dir beschriebene Problem kann ich im IE (6.0 - Win98) nicht feststellen.

[editpost] Werde es aber morgen im Büro unter WinXP checken [/editpost]
Wenn das Stylesheet in dieser Form im Quelltext des XHTML- / XML-Dokuments notiert bleiben soll, dann muß der Kommentar  durch /* <![CDATA[ */ und /* ]]> */ ersetzt / maskiert werden.

Siehe hierzu SELFHTML: .. / Unterschiede zwischen XHTML und HTML / Unterschied: Inhalt von Script- und Style-Bereichen

Pendergast · 28.11.05 11:52

Zitat von michaelsinterface

Wenn das Stylesheet in dieser Form im Quelltext des XHTML- / XML-Dokuments notiert bleiben soll, dann muß der Kommentar  durch /* <![CDATA[ */ und /* ]]> */ ersetzt / maskiert werden.

Da hast du natürlich vollkommen recht, die Notation hab ich allerdings nicht im Kopf gehabt und wollte sie für das Beispiel nicht extra nachschlagen (böse Zungen würden auch behaupten, ich hätte da in dem Augenblick gerade gar nicht dran gedacht, dass es da einen Unterschied geben würde

). Da hab ich einfach kackfrech deine Notation kopiert.

Wenn ich jetzt so drüber nachdenke, werd ich das für die Nachwelt aber trotzdem editieren, nicht dass irgendwer schreit "aber der Pendergast hat das doch auch so gemacht".

Zitat von michaelsinterface

Werde es aber morgen im Büro unter WinXP checken

Das wäre sehr nett, wenn das funktioniert, dann kann ich CSS nämlich endlich abhaken.

Maik · 29.11.05 12:23

Hallo,

habe dein Demo im Büro unter WinXP gecheckt und auch hier keinen Darstellungsfehler im IE (6.0) feststellen können.

[editpost]

Entferne mal das id-Attribut im schliesenden </div> (ID=innermain).

Pendergast · 29.11.05 12:56

Zitat von michaelsinterface

Hallo,
habe dein Demo im Büro unter WinXP gecheckt und auch hier keinen Darstellungsfehler im IE (6.0) feststellen können.

Hm, dann schieb ich die Schuld einfach der VMware in die Schuhe.

Zitat von michaelsinterface

Entferne mal das id-Attribut im schliesenden </div> (ID=innermain).

Huch, wie ist das denn da reingeraten

Auf jeden Fall danke für deine Unterstützung!

Maik · 29.11.05 12:58

Das gleiche gilt auch für die ID #main

Pendergast · 29.11.05 13:53

Elendes Copy&Paste

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Div vertikal zentrieren

div vertikal zentrieren die 2te

Div im Div vertikal zentrieren

div vertikal zentrieren

Im DIV Tag vertikal zentrieren

E-Mail:

Abonnieren Abbestellen