Seite 1 von 1

Menue / LIste, statt untereinander nebeneinander

Verfasst: 13.04.2009, 18:02
von BlueMonday
Ich schaffs einfach nicht die Links nebeneinander zu setzten.
Im Mozilla sieht man gar nichts mehr, im IE ist die Liste noch da, aber nur der Hintergrund hat sich verbreitert.

Ich weiss nich was da verkehrt sein soll.

Die Seite hat noch keine Domain, so hab ich beides gezippt und hier eingehängt, wo mans entpackt sollte egal sein.



Code: Alles auswählen

	 		
      body
		{ 
		position:absolute;			
		}

		html, body
		{ 
			top:0; left:0; right:0;
			min-height:100%;
			background:#0000DD;
			margin:0;
			padding:0;
			width:100%;
		}
		
		#headerCont 
		{
			position:fixed;
			top:0; left:0; right:0;
			text-align:center;
			margin:0;			
			height:3em;
			z-index:3;			
		}
		
		#header
		{
			position:absolute;
			top:0; left:0; right:0; bottom:0;
			height:100%;
			background:#0000DD;
			z-index:3;
			margin:0;
			padding:0.2em;
			FONT-FAMILY: Arial, Tahoma, 'Sans-serif'
			font-size:1.5em;
			color: #44565C;
		}


		a.menu{	display:block		
			top:1.5em;
			left:1.6em;
			height:1.6em;			
			width:52em;
			text-decoration: none;			
			background-color:#ffffff;			
			z-index:3 }	
		

			a.menu:link    { color:#00f; background-color:ffffff; }
			a.menu:visited { color:#00f; background-color:ffffff; }
			a.menu:hover   { color:#ff0; background-color:#00f; }
			a.menu:active  { color:#ff0; background-color:#a03; }	

		
		
		#content
		{
			margin:0;
			padding-top:4.85em;
			padding-left:3.0em;
			padding-bottom:9em;
			width:45em;
			z-index:2;			
			color: #0000DD;
						
		} 	
		
		#footerCont
		{
			position:fixed;
			bottom:0; left:0; right:0;
			text-align:center;
			margin:0;
			height:3em;
			z-index:3;
		}
		
		#footer 
		{
		    	position:absolute;
		    	top:0; left:0; right:0; bottom:0;
		    	height:100%;
		    	background:#0000DD;		    
		    	FONT-FAMILY: Arial, Tahoma, 'Sans-serif'
			font-size:0.8em;
			color:#000000;
			z-index:3;
		}
		
		/* Nun für den MSIE */
		* html, * html body 
		{
			overflow:hidden;
			bottom:0;
			height:100%;
		}
		
		* html #header_container, * html #footer_container
		{
			position:absolute;
			width:100%;
			padding-right:16px;
		}
		
		* html #menu
		{
			position:absolute;
		}
		
		* html #header,* html #footer
		{
			height:100%;
			position:static;
		}

		* html #content 
		{
			position:absolute;
			top:0; bottom:0; left:0; right:0;
			height:100%;
			width:100%;
			overflow:auto;
			margin:0;			
		}

ENDE CSS

Code: Alles auswählen

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>TestListe</title>

<link rel="stylesheet" type="text/css" href="CSSFormate.css">
		

	
</head>

<body>
	
	<div id="headerCont">
			
		<h1 id="header">OBEN</h1>
	
	</div>	

	

	
	
	<div class="menu">
			<a class="menu" href="index.htm">Home</a>
			<a class="menu" href="extras/index.htm">Extras</a>
			<a class="menu" href="links/index.htm">Links</a>
			<a class="menu" href="mailto&#58;name@domain.de">E-Mail</a>
	</div>


<div id="content">
		



<table border="0" width="830" height="75"  cellspacing="0" cellpadding="0">       
        
      <colgroup>   
        <col width="220">
        <col width="610">
        <col width="10">
     </colgroup>

    <tr>      
      <td bgcolor="#00D500"></td>
      <td bgcolor="#00D500">MITTE</td>
      <td bgcolor="#00D500"></td>
    </tr>    
          
</table>

</div>
	
<div id="footerCont">
	<div id="footer">
			<br><b>UNTEN</b>

	
	</div>
	</div>




</body>
</html>

Verfasst:
von

Verfasst: 13.04.2009, 19:25
von TBT
mach eine Liste mit ul und li aus dem Menü div, und floate die li's

Verfasst: 13.04.2009, 21:28
von Sensei
TBT hat geschrieben:mach eine Liste mit ul und li aus dem Menü div, und floate die li's
hatte mich schon gewundert warum ich in dem Code keine Liste gesehen habe :D

kannst du ul in den meisten Fällen auch mit floaten, musst natürlich selber wissen, ob sich das auf dein design eventuell doch auswirken könnte.

Verfasst:
von

Re: Menue / LIste, statt untereinander nebeneinander

Verfasst: 13.04.2009, 22:01
von BlueMonday
Mit CSS HTML hab ich nicht so viel zu tun.

Was "li" angeht sowas kenn ich z.B. so

Code: Alles auswählen

<li><a class="menu" href="index.htm">Home</a></li>
			<li><a class="menu" href="extras/index.htm">Extras</a></li>
			<li><a class="menu" href="links/index.htm">Links</a></li>
			<li><a class="menu" href="mailto&#58;name@domain.de">E-Mail</a></li>
Wo es im CSS Code gesetzt werden kann, weiss ich nicht.
ICh habe Varianten, in denen es verwendet wird, aber eine horizontale Liste liess sich damit nicht machen.

Verfasst: 13.04.2009, 22:07
von BlueMonday
Ich nochmal, hab im CSS Code einfach Li statt menu, schon gehts.
Wär aber trotzdem froh, wenn einer von euch sich nochmal kurz meldet

Beim Googln hatte ich mit li nähmlich nichts gefunden, nur diese a.menu

so siehts jetzt so aus:

Code: Alles auswählen

<div class="li">
			<a class="menu" href="index.htm">Home</a>
			<a class="menu" href="extras/index.htm">Extras</a>
			<a class="menu" href="links/index.htm">Links</a>
			<a class="menu" href="mailto&#58;name@domain.de">E-Mail</a>
	</div>


CSS

Code: Alles auswählen

a.li&#123;	display&#58;block		
			top&#58;1.5em;
			left&#58;1.6em;
			height&#58;1.6em;			
			width&#58;52em;
			text-decoration&#58; none;			
			background-color&#58;#ffffff;			
			z-index&#58;3 &#125;

		
		

			a.li&#58;link    &#123; color&#58;#00f; background-color&#58;ffffff; &#125;
			a.li&#58;visited &#123; color&#58;#00f; background-color&#58;ffffff; &#125;
			a.li&#58;hover   &#123; color&#58;#ff0; background-color&#58;#00f; &#125;
			a.li&#58;active  &#123; color&#58;#ff0; background-color&#58;#a03; &#125;	

Verfasst: 14.04.2009, 08:32
von Nullpointer
wenn du wirklich was lernen willst, schau dir diese seite an:
https://www.cssplay.co.uk/

(bei verwendung des codes die zugehörige lizenz beachten)

Verfasst: 14.04.2009, 20:08
von BlueMonday
Oh ja, ich will das ganz doll viel lernen!
Und nu, stehst du mir mit Rat und Tat zur Seite, ja?

Is immer dieselbe Grütze, je tiefer das Niveau, der jeweiligen Sprache, desto grösser die Wahrscheinlichkeit solche Typen wie dich anzutrefen, die so richtig am Knopf drehen.

Mir fällt altkanzler Schmidt ein:" Geheimdienste sind Männer, denen viel abverlangt wird, denen aber keine Annerkennung Zuteil wird, denn sie müssen ja geheim bleiben. Das deformiert die Seele".

Ja, lieber Nullp, hat die Welt immer noch nicht begriffen, dass HTML/CSS was ganz doll Schwieriges is... und was man da alles wissen muss..

Noch n'bischen durchhalten, wird schon

Verfasst: 15.04.2009, 00:16
von e-fee
Wie wäre es beispielsweise damit, das display:block durch display:inline zu ersetzen, anstatt als bloody Newbie hier im Forum direkt mal verbal in die Scheiße zu greifen?
Denn mit Block-Elementen iss nich viel gebacken mit floaten ... wobei ich ja immer noch kein float in Deinem Code gesehen habe, nachdem das hier jemand erwähnt hat.
Nun gut, die Dinger stehen jetzt einfach deshalb nebeneinander, weil die Eigenschaft display:block jetzt zum umgebenden div gehört, die a-Elemente aber von Natur aus inline-Elemente sind. Das war aber jetzt 'n reiner Zufallstreffer und nicht die mit "li" gemeinte Lösung! Wobei vermutlich die ganze restliche Formatierung der Links futsch ist, da es ein a.li im eigentlichen Dokument ja gar nicht mehr gibt.

Also entweder du setzt dich wenigstens mal ein bisschen mit den CSS-Grundlagen auseinander (scheint ja reinstes Copy&Paste zu sein), ich kann da nichts Verwerfliches am Vorschlag von Nullpointer erkennen, oder Du stehst beim nächsten Problem wieder hier und stellst 'ne mehr oder minder doofe Frage.

HTML/CSS ist auch nichts Schwieriges, aber für Dich anscheinend ja schon, und je nachdem, was man umsetzen will, KANN es schon mal was kniffliger werden.

Verfasst: 15.04.2009, 06:13
von Network
Beispiele findest du hier
https://css.maxdesign.com.au/listamatic ... ntal01.htm

Verfasst: 15.04.2009, 08:16
von Nullpointer
Network hat geschrieben:Beispiele findest du hier
https://css.maxdesign.com.au/listamatic ... ntal01.htm
ob seine deformierte seele das verdauen kann? :lol:

Verfasst: 15.04.2009, 12:05
von heino
BlueMonday hat geschrieben:Oh ja, ich will das ganz doll viel lernen!
Und nu, stehst du mir mit Rat und Tat zur Seite, ja?

Is immer dieselbe Grütze, je tiefer das Niveau, der jeweiligen Sprache, desto grösser die Wahrscheinlichkeit solche Typen wie dich anzutrefen, die so richtig am Knopf drehen.

Mir fällt altkanzler Schmidt ein:" Geheimdienste sind Männer, denen viel abverlangt wird, denen aber keine Annerkennung Zuteil wird, denn sie müssen ja geheim bleiben. Das deformiert die Seele".

Ja, lieber Nullp, hat die Welt immer noch nicht begriffen, dass HTML/CSS was ganz doll Schwieriges is... und was man da alles wissen muss..

Noch n'bischen durchhalten, wird schon
BlueMonday du solltest dich bei einem HTML oder CSS Forum registrieren, damit du dich mit Leuten deines Niveaus austauschen kannst.