Kompozer vraagje?

Status
Niet open voor verdere reacties.
G

gebruiker46

Gebruiker
Lid geworden
22 jul 2010
Berichten
667
Hallo Allemaal!

Ik heb een vraagje over Kompozer: Als voorbeeld heb ik even snel twee plaatjes erin geplakt, zoals je ziet zie je link het AVG logo staan er rechts daarvan het Norton logo. En zoals je staat AVG iets naar boven en Norton naar beneden. Dus mijn vraag ik hoe zorg ik ervoor dat die twee afbeeldingen precies op de zelfde hoogte] naast elkaar staan en gelijk aan?
Bestaat er misschien een soort van sleep mogelijkheid?

Alvast bedankt! Ik hoop dat het duidelijk is:thumb:
 

Bijlagen

  • Naamloos.jpg
    Naamloos.jpg
    84,1 KB · Weergaven: 83
Laatst bewerkt:
Hoi cashher,
Op de een of andere manier komt het plaatje in de bijlage niet door. Is het een heel erg groot bestand? Misschien kan je het dan wat kleiner maken.

Met vriendelijke groet,
CChunter
 
Nee, die doet het bij mij ook niet. - Geeft ie bij jou wel resultaat, als je er op klikt?
- Anders kan je het plaatje misschien ergens online zetten?

Met vriendelijke groet,
CSShunter
 
Ah, ik zie 'm nu wel. Kennelijk lag de helpmij-server even op zijn zijkant.

De snelle manier
Het scheelt maar 3 of 4 pixeltjes, en het makkelijkste is om in je tekenprogramma de plaatjes zelf even bij te knippen: bij alle twee het wit van de bovenkant afsnijden.
Klaar! :)

Het kan ook met CSS in KompoZer.

Methode 1: rechtstreeks in de code-weergave
Zoek plaatje op dat iets moet zakken, en geef deze een ID (=unieke IDentificatie-naam).
Dan wordt het bijvoorbeeld:
HTML: 
<img id="plaatje-1" src="images/plaatje-1.jpg" width="..." height="..." alt="">
Ga nu naar de <head> van het document, en kijk of er al <style type="text/css">...</style> tussen staat.
Zo niet, dan even een regel met <style type="text/css"> maken, dan 3 lege regels, en dan </style>.
Op de lege regels zet je wat er met het plaatje moet gebeuren. Omdat het een ID is, moet er een hekje # voor de ID-naam komen te staan. Dan wordt het bijvoorbeeld:
Code: 
<style type="text/css">
#plaatje-1 { 
   margin-top: 4px;
}
... eventuele andere style-opdrachten ...
</style>
Klaar! :)

Methode 2: in de normale weergave
  • Klik rechts op het plaatje dat moet zakken.
  • Je gaat naar "Image properties", en dan de knop "Advanced edit...".
  • Maak een nieuw "Attribute" met de naam: id, en de "Value": plaatje-1.
  • Klik OK, OK.
  • Klik op de CSS-knop (het paletje met CasCadeS), en sla zo nodig de pagina op.
  • Eventueel links boven in het venstertje op het uitrolvakje klikken, en kiezen voor (nieuwe) Style rule.
  • Op tabblad General de radiobutton naast "style applied to an element with specified ID attribute" aanklikken.
  • In het uitrolvakje staat #plaatje-1 al klaar. Klik!
  • Nu de knop Create Style rule.
  • Vul in: margin-top: 4px
  • Je ziet het plaatje meteen al omlaag verspringen!
  • Klik het Style-venstertje weg met OK.
Klaar! :)

Als je nu in de code-weergave kijkt, zie je dat met een omweg hetzelfde gebeurd is als met methode 1.
Vandaar werk ik zelf het liefst in de code-weergave: dan zie je meteen wat je doet, en hoef je niet door al die venstertjes en knoppen heen.

Succes!
CSShunter
 
Laatst bewerkt:
.. there u r again ;)

't Liefst zag ik de bijbehorende HTML maar op voorhand het volgende:

zorg allereerst dat de afbeeldingen dezelfde afmeting hebben. Naast elkaar gelegd moet dan de basis of de top van de afbeeldingen met elkaar uitgelijnd worden. Lukt dat niet, pas dan de afbeelding netjes aan met een grafisch programma. Zorg dat margins, padding en borders voor alle afbeeldingen gelijk zijn.

wil je dat niet dan zul je met CSS de TOP-posities moeten aanpassen, en de display-methode (FLOAT). Tegen m'n principes in zou ik ook aanraden om misschien (om te beginnen) een <table> te gebruiken


EDIT: CSSHunter was ook al bezig met een mooi antwoord. Neem 't mijne voor wat het waard is
 
Laatst bewerkt:
@cashher blijf van de quote knop af.
gebruik de reageer op vraag knop
ik heb nu al jouw quotes verwijderd.
 
Oké bedankt Allemaal!:thumb:

Ik heb ze uiteindelijk maar allebei in een aparte cel geplaatst in een tabel, die ik weer doorzicht heb gemaakt. En dan door jullie hulp op de zelfde hoogte geplaatst.

Kijk hier maar...

@csshunter ik zal de afbeelding voortaan wat kleiner maken, waardoor hij hopenlijk toch op Helpmij past:D
@city guy juist ja, daar ben ik opnieuw:cool:

Bedankt! Super..!
 
Hoi cashher,
Mooi dat 't gelukt is! :thumb:
Maar eigenlijk zijn tabellen niet zo bedoeld (en minder geschikt) voor de layout op het scherm.
De code voor de tabel zal KompoZer er ongeveer zó laten uitzien:
HTML: 
<table style="text-align: left;" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="width: 50px;"></td>
      <td><img style="width: 225px; height: 85px;" alt="" src="images/avg.jpg"></td>
      <td style="width: 130px;"></td>
      <td><img style="width: 225px; height: 85px;" alt="" src="images/norton.jpg"></td>
    </tr>
  </tbody>
</table>
Met CSS kan het veel handiger. Als de afbeeldingen even hoog zijn gemaakt, kan je ze gewoon in een <div> ("division" = blokje op het scherm) plakken, en dan de linker-afstand van elk plaatje (de "margin-left") opgeven.
Code: 
<style type="text/css">
   #avg { margin-left: 50px; }
   #norton { margin-left: 130px; }
</style>
HTML: 
<div>
   <img id="avg" src="images/avg.jpg" width="225" height="85" alt="">
   <img id="norton" src="images/avg.jpg" width="225" height="85" alt="">
</div>
Dat is dan heel wat minder html-code dan de tabel.
En als je later iets wilt veranderen, zie je ook veel sneller wat je gedaan hebt en hoe je dat kunt aanpassen. :)

Met vriendelijke groet,
CSShunter

PS
Als je iets meer van html en css wilt weten: www.web-garden.be/cursus-html/cursus-html/ is een prima (gratis) cursus. Daarmee wordt KompoZer ook makkelijker te begrijpen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan