Van <td> naar <div>

Door Stef ter Braak op 12-07-2010 09:58

2.733 views

Beste PHP Helpers,

Ik heb een template gemaakt en gesliced.. en gesaved voor web&devices. als ik deze nu open in Dreamweaver staat alles in <td> en ik kan beter met <div> werken (proffesioneler) is mij verteld.
Weet iemand hoe ik alles inm div kan krijgen in plaats van tabellen?

Groeten,

Stef

www JdeRuijterNL

12-07-2010 10:01 gewijzigd op 12-07-2010 10:03

JE zou allereerst alle tabellen moeten verwijderen en dan de divjes moeten schrijven om de content heen.

Verder kun je met CSS je divjes een stijl geven.

<div id"div1">

CSS:

#div1 {
background: #333;
}

Raad je wel aan om je te verdiepen in HTML en CSS voordat je de fout begaat om je td's/tr's in te wisselen voor DIV's

Niels K

12-07-2010 14:48

"als ik deze nu open in Dreamweaver ....."

Je kunt beter zelf opnieuw beginnen. Hetgene wat dreamweaver doet is niet altijd volgens de regels. Wat ik gelezen heb met CS5 is dat het wel in divjes wordt opgedeeld.

Onbekende gebruiker

12-07-2010 15:44

Als het met photoshop is gesliced staat er normaal ergens een optie .. die kiest voor tabellen of div's

Stef ter Braak

13-07-2010 09:38

Klopt! er is een functie in photoshop waarmee je div kun krijgen maar dan komt ook de CSS boven aan de zelfde pagina in dreamweaver..


<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (contact.psd) -->
<style type="text/css">
<!--

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
}

#contact-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:25px;
}

#contact-02_ {
	position:absolute;
	left:0px;
	top:25px;
	width:29px;
	height:743px;
}

#contact-03_ {
	position:absolute;
	left:29px;
	top:25px;
	width:197px;
	height:61px;
}

#contact-04_ {
	position:absolute;
	left:226px;
	top:25px;
	width:4px;
	height:743px;
}

#contact-05_ {
	position:absolute;
	left:230px;
	top:25px;
	width:197px;
	height:61px;
}

#contact-06_ {
	position:absolute;
	left:427px;
	top:25px;
	width:4px;
	height:92px;
}

#contact-07_ {
	position:absolute;
	left:431px;
	top:25px;
	width:193px;
	height:61px;
}

#contact-08_ {
	position:absolute;
	left:624px;
	top:25px;
	width:4px;
	height:92px;
}

#contact-09_ {
	position:absolute;
	left:628px;
	top:25px;
	width:193px;
	height:61px;
}

#contact-10_ {
	position:absolute;
	left:821px;
	top:25px;
	width:4px;
	height:92px;
}

#contact-11_ {
	position:absolute;
	left:825px;
	top:25px;
	width:167px;
	height:61px;
}

#contact-12_ {
	position:absolute;
	left:992px;
	top:25px;
	width:32px;
	height:743px;
}

#contact-13_ {
	position:absolute;
	left:29px;
	top:86px;
	width:197px;
	height:123px;
}

#contact-14_ {
	position:absolute;
	left:230px;
	top:86px;
	width:197px;
	height:31px;
}

#contact-15_ {
	position:absolute;
	left:431px;
	top:86px;
	width:193px;
	height:31px;
}

#contact-16_ {
	position:absolute;
	left:628px;
	top:86px;
	width:193px;
	height:31px;
}

#contact-17_ {
	position:absolute;
	left:825px;
	top:86px;
	width:167px;
	height:31px;
}

#contact-18_ {
	position:absolute;
	left:230px;
	top:117px;
	width:53px;
	height:651px;
}

#contact-19_ {
	position:absolute;
	left:283px;
	top:117px;
	width:697px;
	height:44px;
}

#contact-20_ {
	position:absolute;
	left:980px;
	top:117px;
	width:12px;
	height:651px;
}

#contact-21_ {
	position:absolute;
	left:283px;
	top:161px;
	width:697px;
	height:48px;
}

#contact-22_ {
	position:absolute;
	left:29px;
	top:209px;
	width:9px;
	height:559px;
}

#contact-23_ {
	position:absolute;
	left:38px;
	top:209px;
	width:181px;
	height:397px;
}

#contact-24_ {
	position:absolute;
	left:219px;
	top:209px;
	width:7px;
	height:559px;
}

#contact-25_ {
	position:absolute;
	left:283px;
	top:209px;
	width:697px;
	height:397px;
}

#contact-26_ {
	position:absolute;
	left:38px;
	top:606px;
	width:181px;
	height:162px;
}

#contact-27_ {
	position:absolute;
	left:283px;
	top:606px;
	width:697px;
	height:162px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head> 
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (contact.psd) -->
<div id="Table_01">
	<div id="contact-01_">
		<img id="contact_01" src="images/contact_01.jpg" width="1024" height="25" alt="" />
	</div>
	<div id="contact-02_">
		<img id="contact_02" src="images/contact_02.jpg" width="29" height="743" alt="" />
	</div>
	<div id="contact-03_">
		<img id="contact_03" src="images/contact_03.jpg" width="197" height="61" alt="" />
	</div>
	<div id="contact-04_">
		<img id="contact_04" src="images/contact_04.jpg" width="4" height="743" alt="" />
	</div>
	<div id="contact-05_">
		<img id="contact_05" src="images/contact_05.jpg" width="197" height="61" alt="" />
	</div>
	<div id="contact-06_">
		<img id="contact_06" src="images/contact_06.jpg" width="4" height="92" alt="" />

Etc.

Maar ik wil graag een aparte(los van elkaar) style.css nu heb ik al geprobeerd het gewoon te knippen en te plakken in .css maar dat lukt niet:P

Groeten!

thomas de vries

13-07-2010 10:05

Dit kun je als volgt doen
je maakt met DW een nieuwe pagina daar plak je de styles in
en dan zet je onder je <titel>
en tussen de <head></head>
dit <link href="bestandsnaam.css" rel="stylesheet" type="text/css" />
Waar bestandsnaam staat dat wel veranderen naar het bestand wat je als css
gebruikt. meestal style.css

Stef ter Braak

13-07-2010 11:43

dit heb ik geprobeerd ik heb de css van wat ik liet zien geplakt in mijn style.css
maar dit werkt niet:(

niek s

13-07-2010 11:52

oke dus die style heet dan dus style.css
dan zet je dus tussen de <head> en </head>:

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

zoals thomas hierboven beschreef.

Verder: Hoe ziet je style.css er uit? Nee niet plakken! Ik wil alleen weten of je misschien de <style> en </style> tags er ook in hebt gezet o.i.d.

Cornel van der Heiden

13-07-2010 15:15

In principe zijn divs niet professioneler, maar gewoon beter! Je opmaak loopt niet meer via de oude manier, die veel browserfouten opleveren, maar via de nieuwe (DIV) manier, die 20x beter werkt.

Ook websites met tabellen kunnen er professioneel uitzien:-)

Cornel

Stef ter Braak

14-07-2010 10:20 gewijzigd op 14-07-2010 10:22

Oke dankje! voorkom je dan direct het probleem dat je bijvoorbeeld een andere weergave hebt in IE dan in firefox? :P

Dat heb ik vaak :P

p.s. heb de code goed geplaatst in index.php :P

ik wil de button tekst veranderen via css en ook direct een overlay:P maar werkt nog niet echt :p

Reageren

Inloggen om te reageren