nicht angemeldet
Div zum Layouten 'missbrauchen'?
0 
Matthias Apsel
0 0 Matthias Apsel
0 Matthias Apsel
0 0 Matthias Apsel
0 0 Matthias Apsel
0 
Marc
Div zum Layouten 'missbrauchen'?
Hallo,
ich hab einige Forums(archiv)einträge zum Thema CSS und XHTML gelesen um mich erstmal schlau zu machen. Der Tenor war: Layout gehört ins CSS! So weit so gut.
Mein Ziel ist ein Menu, wie es durch den unten stehenden Code dargestellt wird. Dabei soll alles eine relative Größe haben und die Proportionen erhalten bleiben, wenn der Anwender am Browser die Textgröße ändert.
Der div im div dient dabei "lediglich" als Zierstreifen, deshalb auch das Konstrukt, damit ich den zweiten div und das ul zueinander positionieren kann.
Geht das eleganter unter der Prämisse, das das Layout mitzoomen soll?
Danke für jeden Denkanstoß und Hinweis!
LG
Patty
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Test</title>
<style type="text/css">
HTML {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
width: 100%;
}
BODY {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
#nav1 {
position: relative;
height: 5.5em;
width: 100%;
background-color: #EFEFEF;
display: block;
overflow: visible;
margin: 0;
padding: 0;
}
#nav1 div {
position: absolute;
top: 1.5em;
left: 0;
height: 2em;
width: 100%;
background-color: #FF0000;
display: block;
margin: 0;
padding: 0;
}
#nav1 ul {
position: absolute;
top: 1em;
left: 3em;
background-color: #4444FF;
list-style: none;
margin: 0;
padding: 0;
}
#nav1 ul li {
display: inline;
float: left;
padding: 1em;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="nav1">
<div></div>
<ul>
<!-- verboten... <div style="background-color: #00CCAA">xyz</div> -->
<li>Menuitem 1</li>
<li>Menuitem 2</li>
</ul>
</div>
</body>
</html>
-
Om nah hoo pez nyeetz, Patty!
Der div im div dient dabei "lediglich" als Zierstreifen,
Danke für jeden Denkanstoß und Hinweis!
border
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
border
von welchem Element? Der Zierstreifen kann ein beliebige Höhe haben und beliebig zum ul positioniert werden.
LG
Patty-
Om nah hoo pez nyeetz, Patty!
von welchem Element? Der Zierstreifen kann ein beliebige Höhe haben und beliebig zum ul positioniert werden.
In deinem Fall margin-top des ersten Listenelements. Dann wird er mit diesem positioniert und kann die gewünschte Breite erhalten. Sollte es nicht das sein, was du erwartest: online-Beispiel bitte oder zur Not ein Bild, wie es aussehen soll.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Ingrid!
In deinem Fall margin-top des ersten Listenelements.
border-top!
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo
In deinem Fall margin-top des ersten Listenelements. Dann wird er mit diesem positioniert und kann die gewünschte Breite erhalten. Sollte es nicht das sein, was du erwartest: online-Beispiel bitte oder zur Not ein Bild, wie es aussehen soll.
Was ich möchte schaut schematisch so aus:
|---Farbkasten1----------------------------------------------------|
| |---------|----------| |
|--Zierstreifen---| menuit1 | menuit2 |---------------------------|
|-----------------| | |---------------------------|
| |---------|----------| |
|------------------------------------------------------------------|Der Zierstreifen liegt hinter den li und soll in Höhe und in der Top-Position skalierbar sein. Außerdem soll die Navigation mitzoomen, wenn der Anwender die Schriftgröße/Zoomstufe ändert.
LG
Patty-
Om nah hoo pez nyeetz, Patty!
|---Farbkasten1----------------------------------------------------|
| |---------|----------| |
|--Zierstreifen---| menuit1 | menuit2 |---------------------------|
|-----------------| | |---------------------------|
| |---------|----------| |
|------------------------------------------------------------------|Farbkasten1 = ul
Zierstreifen = Hintergrundgrafik von ul, Gradient[1] für moderne Browser fürs zoomen.
[1] Wenn ich mich recht erinnere, kann man mit Gradient nicht nur "weiche" Verläufe machen.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
Farbkasten1 = ul
Zierstreifen = Hintergrundgrafik von ul, Gradient[1] für moderne Browser fürs zoomen.
Danke! Aber dann siehst du auch keinen Weg, wenn man nicht moderne Browser berücksichtigen will?
LG
Patty-
Om nah hoo pez nyeetz, Patty!
Danke! Aber dann siehst du auch keinen Weg, wenn man nicht moderne Browser berücksichtigen will?
ungetestet:
* Wenn die LI-Elemente in der Liste floaten, hat die Liste keine Höhe.
* Durch Angabe von border-bottom, height und border-top erreicht man ein maximal 3farbiges Layout, wobei die Border auch weggelassen werden können.
* Durch ein negatives margin-top für die LI kannst du den Balken in die Mitte schieben.* Wenn sich das Layout auch bei nur-text-zoom anpassen soll, braucht es em-Angaben.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
Hallo,
Farbkasten1 = ul
Zierstreifen = Hintergrundgrafik von ul, Gradient[1] für moderne Browser fürs zoomen.
Danke! Aber dann siehst du auch keinen Weg, wenn man nicht moderne Browser berücksichtigen will?
Wie unmodern dürfen die denn sein. Eine genauere Angabe wäre hilfreich. Im Übrigen würde ich den Zierstreifen als ul sehen, die Streifen darüber und darunter als border-top und border-bottom. Müsste ich aber erst mal selber rumprobieren, komme leider aber im Moment nicht dazu.
Vielleicht hilft Dir das ja weiter. Auch SVG lassen sich als Hintergrund verwenden.
Noch ein Link zu CSS3-Hintergründen:
http://lea.verou.me/2011/04/css3-patterns-gallery-and-a-new-pattern/Viele Grüße,
Marc.-
Om nah hoo pez nyeetz, Marc!
Wie unmodern dürfen die denn sein. Eine genauere Angabe wäre hilfreich. Im Übrigen würde ich den Zierstreifen als ul sehen, die Streifen darüber und darunter als border-top und border-bottom.
Wie ich vorschlug.
Müsste ich aber erst mal selber rumprobieren
funktioniert.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
-
-