 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
cloneraiser
Dabei seit: 14.04.2011
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Do 14.04.2011 15:11
Titel
|
  |
|
Auch wenn wieder viel Zeit vergangen ist, aber ich hab auch ne Lösung.
Ich hatte das Problem bei einem Text der im header stehen sollte. Das Funktioniert aber nur wenn der Text immer an der gleichen Stelle steht.
Meine Lösung:
<html>
...
<div id=header>
<header>Text der hier stehen soll</header>
</div>
...
</html>
css
#header {
background-image:url(header950x60.gif);
position: absolute;
width:950px;
height:60px;
top: 136px;
left:0px;
}
header {
position: absolute;
top: 16px;
left:130px;
color:#EFE7CE;
font-family:Verdana;
font-size:22px;
text-align: center;
}
Das ganze geht noch eleganter, es gibt eine Möglichkeit, das bezeichnete Bereiche inherhalb einer div, bestimmte Eigenschaften zu gewiesen werden, aber das ändert nichts an der Funktion.
Zuletzt bearbeitet von cloneraiser am Do 14.04.2011 15:18, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
o0Puk
Dabei seit: 15.02.2011
Ort: Bayreuth
Alter: 41
Geschlecht:
|
Verfasst Mo 18.04.2011 16:16
Titel
|
|
|
Au weia! 
| cloneraiser hat geschrieben: |
<html>
...
<div id=header>
<header>Text der hier stehen soll</header>
</div>
...
</html>
|
| Wikipedia hat geschrieben: |
Strukturierende Elemente
Die Elemente section, nav, article, aside, hgroup, header und footer sollen eine bessere Strukturierung ermöglichen. Anders als div-Kästen, die bislang zur Strukturierung von HTML-Dokumenten verwendet wurden, wird durch das Element hier auch definiert, welche Art von Inhalt sich in dem Element befindet. Zum Beispiel bezeichnet section einen Abschnitt eines durchgängigen Textes, nav ein Menü, article einen Artikel oder footer einen Seitenfuß.
HTML5 – Wikipedia
w3schools - HTML5 <header> Tag
|
---
Aber, um beim Thema zu bleiben, denn diese abenteuerliche Programmierung mit der absoluten Positionierung und Zahlenwerten, die teilweise jenseits von Gut und Böse liegen, kann sich ja niemand ansehen. Mittels text-align kann die horizontale Ausrichtung von Text in Block-Elementen bestimmt werden. Die vertikale Ausrichtung kann man mit der Eigenschaft vertical-align vornehmen. Diese Eigenschaft ist nur auf Inline-Elemente ( z.B. <span> ) oder Tabellenzellen (<td>) anwendbar, nicht aber auf Block-Elemente ( z.B. <div> ).
Wenn ich jetzt Text in einem Block-Element vertikal zentrieren möchte, habe ich entweder die Möglichkeit, dass über eine Tabelle zu lösen, oder, was die elegantere Variante ist, ich sage dem Block-Element, dass es sich wie eine Tabellenzelle verhalten soll ( display:table-cell ). Einen Haken gibt es aber leider auch hier, denn die Redmonder machen bis Internet Explorer 7 einen Strich durch diese Rechnung - wäre auch zu schön gewesen! Da müssen eben die Leute mit einem veralteten Browser Einschnitte in der Gestaltung hinnehmen. 
| w3schools hat geschrieben: |
The display property is supported in all major browsers.
Note: The values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.
w3schools - CSS display Property
|
| Code: | CSS
#header
{
width:500px; height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;
}
|
| Code: | HTML
<div id="header">
Dieser Text hat keinen tieferen Sinn.<br />
Er steht einfach nur da!
</div>
|
LG Chris
|
|
| |
|
|
|
Anzeige
|
|
|
Benutzer 29349
Account gelöscht
Ort: -
|
Verfasst Mo 18.04.2011 18:56
Titel
|
|
|
| Code: | #header
{
width:500px; height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;
} |
anstelle von vertical-align nimmste:
Zuletzt bearbeitet von am Mo 18.04.2011 18:57, insgesamt 1-mal bearbeitet
|
|
| |
|
|
o0Puk
Dabei seit: 15.02.2011
Ort: Bayreuth
Alter: 41
Geschlecht:
|
Verfasst Di 19.04.2011 08:49
Titel
|
|
|
| thecamillo hat geschrieben: |
anstelle von vertical-align nimmste:
|
Mit ( margin:0 auto; ) bestimme ich die Aussenabstände eines Elements, also die Abstände zwischen dem Rand und anderen Elementen bzw. dem übergeordneten Element. Mal davon abgesehen, dass dies nichts mit den Innenabständen zu tun hat und schon gar nichts mit Text, bezieht sich ( margin:0 auto; ) auf die horizontale Zentrierung. 
LG Chris
|
|
| |
|
|
Benutzer 29349
Account gelöscht
Ort: -
|
Verfasst Mi 20.04.2011 17:57
Titel
|
|
|
so wie ich das verstanden habe gings doch darum 
Objekt mittig ausrichten ist und text wie zuvor richtig deklariert
so wie ich das beim drüberfliegen gesehen habe will errreicht werdn in den Header eine Navigation einzubauen. Warum das nicht mit einer Liste glöst wird ist mir nicht klar, aber jedem das seine und mir Apfelkuchen.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Text in Textfeld vertikal zentrieren in PS?
[CSS] Bild + Text vertikal zentrieren?
Webseite vertikal zentrieren
[CSS] Zentrieren vertikal und horizontal
vertikal zentrieren in dreamweaver cs3
[css] div(float: right) vertikal im elternelement zentrieren
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
