TABLE basing naar DIV

Tieske · 1 februari 2011

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 · 1 februari 2011

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

Tieske · 1 februari 2011

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 · 1 februari 2011

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 · 1 februari 2011

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 · 1 februari 2011

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 · 1 februari 2011

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.
Toon Meer

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 · 1 februari 2011

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 · 1 februari 2011

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 · 2 februari 2011

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.
Toon Meer

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 · 2 februari 2011

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 · 2 februari 2011

:slotje: op verzoek

DNS update Directadmin

Graag advies voor mijn website

Ik wil op afstand studeren, kennen jullie Tech?

PC probleem

Let op Vimexx klanten

wie kan mij helpen met Security aanscherpen voor nmijn website

Ik ben op zoek naar een goede hosting

App bouwer gezocht

Dating software

250 Nieuwe domeinnamen April 2024

Xenforo buckaroo plugin

TABLE basing naar DIV

Participate now!

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Het Belang van Standaardisatie

De Revolutionaire Rol van IT in Alzheimeronderzoek

Functioneel ontwerp

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

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

Delen