|
||||
Liste in DIV
Hi!
Ich versuche gerade "nebenbei" mein MouseOver-Menü, dass mit CSS und Grafiken aufgebaut ist, komplett ohne Grafiken und mit CSS zu erstellen. Nun ja, es sieht auch annährend gleich aus. Nur wenn ich das Menü, dass ich mit einer Liste erstellt habe, gegen das alte Menü austausche verhaut es mir den ganzen Aufbau. (Die Liste mit der darüber liegenden Grafik sind dann über dem ganzen Aufbau) Ohne Liste geht es (die Grafik ist wieder da, wo sie hingehört), mit leider nicht. Woran kann das liegen? SPMan So(noch mit "Grafiken-CSS-Menü"), wie es aussehen sollte: EDIT URL entfehrnt So(mit reinem CSS Menü), wie es aussieht: EDIT URL entfehrnt Ohne CSS-Menü (Liste): EDIT URL entfehrnt Code:
... EDIT Code entfehrnt ... |
Sponsored Links |
|
|||
Warum definierst Du jeden Link einzeln mit einer Klasse?
Machs doch einfacher und definiere einfach die Liste innerhalb von menue. Schau mal hier und halte Dich ans Tutorial - ist am einfachsten und funktioniert: http://css.maxdesign.com.au/listutor...troduction.htm Farben etc natürlich anpassen..... |
Sponsored Links |
|
|||
Deine Version ist auf jeden Fall die kompliziertere und macht so für eine Liste auch keinen Sinn. Wo der Fehler steckt, seh ich um die Uhrzeit nicht mehr und teste jetzt auch nicht weiter rum......
Wenn Du Dein Problem schön "auspellst" hilft Dir ulle morgen vielleicht! |
|
||||
Hast schon recht, dass es "komplizierter" ist.
Wenn das Menü was ich habe auch leichter umzusetzen ist, werde ich das natürlich tun. Ist wohl auch für mich zu spät. Ob ich das noch pellen kann...da war ich noch nie gut drin. Aber natürlich habe ich auch nichts gegen Ulles Hilfe. Aber wer hat das schon. Ich wünsche Dir auf jeden Fall eine gute Nacht, Danke und bis Morgen. SPMan |
|
||||
Tach, SPMan!
Du brauchst im Prinzip die gleiche Navigation wie ich; schau doch mal auf www.koblenz-metternich.de/aenderungen.php Wenn Du Größen und Farben änderst, hast Du Deine Navigation. CSS hierzu: Code:
} a.menu { text-decoration: none; border: 1px solid #C0C0C0; display: block; margin: 1px; padding-left: 3px; padding-right: 3px; } a.menu:link { color: #0033FF; } a.menu:visited { color: #990099; } a.menu:hover { background-color:#CAE1FF; color: #FF0000; border: 1px solid #669999; } a.menu:active { background-color:#CAE1FF; color: #FF0000; } li { list-style-type: square; margin-left: 4px; padding: 1px; } ul.verweis { background-color:#FFFFE0; border: 1px solid #C0C0C0; list-style-type: none; margin: 0px auto; } li.verweis { list-style-type: none; margin: 0px auto; text-align: left; padding: 2px; } Bis dann!
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
||||
Hallo,
danke für die Hilfe. Nur ist im Prizip mein Problem nicht das Menü an sich (wenn es alleine auf einer Seite steht ist es optimal ausgerichtet), sondern das sich das Menü nicht in mein schon bestehendes Layout einfügen lassen will, ohne das es das Layou verhaut (siehe Links). SPMan |
|
||||
Hallo!
Also ich bin jetzt ein keines Stückchen weiter. Ich habe die Liste selbst versucht zu positionieren. Im IE sieht es einigermaßen aus (wenn man in dem Zustand überhaupt davon reden kann), als ob es noch etwas werden könnte. Im Firefox und Opera dagen viel schlimmer. |
Sponsored Links |
|
|||
Hab auch grad gebastelt - nimm mal das hier:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> <!-- body{ background-color:#FFFFFF; } h1{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.4em; color:#2F6D28; } h2{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.01em; color:#000000; } h3{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.01em; color:#2F6D28; } /*==Beginn Seitenaufbau Deklaration==*/ #container { background-color:#FFFFFF; width:750px; height:auto; overflow:visible; margin:0px auto; padding:0px; text-align:left; } #menue { background-color:#FFFFFF; width: 160px; height:30px; float: left; display: block; margin: 0; padding: 0; } #title { width:590px; height:100px; background-color:#FFFFFF; float:left; margin:0; } #umenue { background-color:#FFFFFF; text-align:center; color:#2F6D28; width: 590px; height:40px; float:left; margin:0; padding:0; font-weight:bold; } #content { background-color:transparent; width:590px; height:250px; float: right; overflow:visible; margin:-5px; padding:0px; position:relative; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; z-index:1; } img.persien{ margin:0; padding:0; top:30px; left:100px; position:relative; } /*==Ende Seitenaufbau Deklaration==*/ /*==Beginn Menü Deklaration==*/ ul { list-style-type: none; margin:0; padding:0; } ul li { margin:0; padding:0; } .menu { display: block; border-right: 0px; border-top:#2F6D28 4px solid; margin-top: 3px; border-left: 0px; width:160px; border-bottom:#2F6D28 4px solid; line-height:38px; } a.menu:link { font-size: 33px; color:#2F6D28; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; text-decoration: none; } a.menu:visited { font-size: 33px; color:#2F6D28; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; text-decoration: none; } a.menu:hover { color:#FFFFFF; background-color:#2F6D28;; } a.menu:active { color:#FFFFFF; background-color:#2F6D28;; } /*==Ende Menü Deklaration==*/ /*==Beginn Footer Deklaration==*/ #footer { width:590px; height:48px; background-color: #FFFFFF; float:right; margin:0; position:relative; z-index:0; } img.galabau{ left:2px; position:relative; } img.impr{ bottom:23px; position:relative; } img.linie1{ bottom:31px; left:2px; position:relative; } img.linie2{ bottom:31px; left:-5px; position:relative; } img.xhtml{ bottom:29px; left:235px; position:relative; } img.css{ bottom:29px; left:250px; position:relative; } a.sitemap { position:relative; right:167px; bottom:35px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-decoration:none; color:#2F6D28; } a.stand { position:relative; right:217px; bottom:20px; color:#2F6D28; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-decoration:none; } /*==Ende Footer Deklaration==*/ /*==Beginn Untermenue Deklaration==*/ a.umenue { position:relative; color:#2F6D28; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; } a.umenue:link{ font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; color:#2F6D28; font-size:14px; } a.umenue:visited{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#2F6D28; font-size:14px; text-decoration:none; } a.umenue:hover{ background-color:#2F6D28; color : white; } a.umenue:active{ background-color:#2F6D28; color : white; } .umenueak{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-color:#2F6D28; color : white; } /*==Ende Untermenue Deklaration==*/ } --> </style> </head> <body> <div id="container"> <div id="menue"> [img]grafiken/logo/logo.gif[/img]</img> <ul>[*]Service[*]Leistungen[*]Portrait[*]Jobs[*]Kontakt[/list] </div> <div id="title">[img]grafiken/titel/titel.jpg[/img]</img></div> <div id="umenue">[img]grafiken/linien/liniegr.gif[/img]</img></div> <div id="content">[img]grafiken/content/start/persien.gif[/img]</img></div> <div id="footer">[img]grafiken/linien/liniegr.gif[/img]</img>[img]grafiken/impr/impr.gif[/img]</img> [img]grafiken/linien/liniegr.gif[/img]</img> [img]grafiken/impr/galabau.jpg[/img]</img> [img]grafiken/certificated/xhtml10.gif[/img]</img> [img]grafiken/certificated/css.GIF[/img]</img> Sitemap Stand: 22.07.2004 </div> </div> <map id="logo" name="logo"> <area shape="poly" coords="1,149,25,159,71,159,71,153,95,153,95,148,135,148,135,132,152,132,152,112,83,112,87,97,81,99,84,79,81,80,83,65,77,68,72,38,64,48,61,62,58,72,56,82,53,95,52,109,51,126,57,137,59,141,36,140,45,125,45,118,44,115,47,100,45,98,49,78,44,80,46,64,41,67,44,46,41,44,41,24,36,26,32,1,23,1,20,18,14,28,14,34,10,47,6,65,3,87,1,108,2,129,13,140,0,141" href="http://www.galabau-rottenbacher.de" alt="" /> </map> <map id="galabau" name="galabau"> <area shape="poly" target="_blank" coords="0,48,150,48,150,0,102,0,102,21,16,21,16,37,0,37" href="http://www.galabau-rps.de/" title="Mitglied im Landesverband Garten-, Landschafts- und Sportplatzbauinland-Pfalz und Saarland e. V. und langjähriger, anerkannter Ausbildungsbetrieb" alt="Mitglied im Landesverband Garten-, Landschafts- und Sportplatzbauinland-Pfalz und Saarland e. V. und langjähriger, anerkannter Ausbildungsbetrieb" /> </map> </body> </html> ul { list-style-type: none; margin:0; padding:0; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 22:12 |
DIV Höhe 100% | Daniel86 | CSS | 12 | 29.07.2011 13:40 |
Div auf maximale höhe | EvilMoe | CSS | 2 | 13.03.2009 14:48 |
div Positionierung bei Browsern | Ancient | CSS | 22 | 17.03.2005 01:49 |
excel liste mit reinem css; li oder div mit p? | b166-er | CSS | 4 | 14.03.2005 19:38 |