webForumDet fria alternativet
Logga in / Bli medlem

css-meny istället för tabell-meny

HTML & CSSur HTML, XHTML & CSS

19 svar · 1 324 visningar · startad av CatZ

CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
Frågan#1

Jag har inte en susning, har kämpat som en galning med att försöka göra en listmeny som ser lika ut som min tabellmeny som jag har nu. Det går helt enkelt inte. CSS må vara den rätta lösningen men jag tycker det är mycket enklare med en tabell meny.

Kan någon hjälpa mig konvertera? Eller åtminstone försöka övertyga mig om varför i hela friden jag ska bry mig alls! :e

.menu {
	margin: 3px;
	background-color: #003366;
	border: 1px;
	border-color: #FFFFFF;
	border-style: solid;
	color: #FFFFFF; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
}

.menuOver {
	margin: 3px;
	background-color: #FFFFFF;
	border: 1px;
	border-color: #FFFFFF;
	border-style: solid;
	color: #003366; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;	
}

<!-- Ocksa hoppar vi till sjalva menyn nu da! -->

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td class="menu" 
			onMouseOver="this.className='menuOver'" 
			onMouseOut="this.className='menu'" 
			onClick="location='/default.asp'">
			Home
		</td>
		<td class="menu" 
			onMouseOver="this.className='menuOver'" 
			onMouseOut="this.className='menu'" 
			onClick="location='/screenshots.asp'">
			Screenshots
		</td>
		<td class="menu" 
			onMouseOver="this.className='menuOver'" 
			onMouseOut="this.className='menu'" 
			onClick="location='/purchase.asp'">
			Purchase
		</td>
		<td class="menu" 
			onMouseOver="this.className='menuOver'" 
			onMouseOut="this.className='menu'" 
			onClick="location='/support.asp'">
			Support
		</td>
		<td class="menu" 
			onMouseOver="this.className='menuOver'" 
			onMouseOut="this.className='menu'" 
			onClick="location='/about.asp'">
			About
		</td>
	</tr>
</table>
tantenMedlem sedan nov. 20051 596 inlägg
#2

Nu vet jag inte vad det är som du fastnade på. Om det är 100% på menyn så har vi då problemet med IE, men som ska fungera i IE7 tror jag ;)
Jag hade en meny liggande som påminner om din, är det vad du tänkte dig?

<ul id="menu">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two</a></li>
<li><a href="#nogo">Tab Three</a></li>
<li><a href="#nogo">Tab Four</a></li>
<li><a href="#nogo">Tab Five</a></li>
</ul>

#menu {
  display:table;
  padding:0; 
  margin:0 auto; 
  list-style-type:none;
  white-space:nowrap;
  width: 100%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.7em;
  float: left;
  }
#menu li {
  display:table-cell;
  float: left;
  }

#menu a {
  width:auto;
  display:block;
  padding:0.2em 6.0em;
  color:#fff; 
  background-color:#003366; 
  border:1px solid #fff; 
  text-decoration: none;
  text-align: center;
  }

#menu a:hover {
  color:#000; 
  background-color:#d4d4d4;
  }

Om du tar bort float:left i #menu blir den 100% i FF men då kommer den inte flytta sig under varandra på små skärmar. Om du tycker det är viktigt att användaren, speciellt funktionshindrade vid 640-skärmar, inte ska behöva scrolla sidledes...så ska du behålla floaten.
Men annars finns det nog något sätt att få den bli 100% i IE också, men hur vet jag inte nu.
Är fortfarande inte tillräckligt insatt i vad som händer med "fixatill-koder" när IE7 kommer.

InsiderMedlem sedan jan. 2000978 inlägg
#3

Här är ett exempel som funkar fast det är lite buggigt när man ändrar storleken på fönstret. testa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
 <head>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
	#nav {font:12px verdana,sans-serif;margin:0; padding:0;text-align:center;width:100%;background:white;}
	#nav li {list-style:none;width:19.99%;float:left;}
	#nav li a {float:left;background:#036;color:white;text-decoration:none;width:99.5%;line-height:1.2em;}
	#nav li a:hover {background:white;color:black;}
  </style>
  </head>
  <body>
	<ul id="nav">
		<li><a href="#">Testarmeny</a></li>
		<li><a href="#">Testarmeny</a></li>
		<li><a href="#">Testarmeny</a></li>
		<li><a href="#">Testarmeny</a></li>
		<li><a href="#">Testarmeny</a></li>
	</ul>
  </body>
</html>
CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#4

Tantens förslag blir ju det som ser mest ut som jag vill. Är säker på att det går att fixa till det så det blir precis med hjälp av javascript osv men helt ärligt är det verkligen en bättre lösning? Det känns som det där med css-menyerna är lite för kodarna som gitarrsolon är för gitarristerna dvs något sexuellt och krångligt som vanliga människor i regel inte bryr sig om.

Har en liten följdfråga. Ska försöka styra allt så mycket som möjligt med CSS givetvis men kan man ta bort cellspacing med hjälp av CSS? Det här är helt enkelt inte så snyggt!

tabellproblem.png
CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#5

Det måste ju gå att använda tabellen för enkelhetens skull men att ta bort alla onMouseOver osv och köra det med CSS istället. och ange a:hover istället? Då blir koden bra mycket mer semantisk eller vad de nu kallar det återkommer med lösningen på tabell+cell som länk i css ;)

CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#6

Perfa så långt. Tror inte det går att få lika snyggt om man gör en lista eftersom man får det där problemet med float. Men min meny ser fortfarande snygg ut och tar inte sådär himla mycket extra plats. Det mesta styrs ju från css och det är ju fortfarande länkar om man nu surfar med css mallar av eller har en pda eller så. Skulle dock bli evigt tacksam om någon kunde berätta hur man stänger av cellspacing i css?

<table id="menu" cellspacing="0">
	<tr>
		<td><a href="/default.asp">Home</a></td>
		<td><a href="/default.asp">Home</a></td>
		<td><a href="/default.asp">Home</a></td>
		<td><a href="/default.asp">Home</a></td>
		<td><a href="/default.asp">Home</a></td>
	</tr>
</table>

CSS filen ser ut som följer, har inte kollat om det går att komprimera den mer men har ni några tips eller sådär på hur den blir bättre så shoot!!

#menu {
	width: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: center;
}

#menu td {
	width: 20%;
	border: 1px solid #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#menu a {
	display: block;
	padding: 3px;
	width: auto;
	color: #fff;
	background-color: #036;
}
#menu a:hover {
	color: #036; 
	background-color: #fff;
}

Och det färdiga resultatet blir som på bilden som medföljer, åtminstone i ie7 och ff 1.5.

menu.png
tantenMedlem sedan nov. 20051 596 inlägg
#7

margin:0;

CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#8

Tack tanten, har redan ändrat det, hade massvis med none av none dum anledning :P

tantenMedlem sedan nov. 20051 596 inlägg
#9

Har lite svårt att se liknelsen med gitaristen.
Använder man saker till vad de är gjorda för så är de väl varken speciellt sexuella eller krångliga.
Den dagen då man upptäckte att man kunde använda tabeller till design så var det förmodligen både upphetsande, krångligt och... man fick program som kunde hjälpa till att rita ut tabellerna, stycka sönder bilder och...
gitaristen började slå sönder gitarrer mot högtalare för att få extraljudet när den splittrades. Om man nu ska göra någon liknelse... :p ;)
Jag tycker man ska använda det man tycker är bäst. Har man layouter som är byggda på att varenda pixel ska stämma så är förmodligen tabeller mest exakta i olika browsers. Vill man ha mycket srörre frihet så passar css bäst.
Den lilla bilden du visade är en typisk tabell... ;)
Förslag på kod:

<table summary="Denna tabell visar priser för.......">
<caption>Priser för ?</caption>
<thead><tr>
<th colspan="2">
          Pricing</th>
          </tr></thead>
<tbody>
<tr><td scope="row">10 users</td>
          <td scope="row">$1995</td>
          </tr>
	<tr>        
          <td scope="row">20 users</td>
          <td scope="row">$3595</td>
          </tr>	</tbody></table>

och css

table{border:#F00 1px solid; border-collapse:collapse; width: auto;}
	caption{font-size: 0.7em; color: #000;}
	th{background-color: #F00;	color: #000; border: #000 1px solid;border-collapse: collapse;	font: bold 0.8em Arial,Helvetica,sans-serif; padding:0; text-align: center;}
	td{background: #FEFF84;	border: #F00 1px solid;	border-collapse: collapse;	color: #000; font: 0.7em Arial,Helvetica,sans-serif; text-align: center;}

För att den ska vara vad den är till för :) här helt utan padding och margin...
Och använder du tabeller till design ska summery vara design och sedan bara vanligt med tr och td, utan scope och sånt.

CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#10

tanten du verkar vara en klippa pa sant har! Vad e summary och scope? Jag maste visst lasa pa lite om det :e

CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#11

Display:table, table-cell löser ju alla problem! :D

Troxys avatarTroxyMedlem sedan mars 20041 505 inlägg
#12

CatZ, tyvärr så fungerar inte dessa egenskaper i IE, inte heller i kommande IE7.

CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#13

Det fungerar toppen i både firefox och IE7 för mig här. Så jag vet inte riktigt vad du yrar om Troxy :)

J.N.s avatarJ.N.Medlem sedan apr. 20031 660 inlägg
#14

HEJ!

CatZ skrev:

tanten du verkar vara en klippa pa sant har! Vad e summary och scope? Jag maste visst lasa pa lite om det :e

#1: Håller med!

#2: Summary brukar jag använda, scope vet jag ej vad det är, men jag har sett det.

DevGuru skrev:

The summary attribute is used with non-visual media such as braille and speech to provide information about a table.
http://www.devguru.com/Technologies/html/quickref/html_table.html

#3: Har du kanske gjort sedan inlägget, men eftersom du drar upp tråden, svarar jag.

zcorpanMedlem sedan dec. 20042 245 inlägg
#15

CatZ skrev:

Det fungerar toppen i både firefox och IE7 för mig här. Så jag vet inte riktigt vad du yrar om Troxy :)

IE7 saknar stöd för display:table och display:table-*. Men om du har ett fungerande exempel får du gärna visa hur. :)

zcorpanMedlem sedan dec. 20042 245 inlägg
#16

J.N. skrev:

scope vet jag ej vad det är, men jag har sett det.

scope="" kan användas på TH-element för att ange för vilka celler den är rubrik för -- för raden, kolumnen, radgruppen eller kolumngruppen. Det kan också användas för TD-element som fungerar på samma sätt samt indikerar att cellen är både datacell och tabellrubrik.

CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#17

Jaja jag har fått rätt mycket hjälp och gratis så jag delar med mig av den här koden. :e Det är en enkel UL meny som är helt styrd av CSS och den ser EXAKT lika dan ut i både IE7 och Mozilla. Dessutom är det en bra mycket enklare variant att förstå sig på.

#menu {
	display: table;
	width: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: center;
	list-style: outside none none;
}

#menu li {
	display: table-cell;
	width: 20%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	float: left;
}
#menu a {
	display: block;
	padding: 2px;
	margin: 1px;
	width: auto;
	color: #666;
	border-style: solid;
	border-width: 0 0 1px;
	border-color: #666;
}
#menu a:focus {
	color: #000;
	border-style: dashed;
	border-width: 0 1px 1px;
	border-color: #000;
}
#menu a:hover, a:active {
	color: #000;
	border-style: dashed;
	border-width: 0 1px 1px;
	border-color: #000;
}

Jag har försökt i många många timmar, dagar, veckor innan jag slutligen hittade det här lilla sättet att ha menyn på. tar ni bort display så ser den absolut inte lika dan ut i IE och FF.

Håll till godo!

zcorpanMedlem sedan dec. 20042 245 inlägg
#18

#menu li {
display: table-cell;
width: 20%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
float: left;
}

Det här är intressant. När man floatar en "table-cell" får 'display' det beräknade värdet "block". Så det torde bli exakt samma resultat om du använder display:block här istället. (Tar du bort deklarationen får 'display' förmodligen det beräknade värdet "list-item".)

CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#19

zcorpan skrev:

Det här är intressant. När man floatar en "table-cell" får 'display' det beräknade värdet "block". Så det torde bli exakt samma resultat om du använder display:block här istället. (Tar du bort deklarationen får 'display' förmodligen det beräknade värdet "list-item".)

Om jag gör som du säger så täcker inte <a> hela taggen. Dvs det ser ut som på bifogad bild i IE7

Du kan säkert lista ut hur det ska se ut och SER ut om jag gör så som min bifogade kod säger åt webläsarna att göra. Skulle vara tacksam om någon kunde kolla hur det ser ut i föregående webläsare. IE6

Ursäkta Zcorpan nu fattar jag vad du menar. Ja det fungerar om jag har display: block; på både li och a ;)

fel meny.png
CatZs avatarCatZMedlem sedan jan. 20022 440 inlägg
#20

Däremot tar jag bort display: table; från #table så hamnar allting till höger om tabellen istället för under.

147 ms totalt · 3 externa anrop · v20260731065814-full.b746b907
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
143 ms — hämta tråd, inlägg och bilagor (db)