|
|||
Element soll so klein wie der Inahlt sein
Ich wünsche euch allen einen schönen Samstag.
Jedes mal wenn ich CSS benutze wird mir schwindlig, es ist nicht auszuhalten es will einfach nicht so wie ich das will ...... Ok folgendes soll passieren: - ☑ Knopf A & B sollen mittig vom verfügbaren Platz sein - ☐ Inhalt vom Knopf A & B soll mittig sein (sowohl Vertikal als auch Horizontal) - ☑ Knopf A & B sollen eine feste Höhe haben. - ☐ Knopf A soll mit dem Inhalt in die Breite wachsen Um Folgende Seite geht es: ./XHTMLForum/layout.html Hier noch mal der HTML und CSS Code: HTML-Code:
<!DOCTYPE html> <html> <head> <title>Lesezeichen-Sortierer</title> <meta charset="UTF-8"> <meta name="description" content="Ein Lesezeichensortiere der deine Lesezeichen aus Mozilla-Firefox sortiert."> <meta name="author" content="Florian Völker"> <meta name="keywords" content=""> <link href="./styles/layout.css" type="text/css" rel="stylesheet"> </head> <body> <div id="main_container"> <h1 id="main_header">Lesezeichensortierer</h1> <div class="step_container" id="step_container_1"> <h2 class="header">1. Lesezeichen Hochladen</h2> <div class="button">Knopf A</div> <div class="button">Knopf B</div> </div> <div class="step_container" id="step_container_1"> <h2 class="header">2. Lesezeichen Sortieren</h2> </div> <div class="step_container" id="step_container_1"> <h2 class="header">3. Lesezeichen Herunterladen</h2> <div class="button">Knopf A</div> <div class="button">Knopf B</div> </div> </div> </body> </html> Code:
html, body{ width: 100%; padding: 0px; margin: 0px; } #main_container{ border: solid 1px #EAEAEA; background-color: #E6E6E6; margin-top: 25px; margin-bottom: 25px; width: 840px; margin-left: auto; margin-right: auto; padding: 15px; padding-top: 0px; border-radius:6px; box-shadow: 0px 0px 20px 5px #EAEAEA; } .header{ /* text-transform: uppercase; */ font-style: italic; border-bottom: 1px solid black ; text-align: left; text-shadow: 0px 0px 10px #C1C1C1; } .header:first-letter{ /* font-size: 40px; */ } #main_header{ text-transform: uppercase; text-align: center; color: #333333; text-shadow: 0px 0px 10px #C1C1C1; } #main_header:first-letter{ font-size: 40px; } .button{ height: 60px; background-color: #1CB51C; border: solid black 1.5px; border-radius:2px; display: inline-table; min-width: 60px; text-align: center; vertical-align: middle; } .step_container{ text-align: center; } Damit danke ich schon einmal im voraus. Mit Freundlichen Grüßen, Florian |
Sponsored Links |
Sponsored Links |
|
|||
An sich ja der Punkt ist ich würde gerne verstehen warum mein vertical-align nicht funktioniert.
Edit HAHA ich hab mein Problem gelöst ! Der Punkt ist das vertical-align eigentlich nur für Tabellen gedacht ist. Wenn man jetzt simuliert das man dort eine Tabellenzelle hat dann funktioniert auch alles: Layout.html bzw: HTML-Code:
<!DOCTYPE html> <html> <head> <title>Lesezeichen-Sortierer</title> <meta charset="UTF-8"> <meta name="description" content="Ein Lesezeichensortiere der deine Lesezeichen aus Mozilla-Firefox sortiert."> <meta name="author" content="Florian Völker"> <meta name="keywords" content=""> <link href="./styles/layout.css" type="text/css" rel="stylesheet"> </head> <body> <div id="main_container"> <h1 id="main_header">Lesezeichensortierer</h1> <div class="step_container" id="step_container_1"> <h2 class="header">1. Lesezeichen Hochladen</h2> <div class="button"><div>Knopf A</div></div> <div class="button"><div>Knopf B</div></div> </div> <div class="step_container" id="step_container_2"> <h2 class="header">2. Lesezeichen Sortieren</h2> </div> <div class="step_container" id="step_container_3"> <h2 class="header">3. Lesezeichen Herunterladen</h2> <div class="button"><div>Knopf A</div></div> <div class="button"><div>Knopf B</div></div> </div> </div> </body> </html> Code:
html, body{ width: 100%; padding: 0px; margin: 0px; } #main_container{ border: solid 1px #EAEAEA; background-color: #E6E6E6; margin-top: 25px; margin-bottom: 25px; width: 840px; margin-left: auto; margin-right: auto; padding: 15px; padding-top: 0px; border-radius:6px; box-shadow: 0px 0px 20px 5px #EAEAEA; } .header{ /* text-transform: uppercase; */ font-style: italic; border-bottom: 1px solid black ; text-align: left; text-shadow: 0px 0px 10px #C1C1C1; } .header:first-letter{ /* font-size: 40px; */ } #main_header{ text-transform: uppercase; text-align: center; color: #333333; text-shadow: 0px 0px 10px #C1C1C1; } #main_header:first-letter{ font-size: 40px; } .button{ height: 60px; margin: 2px; background-color: #1CB51C; border: solid black 1.5px; border-radius:2px; min-width: 60px; display: inline-block; text-align: center; } .button div{ height: 60px; min-width: 60px; display:table-cell; text-align: center; vertical-align: middle; } .step_container{ text-align: center; } Danke noch mal an Manfred62 für die Hilfe. Geändert von Feirell (12.07.2014 um 19:03 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dropdownmenue funktioniert nicht | YandelF | CSS | 5 | 01.09.2012 19:59 |
position von Element an Element (rechts von Element) | britches | CSS | 1 | 18.05.2009 18:46 |
Festanstellung bei der Xing AG als Web Developer (HTML/CSS) | NEOX | Offtopic | 10 | 17.07.2008 18:11 |
Liste im IE | StarSt0rm | CSS | 3 | 22.08.2007 21:04 |
Validator Fehler und komm nicht drauf... | letslounge | (X)HTML | 3 | 14.09.2006 22:07 |