quote:Op zondag 4 januari 2015 13:50 schreef Rockiejj het volgende:
Ah ja, dit is hoe ik het wilde hebben! Thanks!
Nog 1 vraagje:quote:
Die link is een button naar een andere pagina. Ik heb verschillende div's die even groot zijn en in elk zo'n div staat een button. Nu wil ik die button binnen elk vak op dezelfde plaats hebben staan.quote:
dankje, ik had gewoon bottom en left moeten gebruiken in plaats van met margin te kloten.quote:Op zondag 4 januari 2015 22:52 schreef Catch22- het volgende:
Deze al gelezen? Zo niet, goed en aandachtig doen
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!doctype html> <html> <head> <title>Tyler Ward Online</title> <meta name="description" content="Een fansite over Tyler Ward" /> <meta name="keywords" content="fansite over Tyler Ward Nederlands" /> <meta name="language" content="Nederlands" /> <meta name="copyright" content="xxx" /> <meta name ="author" content="xxx" /> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" / <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="shortcut icon" type="image/jpg" href="icon.png"> </head> <body> <h1 name=top>Welkom op de fansite van Tyler Ward!<br /> <a href="https://twitter.com/tylerwardmusic"><img src="media/images/twitter.svg" class=miniicon /></a> <a href="https://www.facebook.com/TylerWardMusic?fref=ts"><img src="media/images/Facebook.svg" class=miniicon /></a> <a href="https://www.youtube.com/channel/UC4vT3qTr8fwVS7IsPgqaGCQ"><img src="media/images/Youtube.svg" class=miniicon /></a> <a href="http://instagram.com/TylerWardMusic"><img src="media/images/Instagram.svg" class=miniicon /></a> <a href="http://www.tylerwardmusic.com/"><img src="media/images/Website.svg" class=miniicon /></a></h1> <ul> <li class=active><a href="index.html">Het laatste nieuws</a></li> <li><a href="over.htm">Over Tyler</a> <li><a href="galerij.htm">Galerij</a></li> <li><a href="contact.htm">Contact</a> <li><a href="zoeken.htm">Zoeken</a></li> </ul> <div class=links> <h2> De laatste video </h2> <div id="content"> <iframe width="560" height="315" src="http://www.youtube.com/embed/LVA0MZv8s1k?list=RDLVA0MZv8s1k" frameborder="0"></iframe> </div> <h2> Het laatste nieuws </h2> <div id="content"> <br /> <p> <img src="http://photos-a.ak.instagram.com/hphotos-ak-xaf1/t51.2885-15/10919308_800811829956376_2059906634_n.jpg" class="groot" alt="Tyler met zijn neefje"/><br /> Tyler is terug in Colorado en staat hier met zijn neefje op de foto.<br /> Colorado, USA (6 januari 2015)<br /> <a href="">Lees meer..</a> </p> <p> <img src=http://40.media.tumblr.com/8dfba4430e6c11714ca4c7b825bc7f6b/tumblr_nhle911TbV1r9kndao1_1280.jpg class="groot" alt="Tyler bij de ruïnes"/><br /> Momenteel zit Tyler Ward in Mexico, waar hij op de foto staat met de Maya ruïnes!<br /> Yucatan, Mexico (2 januari 2015)<br /> <a href="">Lees meer..</a> </p> <img src="media/images/underline.png" class="divider"/> <p> <br /> <img src=http://40.media.tumblr.com/9d11b04db262d7c166518bb4bb224a7f/tumblr_nhhjq9UQmV1r9kndao1_500.jpg class="groot" alt="Tyler op oud&nieuw" /><br /> Gelukkig nieuwjaar namens Tyler Ward!<br /> Mexico (1 januari 2015)<br /> </p> <a href=#top>Terug naar boven</a> </div> </div> <div class=rechts> <h2> Tyler op facebook </h2> <div id="content"> <p> bla bla bla </p </div> </div> <h2> Zoeken <form action="http://www.example.org/search.php"> <input type="search" name="search" placeholder="Zoek hier" /> <input type="submit" value="Zoek!" /> </form> </h2> <h2> Galerij </h2> <div id="galerij"> <img src=http://40.media.tumblr.com/8dfba4430e6c11714ca4c7b825bc7f6b/tumblr_nhle911TbV1r9kndao1_1280.jpg class="galerij"/> </div> <footer class=paginabreed> <p>© All rights reserved - 2014 <a href=#top>Terug naar boven</a></p> </footer> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | body{ background-color: #cccc99; color: white; font-family: Myriad Pro, Arial, Verdana; } h1{ background-color: #000033; border: 3px solid #444444; padding: 15px; margin: 1% 1%; text-align: center; } h2{ background-color: #000033; border: 3px solid #444444; text-align: center; padding-top: 5px; padding-bottom: 5px; } ul{ width: 96%; background-color: #000033; border: 3px solid #444444; padding: 1%; margin-left: 1%; text-align: center; height: auto; } li{ display: inline; color: white; position: relative; cursor: pointer; background: #000033; padding: 1%; font-size: 1.2em; } li.active{ background-color: white; text-decoration: underline; } li.active > a{ color: black; } ul li ul{ display: none; } .links{ width: 65%; float: left; margin: 0 1%; } .rechts{ width: 30%; float: right; margin: 0 1%; } #content { background-color: #000033; border: 3px solid #444444; text-align: center; clear: both; } #paginabreed{ width: 96%; background-color: #000033; border: 3px solid #444444; padding: 1%; margin-left: 1%; text-align: center; } #galerij { background-color: #000033; border: 3px solid #444444; text-align: center; padding: 1%; margin: 1%; } a{ color: #007E7E; text-decoration: none; } a:hover{ color: #cccc99; text-decoration: underline; } img.divider{ max-width: 50%; } img.galerij{ max-height: 30%; max-width: 30%; } img.groot{ max-height: 40%; max-width: 40%; min-width: 200px; min-height: 200px; } img.icon{ max-height: 50px; max-width: 50px; } img.miniicon{ max-height: 1em; max-width: 1em; } iframe{ padding: 1%; max-width: 100%; } footer{ width: 96%; background-color: #000033; border: 3px solid #444444; padding: 10px; margin-top: 1%; text-align: center; position: static; bottom: 0px; clear: both; height: auto !important} @media all and (max-width: 480px){ li{ display: block; } iframe{ max-width: 280px; } img{ max-height: 280px; max-width: 280px; } .links{ width: 100%; float: none; } .rechts{ width: 100%; float: none; } @media all and (min-width: 481px) and (max-width: 980px){ iframe{ width: 90%; height: 90%; } img{ max-height: 500px; max-width: 500px; } |
Hey Daniël, maak eens een jsfiddle / CodePen aan.quote:Op donderdag 8 januari 2015 11:26 schreef Rockiejj het volgende:
Ik loop weer te kloten, mijn footer wilt niet over de hele pagina, waarschijnlijk omdat ik een linker en een rechter div heb, maar is er een manier om dit op te lossen? Als ik clear: both; doe dan valt m'n rechter div schuin onder mijn linker div.
Hier de codes:
[ code verwijderd ]
[ code verwijderd ]
Ehm, dat zijn niet de codes van je footer, da's je hele fucking website. Maak eens een testcase.quote:Op donderdag 8 januari 2015 11:26 schreef Rockiejj het volgende:
Ik loop weer te kloten, mijn footer wilt niet over de hele pagina, waarschijnlijk omdat ik een linker en een rechter div heb, maar is er een manier om dit op te lossen? Als ik clear: both; doe dan valt m'n rechter div schuin onder mijn linker div.
Hier de codes:
[ code verwijderd ]
[ code verwijderd ]
Dat is wel het begin punt ja. HTML en CSS (CSS geeft het uiterlijk aan je html). 30 Days to learn HTML & CSS is bijvoorbeeld een goeie cursus om je deze basis te leren. En ga vooral lekker zelf proberen met de dingen die je leert. Van alleen opdrachtjes natypen leer je het niet.quote:Op donderdag 8 januari 2015 18:48 schreef Donnie-Brasco het volgende:
Als ik een beetje wil gaan beginnen met het maken van websites en dergelijke, waar kan ik dan het beste mee beginnen? HTML?
Gaan we daar mee beginnen, wordt gewoon een beetje tijdvedrijfquote:Op donderdag 8 januari 2015 18:57 schreef BrainOverfloW het volgende:
[..]
Dat is wel het begin punt ja. HTML en CSS (CSS geeft het uiterlijk aan je html). 30 Days to learn HTML & CSS is bijvoorbeeld een goeie cursus om je deze basis te leren. En ga vooral lekker zelf proberen met de dingen die je leert. Van alleen opdrachtjes natypen leer je het niet.
Een eh.. wat?quote:Op donderdag 8 januari 2015 14:09 schreef donroyco het volgende:
[..]
Hey Daniël, maak eens een jsfiddle / CodePen aan.
quote:Op donderdag 8 januari 2015 14:53 schreef KomtTijd... het volgende:
[..]
Ehm, dat zijn niet de codes van je footer, da's je hele fucking website. Maak eens een testcase.
http://codepen.io/anon/pen/myRXYMquote:Op donderdag 8 januari 2015 14:09 schreef donroyco het volgende:
[..]
Hey Daniël, maak eens een jsfiddle / CodePen aan.
Ik heb heel veel aan het boek HTML & CSS gehad, is een mooi en duidelijk boek.quote:Op donderdag 8 januari 2015 18:48 schreef Donnie-Brasco het volgende:
Als ik een beetje wil gaan beginnen met het maken van websites en dergelijke, waar kan ik dan het beste mee beginnen? HTML?
JSfiddle en Codepen zijn websites waar je HTML/CSS/JS op uit kunt voeren zonder een hele pagina te hoeven maken. Erg handig voor het testen van ideeën of het delen van stukken code als je ergens mij zit.quote:
Ik zie het inderdaad, handig!quote:Op vrijdag 9 januari 2015 22:41 schreef BrainOverfloW het volgende:
[..]
JSfiddle en Codepen zijn websites waar je HTML/CSS/JS op uit kunt voeren zonder een hele pagina te hoeven maken. Erg handig voor het testen van ideeën of het delen van stukken code als je ergens mij zit.
quote:Op donderdag 8 januari 2015 14:09 schreef donroyco het volgende:
[..]
Hey Daniël, maak eens een jsfiddle / CodePen aan.
Schatten, willen jullie nog even naar mijn code kijken, ik raak er alleen maar dieper in verdwaaldquote:Op donderdag 8 januari 2015 14:53 schreef KomtTijd... het volgende:
[..]
Ehm, dat zijn niet de codes van je footer, da's je hele fucking website. Maak eens een testcase.
Je zou er voor kunnen kiezen om je content in een main tag te zetten. Dan krijgt je HTML de volgende structuurquote:Op maandag 12 januari 2015 22:32 schreef Rockiejj het volgende:
[..]
[..]
Schatten, willen jullie nog even naar mijn code kijken, ik raak er alleen maar dieper in verdwaald
1 2 3 4 5 6 7 8 9 10 | <header> -Hier je titel en menu code </header> <main> <section class="links"></section> <section class="rechts"></section> </main> <footer> -Copyright </footer> |
Ik ga kijken of dit het oplost, thanks!quote:Op dinsdag 13 januari 2015 00:07 schreef BrainOverfloW het volgende:
[..]
Je zou er voor kunnen kiezen om je content in een main tag te zetten. Dan krijgt je HTML de volgende structuur
[ code verwijderd ]
Op die manier kun je de header, main en footer als 3 horizontale blokken op elkaar zetten. Binnen je main zet je vervolgens je content in twee rijen. De main zal dan altijd de lengte hebben van de langste rij waardoor je footer automatisch naar onderen wordt gedrukt.
Werkte perfect!quote:Op dinsdag 13 januari 2015 00:07 schreef BrainOverfloW het volgende:
[..]
Je zou er voor kunnen kiezen om je content in een main tag te zetten. Dan krijgt je HTML de volgende structuur
[ code verwijderd ]
Op die manier kun je de header, main en footer als 3 horizontale blokken op elkaar zetten. Binnen je main zet je vervolgens je content in twee rijen. De main zal dan altijd de lengte hebben van de langste rij waardoor je footer automatisch naar onderen wordt gedrukt.
nav ul li:hover > ulquote:Op donderdag 15 januari 2015 22:49 schreef Rockiejj het volgende:
[..]
Werkte perfect!
Kan je voor mij misschien ook nog eens kijken naar mijn navigatiebalk, ik heb nu een dropdown menu, alleen is mijn dropdown nu extreem breed, en ik zie niet waar het fout gaat. Kun je me misschien helpen![]()
![]()
http://codepen.io/anon/pen/myRXYM
Thnx voor de tip, heb nog cadeaubon van bol.com liggen dus ga hem bestellen denk ikquote:Op vrijdag 9 januari 2015 22:41 schreef Rockiejj het volgende:
[..]
Ik heb heel veel aan het boek HTML & CSS gehad, is een mooi en duidelijk boek.
Ja moet je doen, ik heb er wel een hoop aan gehad!quote:Op vrijdag 16 januari 2015 00:53 schreef Donnie-Brasco het volgende:
[..]
Thnx voor de tip, heb nog cadeaubon van bol.com liggen dus ga hem bestellen denk ik
.top p {quote:Op dinsdag 27 januari 2015 08:47 schreef Chandler het volgende:
Kleine vraag, hoe krijg ik bij het volgende voorbeeld de uitloop van de span terug in de container?
http://codepen.io/anon/pen/ogwraj
[ afbeelding ]
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |