Forum » Client-Side scripting » TABLE basing naar DIV
Tieske
MLormans.com
Berichten: 174
avatar
Offline Stuur privebericht
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.
Code | Selecteer Alles
minimaliseren
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>


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.'
Laatst gewijzigd door Tieske op 2011-02-01 19:37:23
01-02-2011 19:36
Dit topic is 264 keer bekeken door 37 verschillende leden
Reacties op: "TABLE basing naar DIV"
1 | 2 Volgende pagina
BrokenTrack
Informatica Student
Berichten: 1406
avatar
Offline Stuur privébericht
Begin al met niet de photoshop HTML te gebruiken maar vanuit niks... Dat is beter dan de photoshop HTML.
01-02-2011 19:38
Tieske
MLormans.com
Berichten: 174
avatar
Offline Stuur privébericht
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.
01-02-2011 19:40
BrokenTrack
Informatica Student
Berichten: 1406
avatar
Offline Stuur privébericht
Quote: 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:

<wrapper>
<header>
<header>
<left menu>
</left menu>
<content>
</content>
<right menu></right menu>
</footer>
</wrapper>

En in een menu of wat dan ook maak je weer divs voor andere dingen die je erin wilt.
01-02-2011 19:43
Kurene
Berichten: 830
avatar
Offline Stuur privébericht
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
Code | Selecteer Alles
minimaliseren
1
padding-left:5px;


Maar doe met procenten dus bijvoorbeeld
Code | Selecteer Alles
minimaliseren
1
padding-left:2%;


Zo heb je geen problemen dat het in elke scherm resolutie anders is.
01-02-2011 19:57
thexerox
thexeroxprojects.be
Berichten: 352
avatar
Offline Stuur privébericht
Bekijk eens wat broncodes van sites
De basis ziet er meestal zo uit:
Code | Selecteer Alles
minimaliseren
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>


De css zou er als volgt kunnen uitzien:

Code | Selecteer Alles
minimaliseren
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@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;
}
01-02-2011 19:57
RDMNL2010
webbasing.com
Berichten: 593
avatar
Offline Stuur privébericht
Quote: 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

Code | Selecteer Alles
minimaliseren
1
padding-left:5px;


Maar doe met procenten dus bijvoorbeeld
Code | Selecteer Alles
minimaliseren
1
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.
01-02-2011 20:25
Patrick
What else?
Berichten: 1180
avatar
Online Stuur privébericht
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
01-02-2011 23:01
BrokenTrack
Informatica Student
Berichten: 1406
avatar
Offline Stuur privébericht
Quote: 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.
01-02-2011 23:34
Robin
Berichten: 2177
avatar
Offline Stuur privébericht
Quote: 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

Code | Selecteer Alles
minimaliseren
1
padding-left:5px;


Maar doe met procenten dus bijvoorbeeld
Code | Selecteer Alles
minimaliseren
1
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
02-02-2011 08:02
Tieske
MLormans.com
Berichten: 174
avatar
Offline Stuur privébericht
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)
02-02-2011 08:52
Reageer op: "TABLE basing naar DIV"
1 | 2 Volgende pagina
Je kan niet reageren omdat je niet bent ingelogd. Inloggen of Aanmelden