positie image editor en internet verschilt

Status
Niet open voor verdere reacties.

marconist

Gebruiker
Lid geworden
11 jan 2006
Berichten
128
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:
[/noparse] tags gezet, [/COLOR]
 
Laatst bewerkt door een moderator:
Kan je de code tussen code-tags zetten?
Dat kijkt wat makkelijker.

In JSfiddle zou nog beter zijn.
 
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.
 
Als het relevante code is, alles tussen code-tags.

Maar wat is er precies anders? Heb je een JSfiddle of een screenshot?
 
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
 

Bijlagen

  • nr2.jpg
    nr2.jpg
    356,7 KB · Weergaven: 23
  • nr 1.jpg
    nr 1.jpg
    803 bytes · Weergaven: 21
  • nr 1.jpg
    nr 1.jpg
    229,3 KB · Weergaven: 21
Komt het gewoon niet door de verschillende breedttes van de browser, zodat Bootstrap het netjes passend maakt.
 
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.
 
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/bootstrap_grid_basic.asp

Ik zeggen: ga er eens mee experimenteren, en kijk eens hoe je jouw site netjes ermee kan indelen.
 
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.
 
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.
 
Het dringende advies is altijd om stijlen in een .css-stylesheet te zetten.
 
@Bron,
tks, gecorrigeerd, werkt prima.
@Aart
Staan er naar mijn weten al in de style map
tks
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan