Alignment klopt niet - Softwareontwikkeling

dinsdag 9 juni 2009 10:18

Acties:

0 Henk 'm!

Topicstarter

Ik ben gisteren de hele dag bezig geweest met het volgende.
Een website waar ik aan werk bestaat uit negen stukken (menu als één stuk gerekend), hieronder even een plaatje.

Afbeeldingslocatie: http://www.djpdjp.nl/draaakje/indeling.jpg

Afbeeldingslocatie: http://www.djpdjp.nl/draaakje/indeling.jpg

Het gedeelte dat blauw omlijnd is wordt om de een of andere reden op de rode lijn pas gestart.
Ik heb ongeveer alles al geprobeerd (ja, ik zal vast verkeerd gekeken hebben

) en ben nu dus ten einde raad.

Ik heb geprobeerd om de tekst als image te plaatsen (yep, slecht voor de zoekmachines.. werkte ook niet), ik heb de absolute geprobeerd op elk stuk, werkt ook niet. Ik heb elk '1'tje veranderd naar '2', '3' etc. in de hoop dat dat zou werken.

Het stukje html (i.v.m. lopende domeinnaam aanvraag heb ik het zaakje geanonimiseerd om kaping te voorkomen);

HTML:

<html>
<head>
<title>x</title>

    <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1">
    
    <link href="style.css" rel="stylesheet" type="text/css">

</head>
<link href="styles.css" rel="stylesheet" type="text/css">
<center>
<body bgcolor="000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<table id="x-table" background="images/bgimg.jpg" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
    <tr>            
        <td rowspan="9" align="left" valign="top">
            <img src="images/header.png" width="570" height="280" alt=""></td>
        <td>
            <a href="#"
                onmouseover="window.status='x'; changeImages('menu1', 'images/men_1_on.jpg'); return true;"
                onmouseout="window.status=''; changeImages('menu1', 'images/men_1_off_op.jpg'); return true;"
                onmousedown="changeImages('menu1', 'images/men_1_on.jpg'); return true;"
                onmouseup="changeImages('menu1', 'images/men_1_on.jpg'); return true;">
                <img name="menu1" src="images/men_1_off_op.jpg" width="230" height="30" border="0" alt="x"></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="window.status='x'; changeImages('menu2', 'images/men_2_on.jpg'); return true;"
                onmouseout="window.status=''; changeImages('menu2', 'images/men_2_off.jpg'); return true;"
                onmousedown="changeImages('menu2', 'images/men_2_on.jpg'); return true;"
                onmouseup="changeImages('menu2', 'images/men_2_on.jpg'); return true;">
                <img name="menu2" src="images/men_2_off.jpg" width="230" height="30" border="0" alt="x"></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="window.status='x'; changeImages('menu3', 'images/men_3_on.jpg'); return true;"
                onmouseout="window.status=''; changeImages('menu3', 'images/men_3_off.jpg'); return true;"
                onmousedown="changeImages('menu3', 'images/men_3_on.jpg'); return true;"
                onmouseup="changeImages('menu3', 'images/men_3_on.jpg'); return true;">
                <img name="menu3" src="images/men_3_off.jpg" width="230" height="30" border="0" alt="x"></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="window.status='x'; changeImages('menu4', 'images/men_4_on.jpg'); return true;"
                onmouseout="window.status=''; changeImages('menu4', 'images/men_4_off.jpg'); return true;"
                onmousedown="changeImages('menu4', 'images/men_4_on.jpg'); return true;"
                onmouseup="changeImages('menu4', 'images/men_4_on.jpg'); return true;">
                <img name="menu4" src="images/men_4_off.jpg" width="230" height="30" border="0" alt="x"></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="window.status='x'; changeImages('menu5', 'images/men_5_on.jpg'); return true;"
                onmouseout="window.status=''; changeImages('menu5', 'images/men_5_off.jpg'); return true;"
                onmousedown="changeImages('menu5', 'images/men_5_on.jpg'); return true;"
                onmouseup="changeImages('menu5', 'images/men_5_on.jpg'); return true;">
                <img name="menu5" src="images/men_5_off.jpg" width="230" height="30" border="0" alt="x"></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="window.status='x'; changeImages('menu6', 'images/men_6_on.jpg'); return true;"
                onmouseout="window.status=''; changeImages('menu6', 'images/men_6_off.jpg'); return true;"
                onmousedown="changeImages('menu6', 'images/men_6_on.jpg'); return true;"
                onmouseup="changeImages('menu6', 'images/men_6_on.jpg'); return true;">
                <img name="menu6" src="images/men_6_off.jpg" width="230" height="30" border="0" alt="x"></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="window.status=''; changeImages('menu7', 'images/men_7_on.jpg'); return true;"
                onmouseout="window.status=''; changeImages('menu7', 'images/men_7_off.jpg'); return true;"
                onmousedown="changeImages('menu7', 'images/men_7_on.jpg'); return true;"
                onmouseup="changeImages('menu7', 'images/men_7_on.jpg'); return true;">
                <img name="menu7" src="images/men_7_off.jpg" width="230" height="30" border="0" alt="x"></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="window.status=x''; changeImages('menu8', 'images/men_8_on.jpg'); return true;"
                onmouseout="window.status=''; changeImages('menu8', 'images/men_8_off.jpg'); return true;"
                onmousedown="changeImages('menu8', 'images/men_8_on.jpg'); return true;"
                onmouseup="changeImages('menu8', 'images/men_8_on.jpg'); return true;">
                <img name="menu8" src="images/men_8_off.jpg" width="230" height="30" border="0" alt="x"></a></td>
    </tr>
    <tr>
        <td colspan="3">
        <img src="images/x.png" width="230" height="40" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/x.png" align="left" width="280" height="320" alt=""></td>
            <td colspan="2" align="left" valign="top" width="520" height="270" background="images/x.png"><p><span class="text1">kygsdfjhs sd fu sdf sdof osjd fjs dfgjs dfgkjb sdfg sfdg sdfg  dfg sdfg dfs g sdfg sdfg sdf g sdfg sdf gsdf gsd fg sdfg sdfg sdf g sdfg dsfg sdfg dfsg dfgs dfg dfg dfgs dgfs gdfs dfgs fgd fdg sd </span></p>
        </tr>
    <tr>
        <td colspan="1">
            <img src="images/fill.png" width="250" height="50"></td>
        <td colspan="1">
            <img src="images/fill.png" width="270" height="34">
            <a href="x" target="_blank"><img src="images/copyright.png" width="270" height="16" border="1" alt=""></a></td>
    </tr>
</table>
</body>
</center>
</html>

Post dan ook alleen relevante code

[ Voor 10% gewijzigd door BtM909 op 09-06-2009 12:06 ]

dinsdag 9 juni 2009 10:59

Acties:

0 Henk 'm!

H004

Niet zo raar ook: bij een tabel kunnen de kolommen per rij niet op andere plaats beginnen...

Wat je zou kunnen doen is het volgende:

HTML:

<table>
  <tr>
    <td colspan="2">Header</td>
    <td>Menu</td>
  </tr>
  <tr>
    <td>Img</td>
    <td colspan="2">Tekst</td>
  </tr>
<table>

Mooier is echter om met semantisch juiste elementen te gaan werken: divs, uls, p's etc... En vervang dan ook meteen alle javascript voor unobtrusive javascript...

Succes

dinsdag 9 juni 2009 11:03

Acties:

0 Henk 'm!

Nexz

Ten eerste: Waarom een table als layout

? Divjes ?

Ik zie in ieder geval al 1 ding in je code:

HTML:

    <tr>
        <td rowspan="2">
            <img src="images/x.png" align="left" width="280" height="320" alt=""></td>
            <td colspan="2" align="left" valign="top" width="520" height="270" background="images/x.png"><p><span class="text1">kygsdfjhs sd fu sdf sdof osjd fjs dfgjs dfgkjb sdfg sfdg sdfg  dfg sdfg dfs g sdfg sdfg sdf g sdfg sdf gsdf gsd fg sdfg sdfg sdf g sdfg dsfg sdfg dfsg dfgs dfg dfg dfgs dgfs gdfs dfgs fgd fdg sd </span></p>
        </tr>
    <tr>

Ik mis nog een </td>

De oplossing:
In je eerste TD een colspan=2 gebruiken. (Even snel met firebug gedaan, erg handig

)

dinsdag 9 juni 2009 11:06

Acties:

0 Henk 'm!

disjfa

Nexz schreef op dinsdag 09 juni 2009 @ 11:03:
Ik mis nog een </td>

Is het verplict om die af te sluiten dan in html 4.x

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 9 juni 2009 11:07

Acties:

0 Henk 'm!

Nexz

disjfa schreef op dinsdag 09 juni 2009 @ 11:06:
[...]

Is het verplict om die af te sluiten dan in html 4.x

Ieder zijn markup language, zal maar zeggen

dinsdag 9 juni 2009 11:08

Acties:

0 Henk 'm!

ErikKo

Rippie

<td rowspan="9" align="left" valign="top">
<img src="images/header.png" width="570" height="280" alt="">
</td>

Dit is de code voor de header? Het volgende zou moeten werken:

code:

1	<td rowspan="9" colspan="2" align="left" valign="top">

dinsdag 9 juni 2009 11:48

Acties:

0 Henk 'm!

djpdjpnl

Topicstarter

Thanks!

Het is al een heel stuk beter. Zit nu alleen nog een stukje tussen 'img' (zie locaties in m'n plattegrond boven) en '250x50 leeg' en de copy/leeg. Zal eens zoeken hoe en wat. Kan in ieder geval weer op weg zo!

Ik heb ook nog een versie met position-styles (style='header', css zegt dan weer waar ie moet staan), dacht dat dat misschien zou helpen maar daar ging de tekst zweven. Zou dat zijn voor het totaal plaatje? Moet me maar eens gaan verdiepen in dat div-gebeuren, maar tot die tijd blijf ik dit even doen.

dinsdag 9 juni 2009 11:49

Acties:

0 Henk 'm!

disjfa

djpdjpnl schreef op dinsdag 09 juni 2009 @ 11:48:
Moet me maar eens gaan verdiepen in dat div html -gebeuren

Een tag maakt geen opmaak

Semantiek.

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 9 juni 2009 11:57

Acties:

0 Henk 'm!

djpdjpnl

Topicstarter

disjfa schreef op dinsdag 09 juni 2009 @ 11:49:
[...]

Een tag maakt geen opmaak Semantiek.

Ja, oké... maar het (meer) werken met divjes i.p.v. het niet werken daarmee. Dat Firebug is trouwens inderdaad een handig programma.

dinsdag 9 juni 2009 12:13

Acties:

0 Henk 'm!

Nexz

Ik heb het ook lastig gevonden, overschakelen van Tabellen naar Divjes, alleen... het werkt gewoon allemaal veel beter nu

Ik klop nu veel sneller een site dan eerst

. En als je firebug leuk vind, check ook eens de Web Developer toolbar voor FF:

https://addons.mozilla.org/en-US/firefox/addon/60

dinsdag 9 juni 2009 12:15

Acties:

0 Henk 'm!

djpdjpnl

Topicstarter

Nexz schreef op dinsdag 09 juni 2009 @ 12:13:
Ik heb het ook lastig gevonden, overschakelen van Tabellen naar Divjes, alleen... het werkt gewoon allemaal veel beter nu Ik klop nu veel sneller een site dan eerst . En als je firebug leuk vind, check ook eens de Web Developer toolbar voor FF:

https://addons.mozilla.org/en-US/firefox/addon/60

Wat maakt een divje beter dan een tabel? Is het de moeite waard om het zaakje opnieuw te schrijven of merkt de gemiddelde gebruiker dat niet?

dinsdag 9 juni 2009 12:23

Acties:

0 Henk 'm!

Fuzzillogic

Cool

djpdjpnl schreef op dinsdag 09 juni 2009 @ 12:15:
[...]

Wat maakt een divje beter dan een tabel? Is het de moeite waard om het zaakje opnieuw te schrijven of merkt de gemiddelde gebruiker dat niet?

Zie het zo: tabellen: 1998. "divjes": 2003.

Maar ga alsjeblieft niet "met divjes" werken. Gebruik HTML waar het voor bedoeld is (semantiek!) en doe de rest met CSS2. Koop een goed, actueel boek. Er zit teveel kaf tussen het koren bij die online cursussen.

Een goede HTML'er kan een website veel soepeler laten werken dan iemand met tabellen aanrommelt, want de HTML kan veel strakker en compacter, en vaak zijn er ook veel minder "geslicete" plaatjes nodig, dus minder hits op webserver, en dus minder vertraging bij beeldopbouw. Dus ja, voor de bezoeker is het ook de moeite waard.

[ Voor 24% gewijzigd door Fuzzillogic op 09-06-2009 12:27 ]

dinsdag 9 juni 2009 13:21

Acties:

0 Henk 'm!

djpdjpnl

Topicstarter

Ik ben maar voor de derde keer opnieuw begonnen. Ben nu bezig met die div/css dingen aan het werken. Enige waar ik een soort van tegenaan loop is het centreren van de site. Achtergrond staat nu gecentered maar als ik de header wil positionen dan komt ie helemaal links of in het midden en niet 0x0 met als begin de linker boven hoek van de achtergrond. Ik heb dus in de CSS het zaakje wel gepositioned maar is dat niet resolutie-afhankelijk voor wat er gebeurd? Als je namelijk 800x600 draat zie je het heel anders dan met een 1200x1600 reso, toch? Vast ook wel een trucje voor of niet?

HTML (nog niet af dus)

code:

</head>
<link href="styles2.css" rel="stylesheet" type="text/css">
<center>
<body bgcolor="000000" onLoad="preloadImages();">
    <div id="background">
        <div id="header"><img src="images/header.png" width="570" height="280"></div>

    </div>
</body>
</center>
</html>

CSS

code:

body {
    margin-bottom: 0px;
    font-family: Verdana;
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #525252;
}
td, textarea, input, select {
    font-family: Tahoma;
    font-size: 11px;
    color: #000000;
    font-weight: normal;
}
a:link {
    color: #FF0000;
    font-family: tahoma;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;

}
a:hover {
    color: #FFF268;
    font-family: tahoma;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    line-height: normal;
    font-variant: normal;
    text-transform: none;
    text-decoration: underline;
}
a:visited {
    color: #FFFFFF;
    font-family: tahoma;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;

}

.text1 {
    font-family: tahoma;
    font-size: 11px;
    color: #FFFFFF;
    font-weight: bold;
}

.text2 {
    font-family: tahoma;
    font-size: 11px;
    font-weight: normal;
    color: 8A8EC1;
}

#header {
    position: absolute; top: 8px; left: 240px; 
} 

#menu1 {
    position: absolute; top: 0px; left: 570px; 
}

#menu2 {
    position: absolute; top: 30px; left: 570px; 
}

#menu3 {
    position: absolute; top: 60px; left: 570px; 
}

#menu4 {
    position: absolute; top: 90px; left: 570px; 
}

#menu5 {
    position: absolute; top: 120px; left: 570px; 
}

#menu6 {
    position: absolute; top: 150px; left: 570px; 
}

#menu7 {
    position: absolute; top: 180px; left: 570px; 
}

#menu8 {
    position: absolute; top: 210px; left: 570px;
}

#emp1 {
    position: absolute; top: 240px; left: 570px; 
}

#emp2 {
    position: absolute; top: 550px; left: 320px; 
}

#emp3 {
    position: absolute; top: 550px; left: 530px; 
}

#copy {
    position: absolute; top: 575px; left: 530px; 
}

#lotus  {
    position: absolute; top: 280px; left: 0px; 
}

#text {
    position: absolute; top: 280px; left: 280px; 
}

#background {
    position: center;
    background-image: url(images/bgimg.jpg); 
    height: 600px;
    width: 800px;
}

[ Voor 3% gewijzigd door djpdjpnl op 09-06-2009 13:25 ]

dinsdag 9 juni 2009 13:25

Acties:

0 Henk 'm!

qanar

Position: Absolute is voor zover ik weet ook een not-done. Je kan er bijvoorbeeld je pagina niet mooi mee centreren (wat je anders met margin: auto; zou doen.)

http://www.thenoodleincid...als/box_lesson/boxes.html

Goede css sites zijn
http://www.alistapart.com/
http://www.csszengarden.com/
http://w3schools.com/

eerste 2 zijn voorbeelden en artikelen, 3e is imho DE resource voor shorthands, opties, syntax, enz.

[ Voor 105% gewijzigd door qanar op 09-06-2009 13:40 ]

dinsdag 9 juni 2009 13:43

Acties:

0 Henk 'm!

Fuzzillogic

Cool

qanar schreef op dinsdag 09 juni 2009 @ 13:25:
Position: Absolute is voor zover ik weet ook een not-done. Je kan er bijvoorbeeld je pagina niet mooi mee centreren (wat je anders met margin: auto; zou doen.)

Niks mis met position: absolute. Alleen de manier waarop de TS het nu gebruiken wil is dan denk ik weer minder handig: het lijkt nu op verkapte tabellen.

"Met divjes werken" doe je niet zomaar even. Nee echt niet. Het is een totaal ander paradigma dan het gehak en gezaag met aloude tabellen. En wil CSS2 een voordeel zijn, dan zul je je toch aan dat paradigma moeten houden.

dinsdag 9 juni 2009 13:46

Acties:

0 Henk 'm!

Janoz

Moderator Devschuur®

!litemod

En nu maak je precies die fout waar disjfa, Nexz en Fuzzillogic het over hebben.

ipv je source te bevuilen met bergen td en tr-etjes dump je nu de boel voel met een enorme berg divjes. Vervolgens maak je een enorme berg id's aan in css waarmee elk element neergezet wordt.

Een header, dat is toch gewoon de titel? Je kunt een H1 ook zo stylen dat hij 570px breed is en 280px hoog. Verberg vervolgens de tekst en geef hem een leuke achtergrond en je bent klaar voor dat stuk. Menu lijkt me een ideale candidaat voor een ongeordende lijst, een UL dus. Elk menu item is gewoon een LI. Pas de margins aan en geef ze een afmeting en ze komen vanzelf goed onder elkaar.

En zo ook met de rest.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

dinsdag 9 juni 2009 13:52

Acties:

0 Henk 'm!

djpdjpnl

Topicstarter

Janoz schreef op dinsdag 09 juni 2009 @ 13:46:
En nu maak je precies die fout waar disjfa, Nexz en Fuzzillogic.

ipv je source te bevuilen met bergen td en tr-etjes dump je nu de boel voel met een enorme berg divjes. Vervolgens maak je een enorme berg id's aan in css waarmee elk element neergezet wordt.

Een header, dat is toch gewoon de titel? Je kunt een H1 ook zo stylen dat hij 570px breed is en 280px hoog. Verberg vervolgens de tekst en geef hem een leuke achtergrond en je bent klaar voor dat stuk. Menu lijkt me een ideale candidaat voor een ongeordende lijst, een UL dus. Elk menu item is gewoon een LI. Pas de margins aan en geef ze een afmeting en ze komen vanzelf goed onder elkaar.

En zo ook met de rest.

Mjah header is een wat groot woord eigenlijk. Het is gewoon het puzzelstukje wat daar past. Had een naampje nodig, vandaar. Komt een plaatje te staan dus. Ik ga eens wat proberen...

dinsdag 9 juni 2009 15:49

Acties:

0 Henk 'm!

djpdjpnl

Topicstarter

Yay! Het is gelukt. Heel veel klooien en zoeken verder maar het klopt allemaal. Het werken met div's/li's maakt 't wel een stuk overzichtelijker... maar dat kan ook het idee zijn? De besparing qua bestandsgrootte is liefst 1kb...

Bedankt voor de adviezen in ieder geval!

dinsdag 9 juni 2009 15:55

Acties:

0 Henk 'm!

Nexz

Janoz schreef op dinsdag 09 juni 2009 @ 13:46:
En nu maak je precies die fout waar disjfa, Nexz en Fuzzillogic.

ipv je source te bevuilen met bergen td en tr-etjes dump je nu de boel voel met een enorme berg divjes. Vervolgens maak je een enorme berg id's aan in css waarmee elk element neergezet wordt.

Dat is waar, niet semantisch inderdaad. My bad

dinsdag 9 juni 2009 16:19

Acties:

0 Henk 'm!

Fuzzillogic

Cool

djpdjpnl schreef op dinsdag 09 juni 2009 @ 15:49:
De besparing qua bestandsgrootte is liefst 1kb...

En toch denk ik dat het allemaal nog *veel* beter kan. Die enorme lijsten met mouse-event handlers aan iedere anchor in je eerste bericht kan met een paar regels CSS opgelost worden.

Om een soort van controle te hebben of je site qua HTML een logische structuur heeft is om even CSS en image rendering in je browser uit te schakelen. De site zou dan nog steeds te navigeren en te begrijpen moeten zijn.

En on a sidenote: ik gok dat die jpegjes die je nu voor je menu gebruikt veel beter vervangen kunnen worden door png'tjes

dinsdag 9 juni 2009 16:44

Acties:

0 Henk 'm!

djpdjpnl

Topicstarter

Fuzzillogic schreef op dinsdag 09 juni 2009 @ 16:19:
[...]

En toch denk ik dat het allemaal nog *veel* beter kan. Die enorme lijsten met mouse-event handlers aan iedere anchor in je eerste bericht kan met een paar regels CSS opgelost worden.

Om een soort van controle te hebben of je site qua HTML een logische structuur heeft is om even CSS en image rendering in je browser uit te schakelen. De site zou dan nog steeds te navigeren en te begrijpen moeten zijn.

En on a sidenote: ik gok dat die jpegjes die je nu voor je menu gebruikt veel beter vervangen kunnen worden door png'tjes

Heb het hier al veranderd daarstraks. Scheelt inderdaad weer iets. Het kan altijd beter, maar ooit moet een man tevreden zijn met wat hij heeft.

Pagina: 1

Reageer