tekst naast foto laten beginnen

Status
Niet open voor verdere reacties.
R

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
https://met-rob.com/fysio/overfysiodomestic.html

Hier staat nu 1 regel tekst naast de foto.
Ook staat die regel tekst helemaal tegen de foto aan.

Als ik 1 harde return geef voor "ik ben ....", begint de tekst helemaal onder de foto. (zie 2e medewerker op die pagina Tom)

Ik zou graag willen dat de tekst gewoon bovenaan begint en dus om de foto heenloopt op een gewone computer.
En dan ook nog (ik weet het, ik ben veeleisend...) zou het mooi zijn als de foto op een mobiel wél helemaal over de gehele breedte getoond wordt.

Groetjes Rob
 
Geef deze afbeelding een style float:left mee.
Bij sterke voorkeur in je CSS-stylesheet.

PS: Waarom gebruik je geen list-items bij je specialisaties?
Je kan ook nog een heading gebruiken voor de jaartallen die je vermeldt.
 
Laatst bewerkt:
Heb ik nu gedaan.
Alleen nu is alles verdwenen van de pagina.

In dreamweaver ziet het er wel goed uit.
Dat dan weer wel.....
 

Bijlagen

  • Schermafbeelding 2021-08-29 om 21.16.04.png
    Schermafbeelding 2021-08-29 om 21.16.04.png
    457,8 KB · Weergaven: 22
Wat heb je dan precies aangepast in je bestand? Als ik dit lokaal toevoeg is er niks mis.
 
Laatst bewerkt:
Ik heb op de foto geklikt

Dan rechts op "add property" (zie screenshot)

En daar "float left" toegevoegd

Dan opgeslagen.
 

Bijlagen

  • aanpassing.jpg
    aanpassing.jpg
    356,4 KB · Weergaven: 19
Hij heeft die aanpassing blijkbaar gedaan in "bootstrap.min.css"

is dat niet de bedoeling?
 

Bijlagen

  • Schermafbeelding 2021-08-29 om 21.35.08.png
    Schermafbeelding 2021-08-29 om 21.35.08.png
    54,4 KB · Weergaven: 19
Bootstrap moet je NIET aanpassen.
Met een upgrade daarvan breek je meteen je site met je aangebrachte wijzigingen! Blijkbaar is Dreamweaver daar niet van op de hoogte. Werk uitsluitend in een eigen CSS-stylesheet.

Pas de float:left toe op je afbeelding.

(Om deze redenen gebruik ik geen WYSIWYG-editor zoals Dreamweaver. Altijd bagger! Als je HTML en CSS kent en zelf toepast, heb je veel compactere, nettere en leesbare code.)
 
Laatst bewerkt:
Het is gelukt.

Ik heb de foto op 35% breedte gezet en de tekst loopt er keurig omheen.

Het is ook gelukt dat de foto op een mobiele telefoon over de gehele breedte getoond wordt ipv op 35%

Ik had dit gevonden op internet:
Code: 
@media only screen and (max-width: 550px) {
    img {
        width: 100%;
    }
}

Ik heb dit onderaan in "style.css" geplakt.

Weet niet of dit de correcte wijze is maar het werkt wel.

Maar nu loop ik weer tegen een ander dingetje aan.
Onderin de footer staan 2 afbeeldingen die als button fungeren.

Deze staan nu ook op een mobiele telefoon op 100% breedte
Deze zouden gewoon in hun oorspronkelijke breedte moeten blijven.

Links in het screenshot zoals het nu is, rechts zoals het zou moeten zijn.
 

Bijlagen

  • Schermafbeelding 2021-08-29 om 22.54.34.png
    Schermafbeelding 2021-08-29 om 22.54.34.png
    69,6 KB · Weergaven: 20
Laatst bewerkt door een moderator:
Niet verwonderlijk, want nu richt je deze code op alle img-tags.

Die worden dan, als de maximale breedtte 550px is, op 100% weergeven,
Een oplossing is om dit te gebruiken


Code: 
@media only screen and (max-width: 550px) {
  #faq-list-1 img {
      width: 100%;
   }
}

Ik wil je wel vragen om je CSS-namen een beetje te fatsoeneren, als het kan.
Dit heeft weinig met een FAQ te maken. Zo maak je het voor ons, developers, het lastig ;).
Plus dat je het straks ook voor jezelf lastig maakt als je een nieuwe stijl voor nieuwe content op je site wilt plaatsen.
 
tx

nu is het perfect.

wat betreft die css namen, deze zaten al standaard in de template die ik heb gedownload en gebruikt.

maar ik begrijp wat je bedoeld en zal er op letten.

Nog een fijne avond voor zolang deze nog duurt!
 
Thnx! Veel succes verder :)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan