zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Liste in DIV

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.07.2004, 01:56
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard 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 ...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.07.2004, 02:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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.....
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.07.2004, 02:23
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

Zitat:
Zitat von terrikay
Warum definierst Du jeden Link einzeln mit einer Klasse?
Da ich später bei einem aktivierten(besuchten) Menüpunkt für jeden Menüpunkt eine andere Farbe habe. So kann ich dann einfach die jeweilige Klasse austasuchen.
Wenn ich nur eine "Oberklasse" habe, geht das mit den verschieden Farben für jeden Menüpunkt doch nicht wirklich einfach, oder?

Es ist aber ein schönes Tutorial.

Meinst Du, da ich so vorgegangen bin, zerreist es mir das Layout?

SPMan
Mit Zitat antworten
  #4 (permalink)  
Alt 28.07.2004, 02:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #5 (permalink)  
Alt 28.07.2004, 02:35
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 28.07.2004, 10:40
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

Guten Morgen alle zusammen.
Dann ich will ich mal hoffen, dass ich, evt. mit einiger Hilfe, eine gute Lösung finde.

Bis evt. später

SPMan
Mit Zitat antworten
  #7 (permalink)  
Alt 28.07.2004, 14:47
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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;
}
Probiere es doch mal!

Bis dann!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #8 (permalink)  
Alt 28.07.2004, 14:54
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 28.07.2004, 15:24
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.07.2004, 15:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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&auml;hriger, anerkannter Ausbildungsbetrieb" alt="Mitglied im Landesverband Garten-, Landschafts- und Sportplatzbauinland-Pfalz und Saarland e. V. und langj&auml;hriger, anerkannter Ausbildungsbetrieb" />
</map>

</body>
</html>
Dieser Teil ist wichtig - der fehlt bei Dir:

ul {
list-style-type: none;
margin:0;
padding:0;
}
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:09 Uhr.