zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Element soll so klein wie der Inahlt sein

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.07.2014, 16:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2012
Beiträge: 65
Feirell befindet sich auf einem aufstrebenden Ast
Standard 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&ouml;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;
}
Ich hoffe man kann verstehen was ich meinte.
Damit danke ich schon einmal im voraus.

Mit Freundlichen Grüßen,
Florian
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.07.2014, 17:28
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Beispiel:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Button Test</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	.container {
		width: 800px;
		margin: 0 auto;
	}
	h2 {
		border-bottom: 1px solid black;
		font-style: italic;
	}
	.button-box1, .button-box2 {
		width: 50%;
		float: left;
		margin-top: 20px;
	}
	.button-box1 button {
		float: right;
	}
	.button-box2 button {
		float: left;
	}
	button {
		height: 60px;
		padding: 0 10px;
	}
	.cf:after {
		content: " ";
		display: table;
		clear: both;
	}
	</style>
</head>
<body>
	<div class="container cf">
		<h2>1. Lesezeichen Hochladen</h2>
		<div class="button-box1">
			<button>Knopf ABCDEFG</button>
		</div>		
		<div class="button-box2">
			<button>Knopf B</button>
		</div>
	</div>
</body>
</html>

Geändert von Manfred62 (12.07.2014 um 17:31 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.07.2014, 18:36
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2012
Beiträge: 65
Feirell befindet sich auf einem aufstrebenden Ast
Standard

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&ouml;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;
}
Hab gerade gesehen das Manfred das auch gerade geschrieben hat aber gut damit hat sich mein Problem gelöst.
Danke noch mal an Manfred62 für die Hilfe.

Geändert von Feirell (12.07.2014 um 19:03 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 12.07.2014, 18:54
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

vertical-align geht nur in display: table-cell;

Alternative: line-height = height
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:59 Uhr.