TABLE basing naar DIV

Tieske

Script/programmeertaal:
HTML, CSS

Probleem (duidelijke uitleg vereist):
Ik ben bezig geweest met een nieuwe portfolio layout in photoshop,
Nu heb ik deze in photoshop gesliced en ook door photoshop laten basen.
Het probleem is dat photoshop dit automatisch in html doet, en alle 'achtergronden' voor de 'cels' er als afbeelding inzet.
Nu zou ik graag mijn layout ombouwen naar een layout opgezet in 'divs'.
Buiten het feit dat ik hier altijd ruzie mee heb, en ik er altijd halverwege mee ophoudt.
Wil ik het nu een keer wel toepassen, afmaken en gebruiken.

Maar mijn vraag is nu dan dus ook. Hoe kan ik dit het beste doen.
En waar moet ik speciaal op letten?

Code:
Hierbij gevoegd een stukje code zoals Photoshop deze opzet (1 tr)
Indien meer code gewenst laat dit even weten via een PB dan zal ik het topic editen.

PHP

<table id="Table_01" width="1225" height="756" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="22">
			<img src="images/Portfolio_01.png" width="1224" height="43" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="43" alt=""></td>
	</tr>
	<tr>
		<td rowspan="8">
			<img src="images/Portfolio_02.png" width="39" height="712" alt=""></td>
		<td colspan="3" rowspan="4">
			<img src="images/Portfolio_03.png" width="238" height="103" alt=""></td>
		<td colspan="18">
			<img src="images/Portfolio_04.png" width="947" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>

Toon Meer

Overige informatie:
Ik heb nagenoeg geen ervaring met divs, en de ervaring die ik ermee heb was niet goed.
Kwam er nooit aan uit, divs die niet op de juiste plaats verschijnen etc na het aanpassen van een stuk code.
Maar omdat ik in het verleden van allerlei kanten heb gehoord dat dit beter zou zijn.
Wil ik graag leren werken met divs en hier eindelijk 'vrienden mee worden.'

Tim

Begin al met niet de photoshop HTML te gebruiken maar vanuit niks... Dat is beter dan de photoshop HTML.

Tieske

Okay dat is dan al een bruikbare tip,
Maar hoe dien ik dan te beginnen met mijn slicing om te zetten in een DIV?
aangezien ik hier zelf echt totaal geen ervaring mee heb.

Heb tot op heden de layouts aangeleverd gekregen, en hier kleine dingen in veranderd.
Of gekocht/gratis templates gebruikt, en hier vervolgens het content gedeelte van ingevuld zonder echt de layout aan te passen.

Tim

Citaat van Tieske

Okay dat is dan al een bruikbare tip,
Maar hoe dien ik dan te beginnen met mijn slicing om te zetten in een DIV?
aangezien ik hier zelf echt totaal geen ervaring mee heb.
Heb tot op heden de layouts aangeleverd gekregen, en hier kleine dingen in veranderd.
Of gekocht/gratis templates gebruikt, en hier vervolgens het content gedeelte van ingevuld zonder echt de layout aan te passen.

Ik ben zelf ook zeer slecht in basing, daarom laat ik het doen.
Maar een tip zover ik zelf weet:

En in een menu of wat dan ook maak je weer divs voor andere dingen die je erin wilt.

J.Rijdes

Verder heb ik sommige layouts gebased.

Ik had in het begin geen rekening gehouden met verschillende scherm resoluties.

Dus als je padding-left doet bijvoorbeeld. doe dan niet

PHP

padding-left:5px;

Maar doe met procenten dus bijvoorbeeld

PHP

padding-left:2%;

Zo heb je geen problemen dat het in elke scherm resolutie anders is.

thexerox

Bekijk eens wat broncodes van sites
De basis ziet er meestal zo uit:

PHP

<html>
<head>
<link href="stylesheet-min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header_wrap">Header</div>
<div class="content_wrap">
<div class="left_menu">Menu</div>
<div class="content">Content Tekst</div>
</div>
</div>
<div class="footer">Footertekst</div>
</body>
</html>

Toon Meer

De css zou er als volgt kunnen uitzien:

PHP

@charset "utf-8";
body {
	background-color:#E6E6E6;
	font-family: 'Trebuchet MS', verdana, arial;
	font-size: 12px;
	font-style: normal;
	height:100%;
}


html {
	height:100%;
}
.container {
        height:100%;
        width:100%;
}
.header_wrap {
	position:relative;
	width:1000px;
	height:160px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/logo.png);
	background-repeat:no-repeat;
}
.content_wrap {
	width:1000px;
	background-color:#FFF;
	padding-top:10px;
	margin-top:auto;
	margin-left:auto;
	margin-right:auto;
}
.left_menu {
        float:left;
	width:150px;
	height:25px;
	padding-left:15px;
	padding-right:15px;
	padding-top:8px;
}
.content {
       float:left;
       width: 820px;
       background-color:#000;
}
.footer {
	top:0;
	width:1020px;
	margin-left:auto;
	margin-right:auto;
	height:60px;
}

Toon Meer

RDMNL2010

Citaat van Kurene
Verder heb ik sommige layouts gebased.
Ik had in het begin geen rekening gehouden met verschillende scherm resoluties.
Dus als je padding-left doet bijvoorbeeld. doe dan niet
PHP
padding-left:5px;
Maar doe met procenten dus bijvoorbeeld
PHP
padding-left:2%;
Zo heb je geen problemen dat het in elke scherm resolutie anders is.

Dat hangt er meer vanaf hoe groot je layout is.. als je gewoon een standaardmaat met layouts aanhoud van 1024 px heb je hier dus weinig last van.

Patrick

als je nu toch begint met slicen zou ik beginnen zoals brokentrack het zegt gelijkt met html5 aan de gang, leer je gelijk de toekomst taal

Tim

Citaat van Patrick

als je nu toch begint met slicen zou ik beginnen zoals brokentrack het zegt gelijkt met html5 aan de gang, leer je gelijk de toekomst taal

HTML5 is nog geen standaard en wordt nog niet ondersteund in alle browsers. Net zoals CSS3.
Taal van de toekomst? Tegen de tijd dat HTML5 standaard is is er wel weer HTML6 ofzo. Ik raad je dus af om de functionele eisen in gewone HTML te doen en de niet functionele met HTML5.

Robin

Citaat van Kurene
Verder heb ik sommige layouts gebased.
Ik had in het begin geen rekening gehouden met verschillende scherm resoluties.
Dus als je padding-left doet bijvoorbeeld. doe dan niet
PHP
padding-left:5px;
Maar doe met procenten dus bijvoorbeeld
PHP
padding-left:2%;
Zo heb je geen problemen dat het in elke scherm resolutie anders is.

Dit hier kun je beter niet doen, vaak worden layouts gemaakt voor max 1000px en dan doe je zo'n layout centreren. % kunnen namelijk heel lelijk uitvallen op hele grote / hele kleine schermen.

Verder om het te leren kun je misschien ookk een gratis template downloaden waarvan de slicing en psd beschikbaar is. Doe je de psd slicen proberen en dan vergelijk je hem met de slicing wat was bijgeleverd. Dit is een hele leerzame manier, gewoon toepassen en proberen

Tieske

Iedereen Hartelijk dank voor alle reacties, misschien dat ik in de toekomst er toch nog aan toe kom.
Maar ik heb/maak me er toch weer op de makkelijke manier vanaf :$

Un goede vriend van mij kan dit namelijk wel allemaal snel/makkelijk,
En hij is bereid om de layout voor mij te basen.

(Topic kan dus opslot)

R.Jipping

:slotje: op verzoek

ICTscripters

Dé plek voor IT

Dé plek voor IT

Op zoek naar de legends

Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

Developer Gezocht

[FREE] WeFact Hosting module

Help testers nodig voor android app Urgent

Versio vervanger

Afspraken systeem met planbeperking

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

321 Nieuwe Domeinnamen December 2025

Meerdere mafia game template te koop

Van een pixelige afbeelding naar een strakke, moderne website

TABLE basing naar DIV

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2