Vertikale Zentrierung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
automatisch macht
bau
bauen
browser
code
dank
display
dokument
eigenschaft
grad
header
http
mitte
sagen
suppe
tabelle
url
zeile
zelle
-
Hallo, ich hab mir kurz folgendes Design zusammengebastelt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style id="style" type="text/css"> body{ margin: 0px; padding: 0px; } .Header{ position:relative; width: 100%; height: 100px; text-align: center; color: white; background:-webkit-gradient(linear,left top,left bottom,from(#2b7ce7),to(#0957be)); /* Chrome, Safari */ box-shadow: 0px 1px 2px black; } .Settings{ background-color: #f4f0ea; position: fixed; bottom: 0px; width: 100%; height:100px; } .Canvas_Box{ text-align: center; } </style> </head> <body> <div style="width: 100%;height:100%;padding: 0px;margin: 0px;"> <div class="Header">Titel</div> </div> <div id="Canvas_Box" class="Canvas_Box"><canvas id="Diagramm" height="420" width="940" style="border: 3px solid black"></div> <div class="Settings"> </body>
Ich würde gerne den Titel und den Canvas (schwarz umrandet) vertikal zentrieren, aber habe dies noch nie gemacht, und Google hilft mir auch nicht weiter. Der Canvas sollte schön in der Mitte zwischen dem Header und der Grauen Box unten sein, der Titel einfach in der Mitte des Headers. Ideen?
Beitrag zuletzt geändert: 21.5.2013 19:48:46 von c143 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
nun ich würde sagen da gibt es zwei herangehensweisen:
1. du ermittelst via javascript alle benötigten höhen und errechnest einen abstand den du dem zu zentrierenden element dann dynamisch zuweist.
2. du benutzt die css-eigenschaft vertical-align:middle; die du tabellenzellen zuweisen kannst, wodurch die inhaltselemente automatisch vertikal-zentriert werden. also baue eine tabelle mit 1 zeile und 1 zelle drum herum und gib der zelle das o.g. css -
hcms schrieb:
nun ich würde sagen da gibt es zwei herangehensweisen:
1. du ermittelst via javascript alle benötigten höhen und errechnest einen abstand den du dem zu zentrierenden element dann dynamisch zuweist.
2. du benutzt die css-eigenschaft vertical-align:middle; die du tabellenzellen zuweisen kannst, wodurch die inhaltselemente automatisch vertikal-zentriert werden. also baue eine tabelle mit 1 zeile und 1 zelle drum herum und gib der zelle das o.g. css
Danke, ginge auch die css3 Funktion calc? Muss nur unter Chrome funktionieren. Weil mit Tabellen find ichs nicht grad die perfekte Lösung, und bevor ich mit JS beginn, wär mir die calc Variante lieber. -
ja, die js-variante wird recht umständlich... aber was hast du gegen die tabellenzelle ? schließlich ist das ein weg wies der browser automatisch macht... falls du keine tabellenelemente haben willst (vielleicht aus seo) kannst du natürlich auch eine div-suppe bauen und die mittels css als tabelle formatieren:
<!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"> html, body { width:100%; height:100%; margin:0px; padding:0px; } .vertikalzentriert { display:table; width:100%; height:100%; background-color:#F6F; } .vertikalzentriert > div { display:table-row; } .vertikalzentriert > div > div { display:table-cell; vertical-align:middle; text-align:center; } </style> </head> <body> <div class="vertikalzentriert"> <div> <div> <p>Ich bin vertikal zentiert</p> </div> </div> </div> </body> </html> -
hcms schrieb:
ja, die js-variante wird recht umständlich... aber was hast du gegen die tabellenzelle ? schließlich ist das ein weg wies der browser automatisch macht... falls du keine tabellenelemente haben willst (vielleicht aus seo) kannst du natürlich auch eine div-suppe bauen und die mittels css als tabelle formatieren:
<!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"> html, body { width:100%; height:100%; margin:0px; padding:0px; } .vertikalzentriert { display:table; width:100%; height:100%; background-color:#F6F; } .vertikalzentriert > div { display:table-row; } .vertikalzentriert > div > div { display:table-cell; vertical-align:middle; text-align:center; } </style> </head> <body> <div class="vertikalzentriert"> <div> <div> <p>Ich bin vertikal zentiert</p> </div> </div> </div> </body> </html>
Danke für die Hilfe, aber ich hab mich trotzdem für die JS Variante entschieden. Die momentane Seite ist diese: https://dl.dropboxusercontent.com/u/23477673/Wurf/index.html
Es gibt noch 2 Probleme. Den Titel wollte ich mit einer Tabelle vertikal zentrieren, aber dann bleibt mein Header nicht 100%, sondern wird so klein, wie der Text im Div. Und zweitens ist immernoch unten ein kleiner Rand, deshalb auch eine Scrolleiste, ich weiss aber nicht, von wo das kommt.
Edit: Und ich merk grad, auf einmal funktionierts nurnoch wenn man die Seite mal rezised. Vorhin hats funktioniert.
Beitrag zuletzt geändert: 22.5.2013 19:46:56 von c143 -
also der rand unten kommt von den drei slidern... anscheinend mag der browser deine css formatierung (appearance+relative) nicht so richtig.
ich würde an deiner stelle den code immer so einfach wie möglich halten (und bei der javascript-variante zum vertikalen zentrieren wirds sehr haarig wenn man margin, padding, scrolling und verschiedene browser berücksichtigen will).
ich hab dir mal dein layout so umgebaut wie ich es für am einfachsten halte, musst noch deine canvas-scripts einbauen:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html, body { width:100%; height:100%; margin:0px; padding:0px; overflow:auto; } h1, p, input { margin:0px; padding:0px; } table { width:100%; height:100%; } td { text-align:center; vertical-align:middle; } #oben { color:white; background:-webkit-gradient(linear,left top,left bottom,from(#2b7ce7),to(#0957be)); box-shadow:0px 1px 2px black; } #unten { color:black; background-color:#f4f0ea; } #canvas_container { height:450px; width:940px; margin:0px auto; } #slider_container { height:150px; width:150px; margin:0px auto; position:relative; } #h_slider{ width:130px; position:absolute; top:55px; left:-55px; -webkit-transform:rotate(90deg); } #v0_slider{ width:130px; position:absolute; bottom:0px; right:0px; } #angle_slider{ width:165px; position:absolute; top:57px; left:0px; -webkit-transform:rotate(225deg); } #werteeingabe_container { margin:0px auto; } #werteausgabe_container { margin:0px auto; } #himmelskoerper_container { width:150px; height:150px; margin:0px auto; } #himmelskoerper_container > img { width:50px; height:50px; float:left; } </style> </head> <body> <table> <tr> <td id="oben"> <h1>Titel</h1> </td> </tr> <tr> <td> <div id="canvas_container"> <canvas id="diagramm" width="940" height="400"></canvas> <input id="ball_slider" type="range" min="0" max="100" value="0" style="width:900px;" onchange="ball(this.value, v0, angle, h, g);"> </div> </td> </tr> <tr> <td id="unten"> <table> <tr> <td> <div id="slider_container"> <input id="h_slider" type="range" min="0" max="15" value="7" onchange="recalculate('h', this.value, 'h_text');"> <input id="v0_slider" type="range" min="1" max="40" value="20" onchange="recalculate('v0', this.value, 'v0_text');"> <input id="angle_slider" type="range" min="1" max="90" value="45" onchange="recalculate('angle', this.value, 'angle_text');"> </div> </td> <td> <table id="werteeingabe_container"> <tr> <td><p>h:</p></td> <td><input id="h_text" type="text" value="7" onkeyup="recalculate('h', this.value, 'h_slider');"></td> </tr> <tr> <td><p>v0:</p></td> <td><input id="v0_text" type="text" value="20" onkeyup="recalculate('v0', this.value, 'v0_slider');"></td> </tr> <tr> <td><p>Winkel:</p></td> <td><input id="angle_text" type="text" value="45" onkeyup="recalculate('angle', this.value, 'angle_slider');"></td> </tr> <tr> <td><p>g:</p></td> <td><input id="g_text" type="text" value="9.81" onkeyup="recalculate('g', this.value);"></td> </tr> </table> </td> <td> <table id="werteausgabe_container"> <tr> <td><p>Insgesammte Zeit:</p></td> <td><p id="zeit">0</p></td> </tr> <tr> <td><p>Insgesammter Weg:</p></td> <td><p id="weg">0</p></td> </tr> <tr> <td><p>Höchster Punkt:</p></td> <td><p id="ymax">0</span></td> </tr> <tr> <td><p>Aktueller Weg(x):</p></td> <td><p id="currentx">0</p></td> </tr> <tr> <td><p>Aktueller Weg(y):</p></td> <td><p id="currenty">0</p></td> </tr> <tr> <td><p>Aktuelle Zeit:</p></td> <td><p id="currentt">0</p></td> </tr> <tr> <td><p>Aktuelle Geschwindikeit:</p></td> <td><p id="currentv">20</p></td> </tr> </table> </td> <td> <div id="himmelskoerper_container"> <img onclick="recalculate('g', 3.7, 'g_text');" src="Bilder/Merkur.png" alt="Merkur"> <img onclick="recalculate('g', 8.87, 'g_text');" src="Bilder/Venus.png" alt="Venus"> <img onclick="recalculate('g', 9.78, 'g_text');" src="Bilder/Erde.png" alt="Erde"> <img onclick="recalculate('g', 3.711, 'g_text');" src="Bilder/Mars.png" alt="Mars"> <img onclick="recalculate('g', 24.79, 'g_text');" src="Bilder/Jupiter.png" alt="Jupiter"> <img onclick="recalculate('g', 10.44, 'g_text');" src="Bilder/Saturn.png" alt="Saturn"> <img onclick="recalculate('g', 8.69, 'g_text');" src="Bilder/Uranus.png" alt="Uranus"> <img onclick="recalculate('g', 11.15, 'g_text');" src="Bilder/Neptun.png" alt="Neptun"> <img onclick="recalculate('g', 274, 'g_text');" src="Bilder/Sonne.png" alt="Sonne"> </div> </td> </tr> </table> </td> </tr> </table> </body> </html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
