tabllen maken met css menu

djeric · 7 jan 2007

http://www.helpmij.nl/forum/attachment.php?attachmentid=38158&stc=1&d=1168180954

hallo.

ik wil een tabel maken in "kladblok"

met het bijgeleverde figuur kun je zien hoe me tabel eruit moet komen te zien. de dikke zwarte lijnen zijn lijnen van me tabel border.

links op het plaatje staan 10 cellen. (stelt samen een menu voor)

1 zo cel is de volgende code:

<td align="center" width=120 // geeft de breedte van de cel weer
onmouseover="this.style.backgroundColor='#FFFFCC'" // achtergrondkleur bij mouse-over
onmouseout="this.style.backgroundColor='#CCFFCC'" // achtergrondkleur bij mouse-out
style="cursor:crosshair; // vorm van de cursor
border: 0px; border-style: solid; border-color: #000066; // breedte en kleur van de tabel
background-color:#FFFFFF" // achtergrondkleur waar menu mee begint
align="left"><a style="text-decoration: none; // positie tabel en decoratie ( underline , none e.d. )
color: 000000; font-weight: bold" // tekstkleur
HREF="http://www.alphamegahosting.com/2/nl/p-af=44806" target="_blank">Alphamega</a></td>

je ziet dus dat dit een simpele menu is. alleen dit alles moet dus in zo tabel komen te staan.

ok nu komt het.

hoe krijg ik het voorelkaar dat ik aan de hand van het bijgeleverde plaatje een tabel kan maken dat ik links een css menu kan plaatsen (zie code hierboven) en boven in beeld een kleine ruimte hebt over de overige gedeelte van me pagina? en in het midden (rechts/onder) een groot vak krijgt waarin ik alle webpagina's in laat openen???????????

het volgende code heb ik als vb staan maar dit is te klein.

<html>
<head>
<title>dj eric</title>
</head>

<body>

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>menu</TD>
<TD COLSPAN=2>hier komt het logo te staan</TD>
</TR>

<TR>
<TD>hier komen alle webpagina's te staan.</TD>
</TR>

</TABLE>

</body>

</html>

menu staat er maar 1x... moeten dus 10 van die losse cellen worden (met wat wit ruimte ertussen) en het logo ruimte moet breder.
en de ruimte voor de webpagina's moet over de rest van het vak worden gemaakt.

iemand ideeën??????

peter vazed · 7 jan 2007

Als je dit
css menu page
in google gooit kom je css menuutjes tegen.
Keuze genoeg,
een voorbeeld:
http://www.howtocreate.co.uk/tutorials/testMenu.html

peter vazed · 7 jan 2007

Even een voorbeeld voor je gemaakt:

PHP:

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

<html>

<head>
<title>(Type a title for your page here)</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

      BODY {
       margin: 0px 20px 0px 20px;
       font-family: verdana, arial, helvetica;
       background-image: url(layout/sfeerstrook/site_home.jpg);
       background-repeat: no-repeat;      
       font-size: 14px;
       font-color: #000000;
       color: #000066;
}
.info{
border: dotted 3px #000000;
padding:10px;
}
       </style>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}

.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/
background-color: #704968;
text-decoration:none;
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
}

</style>

</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

<!--  dit menu komt hiervandaan:
http://www.dynamicdrive.com/style/csslibrary/item/button-vertical-menu/
 -->

<table  width="95%" border="1" cellspacing="0" cellpadding="4" bgcolor="#dfdfdf" align="center">
	<tr>
		<!-- Row 1 Column 1 -->
		<td bgcolor="#c0c0c0" valign="top" rowspan="2" width="180"  >
			cel 1	<b>
				menu
			</b><br>
<ul class="buttonmenu">
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.cssdrive.com/">CSS Drive</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>		
</ul>
<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		</td>
		<!-- Row 1 Column 2 -->
		<td bgcolor="#c0c0c0" valign="top" >
			cel 2	logo<br>

 &nbsp; &nbsp; &nbsp; <img src="http://www.zeepoort.nl/hofman/gfx/grimbergen_blonde-tr.gif" alt="blond">

		</td>
	</tr>
	<tr>
		<!-- Row 2 Column 1 -->
	<!-- 	<td >
		
cel 	3 voor menu gebruik met rowspan
		
		</td> -->
		<!-- Row 2 Column 2 -->
		<td  valign="top" >
			cel 	4<br>
hier tekst
<br><br><br><br><br><br>
tekst
		</td>
	</tr>
</table>
<br>
<br>

<div class=" info" >Bovenste is met rowspan, werkt dus niet, zier er niet uit, logo en content zijn niet goed geplaatst.<br>
Dit komt door gebruik van rowspan en colspan.<br>
Krijg je dus ook nooit meer goed.<br>
Nooit meer doen.<br><br>
Afhankelijk van wat in de andere cellen staat zal het geheel er of goed of slecht uitzien.<br>
 </div>

<br>
Dit is beter: tabel in tabel.<br>
<br>
<table  width="95%" border="1" cellspacing="0" cellpadding="4" bgcolor="#dfdfdf">
	<tr>
		<!-- Row 1 Column 1 voor het menu-->
		<td  valign="top"  width="180"  >
			<b>
				cel 1 <br>
menu<br>
<br>
<ul class="buttonmenu">
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.cssdrive.com/">CSS Drive</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>		
</ul>
<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			</b>
		</td>
		<!-- Row 1 Column 2 voor logo en content-->
		<td  valign="top" >
			cel 	2<br>
<!-- nieuwe tabel logo en content -->
<table  width="95%" border="1" cellspacing="0" cellpadding="4" bgcolor="#dfdfdf" valign="top" >
	<tr>
		<!-- Row 1 Column 1 logo -->
		<td bgcolor="#c0c0c0" valign="top" >
			<b>
				cel 	1logo<br>
 &nbsp; &nbsp; &nbsp; <img src="http://www.zeepoort.nl/hofman/gfx/grimbergen_blonde-tr.gif" alt="blond">
			</b>
		</td>
	</tr>
	<tr>
		<!-- Row 2 Column 1 content-->
		<td  valign="top" >
			cel 	2 content<br>
<br>
<br>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
tekst
		</td>
	</tr>
</table>
<!-- einde tabel content -->

		</td>
	</tr>
</table>
<br>
<br>
<div class="info " >Het menu heeft één cel van tabel een, en het logo en de content hebben een eigen tabel gekregen. <br>
Die tabel zit dus in cel 2 van de eerste tabel.</div>
<br>
<br>
<br>

</body>

</html>

Kun je even mee stoeien.

djeric · 9 jan 2007

css plaatsing meerdere keren.

dit is dus duidelijk in frontapge gemaakt he...

het gaat me erom dat ik eigenlijk deze css menu wil plaatsen:

<td align="center" width=120 // geeft de breedte van de cel weer
onmouseover="this.style.backgroundColor='#FFFFCC'" // achtergrondkleur bij mouse-over
onmouseout="this.style.backgroundColor='#CCFFCC'" // achtergrondkleur bij mouse-out
style="cursor:crosshair; // vorm van de cursor
border: 0px; border-style: solid; border-color: #000066; // breedte en kleur van de tabel
background-color:#FFFFFF" // achtergrondkleur waar menu mee begint
align="left"><a style="text-decoration: none; // positie tabel en decoratie ( underline , none e.d. )
color: 000000; font-weight: bold" // tekstkleur
HREF="http://www.alphamegahosting.com/2/nl/p-af=44806" target="_blank">Alphamega</a></td>

die moet dan geplaatst worden in een tabel.

deze bovenstaande code = een cel.
zo heb ik 10 cellen. die onderelkaar staan in een tabel met wit ruimte ertussen

bij het bijgevoegde figuur zie je de blauwe vakjes. hier komt dus die css code. de zwarte lijnen moeten borderlijnen voorstellen van de tabel.

iemand sugestie hoe je zoiets plaatst?????

http://www.helpmij.nl/forum/attachment.php?attachmentid=38207&stc=1&d=1168302151

peter vazed · 9 jan 2007

Dat is toch niet zo moeilijk.

In de cel waar het menu moet komen een nieuwe tabel maken.
Tabel met aantal rijen gelijk het aantal linken.
In iedere cel de code zetten.

Klaar.

Overigens is dit dus geen CSS, doch een inline style.
Bij CSS wordt de code in een eigen file gezet, dus bij de link zelf komt alleen
maar een class="linken" toevoeging om het te laten werken.

Voordeel:
verander je wat in je losse css file, dan wordt heel de site in één keer aangepast.

djeric · 9 jan 2007

ik heb nu dit al gemaakt.

en ziet het al beter uit???? (moet nog wat kleuren aanpassen)

alleen wil in nu van de rest van de ruimte (rechts van dit menu) boven in beeld het logo laten komen. en daaronder alle pagina's in laten openen. hoe zorg ik ervoor dat die pagina's op dat stukje terecht komt??????????????????????????

<html dir="ltr">
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"><style type="text/css">
#menu ul, #menu ul li
{list-style-type: none;
display: inline;
padding: 0;
margin: 0;}
#menu {float: left; padding: 0; margin: 5px 0;
text-align:center;}
#menu a {display: block; padding: 5px;
margin: 10px; line-height: 2em; text-decoration: none; border: solid 1px;}
#menu a:hover
{color: #fff; background: #000;}
#menu {width: 10em;}
#menu a {width: 99.9%;}
</style>

<title>dj eric</title>

</head>

<body>

<div id="menu"><ul><li><a href="http://www.yourdjeric.nl">party pictures</a></li>
<li><a href="http://www.yourdjeric.nl">referenties</a></li>
<li><a href="http://www.yourdjeric.nl">boekingen</a></li>
<li><a href="http://www.yourdjeric.nl">biografie</a></li>
<li><a href="http://www.yourdjeric.nl">demos</a></li>
<li><a href="http://www.yourdjeric.nl">agenda</a></li>
<li><a href="http://www.yourdjeric.nl">links</a></li>
<li><a href="http://www.yourdjeric.nl">referenties</a></li>
<li><a href="http://www.yourdjeric.nl">gastenboek</a></li>
<li><a href="http://www.yourdjeric.nl">contact</a></li>

</ul></div>

</body>

</html>

peter vazed · 9 jan 2007

Zie bijlage.
Gemaakt met je menu en een logo en contentpart.

Gewoon hernoemen naar html.
Dan het contentdeel vervangen voor een andere pagina inhoud en opslaan als .
Wel eerst je linken maken,
en je was home vergeten, moet linken naar je index.html normaal gesproken.

Bekijk het wel in IE en FF, omdat het wel eens anders kan zijn.

tabllen maken met css menu

djeric

Gebruiker

Bijlagen

peter vazed

Meubilair

peter vazed

Meubilair

djeric

Gebruiker

Bijlagen

peter vazed

Meubilair

djeric

Gebruiker

peter vazed

Meubilair

Bijlagen

Nieuwste berichten

Wij waarderen jouw privacy