php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 24-09-2009, 18:56
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard CSS Box - vertical align

Hallo,

ich habe gerade Schwierigkeiten Inhalt in einer CSS Box
vertikal mittig anzuordnen.
Ich habe bereits bei #header_top_left vertical-align: middle;
angewendet, konnte aber leider kein Ergebnis erzielen, weil
das nur bei display inline und nicht bei display box funktioniert...?...
Kann mir bitte jemand auf die Sprünge helfen, wie ich den Inhalt
von #header_top_left vertikal mittig darstellen kann?

Code:
/**
 * Header
 */
.header {
	height: 150px;
	width: 100%;
	position: relative;
}

#header_top_left {
	margin-left: 25%;
	border-left: 1px solid #FFFFFF;
	height: 80px;
	width: 299px;
	position: relative;
	float: left;
	background-color: #FF0000;
}

#header_top_right {
	margin-left: 0;
	border-right: 1px solid #FFFFFF;
	height: 80px;
	width: 469px;
	position: relative;
	float: left;
	background-color: #FF9900;
}
Mit Zitat antworten
  #2 (permalink)  
Alt 24-09-2009, 19:06
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

gibt dem #header_top_left ein entsprechendes padding-top und dem Inhalt ein margin: auto;

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #3 (permalink)  
Alt 24-09-2009, 19:26
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

Zitat:
Zitat von Kropff Beitrag anzeigen
gibt dem #header_top_left ein entsprechendes padding-top und dem Inhalt ein margin: auto;
dann wäre es aber nur horizontal zentriert und nicht vertikal.

Hier mal ein Beispiel, wie es gehen würde:
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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>CSS</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			html, body {
				height: 100%;
			}
			div.v-center {
				position: relative;
				top: 50%;
				left: 50%;
				margin: -100px 0 0 -100px; /* -(halbe Höhe) 0 0 -(halbe Breite) */
				width: 200px;
				height: 200px;
				background-color: #f00;
			}
		</style>
	</head>
	<body>
		<div class="v-center"></div>
	</body>
</html>
Gruß,

Amica

Geändert von AmicaNoctis (24-09-2009 um 19:32 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 24-09-2009, 19:37
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Inhalt in einer CSS Box vertikal mittig anzuordnen
Offenbar soll der Inhalt in der Box entsprechend ausgerichtet werden. Und nicht die Box selber.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #5 (permalink)  
Alt 24-09-2009, 19:40
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Das ist richtig. Die Betonung liegt auf dem Inhalt.
Mit Zitat antworten
  #6 (permalink)  
Alt 24-09-2009, 19:42
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von kerbstone Beitrag anzeigen
Das ist richtig. Die Betonung liegt auf dem Inhalt.
Dann nimm meine Lösung.
EDIT:
Ups, stimmt nicht, melde mich später.

OffTopic:
@Freundin der Nacht
Wer lesen kann, ist klar im Vorteil
SCNR


Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite

Geändert von Kropff (24-09-2009 um 19:46 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 24-09-2009, 19:43
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Naja, jeder Inhalt liegt in einer Box oder lässt sich durch eine weitere einschachteln. Wenn das nicht in Frage kommt, nimmst du halt
Code:
display: table-cell;
vertical-align: center;
Die Elternbox muss dann aber display: table-row; sein. Damit hab ich aber in allen IE-Versionen schlechte Erfahrungen gemacht.

Zitat:
@Freundin der Nacht
Wer lesen kann, ist klar im Vorteil
SCNR
Was habe ich denn deiner Meinung nach überlesen?

Geändert von AmicaNoctis (24-09-2009 um 19:50 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 24-09-2009, 19:50
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Eine Lösung könnte so ausehen:
PHP-Code:
<!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" xml:lang="en" lang="de">
<
head>
  <
style type="text/css">  
    *
    {
      
margin0;
      
padding0;
    }  
    
div.rahmen
    
{
      
width400px;
      
height100px;
      
border1px solid #f00;
      
padding-top50px;
    }  
    
/* so */
    
h1
    
{
      
text-aligncenter;
    }
    
/* oder auch so */
    
div.rahmen *
    {
      
text-aligncenter;
    }
  </
style>
</
head>

<
body>
  <
div class="rahmen">
    <
h1>Bla blubb</h1>
  </
div>
</
body>
</
html
Aber mein ehemaliger Art-Director sagte immer: "Zentrieren ist Deppendesign".

Peter

Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Was habe ich denn deiner Meinung nach überlesen?
Dass nicht Box zentriert wird.
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #9 (permalink)  
Alt 24-09-2009, 19:53
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Lieber Peter,

du hast das aber schon gelesen, dass es um vertikale Zentrierung geht?

SCNR

Amica
Mit Zitat antworten
  #10 (permalink)  
Alt 24-09-2009, 19:56
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Was habe ich denn deiner Meinung nach überlesen?
Zitat:
Zitat von Kropff Beitrag anzeigen
Dass nicht Box zentriert wird.
Hab ich nicht, Begründung:
Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Naja, jeder Inhalt liegt in einer Box oder lässt sich durch eine weitere einschachteln.
Mit Zitat antworten
  #11 (permalink)  
Alt 24-09-2009, 19:59
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Lieber Peter,

du hast das aber schon gelesen, dass es um vertikale Zentrierung geht?

SCNR

Amica
Ja habe ich. Aber das ist in der Form imho nicht möglich, da sowohl der IE 6 als 7 tabellerische Darstellungen über display nicht kennt. Daher muss man den Umweg über padding-top gehen. Ist kein echtes vertical-align, aber da er eh mit einer festen Höhe arbeitet, geht das in diesem Fall. Darf halt nur eine Zeile auftauchen. Oder man packt das wieder in ein div und arbeitet dort auch mit einer festen Höhe. Weitere Infos oder ein konkretes Beispiel wäre allerdings hilfreich.

Peter
Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Hab ich nicht, Begründung:
Die kam aber erst später. Meine Güte! Du bist ja genau so schlimm wie wir Männer .
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite

Geändert von Kropff (24-09-2009 um 20:07 Uhr)
Mit Zitat antworten
  #12 (permalink)  
Alt 24-09-2009, 20:15
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Padding scheint aber auch ungeeignet, da ich ja #header_top_left
und header_top_right habe.
Nehme ich bei #header_top_left zum beispiel 10px so heißt das noch
lange nicht, dass dann der Inhalt rechts mit 10px padding automatisch
vertikal mittig ist.
Man stelle sich einen Banner mit den Maßen 468x60 und 400*50 oder
derartiges vor. Hier läge es ja nun am Programmierer einen
mathematischen Algorithmus zu schreiben, der annähernde Höhen
berechnet um vertikal mittiges Layout darzustellen.

Gibt es denn wirklich hierfür noch keine eindeutige Lösung?
Mit Zitat antworten
  #13 (permalink)  
Alt 24-09-2009, 20:20
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.721
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Gibt es denn wirklich hierfür noch keine eindeutige Lösung?
Imho nein. Du kannst natürlich für jedes div ein spezielles padding-top setzen. Ob der Inhalt nun vertikal ausgerichtet ist, kannst du nur über einen Screenshot feststellen. Und das hängt auch immer von der Inhaltsmenge (z.B. der Zeilen) ab. Oder du arbeitest mit den "guten alten" Layouttabellen.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #14 (permalink)  
Alt 24-09-2009, 20:28
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von kerbstone Beitrag anzeigen
Gibt es denn wirklich hierfür noch keine eindeutige Lösung?
Kommt es absolut nicht in Frage, den Inhalt in eine weitere Box zu packen und die vertikal zu zentrieren?

Wenn nicht, das notwendige JavaScript ist nicht sonderlich kompliziert. Einen Algorithmus braucht man dafür nicht, nur ca. 3 Zeilen Code.

Gruß,

Amica
Mit Zitat antworten
  #15 (permalink)  
Alt 24-09-2009, 20:29
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ok, danke, Dann werden es wohl die "guten alten" Tabellen
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS: vertical-align: bottom pekka HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 12 05-09-2008 16:59
[CSS] vertical-align:bottom ohne Tabelle gruenspan HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 9 16-10-2006 10:51
div vertical mittig mcmurphy HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 9 01-02-2006 17:21
float + vertical-align Quetschi HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 10-01-2006 14:04
vertical-align: middle ... miguel_rkc HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 04-05-2005 14:47

Themen-Optionen
Thema bewerten
Thema bewerten:

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 an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 09:07 Uhr.