| Autor |
Nachricht |
danham1982
Threadersteller
Dabei seit: 22.12.2009
Ort: Konstanz
Alter: -
Geschlecht: 
|
Verfasst Di 22.12.2009 00:45
Titel CSS-Menü |
  |
|
Hallo zusammen,
also ich bin gerade dabei ein Menü zu "basteln". Ziel soll sein, dass ein div, wenn ich mit der Maus drüber gehe^^ die anderen quasi verdrängt - die gesammt größe soll jedoch nicht verändert werden.
| 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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Menü1Menü1Menü1</title>
<style type="text/css">
#wrapper {
width: 600px;
background-color: gray;
}
.menu {
float: left;
background-color: blue;
color: #FFFFFF;
border: thin black dotted;
width: 25%;
}
.menu:hover {
float: left;
background-color: blue;
color: #FFFFFF;
border: thin black dotted;
width: 300px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="menu">
Menü1</div>
<div class="menu">
Menü2</div>
<div class="menu">
Menü3</div>
</div>
</body>
</html> |
nen link zur liveansicht^^: KLICK
jemand eine Idee?
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 22.12.2009 08:35
Titel
|
|
|
Der entscheidende Punkt dabei ist, alle Menü-Links in Bezug zueinander zu bringen - kein Problem mit einer CSS-Tabelle, aber die kann der IE < 8 leider nicht. Aber in allen übrigen Browsern funktioniert es, d.h. in Gecko ab NN 7, Opera ab 7, Safari, und eben auch IE 8:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
font-family: sans-serif;
text-decoration: none;
}
body {
padding: 20px;
}
div {
width: 600px;
display: table;
}
ul {
list-style: none;
display: table-row;
}
li {
display: table-cell;
}
a {
display: block;
background: #c00;
color: #fff;
text-align: center;
border-left: 1px solid #fff;
padding: 10px 0;
}
a:hover {
background: #f00;
padding: 10px 50px;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
</ul>
</div>
</body>
</html> |
Für den IE < 8 fallen mir nur 2 Alternativen ein: Entweder JS oder eine Konstruktion à la CSSplay, d.h. mit CCs, die dem IE zusätzliches Markup verpassen - hier die Tabellen, die er per CSS leider nicht begreift. Folgendes Beispiel ist die entsprechende Erweiterung des vorigen, aber ich sage gleich: Wirklich schön ist eine solche Konstruktion natürlich nicht, denn sie ist zwar valide, aber halt nur, weil das "Verbotene" in Kommentaren steht. Dennoch würde ich diese Lösung wahrscheinlich einer JS-Variante vorziehen, denn letztere funktioniert logischerweise bei deakt. JS nicht mehr.
Folgendes Beispiel funktioniert einwandfrei in IE 7, 6 und 5.5. IE 5.0 dagegen stellt sich etwas an (was übrigens nichts damit zu tun hat, dass er zoom nicht kennt), aber ich glaube nicht, dass er Dir wichtig ist, daher habe ich diesbzgl. nix weiter probiert 
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
font-family: sans-serif;
text-decoration: none;
}
body {
padding: 20px;
}
div {
width: 600px;
display: table;
}
ul {
list-style: none;
display: table-row;
}
li {
display: table-cell;
}
a {
display: block;
background: #c00;
color: #fff;
text-align: center;
border-left: 1px solid #fff;
padding: 10px 0;
}
a:hover {
background: #f00;
padding: 10px 50px;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
table {
width: 600px;
border-collapse: collapse;
}
li {
display: inline;
}
a {
zoom: 1;
}
</style>
<![endif]-->
</head>
<body>
<div>
<ul><!--[if lt IE 8]><table><tr><td><![endif]-->
<li><a href="#">Text</a></li><!--[if lt IE 8]></td><td><![endif]-->
<li><a href="#">Text</a></li><!--[if lt IE 8]></td><td><![endif]-->
<li><a href="#">Text</a></li><!--[if lt IE 8]></td><td><![endif]-->
<li><a href="#">Text</a></li><!--[if lt IE 8]></td></tr></table><![endif]-->
</ul>
</div>
</body>
</html> |
Zuletzt bearbeitet von heiko_rs am Di 22.12.2009 08:38, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
danham1982
Threadersteller
Dabei seit: 22.12.2009
Ort: Konstanz
Alter: -
Geschlecht:
|
Verfasst Di 22.12.2009 09:26
Titel
|
|
|
wird dann wohl letzters werden :/
aber danke für die schnelle 1a antwort!
|
|
| |
|
|
danham1982
Threadersteller
Dabei seit: 22.12.2009
Ort: Konstanz
Alter: -
Geschlecht:
|
Verfasst Di 22.12.2009 12:01
Titel
|
|
|
 wie bekomme ich nun noch den text unten bündig?
|
|
| |
|
|
ashyda
Dabei seit: 11.11.2009
Ort: Siegburg
Alter: 35
Geschlecht: 
|
Verfasst Di 22.12.2009 12:12
Titel
|
|
|
| Code: | | vertical-align: bottom; |
Sollte da eigentlich funktionieren 
Und wenn es vlt doch nicht press unten dran kleben soll:
| Code: | | padding-bottom: 5px; |
Zuletzt bearbeitet von ashyda am Di 22.12.2009 12:14, insgesamt 2-mal bearbeitet
|
|
| |
 |
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 22.12.2009 12:47
Titel
|
|
|
vertical-align funktioniert nicht, da a kein "Tabellen"-Element ist. Man kann es zwar dazu machen (im IE < 8 aber auch schon wieder mühsam), aber da eine Text-Navigation eh möglichst keine feste Höhe haben sollte, empfehle ich die vert. Ausrichtung per padding, z.B. padding: 15px 0 5px; für a (vert. Werte für a:hover anpassen!).
Zuletzt bearbeitet von heiko_rs am Di 22.12.2009 12:48, insgesamt 1-mal bearbeitet
|
|
| |
|
|
ashyda
Dabei seit: 11.11.2009
Ort: Siegburg
Alter: 35
Geschlecht:
|
Verfasst Di 22.12.2009 12:51
Titel
|
|
|
@heiko_rs
Naja, war ja im Prinzip mein zweiter "Vorschlag"
Nee, stimmt. Hab nicht dran gedacht, dass das ja nur in Tabellen funktioniert. x_X
Es ist früh am Morgen... 
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 22.12.2009 12:54
Titel
|
|
|
Dein Vorschlag war gar nicht so abwegig! Aber "früh am Morgen" ist was anderes - siehe Uhrzeit meines ersten Posts 
Zuletzt bearbeitet von heiko_rs am Di 22.12.2009 12:54, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
CSS Menü - Finde nicht das richtige Menü
Pop up menü
CSS Menü
[help] Menü - IE
PHP-Menü
|
|
Willkommen auf dem Portal für Mediengestalter
