Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

[HTML / CSS] Uitlijnen lukt niet

Pagina: 1
Acties:

  • Wackmack
  • Registratie: Oktober 2003
  • Laatst online: 22:42
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 8)7

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:
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
<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>

  • TERW_DAN
  • Registratie: Juni 2001
  • Niet online

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.

  • Wackmack
  • Registratie: Oktober 2003
  • Laatst online: 22:42
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.

  • immo_msk
  • Registratie: November 2003
  • Laatst online: 19:33
Waarom gebruik je niet voor elke regel, langs de afbeelding, een aparte row?

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>

  • Wackmack
  • Registratie: Oktober 2003
  • Laatst online: 22:42
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 ]


  • immo_msk
  • Registratie: November 2003
  • Laatst online: 19:33
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 ]


  • Wackmack
  • Registratie: Oktober 2003
  • Laatst online: 22:42
Perfect! Ziet er heel netjes uit, eindelijk zeg. Alleen is er nog wel een grote witregel, hoe kan ik dit weg krijgen?

  • immo_msk
  • Registratie: November 2003
  • Laatst online: 19:33
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.

  • Wackmack
  • Registratie: Oktober 2003
  • Laatst online: 22:42
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.

  • immo_msk
  • Registratie: November 2003
  • Laatst online: 19:33
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.

  • Wackmack
  • Registratie: Oktober 2003
  • Laatst online: 22:42
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.

  • immo_msk
  • Registratie: November 2003
  • Laatst online: 19:33
Hier staat het een en ander uitgelegd.

  • Wackmack
  • Registratie: Oktober 2003
  • Laatst online: 22:42
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 ]


  • Wackmack
  • Registratie: Oktober 2003
  • Laatst online: 22:42
Wat moet je doen als de site prime werkt in Chrome alleen in Firefox / IE zie de uitlijning er anders uit.

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 20-11 11:59

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