[html, css, js] voor dummies #18

DIG Digital Corner

Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.

Je bent niet ingelogd. Klik hier om in te loggen of hier om een gratis account aan te maken.

actieve topics nieuwe topics

abonnement Unibet Coolblue

actieve topics nieuwe topics

abonnement Unibet Coolblue

vrijdag 11 november 2011 @ 15:48:25 #276

Tijn

quote:
Op vrijdag 11 november 2011 15:29 schreef Catch22- het volgende:

[..]

Sja, klanten die het vragen, krijgen het ook (Betalen er ook voor immers)

Oh natuurlijk, als IE7 specifiek wordt gevraagd, dan krijgen ze het ook. Maar die vraag krijg ik eigenlijk niet vaak.

Verberg de nieuwsticker

vrijdag 11 november 2011 @ 15:51:23 #277

RenRen-

quote:
Op vrijdag 11 november 2011 15:45 schreef Catch22- het volgende:
waarom wil je die hoogte? kan je geen repeterende achtergrond instellen die de achtergrond van die 2 kleinere kolommen faked?

en dat je die dan op de container instelt.

Omdat ik een linkerdiv heb met een rechterborder, center met links/rechts border, rechts met een linkerborder. Die moeten dubbele lijntjes naboodsen. Ik mag steeds geen achtergrondafbeelding gebruiken, is slordig. >: Dus ik zoek andere oplossingen. Maar ik denk dat het neerkomt op een achtergrondafbeelding.

vrijdag 11 november 2011 @ 16:00:54 #278

Catch22-

Ben je Blind?!

Die center wordt in principe het hoogst toch?

als de container links en rechts een border heeft en de center ook links/rechts, heb je je situatie toch?

Ik zou echter gewoon even een jQuery scriptje bouwen. Wat ik postte zou al moeten werken.

http://jsbin.com/onulog/3/edit#source

linksboven op render drukken

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

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
  #container {
    float:left;
  }
  #container div {
    float:left;
    width:100px;
  }
  #left { border-left:1px solid red; }
  #center { border-left:1px solid red; border-right:1px solid red; }
  #right { border-right:1px solid red; }
</style>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#container div").each(function() { $(this).height($(this).parent().height()); });
                                          });
  </script>
</head>
<body>
  <div id="container">
    <div id="left"><h2>menu</h2>
      1. ja<br />
      2. Nee<br />
      3. Ja
    </div>
  <div id="center">
    <h1>Ja hallo</h1>
     <p>
        Echt mooi!
    </p>
        <p>
        Echt mooi!
    </p>
        <p>
        Echt mooi!
    </p>
        <p>
        Echt mooi!
    </p>
    <p>
        Echt mooi!
    </p>
  </div>
  <div id="right"><h2>menu</h2>
      1. ja<br />
      2. Nee<br />
    3. Ja<br />
      1. ja<br />
      2. Nee<br />
      3. Ja</div>
  </div>
</body>
</html>

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?

vrijdag 11 november 2011 @ 16:19:17 #279

RenRen-

quote:
Op vrijdag 11 november 2011 16:00 schreef Catch22- het volgende:
Die center wordt in principe het hoogst toch?

als de container links en rechts een border heeft en de center ook links/rechts, heb je je situatie toch?

Ik zou echter gewoon even een jQuery scriptje bouwen. Wat ik postte zou al moeten werken.

http://jsbin.com/onulog/3/edit#source

linksboven op render drukken
[ code verwijderd ]

Ik ga er strakjes even naar kijken, ben even naar iets anders aan het kijken (en ik ben niet zo goed in jQuery, dus moet er even de tijd voor nemen).
En die situatie die ik probeer werkt dus niet, om de een of andere reden pakt de container zijn 100% al niet, waardoor de linker en de rechter 100% ook niet pakken. De container klapt namelijk in, wat raar is, want er staat content in...

vrijdag 11 november 2011 @ 16:23:11 #280

Catch22-

Ben je Blind?!

je moet de container ook floaten, anders gaat t niet goed

als je daar een margin auto op hebt, moet je de divs ff wrappen

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?

vrijdag 11 november 2011 @ 17:00:23 #281

QM84

Het Orakel

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

<!doctype html>
<html lang="nl">
<head>
    <title>TEST</title>
    <style>
    #wrapper {
      margin: 0 auto;
      overflow: hidden;
    }
    .col {
      float: left;
      width: 33%;
      padding-bottom: 100000px;
      margin-bottom: -100000px;
    }
    #col_left {
      border-left: 1px solid red;
      background-color: #cacaca;
    }
    #col_middle {
      border-left: 1px solid green;
      border-right: 1px solid yellow;
      background-color: #ececec;
    }
    #col_right {
      border-right: 1px solid pink;
      background-color: #343434;
    }
  </style>
</head>

<body>

<div id="wrapper">

    <div id="col_left" class="col">
    content
  </div>
  <div id="col_middle" class="col">
    content
  </div>
  <div id="col_right" class="col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula dignissim sem, eu pulvinar turpis facilisis rhoncus. Nam vitae massa eu sem ornare pretium at nec felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eu venenatis magna. Maecenas lacinia faucibus risus, a aliquam lacus auctor et. In cursus tempus rhoncus. Morbi nec luctus leo. Etiam risus nibh, viverra sit amet euismod non, lobortis a nibh. Vestibulum bibendum accumsan sapien, id sagittis purus sodales a. Nullam at lectus ipsum.
  </div>

</div>
</body>
</html>

werkt ook.. Is wel vrij smerig en eigenlijk af te raden. Maar dat is het hele idee van geforceerd meerdere kolommen op gelijke hoogte willen hebben ook

dat dus.

vrijdag 11 november 2011 @ 17:51:12 #282

KomtTijd...

quote:
Op vrijdag 11 november 2011 15:51 schreef RenRen- het volgende:

[..]

Omdat ik een linkerdiv heb met een rechterborder, center met links/rechts border, rechts met een linkerborder. Die moeten dubbele lijntjes naboodsen. Ik mag steeds geen achtergrondafbeelding gebruiken, is slordig. >: Dus ik zoek andere oplossingen. Maar ik denk dat het neerkomt op een achtergrondafbeelding.

Dat is juist een schoolvoorbeeldje voor faux columns. Gewoon een afbeeling met alleen 1 of 2 pixels erin, repeat-y, hopsakee.

Ik vind die oplossing van QM84 ook nog wel wat hebben trouwens.

zcflevo.nl

maandag 14 november 2011 @ 16:47:38 #283

#ANONIEM

Ik kom er niet uit waarom het volgende niet werkt in Internet explorer 8 en alles daar onder. Het menu links werkt perfect in browsers als Chrome, Firefox en Safari en staan perfect onder het logo. Echter, wanneer ik hem in Internet Explorer open, dan gaat het menu ineens heel raar staan en ik snap gewoonweg niet waarom.

De code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<body>

    <div id="header">

        <img src="images/logo.gif" style="width:110px; height:110px;" alt="logo"/>
        <img id="top_picture" src="images/HeaderHome.jpg" alt="header"/>

    </div>

        <ul id="menu">
            <li><a class="clicked" href="home.html">Home</a></li>
            <li><a href="nieuws.html">Nieuws</a></li>
            <li><a href="kippen.html">Kippen</a></li>
            <li><a href="fotoboek.html">Fotoboek</a></li>
            <li><a href="links.html">Links</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

</body>

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

body {
    margin: 0 auto;
    width: 950px;
    background: #FF9932;
    font-family: candara;
}

h1 {
    Font-size: 20px;
    color: #060;
}

p {
    margin-top: 20px;
    font-size: 12px;
}

h2 {
    font-size: 16px;
}

#header {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

#top_picture {
    border: 3px solid #FFDE82;
    margin-left: 25px;
}

#menu {
    position: absolute;
    padding-left: 0px;
}

#menu li {
    list-style-type: none;
    margin-bottom: 20px;
}

#menu li a{
    display: block;
    width: 115px;
    height: 40px;
    background: #744F03;
    font-family: 'Open Sans Condensed', sans-serif;
    text-decoration: none;
    text-align: center;
    color: #E8C31F;
    font-size: 24px;
    padding-top: 3px;
}

#menu li a:hover{
    background: #372202;
}

.clicked {
    color: white!important;
}

Iemand die mij kan vertellen wat ik fout doe?

[ Bericht 0% gewijzigd door #ANONIEM op 14-11-2011 16:51:18 ]

maandag 14 november 2011 @ 17:08:56 #284

KomtTijd...

Defineer "heel raar"?
Screenshotje misschien?

-edit-
Er staat een hoop "position:" in, waar je verder niets mee doet. Kan voor ellende zorgen. Strip je CSS eens tot het minimum van wat je nodig hebt om alleen de structuur goed te krijgen.

[ Bericht 67% gewijzigd door KomtTijd... op 14-11-2011 17:24:34 ]

zcflevo.nl

maandag 14 november 2011 @ 17:21:44 #285

Catch22-

Ben je Blind?!

indien ie probleem: breedtes en/of paddings.

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 14 november 2011 @ 17:52:51 #286

Light

quote:
Op maandag 14 november 2011 16:47 schreef Dimens het volgende:
Ik kom er niet uit waarom het volgende niet werkt in Internet explorer 8 en alles daar onder. Het menu links werkt perfect in browsers als Chrome, Firefox en Safari en staan perfect onder het logo. Echter, wanneer ik hem in Internet Explorer open, dan gaat het menu ineens heel raar staan en ik snap gewoonweg niet waarom.

De code:
[ code verwijderd ]

[ code verwijderd ]

Iemand die mij kan vertellen wat ik fout doe?

Welk doctype gebruik je?

quote:
Op maandag 14 november 2011 17:08 schreef KomtTijd... het volgende:

Er staat een hoop "position:" in, waar je verder niets mee doet. Kan voor ellende zorgen. Strip je CSS eens tot het minimum van wat je nodig hebt om alleen de structuur goed te krijgen.

En dat.

fokstok.nl

maandag 14 november 2011 @ 17:53:44 #287

Treces

Hier had uw tekst kunnen staan

jQuery wil bij mij niet echt lekker werken. Zo heb ik een pagina met afbeeldingen, bij een hover komt er tekst te staan die ik met jQuery verticaal probeer te centreren. Bij de eerste keer laden staat deze te ver naar onderen, echter bij een refresh (F5) staat deze wel weer gecentreerd.

Zo ook met een kaart (Google Maps API), bij eerste keer laden geeft hij de foute coordinaten weer, en wordt de kaart half geladen, bij een refresh staat alles goed.

Eerste keer:

Na refresh:

Iemand dit ook eerder gehad?

maandag 14 november 2011 @ 18:50:11 #288

PimD

Nee.

Waarom lijn je die tekst uit met Javascript...? Kan toch gewoon met CSS (weliswaar een beetje klooien met display:table-cell e.d).

Bleuh.

maandag 14 november 2011 @ 19:23:11 #289

Treces

Hier had uw tekst kunnen staan

quote:
Op maandag 14 november 2011 18:50 schreef PimD het volgende:
Waarom lijn je die tekst uit met Javascript...? Kan toch gewoon met CSS (weliswaar een beetje klooien met display:table-cell e.d).

Precies om die reden, hoop gezeik met positions, en displays waar ik geen zin in had. En dit is de quick en dirty manier.

Overigens is het opgelost door de tabs-oproep ($(element).tabs();) op het einde van mijn javascript-script te doen. Kaartje doet het nu ook!

maandag 14 november 2011 @ 19:29:28 #290

#ANONIEM

quote:
Op maandag 14 november 2011 17:52 schreef Light het volgende:

[..]

Welk doctype gebruik je?

[..]

En dat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Dat staat er.

maandag 14 november 2011 @ 19:39:10 #291

#ANONIEM

quote:
Op maandag 14 november 2011 17:08 schreef KomtTijd... het volgende:
Defineer "heel raar"?
Screenshotje misschien?

-edit-
Er staat een hoop "position:" in, waar je verder niets mee doet. Kan voor ellende zorgen. Strip je CSS eens tot het minimum van wat je nodig hebt om alleen de structuur goed te krijgen.

Dit is hoe het eruit ziet in Chrome, Firefox en Safari en is hoe ik het wil.

Dit is wat Internet Explorer ermee doet, niet zoals de rest dus.

Hij zet de banner bovenin naar links en het menu naar rechts. Alsof hij de padding-left: 0px; niet pakt in #menu.

maandag 14 november 2011 @ 19:40:16 #292

PimD

Nee.

Heb je de list-style op none gezet enzo? Daar wil IE nog wel eens moeilijk over doen. Pleur anders een kale HTML + CSS online (niet in dit topic, maar op een server waar we dan bij kunnen).

Bleuh.

maandag 14 november 2011 @ 19:44:20 #293

#ANONIEM

quote:
Op maandag 14 november 2011 19:40 schreef PimD het volgende:
Heb je de list-style op none gezet enzo? Daar wil IE nog wel eens moeilijk over doen. Pleur anders een kale HTML + CSS online (niet in dit topic, maar op een server waar we dan bij kunnen).

Dat heb ik inderdaad gedaan, dat je voor de list geen bolletjes te zien krijgt. Daarna padding-left op 0 gezet zodat hij niet de automatische padding toevoegt aan de list.

Hoe bedoel je met kale html + css online zetten?

maandag 14 november 2011 @ 19:45:05 #294

PimD

Nee.

Zodat wij kunnen kijken waar het mis gaat? Heb je ook list-style-position e.d. op outside gezet?

Bleuh.

maandag 14 november 2011 @ 19:53:19 #295

#ANONIEM

quote:
Op maandag 14 november 2011 19:45 schreef PimD het volgende:
Zodat wij kunnen kijken waar het mis gaat? Heb je ook list-style-position e.d. op outside gezet?

Wat doet dat en hoe doe ik dat?

maandag 14 november 2011 @ 20:55:48 #296

boem-dikkie

Jedi Mind Baby!

Waarom gebruik je positions? Doe gewoon op je logo een float: left, op je banner ook en op je menu ook.

Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.

maandag 14 november 2011 @ 20:56:26 #297

boem-dikkie

Jedi Mind Baby!

quote:
Op maandag 14 november 2011 19:44 schreef Dimens het volgende:

[..]

Dat heb ik inderdaad gedaan, dat je voor de list geen bolletjes te zien krijgt. Daarna padding-left op 0 gezet zodat hij niet de automatische padding toevoegt aan de list.

Hoe bedoel je met kale html + css online zetten?

Je HTML/CSS ergens online neerzetten zodat wij het probleem 'live' kunnen zien.

Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.

maandag 14 november 2011 @ 21:29:33 #298

#ANONIEM

Dit is wat ik nu heb:

SPOILER: HTML
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

SPOILER: CSS
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

Het foutje met de header is eruit, die staat nu in elke browser goed. Helaas kan Internet Explorer nog steeds niet goed omgaan met de list.
Hoe doen jullie dat?

maandag 14 november 2011 @ 21:33:26 #299

boem-dikkie

Jedi Mind Baby!