| Autor |
Nachricht |
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 37
Geschlecht: 
|
Verfasst Di 11.03.2008 10:28
Titel [css] vertikales ausrichten in div bereichen |
  |
|
hey,
ich versuche seit einiger zeit text in einem div bereich auszurichten. ich möchte dabei ungerne tabellen verwenden, deshalb kann ich kein vertical-align nutzen. weiterhin ist der text skalierbar, also komme ich mit margin auch nicht so weit.
ich habe bereits die suchfunktion genutzt, aber eine lösung zu meinem problem habe ich in der form nicht gefunden.
musterdateien:
liegen nicht mehr auf dem server
ich möchte den text (link1 | link2 | link3) in der kopfnavi auf 'bottom' stellen.
vielen dank schonmal
gruß, niko
Zuletzt bearbeitet von stry am Mi 12.03.2008 12:56, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 11.03.2008 13:00
Titel Re: [css] vertikales ausrichten in div bereichen |
|
|
| stry hat geschrieben: | | weiterhin ist der text skalierbar |
Das ist auch sehr gut so, aber auch ein Grund dafür, keine height-Deklaration für textenthaltende Elemente zu verwenden (es sei denn, es ist richtig viel Platz). Aber z.B. Deine Haupt-Navi läuft bereits nach der zweiten Text-Vergrößerung im FX über, da solltest Du height unbedingt entfernen.
Im Header-Bereich dagegen scheint ja halbwegs genug Platz zu sein, also kannst Du Deine Kopf-Navi innerhalb von #seitenkopf_rechts abs. pos., mit passenden Werten für bottom und right. Schöner wäre natürlich eine Lösung per display: table/table-cell, aber leider kennt der IE (inkl. 7) diese Eigenschaften nicht, so dass abs. Pos. hier am sinnvollsten ist (zumal dann bei einer bottom-Ausrichtung die Höhe nach oben wächst, genau wie bei bottom-Ausrichtung in einer Tabelle).
Aber auch hier: Nimm height raus. Erzeuge Höhen für textenthaltende Elemente lieber auf "natürliche" Weise, z.B. per vert. padding.
Übrigens solltest Du unbedingt einen Doctype verwenden. Und Du weißt, dass Navigationen als Liste (ul) dargestellt werden sollten?
|
|
| |
|
|
|
Anzeige
|
|
|
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 37
Geschlecht:
|
Verfasst Di 11.03.2008 13:32
Titel
|
|
|
wenn ich das teil absolut mit right: 0px und bottom 0px positioniere, dann sitzt es ganz unten rechts in der ecke.
kann ich den nicht im bezug auf den parentdiv auf 0/0 positionieren?
das mit den listen mache ich auch, die dateien die ich hochgeladen hab sind nur demos um mein problem zu schildern.
danke schonmal für die antwort!
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 11.03.2008 14:03
Titel
|
|
|
| stry hat geschrieben: | | kann ich den nicht im bezug auf den parentdiv auf 0/0 positionieren? |
Ich war nicht sicher, ob Dir das nicht eh bekannt ist, deswegen schrieb ich's nicht gleich dazu: Wenn das Parent-div ebenfalls pos. ist (hier natürlich relativ), richtet sich das abs. pos. Kindelement an ihm aus.
| stry hat geschrieben: | | das mit den listen mache ich auch, die dateien die ich hochgeladen hab sind nur demos um mein problem zu schildern. |
Gut, hatte ich mir auch schon fast gedacht 
|
|
| |
|
|
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 37
Geschlecht:
|
Verfasst Di 11.03.2008 14:06
Titel
|
|
|
klappt, vielen dank 
|
|
| |
|
|
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 37
Geschlecht:
|
Verfasst Mi 12.03.2008 11:04
Titel
|
|
|
ich habe nun die lösung mit der absoluten positionierung gewählt und nun tritt ein weiteres problem auf
ich habe einen divcontainer der 22px hoch ist (mit 1px border herum), hinein sollen grafiken die 12px hoch sind.
also oben und unten 5px platz, sieht dann wie folgt aus:
#symbole
{
position: absolute;
top: 5px;
}
das ergebnis sieht jedoch nur im ff wie gewollt aus.
im ie ist der container nämlich nurnoch 20px hoch - da die border ja 'im div' anstatt 'um den div herum' liegen.
ergebnis: die grafiken haben oben einen abstand von 5px und unten von 3px.
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 12.03.2008 12:36
Titel Re: [css] vertikales ausrichten in div bereichen |
|
|
| heiko_rs hat geschrieben: | | Übrigens solltest Du unbedingt einen Doctype verwenden. |
Ohne Doctype ist der IE im Quirksmode > falsches Boxmodell. Verwende einen Doctype, der den IE nicht in den Quirksmode schickt. http://carsten-protsch.de/zwischennetz/doctype/einleitung.html
Ich empfehle
| Code: | | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
oder
| Code: | | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
Ist eine Glaubensfrage (ich persönlich nehme XHTML.)
|
|
| |
|
|
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 37
Geschlecht:
|
Verfasst Mi 12.03.2008 13:01
Titel
|
|
|
alles klar.
aber es tauchen nach und nach irgendwie immer mehr probleme auf. diesmal liegts irgendwie am float zusammen mit der absoluten positionierung.
beispiel:
klick
html:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Beispielseite</title>
<link rel="stylesheet" type="text/css" href="beispiel.css">
</head>
<body>
<div id='container'>
<div id='box1'>
box1
<div id='box2'>
box2
</div>
<div id='box3'>
box3
</div><br />
</div>
</div>
</body>
</html> |
css:
| Code: | br
{
clear: both;
}
#container
{
width: 980px;
margin: 10px;
}
#box1
{
position: relative;
background-color: #666666;
}
#box2
{
width: 280px;
height: 75px;
float: left;
background-color: #cccccc;
}
#box3
{
width: 30px;
height: 30px;
position: absolute;
top: 0px;
right: 0px;
background-color: #aaaaaa;
} |
im ff siehts wieder wie gewollt aus, im ie nicht
vielen dank schonmal.
Zuletzt bearbeitet von stry am Mi 12.03.2008 13:01, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit div-Bereichen
Vertikales CSS Menü
Suche vertikales Navigationsscript
vertikales menü mit unterpunkten!
Vertikales Menü Hilfe
3 Spaltige sLayout mit div-Bereichen...
|
|
Willkommen auf dem Portal für Mediengestalter
