Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Programmeren

HTML/CSS vervorming probleem

victor-xd
6 antwoorden
  • Hallo allemaal,

    Ik ben kort geleden begonnen met HTML/CSS voor mijn studie, dit gaat allemaal prima maar ik zit met een probleempje.

    Ik heb een website gemaakt via het boek, en zelf wat dingetjes aangepast, en omdat mij laptop (18.4inch) voor reparatie weg is gebruik ik nu een 11 inch acer laptopje.

    Dus ik heb een website met css gemaakt op een klein scherm denkent dat het allemaal perfect is maar..

    wanneer ik de HTML en CSS naar mijn vaste computer zet met een groter scherm dan wordt de hele website vervormt :o

    als ik het venster kleiner maak bijv. dan schuiven alle headers en paragraven op en ziet het er niet meer uit.. ook de menu's staan over de headers heen etc.

    Mijn vraag is : hoe zorg ik ervoor dat mijn website er op elk scherm hetzelfde uitziet?

    De CSS
    [code:1:33656aa51c]
    body {
    padding:0;
    margin:o;
    background: #060;
    }

    h1 {
    padding: 6px;
    margin: 0 0 0 20%;
    color: #9c0;
    background: lightgreen;
    }

    h2 {
    padding: 0.5em;
    margin: 0 50% 0 0;
    color: #d9ffd9;
    background: #9c0;
    }

    p {
    padding: 0.5em 10% 0.5em 10%;
    margin: 0 0 0 20%;
    color: #333;
    background: lightgreen;
    }

    #menu {
    padding: 10px 73px 0 0;
    margin: 23px 0 0 0;
    background: lightgreen;
    border: #9c0 solid 2px;
    float: left;
    }

    #menu ul {
    list-style: square;
    }

    #menu1 {
    padding: 10px 73px 0 0;
    margin: 23px 0 0 0;
    background: lightgreen;
    border: #9c0 solid 2px;
    float: left;
    }

    #menu1 ul {
    list-style: square;
    }

    #navigatie a {
    color: black;
    }

    #navigatie a:visited {
    color: black;
    }

    #navigatie a:hover {
    color: darkgreen;
    Text-decoration: none;
    }

    a {
    color: darkgreen;
    }
    [/code:1:33656aa51c]

    De HTML
    [code:1:33656aa51c]
    ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Het internet, Hoe is het ontstaan? wat is het?" />
    <meta name="keywords" content="Internet, ARPANET, Computer, Netwerken, Protocol" />
    <title>Het internet, toen en nu</title>
    <link rel="stylesheet" href="persoonlijk.css" type="text/css" />
    </head>
    <body>
    <h1 title="Het internet">Het Internet</h1>
    <h2 style="text-align: left;">Internet Protocollen</h2>

    <div id="menu">
    <ul id="navigatie">
    <li><a href="">home</a></li>
    <li><a href="">guessbook</a></li>
    <li><a href="">contact</a></li>
    </ul>
    </div>
    <p>
    <img src="images/ster.gif" alt="" height="18" width="22" />
    Een internet is een netwerk van computernetwerken (zie ook intranet en extranet). Een computernetwerk is over
    het algemeen alleen beschikbaar binnen een organisatie of gebouw, een beperking die opgeheven wordt door een internet.
    Om een internet goed te laten werken is het nodig om afspraken te maken over <em>protocollen</em>. Een bijna universeel
    gebruikt protocol is het zogenaamde Internetprotocol (IP). Computers in verschillende <strong>computernetwerken</strong>
    kunnen dankzij die afspraken met elkaar communiceren.</p>
    <h2>De oorsprong van het internet</h2>

    <div id="menu1">
    <ul id="navigatie">
    <li><a href="">weetjes</a></li>
    <li><a href="">nieuwtjes</a></li>
    <li><a href="">hardware</a></li>
    <li><a href="">software</a></li>
    <li><a href="">games</a></li>
    </ul>
    </div>

    <p>
    <img src="images/ster.gif" alt="" height="18" width="22" />
    Het internet is de benaming voor een zeer groot, de hele aarde
    omspannend openbaar netwerk van computernetwerken, waarvan de afspraken
    worden beschreven in de Requests For Comments die worden beheerd door
    de <em>Internet Engineering Task Force</em>. De oorsprong van het internet is
    terug te voeren tot <a href="">ARPANET</a>, een in 1969 in de Verenigde Staten gestart
    netwerk van <u>universiteitsnetwerken</u> dat later ook militaire
    netwerken met elkaar verbond. Inmiddels is het internet een mondiaal
    fenomeen,
    dat het karakter van massamedium heeft gekregen. Als een van de succesfactoren wordt wel genoemd dat het volledige
    internet eigendom van niemand is, terwijl de fysieke onderdelen wel degelijk een eigenaar hebben.
    </p>
    <h2 title="Diensten via het internet">Diensten via het internet</h2>
    <p>
    <img src="images/ster.gif" alt="" height="18" width="22" />
    In het dagelijkse spraakgebruik wordt met internet vaak het World Wide Web bedoeld, maar dat is slechts één van de
    vele diensten die kunnen worden gebruikt via het <strong>Internet</strong>. Andere bekende diensten zijn e-mail, FTP en usenet.
    </p>
    </body>
    </html>
    [/code:1:33656aa51c]

    let niet op de text tussen de <p></p>, ik heb het van wikipedia afgehaalt om een globaal idee te krijgen hoe het eruit ziet.

    Ik heb het vermoeden dat ik iets fout doe in de CSS, iets met %, em, px etc.
  • Oke ik heb net even zitten uitzoeken en ik veranderde alles wat niet px was naar px (pixels)

    Nu als ik de pagina verander van vorm dan blijft alles dezelfde vorm maar de elementen bewegen nog en ik weet denk ik waarom…

    zodra ik met me scherm de <p> aanraak dan schiet hij weg zoals hieronder te zien. terwijl het eerst naast elkaar stond.

    dus zo:
    [code:1:0679db5e92]
    |——|
    |menu |
    |——|
    |—————————————|
    | paragraaf |
    |—————————————|
    [/code:1:0679db5e92]

    dit heeft vermoedelijk temaken met de float in de css. ik heb beide menu's float: left; gegeven.

    iemand een idee hoe ik dit kan oplossen? :)
  • Zou je misschien de nieuwe (aangepaste) css kunnen plakken
    dan kan ik je met je nieuwe probleem helpen.

    MVG,,
  • [code:1:0fc692927a]
    h1 {
    padding: 6px;
    margin: 0 0 0 200px;
    color: #9c0;
    background: lightgreen;
    }

    h2 {
    padding: 0.5em;
    margin: 0 0 0 0;
    color: #d9ffd9;
    background: #9c0;
    }

    p {
    padding: 0.5em 100px 0.5em 100px;
    margin: 0 0 0 250px;
    color: #333;
    background: lightgreen;
    }

    [/code:1:0fc692927a]

    Nu alleen nog de pixels wijzigen in een voor jou mooi ogende grootte en dan ben je klaar;)
  • Waarom staat dit onder programmeren, dit is css/html, geen programmeren
  • Ik vraag me af of TS nog terug komt…

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.