[HTML, CSS, JS] Frontend #42: eval("alert('weer een nieuw deel')");

zondag 4 januari 2015 @ 13:32:04 #202

Rockiejj

Who's your daddy?

He, ik ben bezig met een opdracht voor school maar loop nu tegen het volgende aan:

Ik wil in 1 paragraaf meerdere onderbrekingsstrepen plaatsen (heten ze zo? Het <hr />-streepje iig)
maar als ik dat doe stopt m'n paragraaf er mee, dus de CSS tot dat stuk doet het gewoon goed, maar tot de streep en niet verder!

Klopt dat, of doe ik iets fout?

Diep inspirerende quote
- "bekend" persoon

zondag 4 januari 2015 @ 13:34:17 #203

Reemi

Zeg maar Remi.

quote:
Op zondag 4 januari 2015 13:32 schreef Rockiejj het volgende:
He, ik ben bezig met een opdracht voor school maar loop nu tegen het volgende aan:

Ik wil in 1 paragraaf meerdere onderbrekingsstrepen plaatsen (heten ze zo? Het <hr />-streepje iig)
maar als ik dat doe stopt m'n paragraaf er mee, dus de CSS tot dat stuk doet het gewoon goed, maar tot de streep en niet verder!

Klopt dat, of doe ik iets fout?

Kun je je code plaatsen? Schept een duidelijker beeld van wat er fout gaat.

Smile like you mean it
www.wefut.com

zondag 4 januari 2015 @ 13:40:23 #204

Rockiejj

Who's your daddy?

quote:
Op zondag 4 januari 2015 13:34 schreef Reemi het volgende:

[..]

Kun je je code plaatsen? Schept een duidelijker beeld van wat er fout gaat.

Tuurlijk!
Het HTML stuk waar het over gaat:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class=links>
            <h2> Het laatste nieuws</h2>
            <p> <br />
                <img src=http://40.media.tumblr.com/8dfba4430e6c11714ca4c7b825bc7f6b/tumblr_nhle911TbV1r9kndao1_1280.jpg /><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 />
                <hr />
                <img src=http://40.media.tumblr.com/9d11b04db262d7c166518bb4bb224a7f/tumblr_nhhjq9UQmV1r9kndao1_500.jpg /><br />
                Gelukkig nieuwjaar namens Tyler Ward!<br />
                Mexico (1 januari 2015)
            </p>
        </div>

CSS:

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

body{
    background-color: #cccc99;
    color: white;
    }
h1{
    width: 95%;
    background-color: #000033;
    border: 2px solid white;
    padding: 15px;
    margin: 1% 1%;
    text-align: center;
    }
h2{
    background-color: #000033;
    border: 2px solid white;
    text-align: center;
    padding-top: 1%;
    padding-bottom: 1%;
    }

ul{
    width: 95%;
    background-color: #000033;
    border: 2px solid white;
    padding: 15px;
    margin: 1%;
    text-align: center;
    }

li{
    display: inline;
    padding: 4%;
    color: white;
    }

.links{
    width: 59%;
    float: left;
    margin: 1% 1%;
    }

.rechts{
    width: 30%;
    float: right;
    padding-right: 15px;
    margin: 1% 1%;
    }

p {    background-color: #000033;
    border: 2px solid white;
    text-align: center;
    }

a{
    color: white;
    text-decoration: none;
    }

a:hover{
    color: #cccc99;
    text-decoration: underline;
    }

img{
    max-height: 365px;
    max-width: 365px;
    }

Diep inspirerende quote
- "bekend" persoon

zondag 4 januari 2015 @ 13:45:12 #205

Reemi

Zeg maar Remi.

quote:
Op zondag 4 januari 2015 13:40 schreef Rockiejj het volgende:

[..]

Tuurlijk!
Het HTML stuk waar het over gaat:
[ code verwijderd ]

CSS:
[ code verwijderd ]

<p> is een enkele paragraaf, terwijl <hr> juist bedoeld is om twee paragrafen te scheiden. Oftewel, een logische indeling is:

1
2
3

Ik zie dat je het <p>-element als contentvak gebruikt door het een achtergrond te geven, maar dat kun je beter met een <div> doen. Dat levert het volgende op:

1
2
3
4
5

Dan staat alles netjes in hetzelfde vak.

Smile like you mean it
www.wefut.com

zondag 4 januari 2015 @ 13:45:50 #206

Catch22-

Ben je Blind?!

Een p is semantisch gezien voor tekst. Dus niet voor hr's of plaatjes

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

zondag 4 januari 2015 @ 13:46:07 #207

Rockiejj

Who's your daddy?

quote:
Op zondag 4 januari 2015 13:45 schreef Reemi het volgende:

[..]

<p> is een enkele paragraaf, terwijl <hr> juist bedoeld is om twee paragrafen te scheiden. Oftewel, een logische indeling is:
[ code verwijderd ]

Ik zie dat je het <p>-element als contentvak gebruikt door het een achtergrond te geven, maar dat kun je beter met een <div> doen. Dat levert het volgende op:
[ code verwijderd ]

Dan staat alles netjes in hetzelfde vak.

Maar dan krijg je alle paragrafen met een aparte omlijning, right?

Diep inspirerende quote
- "bekend" persoon

zondag 4 januari 2015 @ 13:46:30 #208

Reemi

Zeg maar Remi.

quote:
Op zondag 4 januari 2015 13:46 schreef Rockiejj het volgende:

[..]

Maar dan krijg je alle paragrafen met een aparte omlijning, right?

Niet als je doet wat ik zeg: de omlijning en achtergrondkleur aan de div toewijzen, in plaats van aan het p-element.

Smile like you mean it
www.wefut.com

zondag 4 januari 2015 @ 13:46:54 #209

Rockiejj

Who's your daddy?

quote:
Op zondag 4 januari 2015 13:46 schreef Reemi het volgende:

[..]

Niet als je doet wat ik zeg: de omlijning aan de div toewijzen, in plaats van aan het p-element.

Ik wilde het net editten

Diep inspirerende quote
- "bekend" persoon

zondag 4 januari 2015 @ 13:50:00 #210

Rockiejj

Who's your daddy?

Ah ja, dit is hoe ik het wilde hebben! Thanks!

Diep inspirerende quote
- "bekend" persoon

zondag 4 januari 2015 @ 13:50:20 #211

Reemi

Zeg maar Remi.

quote:
Op zondag 4 januari 2015 13:50 schreef Rockiejj het volgende:
Ah ja, dit is hoe ik het wilde hebben! Thanks!

Smile like you mean it
www.wefut.com

zondag 4 januari 2015 @ 14:15:06 #212

Rockiejj

Who's your daddy?

quote:
Op zondag 4 januari 2015 13:50 schreef Reemi het volgende:

[..]

Nog 1 vraagje:
Ik heb twee aparte blokken (1 links en 1 rechts) maar ik wil dat de afbeeldingen links max 65% van de pagina omvatten en de afbeeldingen rechts slechts 30%, hoe moet ik dit in mijn css veranderen?
Ik heb wel al aparte div's genaamd links en rechts.

Diep inspirerende quote
- "bekend" persoon

zondag 4 januari 2015 @ 14:25:46 #213

Rockiejj

Who's your daddy?

Laat maar, opgelost

Diep inspirerende quote
- "bekend" persoon

zondag 4 januari 2015 @ 22:45:29 #214

KimJong-un

Heeft de titel Doctor

als ik een link in een div heb staan en in mijn css maak ik de position absolute, werkt dat dan?

.div a{
position: absolute;
}

bijnamen: briljante kameraad, geweldige leider.

zondag 4 januari 2015 @ 22:46:03 #215

Merkie

Surprisingly contagious

Wat is je vraag? Je code is correct.

2000 light years from home

zondag 4 januari 2015 @ 22:50:41 #216

KimJong-un

Heeft de titel Doctor

quote:
Op zondag 4 januari 2015 22:46 schreef Merkie het volgende:
Wat is je vraag? Je code is correct.

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.

Dus zeg maar 10px vanaf bottom en 10px vanaf links.

Nu heb ik gewoon float left en komt het onder de tekst te staan. De hoeveelheid tekst bepaald dus hoe hoog de button in het vak staat.

Ik dacht die link nu position absolute te geven en de div waar die instaat position relative. Dan zou het mooiste zijn als ik kan zeggen dat de margin-bottom 10 px is en dat hij dan netjes 10 px beneden uit de rand staat.

bijnamen: briljante kameraad, geweldige leider.

zondag 4 januari 2015 @ 22:52:09 #217

Catch22-

Ben je Blind?!

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/

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

zondag 4 januari 2015 @ 23:01:59 #218

KimJong-un

Heeft de titel Doctor

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/

dankje, ik had gewoon bottom en left moeten gebruiken in plaats van met margin te kloten.

bijnamen: briljante kameraad, geweldige leider.

donderdag 8 januari 2015 @ 11:26:29 #219

Rockiejj

Who's your daddy?

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:

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;
        }

[ Bericht 0% gewijzigd door Rockiejj op 09-01-2015 22:40:04 ]

Diep inspirerende quote
- "bekend" persoon

donderdag 8 januari 2015 @ 14:09:29 #220

donroyco

dus niet Donroyco

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 ]

Hey Daniël, maak eens een jsfiddle / CodePen aan.

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

donderdag 8 januari 2015 @ 14:53:17 #221

KomtTijd...

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.

zcflevo.nl

donderdag 8 januari 2015 @ 18:48:34 #222

Donnie-Brasco

Malparido!

Als ik een beetje wil gaan beginnen met het maken van websites en dergelijke, waar kan ik dan het beste mee beginnen? HTML?

I got two dudes that turned into raspberry slushy and flushed down my toilet. I can't even take a proper dump in there.

donderdag 8 januari 2015 @ 18:57:04 #223

BrainOverfloW

Fok! around the Clock!

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?

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.

Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson

donderdag 8 januari 2015 @ 19:12:12 #224

Donnie-Brasco

Malparido!

quote:
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.

Gaan we daar mee beginnen, wordt gewoon een beetje tijdvedrijf

I got two dudes that turned into raspberry slushy and flushed down my toilet. I can't even take a proper dump in there.

vrijdag 9 januari 2015 @ 22:34:20 #225

Rockiejj

Who's your daddy?

quote:
Op donderdag 8 januari 2015 14:09 schreef donroyco het volgende:

[..]

Hey Daniël, maak eens een jsfiddle / CodePen aan.

Een eh.. wat?

Diep inspirerende quote
- "bekend" persoon

Forum Opties
Forumhop:
Hop naar:	(afkorting, bv 'KLB')

[HTML, CSS, JS] Frontend #42: eval("alert('weer een nieuw deel')");

» digital corner

» digital corner