Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

HTML code opschonen plaatjes en lege gedeelte boven aan

bewerkt za 1 mrt 2014 in XHTML, XML Posts: 20
Ik heb een pagina gemaakt waar lege ruimte boven aan zit en lege ruimte onderaan tussen mijn plaatje en tekst

Wat moet ik opschonen hiervoor? Lastige vraag weer. maar begin het html programeren langzaam weer te leren.

http://members.ziggo.nl/youtube/test/informatie.html is de pagina op het moment.

Getagd:

Reacties

  • bewerkt za 1 mrt 2014
    PMPosts: 65
    Dat is niet zo heel moeilijk als je kijkt naar de volgende code,

    <div id="logo" class="style19" style="position: absolute; width: 689px; height: 63px; z-index: 2; left: 5px; top: 0px">
    <h1 class="style12">
    <img width="677" height="61" src="../sitepics/logo.jpg" alt="">
    </h1>
    </div>
    En daarbij hoort ook nog een beetje css,

    .style12 {
    font-size: 55pt;
    }
    Geen idee waarom je een kop 1 (h1) neer zet en een afbeelding er in plaatst maar dat is in ieder geval niet goed.
    In ieder geval dit drukt je pagina naar beneden en moet je pagina echt 4043 pixels hoog zijn zo als je aangeeft in de eerste div met height: 4043px;
    Dekjam website techniek
    http://www.dekjam.nl
    KvK: 57623503
  • bewerkt za 1 mrt 2014
    PMPosts: 20
    oke dat helpt inderdaad. Maar wat is je advies voor die 4043 dan? want als ik dat niet doe dan laat die alles onder die pixels niet zien.

    En het plaatje onderaan drukt die ook helemaal halve meter naar onder hoe los ik dat op?
  • PMPosts: 732
    Die hele html met style is (sorry) een ramp.
    Dit kan veel eenvoudiger voor zoon stukje met alleen een menu, logo en tekst.

    Momenteel even geen tijd om het aan te passen (carnaval in het zuiden), maar geef me tot morgen en zal je een juiste/werkend gedeelte plaatsen.
    If it's not fun, you're not doing it right!
  • Je zou eens kunnen beginnen met de div ONDER de body te zetten. Feitelijk heb je 2 divs mete dezelfde ID, niet handig.

    Alle html hoort tussen body & /body te staan.

    Verder waarom een class gebruiken + een style gebruiken. Maak er 1 class van of geef er 2 op. (dat kun je eenvoudig doen door class="style12 extraclass extraclass2 enz".

    extraclass, extraclass2 en ook enz zijn dan class namen.

    Maakt je code vaak een stuk leesbaarder. Ook als je bv. je styles in een apart bestand zet.

    Eigenlijk gebruik ik altijd classes en alleen styles als bv. iets extra bij een class opgegeven moet worden.
  • Mijn goedbedoelde advies is om naar de bibliotheek te gaan en een boek te lenen over html & css.
    Ga dat eens rustig lezen en probeer te begrijpen wat er word uitgelegd en ga dan eens met dat boek naast je een webpagina maken in kladblok. Doe dat eerst lekker met tabellen of wat voor jouw het makkelijkste is.

    Maak je nog niet druk om het lettertype of de kleur van de pagina maar zorg er eerst eens voor dat het werkt en dat je begrijpt waar om het werkt. Dan ga je eens met het css aan de gang en als je dat ook door krijgt kan je gaan beginnen aan lagen.
    En als je die dan netjes in een webpagina verwerkt krijgt weet je hoe het, een beetje, werkt.

    Als je het onder de knie begint te krijgen dan kan je sjablonen gaan maken of een sjabloon zo als Bootstrap gaan gebruiken.
    En ja, dat duurt wel even voor dat je het onder de knie hebt. Ben nu zelf pas tien jaar bezig en leer nog steeds iedere dag.
    Dekjam website techniek
    http://www.dekjam.nl
    KvK: 57623503
  • bewerkt zo 2 mrt 2014
    PMPosts: 20
    ReneV ik hoor het wel.

    En dan kijk ik wel eens of er grote verschillen in zitten. Ik leer het zo ook wel. En de site werkt opzich wel maar rome is ook niet 1 dag gebouwd dus ik heb geduld.
  • bewerkt ma 3 mrt 2014
    PMPosts: 732
    Ik heb niet alle teksten overgenomen, juist je html code en css opgeruimd.
    Tevens die social scripts er uit gelaten, want deze kun je ook met een gewone link realiseren.
    Ook heb ik de afbeelding weg gelaten, want je moet tohc 18+ zijn om een autoverzekering af te sluiten ;) tevens vindt ik zonder afbeelding dat het wat professioneler uit ziet.

    Suc6


    <!DOCTYPE html>
    <html>

    <head>
    <meta charcet="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Autoverzekeringvergelijker</title>

    <meta name="keywords" content="autoverzekering, vergelijker, autoverzekering vergelijk, vergelijk, auto, verzekering, zorg, goedkoop, goedkoopste,">
    <meta name="description" content="autoverzekering vergelijker Vergelijk hier goedkope en dure verzekeringen met elkaar en geniet van de beste verzekering.">
    <meta name="verification" content="c659dacac748a0fc852d8220535f5970">

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css ">

    <style>
    /*{
    margin: 0;
    padding: 0;
    }
    .clearfix:before, .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
    }
    .clearfix:after {
    clear: both;
    }
    .clearfix {
    zoom: 1; /* IE < 8 */
    }
    body{
    background-color: #fff;
    color: #000;
    font: normal 12px/30px sans-serif;
    }
    #wrapper{
    margin: 5px auto;
    width: 958px;
    }
    h1, h2, h3, h4, h5 {
    padding: 10px 0;
    }
    h1{
    float: left;
    font-size: 32px;
    padding-left: 10px;
    color: #fff;
    }
    h2 {
    font-size: 24px;
    }
    h3, h5 {
    font-size: 20px;
    }
    h4 {
    font-size: 18px;
    }
    #header, #footer, .menu li a, .menu li:hover ul li a:hover {
    background-color: #00bfff;
    }
    #header {
    padding-top: 10px;
    margin-bottom: 40px;
    }
    #footer {
    color: #fff;
    padding: 10px;
    margin-top: 40px;
    }
    #header ul, #footer ul {
    list-style: none;
    margin-top: 10px;
    }
    #header a, #footer a {
    color: #fff;
    display: block;
    text-decoration: none;
    }
    .menu, .menu li, .social li, #footer li {
    float: left;
    }
    .social, #footer li:last-child {
    float: right;
    }
    .menu li:hover ul li {
    float: none;
    }
    .social, .social li, #footer li {
    margin-right: 10px;
    }
    .menu li ul {
    display: none;
    }
    .menu li:hover ul {
    display: block;
    position: absolute;
    margin: 0 !important;
    }
    .menu li a{
    font-weight: bold;
    font-size: 14px;
    padding: 7px 14px;
    }
    .menu li li a {
    border-top: 1px solid #fff;
    font-style: italic;
    font-weight: normal;
    }
    .menu li:hover ul li, .menu li:hover a {
    background: #00abe3;
    }
    #content{
    padding: 0 10px;
    }
    #content ul {
    list-style-position: inside;
    padding-left: 20px;
    }
    </style>
    </head>
    <body>

    <div id="wrapper">
    <div id="header">
    <h1>www.kiesuwautoverzekering.nl</h1>
    <ul class="social">
    <li><a href="http://twitter.com/home?status=Autoverzekering - Autoverzekeringvergelijker+http://www.kiesuwautoverzekering.nl/ "><i class="fa fa-facebook-square fa-2x"></i></a></li>
    <li><a href="http://www.facebook.com/share.php?u=http://www.kiesuwautoverzekering.nl/&amp;amp;title=Autoverzekering - Autoverzekeringvergelijker "><i class="fa fa-twitter-square fa-2x"></i></a></li>
    <li><a href="https://plus.google.com/share?url=http://www.kiesuwautoverzekering.nl/ "><i class="fa fa-linkedin-square fa-2x"></i></a></li>
    </ul>
    <ul class="menu">
    <li><a href="#">Autoverzekering <i class="fa fa-caret-down"></i></a>
    <ul>
    <li><a href="http://www.kiesuwautoverzekering.nl/ ">Autoverzekering</a></li>
    <li><a href="http://www.zorgkiesje.nl/ ">Zorgverzekering</a></li>
    <li><a href="http://members.ziggo.nl/youtube/telecom ">Telecom</a></li>
    <li><a href="http://members.ziggo.nl/youtube/energievergelijker ">energievergelijker</a></li>
    <li><a href="http://members.ziggo.nl/youtube/simonly ">simonly abbonementen</a></li>
    </ul>
    </li>
    <li><a href="#">Informatie <i class="fa fa-caret-down"></i></a>
    <ul>
    <li><a href="http://www.kiesuwautoverzekering.nl/ ">Autoverzekering</a></li>
    <li><a href="http://www.zorgkiesje.nl/ ">Zorgverzekering</a></li>
    <li><a href="http://members.ziggo.nl/youtube/telecom ">Telecom</a></li>
    <li><a href="http://members.ziggo.nl/youtube/energievergelijker ">energievergelijker</a></li>
    <li><a href="http://members.ziggo.nl/youtube/simonly ">simonly abbonementen</a></li>
    </ul>
    </li>
    <li><a href="#">Wat wij doen <i class="fa fa-caret-down"></i></a>
    <ul>
    <li><a href="http://www.kiesuwautoverzekering.nl/ ">Autoverzekering</a></li>
    <li><a href="http://www.zorgkiesje.nl/ ">Zorgverzekering</a></li>
    <li><a href="http://members.ziggo.nl/youtube/telecom ">Telecom</a></li>
    <li><a href="http://members.ziggo.nl/youtube/energievergelijker ">energievergelijker</a></li>
    <li><a href="http://members.ziggo.nl/youtube/simonly ">simonly abbonementen</a></li>
    </ul>
    </li>
    <li><a href="#">Diverse vergelijkers <i class="fa fa-caret-down"></i></a>
    <ul>
    <li><a href="http://www.kiesuwautoverzekering.nl/ ">Autoverzekering</a></li>
    <li><a href="http://www.zorgkiesje.nl/ ">Zorgverzekering</a></li>
    <li><a href="http://members.ziggo.nl/youtube/telecom ">Telecom</a></li>
    <li><a href="http://members.ziggo.nl/youtube/energievergelijker ">energievergelijker</a></li>
    <li><a href="http://members.ziggo.nl/youtube/simonly ">simonly abbonementen</a></li>
    </ul>
    </li>
    <li><a href="#">Contact</a></li>
    </ul>
    <div class="clearfix"></div>
    </div>
    <div id="content">
    <h2>Informatie</h2>
    <h3>Soorten Autoverzekeringen</h3>
    <h4>Allrisk&nbsp;verzekering</h4>
    <p>Een WA plus volledig casco (Allrisk) verzekering is de meest complete autoverzekering die u kunt afsluiten. Een allrisk verzekering vergoedt namelijk, in tegenstelling tot een beperkt casco verzekering, ook schade door eigen schuld (botsen, van de weg raken, slippen, aanrijding etc.). Vaak wordt er voor een allrisk verzekering gekozen wanneer de auto jonger is dan drie jaar. Na drie jaar is het verstandig om over te stappen op een minder uitgebreide optie. Ook wanneer de auto ouder is dan 3 jaar, maar nog niet is afbetaald, is het verstandig om een allrisk verzekering af te sluiten. Mocht u in dat geval de auto total loss rijden, dan hoeft u niet de rest van de lening af te lossen.</p>
    <p>Een allrisk verzekering dekt niet alleen de schade die u anderen toebrengt, maar tevens de schade aan uw eigen voertuig, zelfs wanneer u als schuldige wordt aangewezen. Hieronder vallen o.a. de volgende gebeurtenissen:</p>
    <ul>
    <li>Brand, explosie, blikseminslag, zelfontbranding, kortsluiting</li>
    <li>Ruitbreuk, alsmede de schade van de scherven</li>
    <li>Diefstal, joyriden</li>
    <li>Ruitbreuk</li>
    <li>Botsen en omslaan</li>
    <li>Aanrijding</li>
    <li>Slippen</li>
    <li>Te water raken</li>
    <li>Storm, overstroming, aardbeving, lawine, andere natuurrampen</li>
    <li>Botsingen met overstekend wild, loslopend dieren of vogels</li>
    <li>Bijdrage in averij grosse</li>
    <li>Schade bij transport per boot of trein, behalve lakschade en krassen</li>
    <li>Opstootjes, rellen</li>
    <li>Luchtvaartuigen en voorwerpen die uit de toestellen vallen</li>
    <li>Vervoer van gewonden</li>
    <li>Kosten voor bewaking, berging en vervoer</li>
    </ul>
    <h4>Beperkt Casco Verzekering</h4>
    <p>enz.</p>
    </div>
    <div id="footer">
    <h5>www.kiesuwautoverzekering.nl</h5>
    <ul>
    <li><a href="overdewebsite"><a class="fa fa-dot-circle-o"></i> Over de website</a></li>
    <li><a href="Privacy"><a class="fa fa-dot-circle-o"></i> Privacybeleid</a></li>
    <li><a href="sitemap"><a class="fa fa-dot-circle-o"></i> Sitemap</a></li>
    <li>Copyright 2014</li>
    </ul>
    <div class="clearfix"></div>
    </div>
    </div>

    </body>
    </html>
    If it's not fun, you're not doing it right!
  • bewerkt zo 2 mrt 2014
    PMPosts: 65
    Ziet er netjes uit Rene maar ik mis een " in deze

    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css&quot;"; rel="stylesheet">
    regel.
    En waar werk jij normaal mee want in deze

    <i class="fa fa-caret-down"></i>
    code kom ik wel een class's tegen maar niet in het css.
    Dekjam website techniek
    http://www.dekjam.nl
    KvK: 57623503
  • PMPosts: 732
    Het moet inderdaad in plaats van die quote een " tag zijn.
    Probleempje van weergave op forum is gelijk doorgespeeld aan admin.

    Die iccontjes zijn doormiddel van font-awesome (scheelt een berg afbeeldingen).
    Normaal sla je fontawesome op, en verwijs je rechtstreeks erna toe in plaats van dat je naar een ander site verwijst.

    Wat bedoel je precies waar werk je normaal mee ?

    If it's not fun, you're not doing it right!
  • bewerkt ma 3 mrt 2014
    PMPosts: 162
    Het "&quot" ipv " heeft blijkbaar iets te maken met de url in de link, als je http://netdna.bootstrapcdn.com uit de link haalt ontstaat die fout er niet (ontdekt door vinTage).

    <link href="font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    Bedankt voor de melding
    UPDATE: het blijkt als je voor de laatste " in de url een spatie zet het probleem is opgelost.

    Voorbeeldje hieronder:

    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css " rel="stylesheet">
    De meeste fouten ontstaan tussen de monitor en de rugleuning van je stoel!
  • ReneV schreef:: Wat bedoel je precies waar werk je normaal mee ?
    Nou dat je deze class bijna overal laat terug komen maar het niet in de style css staat.
    Nu had ik niet goed gekeken naar de link die je had neer gezet voor het css bestand anders had ik deze vraag waarschijnlijk niet gesteld.


    Dekjam website techniek
    http://www.dekjam.nl
    KvK: 57623503
  • PMPosts: 732
    normaal heb ik de style voor fontawesome ook in de eigen style staan en link ik niet naar een ander domein.
    maar in voorbeeld was dat wat moeilijk te realiseren.
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.