[HTML / CSS] Uitlijnen lukt niet - Softwareontwikkeling

woensdag 13 februari 2013 11:45

Acties:

Topicstarter

Hello!

Ben al uren bezig maar het lukt voor geen meter.

Voor mijn werk beheer ik de website. Dit gebeurt in Joomla wat heel gebruiksvriendelijk is.
Voor artikelen maak ik gebruik van HTML en CSS. Het meeste kan ik wel aanpassen maar nu loop ik tegen een (simpel) probleem aan.

http://allmotive.eu/voertuigen/specificaties

Zodra ik twee regels naast de afbeelding plaats dan klopt het niet meer met de button.
Bij 1 afbeelding staat de tekst en de button wel recht

Nu heb ik een test pagina gemaakt om het probleem te fixxen maar niks lijkt te werken. Ik krijg het met geen mogelijkheid netjes onder elkaar.

Is dit probleem op te lossen? Heb de button met CSS al iets kleiner gemaakt maar het probleem blijft bestaan.

http://allmotive.eu/producten/test-pagina

code:

<table>
<tbody>
<tr>
<td>&nbsp;<img style="vertical-align: middle;" alt="1 DFSK Citytruck Pick up K01" src="images/pdf/DFSK/1%20DFSK%20Citytruck%20Pick%20up%20K01.jpg" height="100" width="175" /></td>
<td>
<p>DFSK Pick Up E-Power</p>
<p><span style="font-size: 11px; line-height: 1.3em;">DFSK Pick Up E-Power</span></p>
</td>
<td style="width: 250px;"><a class="pdf" href="images/pdf/DFSK/2%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Groengas%201.pdf">Klik hier!</a>
<p><a class="pdf" href="images/pdf/DFSK/1%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Epower%201.pdf">Klik hier!</a></p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p><span style="line-height: 1.3em;">&nbsp;</span><img src="images/pdf/DFSK/1%20DFSK%20Citytruck%20Pick%20up%20K01.jpg" width="175" height="100" alt="1 DFSK Citytruck Pick up K01" style="vertical-align: middle;" />&nbsp;</p>
<table>
<tbody>
<tr>
<td>DFSK Pick Up E-Power</td>
<td></td>
<td style="width: 250px;"><a class="pdf" href="images/pdf/DFSK/2%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Groengas%201.pdf">Klik hier!</a></td>
</tr>
<tr>
<td>DFSK Pick Up Groengas</td>
<td></td>
<td style="width: 250px;"><a class="pdf" href="images/pdf/DFSK/2%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Groengas%201.pdf">Klik hier!</a></td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr>
<td><img src="images/pdf/DFSK/1%20DFSK%20Citytruck%20Pick%20up%20K01.jpg" width="175" height="100" alt="1 DFSK Citytruck Pick up K01" style="vertical-align: middle;" /></td>
<td>DFSK Pick Up Groengas</td>
<td style="width: 250px;"><a class="pdf" href="images/pdf/DFSK/2%20Prijzen%20en%20opties%20DFSK%20Citytruck%20Pick-up%20K01%20Groengas%201.pdf">Klik hier!</a></td>
</tr>
</tbody>
</table>

woensdag 13 februari 2013 11:50

Acties:

TERW_DAN

Met een hamer past alles.

Waarom heb je het ene ding in een table staan en de andere in een P?
Ik zou er gewoon 1 tabel van maken, ipv meerdere onder elkaar, of verschillende elementen door elkaar te gaan gebruiken.

woensdag 13 februari 2013 11:51

Acties:

Wackmack

Topicstarter

Op de test pagina heb ik verschillende mogelijkheden gelukt vandaar een tabel en het andere in een P.
Echter werken ze beide niet. Zodra ik de oplossing heb gevonden maak ik alles hetzelfde.

woensdag 13 februari 2013 12:11

Acties:

immo_msk

Waarom gebruik je niet voor elke regel, langs de afbeelding, een aparte row?

code:

<html>
    <head>
        <title>HTML Online Editor Sample</title>
    </head>
    <body>
        <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
            <tbody>
                <tr>
                    <td rowspan="2">
                        Image</td>
                    <td style="vertical-align: middle;">
                        Tekst</td>
                    <td style="vertical-align: middle;">
                        Button</td>
                </tr>
                <tr>
                    <td style="vertical-align: middle;">
                        Tekst</td>
                    <td style="vertical-align: middle;">
                        Button</td>
                </tr>
            </tbody>
        </table></body>
</html>

woensdag 13 februari 2013 12:50

Acties:

Wackmack

Topicstarter

Dat heb ik geprobeerd maar daar kwam ik niet uit. Ga het gelijk is testen, thnx !

Getest, zie http://allmotive.eu/producten/test-pagina

Als ik de randen weg haal is de layout nog niet wat ik wil.
HTML codes is wel netjes geschreven, oogt gelijk veel rustiger.

De Editor van Joomla zat alles in elkaar, heel verwarrend om in te werken.

[ Voor 61% gewijzigd door Wackmack op 13-02-2013 12:57 ]

woensdag 13 februari 2013 13:07

Acties:

immo_msk

Je kunt de editor in Joomla uitzetten als je dat wilt per artikel.

Als je de table een width geeft van 100% en border = 0 dan heb je je resultaat toch.
Probeer het wel in alle browsers, die resultaten verschillen nogal.

Je zou nog wat cell padding kunnen gebruiken zodat niet alles op elkaar "gepropt" staat.

Edit: Voeg een td height="50px" toe aan je TD om ook in Chome gelijke rijen te krijgen.

[ Voor 12% gewijzigd door immo_msk op 13-02-2013 13:12 ]

woensdag 13 februari 2013 13:19

Acties:

Wackmack

Topicstarter

Perfect! Ziet er heel netjes uit, eindelijk zeg. Alleen is er nog wel een grote witregel, hoe kan ik dit weg krijgen?

woensdag 13 februari 2013 13:25

Acties:

immo_msk

Op je test pagina zie ik geen wit regel. Alleen de breedte van je cellen klopt nog niet helemaal aangezien de tekst op 2 regels komt.

woensdag 13 februari 2013 13:32

Acties:

Wackmack

Topicstarter

Heb het in drie browsers getest en zie overal de witregel. Bij het eerste voorbeeld en jou onderste voorbeeld.
Las dat ik het met de celbreedte kan aanpassen, ga daar even mee aan de slag.

Het eindresultaat komt eindelijk in zicht

Ga straks aan de slag met Cell padding zodat alles er uit ziet.

woensdag 13 februari 2013 13:48

Acties:

immo_msk

Ik zie het echt niet, maar dat zal wel aan mij liggen. Succes in ieder geval!

Wel zou als ik deze aanpassingen middels een page class aan het artikel toevoegen, dan kun je deze wijzigingen in een CSS bestand zetten. Zodoende hoef je niet elke keer te zorgen dat het artikel de goede opmaak heeft.

woensdag 13 februari 2013 13:55

Acties:

Wackmack

Topicstarter

Klinkt logisch alleen hoe doe ik dat? Nu wijzig ik alles met de Editor van Joomla.

Als het artikel eenmaal geplaatst is alles redelijk makkelijk aan te passen.
Ga nu alles afmaken.

woensdag 13 februari 2013 14:14

Acties:

immo_msk

Hier staat het een en ander uitgelegd.

woensdag 13 februari 2013 15:30

Acties:

Wackmack

Topicstarter

Heb alles aangepast, http://allmotive.eu/producten/test-pagina

Alles staat netjes onder elkaar, thnx !

[ Voor 25% gewijzigd door Wackmack op 13-02-2013 15:40 ]

woensdag 13 februari 2013 16:37

Acties:

Wackmack

Topicstarter

Wat moet je doen als de site prime werkt in Chrome alleen in Firefox / IE zie de uitlijning er anders uit.

woensdag 13 februari 2013 18:40

Acties:

NMe

Quia Ego Sic Dico.

Wat had je zelf al over dat onderwerp gevonden? Het is nou niet echt de bedoeling dat je elke keer als je een nieuw vraagje hebt even hier je vraag dumpt in de hoop dat wij je probleem wel even voor je oplossen...

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

Pagina: 1

Reageer