button links instellen.

Door Stef ter Braak op 09-07-2010 15:34

1.851 views

Beste PHPérs,

ik heb deze code:


	<tr>
		<td rowspan="12">
			<img src="images/index_03.gif" width="28" height="674" alt=""></td>
		<td colspan="3" background="images/index_04.gif"><a href="index.html">Home</a></td>
		<td rowspan="2">
			<img src="images/index_05.gif" width="4" height="81" alt=""></td>
		<td colspan="3" background="images/index_06.gif"><a href="tab2.html">Producten</a></td>
		<td rowspan="2">
			<img src="images/index_07.gif" width="4" height="81" alt=""></td>
		<td colspan="3" background="images/index_08.gif"><a href="tab3.html">Diensten</a></td>
		<td rowspan="2">
			<img src="images/index_09.gif" width="5" height="81" alt=""></td>
		<td colspan="2" background="images/index_10.gif"><a href="tab4.html">Links</a></td>
		<td rowspan="2">
			<img src="images/index_11.gif" width="4" height="81" alt=""></td>
		<td colspan="2" background="images/index_12.gif"><a href="contact.html">Contact</a></td>
		<td rowspan="12">
			<img src="images/index_13.gif" width="31" height="674" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="61" alt=""></td>
	</tr>

en wil in de .css de font, grootte, italic, etc. instellen
moet ik het dan tussen div zetten om het in 1 keer te doen voor alle button links/tekst?

en wat zet ik voor de tekst zodat ik het in .css kan aanpassen? en wat zet ik dan in .css

kom er niet uit kan iemand helpen?

Groeten,

Stef ter Braak

Michael -

09-07-2010 17:22 gewijzigd op 09-07-2010 17:23

Is het nodig dat je tables gebruikt? Anders zou je dit makkelijker met div icm css kunnen doen.
Over CSS : http://www.w3schools.com/css/

Hoe je font etc kunt gebruiken in css, kun je echt wel opzoeken.

<style type="text/css">
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : italic;
font-size : 12px;
}
</style>

Dit plaats je in de <head> van je site en gelden deze instellingen voor je hele site. Je kunt "body" veranderen in "table" om 't alleen voor tables te gebruiken. Je kunt 't ook in een div zetten zoals:

<style type="text/css">
#content {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : italic;
font-size : 12px;
}
</style>

<div id="content">
Nu gelden bovenstaande instellingen alleen in deze div.
</div>

Stef ter Braak

09-07-2010 17:38 gewijzigd op 09-07-2010 17:41

Beste Turmin bedankt voor je reactie!

Ik heb nu inderdaad al het text schuin op index door deze code:

<style type="text/css">
table { //table!!
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : italic;
font-size : 12px;
}
</style>

Hoe kan het dat ik dit niet in het style.css bestand kan doen?
(terwijl ik <link href="style.css" rel="stylesheet" type="text/css" /> heb geplaats onder head en de rest wel via .css gaat).

En hoe voorkom ik dat link tekst niet meer underlined is? van b.v. buttons.

Groetjes!

P.S. ik wil het liefst alles met div. doen in plaat van td. maar hoe kan ik dat krijgen als ik een template inlaad?

ik heb nu: (sorry voor de lange code)



<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" /> 
<link rel="shortcut icon" href="images/favicon.ico">
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (index.psd) -->
<table width="1025" height="769" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
	<tr>
		<td rowspan="14">
			<img src="images/index_01.gif" width="1" height="768" alt=""></td>
		<td colspan="19">
			<img src="images/index_02.gif" width="1023" height="25" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	
		<td rowspan="12">
			<img src="images/index_03.gif" width="28" height="674" alt=""></td>
		<td colspan="3" background="images/index_04.gif"><a href="index.html">Home</a></td>
		<td rowspan="2">
			<img src="images/index_05.gif" width="4" height="81" alt=""></td>
		<td colspan="3" background="images/index_06.gif"><a href="tab2.html">Producten</a></td>
		<td rowspan="2">
			<img src="images/index_07.gif" width="4" height="81" alt=""></td>
		<td colspan="3" background="images/index_08.gif"><a href="tab3.html">Diensten</a></td>
		<td rowspan="2">
			<img src="images/index_09.gif" width="5" height="81" alt=""></td>
		<td colspan="2" background="images/index_10.gif"><a href="tab4.html">Links</a></td>
		<td rowspan="2">
			<img src="images/index_11.gif" width="4" height="81" alt=""></td>
		<td colspan="2" background="images/index_12.gif"><a href="contact.html">Contact</a></td>
		<td rowspan="12">
			<img src="images/index_13.gif" width="31" height="674" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="61" alt=""></td>
		
	<tr>
		<td colspan="3">
			<img src="images/index_14.gif" width="197" height="20" alt=""></td>
		<td colspan="3">
			<img src="images/index_15.gif" width="197" height="20" alt=""></td>
		<td colspan="3">
			<img src="images/index_16.gif" width="193" height="20" alt=""></td>
		<td colspan="2">
			<img src="images/index_17.gif" width="192" height="20" alt=""></td>
		<td colspan="2">
			<img src="images/index_18.gif" width="168" height="20" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_19.gif" width="8" height="206" alt=""></td>
		<td colspan="8">
			<img src="images/index_20.gif" width="471" height="167" alt=""></td>
		<td rowspan="3">
			<img src="images/index_21.gif" width="9" height="214" alt=""></td>
		<td colspan="6">
			<img src="images/index_22.gif" width="465" height="167" alt=""></td>
		<td rowspan="6">
			<img src="images/index_23.gif" width="11" height="289" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="167" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/index_24.gif" width="471" height="39" alt=""></td>
		<td colspan="6" rowspan="2">
			<img src="images/index_25.gif" width="465" height="47" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="39" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3" bgcolor="#360A4B">&nbsp;</td>
		<td colspan="7">
			<img src="images/index_27.gif" width="359" height="8" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
  </tr>
	<tr>
	  <td colspan="4" rowspan="4">
			<img src="images/index_28.gif" width="128" height="82" alt=""></td>
		<td colspan="10" bgcolor="#260735">Welkom!</td>
		<td>
			<img src="images/spacer.gif" width="1" height="46" alt=""></td>
	</tr>
	<tr>
		<td colspan="10" rowspan="2">
			<img src="images/index_30.gif" width="705" height="29" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/index_31.gif" width="120" height="30" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/index_32.gif" width="448" height="7" alt=""></td>
		<td colspan="4" rowspan="3">
			<img src="images/index_33.gif" width="268" height="260" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
	  <td rowspan="3">
			<img src="images/index_34.gif" width="8" height="297" alt=""></td>
		<td colspan="4" bgcolor="#84539C">blab</td>
	  <td rowspan="3">
			<img src="images/index_36.gif" width="40" height="297" alt=""></td>
		<td colspan="7" bgcolor="#84539C">blablabla</td>
		<td>
			<img src="images/spacer.gif" width="1" height="243" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img src="images/index_38.gif" width="200" height="54" alt=""></td>
		<td colspan="7" rowspan="2">
			<img src="images/index_39.gif" width="448" height="54" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/index_40.gif" width="268" height="44" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="44" alt=""></td>
	</tr>
	<tr>
		<td colspan="19" bgcolor="#260735">&copy;&nbsp; Copyright 2010 Uw website/bedrijf. All Rights Reserved</td>
		<td>
			<img src="images/spacer.gif" width="1" height="69" alt=""></td>
  </tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="28" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="112" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="77" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="40" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="150" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="77" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="107" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="5" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="96" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="96" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="157" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Michael -

09-07-2010 17:47 gewijzigd op 09-07-2010 17:48

Stef, je kunt het volgende stukje gewoon in je style.css plaatsen (Geen // gebruiken in je style.css)

table { /*table!!*/
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : italic;
font-size : 12px;
}

"En hoe voorkom ik dat link tekst niet meer underlined is? van b.v. buttons."

Je mag best iets meer googlen hoor. Dit is allemaal makkelijk te vinden door bijvoorbeeld te zoeken op "a underline" of zo.

A {
text-decoration : underline;
}
A:hover {
text-decoration : underline;
}

De bovenste is voor alle links, en de onderste voor als je er over heen gaat.

Wat je template betreft, dan zou je je heel site opnieuw moeten maken in div's. Ik raad je eerst aan wat beter CSS te leren (Als je engels kunt, neem dan deze site door)

Stef ter Braak

09-07-2010 17:59 gewijzigd op 09-07-2010 18:02

Ik heb die site van te voren al doorgenomen ik heb de verkeerde vraag gesteld, sorry!
Ik kán het underlinen ook na hover.. maar bedoel juist de standaard underlining van een link weghalen (is lelijk). zeg maar UNunderline ik dacht het op false zetten!?

En over het in het CSS gebruiken, ik had niet begrepen dat je <style type="text/css"> weg moest laten in .css (ben een ongelovelijke noob) ik vond het al raar die doorverwijzing :P

ik heb ook je eerste link eens doorgelezen maar hoe kan ik td vervangen door div (ken div beter maar weet niet hoe ik het moet vervangen)

Groetjes en heeeel erg bedankt voor je lessen!

Stef

Michael -

09-07-2010 18:28

A {
text-decoration : none;
}
A:hover {
text-decoration : none;
}

Je kunt td niet eventjes veranderen in div. Je zou alle table/td/tr dingen weg moeten halen, en moeten kijken waar je je div's plaatst en hoe je dit weer op z'n plek gaat krijgen. Of terwijl, gewoon opnieuw maken zonder tables.

Reageren

Inloggen om te reageren