Helpmij.nl
Helpmij.nl
Helpmij.nl

Quote

Weergeven resultaten 1 tot 14 van 14

Onderwerp: positie image editor en internet verschilt

  1. #1
    Senior Member
    Geregistreerd
    11 januari 2006
    Vraag is opgelost

    positie image editor en internet verschilt

    Met de HTML editor lijkt de positie van de image en knoppen, in de pagina, perfect op zijn plaats te staan.
    Helaas op de internet pagina staat deze niet meer goed, wat doe ik fout?

    <!DOCTYPE html>
    <html>
    <head>

    Code:
    <!doctype html>
    <html lang="nl">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <!--header, 12 colommen-->
    <div class= "container introduction">
        <h2 class="titel">Introduction</h2>
        <hr>
        <!--pagina inhoud-->
        <div class="row">
            <div class="col-7">
                <font face="Comic Sans MS" size="4" color="#800080">
    
    Hello,my name is Cees, welcome to my homepage. Feel free to browse around.
    I live in the city of Eindhoven in the Southern part of the Nederlands near
    the Belgian border.
    
    I first had a C-licence in 1982 (call sign PE1HFH) and upgraded to the F-class
    in 1983, with my present call sign PA3CVI. Radio has been my hobby for many
    years and every hour spent playing with short wave radio was rewarding to
    me.I enjoy listening and transmitting on the HF 10M-80M amateurs bands, looking
    specially for DX (distant countries) while my favorite mode of making contact
    is
    CW = Morse Code).
    
    "Working DX" is just one of the many aspects of Amateur (=Ham) Radio in wich
    you have to make contact wth other stations in distant countries and younormally
    like to exchange QSL cards with the other stations as proof-of- contact.
    I've had more than 10.000 contacs (=QSO's) with many countries of wich
    275 DXCC countries have been confirmed by QSL cards.
    
            <hr>
            <!--foto rechts, 5 colommen-->
            </div>
                <div class="col-5">
                       <img src="images/fotocees.jpg" width="120%" style="border: 5px ridge #00FF00"
                </div>
        </div>
    
    <div class="row knoppen">
            <div class="col-3">
                <p>Home </p>
                <a class="knop" href="../index.html">
                    <img src="images/home.jpg" alt="">
                    <img src="images/pijllinks.jpg" alt="">
                </a>
            </div>
            
            <div class="col-3 ">
                <p> Old shack  </p>
                <a class="knop" href="/homemade-project">
                    <img src="images/old shack.jpg" alt="">
                    <img src="images/pijlrechts.jpg" alt="">
                </a>
            </div>
            
            <div class="col-4 ">
                <p>New shack </p>
                <a class="knop" href="/weather-satellites">
                    <img src="images/newshack.jpg" alt="">
                    <img src="images/pijlrechts.jpg" alt="">
                </a>
            </div>
        
    </div><!--einde class pagina-->
    </body>
    </html>
    mod. html met knopje # in [code] tags gezet,
    Laatst aangepast door bron : 14 september 2021 om 13:27

  2. #2
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Kan je de code tussen code-tags zetten?
    Dat kijkt wat makkelijker.

    In JSfiddle zou nog beter zijn.
    Was voorheen: PHP4U

  3. #3
    Senior Member
    Geregistreerd
    11 januari 2006
    Sorry Aart,

    Het deel waar het om gaat staat heb ik in code neer gezet.
    of wil je de hele pagina tussen "hekjes".
    Graag een voorbeeldje hoe je het wilt hebben,
    dan kan ik eventuele volgende keren de code neer zetten.
    Pse graag uitleg.

  4. #4
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Als het relevante code is, alles tussen code-tags.

    Maar wat is er precies anders? Heb je een JSfiddle of een screenshot?
    Was voorheen: PHP4U

  5. #5
    Senior Member
    Geregistreerd
    11 januari 2006

    verkeerde positie vervolg

    twee screen shots:
    eentje waarbij de image en knoppen netjes rechts onder staan, html editor, resultaat nr 2
    en een waarbij alles onder staat in werkelijkheid, nr1
    Bijgevoegde kleine afbeeldingen Bijgevoegde kleine afbeeldingen Klik op afbeelding voor grotere versie

Naam:  nr2.jpg‎
Bekeken: 7
Grootte:  356,7 KB   Klik op afbeelding voor grotere versie

Naam:  nr 1.jpg‎
Bekeken: 6
Grootte:  803 Bytes   Klik op afbeelding voor grotere versie

Naam:  nr 1.jpg‎
Bekeken: 9
Grootte:  229,3 KB  

  6. #6
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Komt het gewoon niet door de verschillende breedttes van de browser, zodat Bootstrap het netjes passend maakt.
    Was voorheen: PHP4U

  7. #7
    Senior Member
    Geregistreerd
    11 januari 2006
    Bij de editor uitvoering zie ik dat er een grote ruimte

  8. #8
    Senior Member
    Geregistreerd
    11 januari 2006
    Ook links had ik een grote ruimte, dat kon je niet zien in mijn afgesneden nr2 screenshot.
    Dat heb ik inmiddels aangepast en nu is de uitvoering op internet in orde.

    Precies wat ik je wilde vragen, hoe kun je nu, hoe zal ik het zeggen, de breedte
    van je pagina aanpassen zodat alle informatie mooi passend in je editor en of url gezet wordt en
    dus geen overbodige loze ruimtes ziet.

  9. #9
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Ik heb geen idee welke editor je gebruikt, maar mijn advies is om direct in de browser te zien hoe het werkt.

    Zo te zien gebruik je dus Bootstrap, en ik raad je daarom aan om je eens goed te verdiepen in Bootstrap en het zeer belangrijke, flexibele en effectieve 'grid-systeem'.
    Deze bestaat uit 12 onzichtbare kolommen die je kan groeperen, en kan aangeven op welke schermbreedtte er hoeveel naast elkaar worden getoond.

    Onthoud wel dat Bootstrap 'mobile-first' is, dus er wordt altijd gekeken naar de kleine breedtte.

    https://www.w3schools.com/bootstrap4...grid_basic.asp

    Ik zeggen: ga er eens mee experimenteren, en kijk eens hoe je jouw site netjes ermee kan indelen.
    Was voorheen: PHP4U

  10. #10
    Senior Member
    Geregistreerd
    11 januari 2006
    Ik was mij eerst aan het verdiepen in bootstrap inhoud en dacht dat de toonbaarheid url komt later wel.
    Nee dus, ga mijn boekwerk nakijken en eventuele voorbeelden die daar instaan betreffende het flexibele en effectieve 'grid-systeem' item.
    Tot zover tks.

  11. #11
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Een <font> is niet toegestaan en mag nergens worden gebruikt
    Code:
    Dit mag niet
    <font face="Comic Sans MS" size="4" color="#800080"> Jouw tekst </font>
    
    Dit mag wel
    <p style="font-family: 'Comic Sans MS'; font-size: 16px; color: #800080;"> Jouw tekst </p>
    Een website kan met het kleinste foutje er anders uitzien
    Er mist bijv. een > bj de img
    Code:
    <div class="col-5">
       <img src="images/fotocees.jpg" width="120%" style="border: 5px ridge #00FF00"
    </div>
    Een browser probeert foutjes op te lossen mar vaak lukt dit niet.
    Als je ergens een </div> vergeet dan klopt de layout van de pagina niet meer.
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  12. #12
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Het dringende advies is altijd om stijlen in een .css-stylesheet te zetten.
    Was voorheen: PHP4U

  13. #13
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Het dringende advies is altijd om stijlen in een .css-stylesheet te zetten.
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  14. #14
    Senior Member
    Geregistreerd
    11 januari 2006
    @Bron,
    tks, gecorrigeerd, werkt prima.
    @Aart
    Staan er naar mijn weten al in de style map
    tks

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl

Regels
Help

Helpmij.nl en business

Partners
Sponsoren