[html, css, js] voor dummies #20

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_106291295
quote:
0s.gif Op zondag 1 januari 2012 20:28 schreef karton2 het volgende:
Zou je misschien uit kunnen leggen wat het probleem kán zijn zodat ik er zelf achteraan kan gaan.
Het probleem kan vanalles zijn, dat kunnen wij moeilijk ruiken. Om maar wat met hagel te schieten:

- je CSS wordt niet geladen
- specificity is te laag
- je maakt een typfout in een classname
- je CSS of HTML valideert niet

Het is iig allemaal vrij makkelijk te achterhalen als je even in de paginabron kijkt en/of firebug gebruikt.
zcflevo.nl
pi_106291397
Daarnaast is een p natuurlijk geen link. Of was het maar een lukraak (en dus een beetje verkeerd) voorbeeld?
pi_106292853
Oke dom vraagje misschien, maar het wil maar niet lukken.

Ik probeer een webpagina te maken met een lange verticale banner 3*3 vakjes en dan weer een banner.

Nu lukken die 9 vakjes wel, maar als ik er een banner links van wil, of rechts dan verneukt hij alles. Hoe kan ik dit het makkelijkst op lossen.

Als jullie een plaatje nodig hebben hoor ik het graag.
Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je
pi_106294958
die 3*3 vakjes in een wrapper gooien.

Dat is het antwoord op de vraag die ik denk dat je probeert te stellen.
zcflevo.nl
pi_106295316
Nou ja dat probeer, maar op een of andere manier wil het niet lukken.

[code]
<div id="links"></div>
<div id="midden">9 div classes achter elkaar met float left</div>
</div id="rechts"></div>
[/code]

Zoiets is het globaal, maar de rechter div begint pas bij de laatste div binnen het midden. Maar dat snap ik dus niet.

Ik denk dat ik het bijna heb.
Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je
  zondag 1 januari 2012 @ 23:56:02 #206
228072 Crimyclown
Sapper de fap!
pi_106295395
quote:
3s.gif Op zondag 1 januari 2012 22:09 schreef picodealion het volgende:

[..]

Dit is niet echt een html/css vraag.

Sorry :@
Anonieme tievesclown
  zondag 1 januari 2012 @ 23:56:57 #207
228072 Crimyclown
Sapper de fap!
pi_106295429
quote:
17s.gif Op zondag 1 januari 2012 23:53 schreef DutchErrorist het volgende:
Nou ja dat probeer, maar op een of andere manier wil het niet lukken.
[ code verwijderd ]

Zoiets is het globaal, maar de rechter div begint pas bij de laatste div binnen het midden. Maar dat snap ik dus niet.

Ik denk dat ik het bijna heb.
Floaten?
Anonieme tievesclown
pi_106295493
quote:
0s.gif Op zondag 1 januari 2012 23:56 schreef Crimyclown het volgende:

[..]

Floaten?
Ik had verdomme ergens 700 px ipv 700px staan. Nou dat heb ik geweten. Nu is het allemaal goed.
Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je
  maandag 2 januari 2012 @ 15:53:00 #209
228072 Crimyclown
Sapper de fap!
pi_106314061
Ik heb meerdere JS files in mijn html files staan, alleen laden ze niet altijd. Maakt het wat uit in welke volgorde ik ze zet?
1
2
3
4
5
6
7
8		<head>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script type="text/javascript" src="scripts/vallign.js"></script>
<script type="text/javascript" src="scripts/js.js"></script>
<script type="text/javascript" src="scripts/imageswap.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FOK</title>
</head>

Hij heeft moeite om vallign.js te laden, soms gaat het wel goed maar soms ook niet. Dit document zorgt ervoor dat de tekst verticaal gecentreerd staat in de div tags.

vallign.js:
1
2
3
4
5
6		$(document).ready(function() {
  var myHeight = $("#div1").height();
  var parentHeight = $("#iets1").height();
  var myMarginTop = (parentHeight - myHeight) / 2;
  $("#div1").css("margin-top",  myMarginTop);
});

De code werkt gewoon maar hoe zorg ik ervoor dat de html pagina's altijd vallign.js laden/uitvoeren.
Anonieme tievesclown
pi_106314991
waarom zet je zo'n kort scriptje uberhaupt in een apart bestand?
En zou het kunnen komen doordat Jquery niet goed geladen is? Ik weet niet hoe betrouwbaar het is om dat uit een externe bron te laden...
zcflevo.nl
  maandag 2 januari 2012 @ 16:19:47 #211
228072 Crimyclown
Sapper de fap!
pi_106315079
quote:
5s.gif Op maandag 2 januari 2012 16:17 schreef KomtTijd... het volgende:
waarom zet je zo'n kort scriptje uberhaupt in een apart bestand?
En zou het kunnen komen doordat Jquery niet goed geladen is? Ik weet niet hoe betrouwbaar het is om dat uit een externe bron te laden...
Mag geen styling en scripting in het document zelf zetten.

Kan het wat uitmaken om alle js in 1 document te stoppen?
Anonieme tievesclown
pi_106315159
Hoezo niet?

En ja, dat kan uitmaken: Wordt je website (over het algemeen) sneller van.
zcflevo.nl
  maandag 2 januari 2012 @ 16:23:49 #213
228072 Crimyclown
Sapper de fap!
pi_106315250
quote:
5s.gif Op maandag 2 januari 2012 16:21 schreef KomtTijd... het volgende:
Hoezo niet?

En ja, dat kan uitmaken: Wordt je website (over het algemeen) sneller van.
Opdracht voor school, zal eens proberen om alles in 1 document te stoppen. Dit is de eerste keer dat ik problemen heb met het laden van een externe js file.
Anonieme tievesclown
  maandag 2 januari 2012 @ 16:53:37 #214
228072 Crimyclown
Sapper de fap!
pi_106316402
Alles in 1 bestand laad die zonder problemen.
Anonieme tievesclown
  maandag 2 januari 2012 @ 17:07:29 #215
56176 Catch22-
Ben je Blind?!
pi_106316974
Waar laadt je jQuery in? En het is beter om je custom JS in 1 externe file te zetten.
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?
  maandag 2 januari 2012 @ 22:39:48 #216
298746 Dalando
18, niet meer gefrustreerd
pi_106333281
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		body {
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    background: #f1f1f1;
}
            
#wrapper {
    width: 800px;
    margin: 0 auto;
    border-radius: 30px 30px 0px 0px;
    background: #e0e0e0;
}

#header {
    height: 20px;
    padding: 0px 20px;
}

#header .title {
    font-size: 30px;
    float: left;
    margin-top: 4px;
}

#header .search {
    float: right;
    margin-top: 8px;
}

#toolbox {
    float: right;
    background: #f0f0f0;
    padding: 5px;
    margin-left: 195px;
    position: relative;
    -webkit-transform: rotate(90deg); 
}

#textbox a {
    text-decoration: none;
}

#textbox a:hover {
    text-decoration: none;
}
    
            
#article {
    background: #e9e9e9;
    padding: 3px 20px;
    margin: 20px 0px;
}

#footer {
    text-align: center;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		<div id="wrapper">
            <div id="header">
                <div class="title">
                    Title
                </div>
                
                <div class="search">
                    <form name="articlesearch" method="post" action="/">
                        <input type="text" name="article" placeholder="Article...">
                        <input type="submit" value="Search">
                    </form>
                </div>
            </div>
            
            <div id="article">
                <div id="text">
                    text
                </div>
            </div>
            
            <div id="footer">
                © title 
            </div>
        </div>



Wat ik probeer te doen is een div aan de rechterkant van de #wrapper te zetten, zorgen dat de wrapper wel in het midden blijft, maar dat daar een soort van tab komt, waar de #toolbox komt te zitten, enig idee hoe ik dat kan doen?
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
pi_106333588
Ga eens met firebug langs een willekeurige skyscraper ad en je hebt je antwoord.
zcflevo.nl
  maandag 2 januari 2012 @ 22:51:46 #218
298746 Dalando
18, niet meer gefrustreerd
pi_106333965
quote:
14s.gif Op maandag 2 januari 2012 22:45 schreef KomtTijd... het volgende:
Ga eens met firebug langs een willekeurige skyscraper ad en je hebt je antwoord.
Gelukkig heb ik geen firebug, maar thanks, ik ga m'n best doen.
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
  maandag 2 januari 2012 @ 22:51:55 #219
56176 Catch22-
Ben je Blind?!
pi_106333978
Absoluut ten opzichte van die middendiv positioneren dus.

quote:
7s.gif Op maandag 2 januari 2012 22:51 schreef Dalando het volgende:

[..]

Gelukkig heb ik geen firebug, maar thanks, ik ga m'n best doen.
HTML'en/CSS'en/JS'en zonder Firebug (of andere webdevelopertoolkit) is echt een no-go. Moet je niet eens willen.
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?
  maandag 2 januari 2012 @ 23:01:44 #220
298746 Dalando
18, niet meer gefrustreerd
pi_106334518
quote:
11s.gif Op maandag 2 januari 2012 22:51 schreef Catch22- het volgende:
Absoluut ten opzichte van die middendiv positioneren dus.

[..]

HTML'en/CSS'en/JS'en zonder Firebug (of andere webdevelopertoolkit) is echt een no-go. Moet je niet eens willen.
Weet ik, daarom heb ik Element Inspecteren in Chrome. :D

Maar ff terug, ik heb nu dit:

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		<div id="wrapper">
            <div id="header">
                <div class="title">
                    Title
                </div>
                
                <div class="search">
                    <form name="articlesearch" method="post" action="/">
                        <input type="text" name="article" placeholder="Article...">
                        <input type="submit" value="Search">
                    </form>
                </div>
            </div>

         <div id="toolbox">
            <a href=""> [ edit ] </a>
        </div>
            
            <div id="article">
                <div id="text">
                    text
                </div>
            </div>
            
            <div id="footer">
                © title 
            </div>
        </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		#toolbox {
    margin-top: 55px;
    margin-left: 767px;
    position: absolute;
    -webkit-transform: rotate(90deg); 
}

#toolbox a {
    background: #e0e0e0;
    font-size: 20px;
    text-decoration: none;
    color: black;
    padding: 5px 20px;
    border-radius: 10px 10px 0px 0px;
}

#toolbox a:hover {
    background: #e9e9e9;
}

Als ik dan 1 linkje plaats, staat het perfect. Als ik een 2e linkje plaats daarintegen, shift ie van plek.

Hoe los ik dit op?
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
pi_106334699
Hoe bedoel je "shift ie van plek"? Maak anders even een testcase ofzo.
zcflevo.nl
  maandag 2 januari 2012 @ 23:15:06 #222
298746 Dalando
18, niet meer gefrustreerd
pi_106335298
quote:
14s.gif Op maandag 2 januari 2012 23:04 schreef KomtTijd... het volgende:
Hoe bedoel je "shift ie van plek"? Maak anders even een testcase ofzo.
http://fok.dalando.nl/dev/

Met firebug etc kun je zelf rechts in de toolbox <a href="">[ link ]</a> toevoegen, and see what happens.
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
pi_106336654
hmmpf die transform gooit roet in het eten. Hoogtes en breedtes worden ineens aan alle kanten door elkaar gehaald. Aangenomen dat -moz-transform ongeveer het zelfde werkt.
Ik kom iets beter in de buurt als ik de transform op de linkjes zelf zet...
zcflevo.nl
  maandag 2 januari 2012 @ 23:41:36 #224
298746 Dalando
18, niet meer gefrustreerd
pi_106336786
quote:
14s.gif Op maandag 2 januari 2012 23:39 schreef KomtTijd... het volgende:
hmmpf die transform gooit roet in het eten. Hoogtes en breedtes worden ineens aan alle kanten door elkaar gehaald. Aangenomen dat -moz-transform ongeveer het zelfde werkt.
Ik kom iets beter in de buurt als ik de transform op de linkjes zelf zet...
Meld maar als je een oplossing hebt, ik weet het niet meer.
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
  maandag 2 januari 2012 @ 23:45:12 #225
56176 Catch22-
Ben je Blind?!
pi_106337022
transform de content eens ipv de container
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?
actieve topics nieuwe topics
abonnement Unibet Coolblue
[html, css, js] voor dummies #20
Index

» digital corner

» development

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