[html, css, js] met font tags :) #28

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  woensdag 5 september 2012 @ 21:48:01 #151
137776 boem-dikkie
Jedi Mind Baby!
pi_116438032
quote:
11s.gif Op woensdag 5 september 2012 15:39 schreef Catch22- het volgende:

[..]

hohoho!

tegenwoordig heb je normalize.css

http://necolas.github.com/normalize.css/

En over JS; er zijn helaas maar weinig mensen die dat goed beheersen. Gelukkig heb ik mezelf daar wel aardig in gespecialiseerd.
* {
margin: 0;
padding: 0;
}
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  donderdag 6 september 2012 @ 09:20:49 #152
56176 Catch22-
Ben je Blind?!
pi_116450064
dat is dus precies wat Normalize.css niet doet.

Normalize normaliseert de boel. Dus alle inspringingen gelijk zetten (bij ul's etc) en alle koppen dezelfde grootte maken etc.
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?
  donderdag 6 september 2012 @ 16:53:30 #153
51684 The_Tankgirl
Kate Bush is the best
pi_116464435
Help meee,

Ik probeer deze ajax tabs aan te passen:
Demo: http://demo.tutorialzine.(...)y-ajax-css/demo.html
Tutorial: http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/

Ik wil alleen maar in contentHolder de derde tab openen. Dus bijvoorbeeld op page1.html een link naar page3.html maken

Ik ben best wel bekend met html, maar totaaaaal niet met jquery

Heb al in de link target= geprobeerd, en via deze link een extra script in de head van page1.html gezet:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
en dat werkt op zich, alleen kan ik dan niet meer de eerste pagina (page1.html) openen.
Alle benodigdheden voor cupcakes, taarten en andere lekkere dingen :-9 www.bakgoed.nl
pi_116481111
je wilt wát precies :? Al die linkjes gaan naar tutorials. Waar is je eigen werk?
zcflevo.nl
  vrijdag 7 september 2012 @ 09:34:01 #155
51684 The_Tankgirl
Kate Bush is the best
pi_116489868
quote:
5s.gif Op donderdag 6 september 2012 22:23 schreef KomtTijd... het volgende:
je wilt wát precies :? Al die linkjes gaan naar tutorials. Waar is je eigen werk?
Heel simpel gezegd, ik wil eerst weten of ik wat hiermee kan, voordat ik er zelf heel veel tijd in ga steken.

Voorlopig lukt het mij prima om de stylesheet en alles aan te passen, maar van jquery weet ik (nog) te weinig.

Ik zal het even uittypen, misschien wordt het dan wat duidelijker:
(stuk van de htmlpagina)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<div id="main">

<ul class="tabContainer">
<!-- The jQuery generated tabs go here -->
</ul>

<div class="clear"></div>

<div id="tabContent">
    <div id="contentHolder">
        <!-- The AJAX fetched content goes here -->
    </div>
</div>

</div>

en hier script.js

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		$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */
    
    /* Defining an array with the tab text and AJAX pages: */
    var Tabs = {
        'Tab one'    : 'pages/page1.html',
        'Tab two'    : 'pages/page2.html',
        'Tab three'    : 'pages/page3.html',
        'Tab four'    : 'pages/page4.html'
    }
    
    /* The available colors for the tabs: */
    var colors = ['blue','green','red','orange'];
    
    /* The colors of the line above the tab when it is active: */
    var topLineColor = {
        blue:'lightblue',
        green:'lightgreen',
        red:'red',
        orange:'orange'
    }
    
    /* Looping through the Tabs object: */
    var z=0;
    $.each(Tabs,function(i,j){
        /* Sequentially creating the tabs and assigning a color from the array: */
        var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
        
        /* Setting the page data for each hyperlink: */
        tmp.find('a').data('page',j);
        
        /* Adding the tab to the UL container: */
        $('ul.tabContainer').append(tmp);
    })

    /* Caching the tabs into a variable for better performance: */
    var the_tabs = $('.tab');
    
    the_tabs.click(function(e){
        /* "this" points to the clicked tab hyperlink: */
        var element = $(this);
        
        /* If it is currently active, return false and exit: */
        if(element.find('#overLine').length) return false;
        
        /* Detecting the color of the tab (it was added to the class attribute in the loop above): */
        var bg = element.attr('class').replace('tab ','');

        /* Removing the line: */
        $('#overLine').remove();
        
        /* Creating a new line with jQuery 1.4 by passing a second parameter: */
        $('<div>',{
            id:'overLine',
            css:{
                display:'none',
                width:element.outerWidth()-2,
                background:topLineColor[bg] || 'white'
            }}).appendTo(element).fadeIn('slow');
        
        /* Checking whether the AJAX fetched page has been cached: */
        
        if(!element.data('cache'))
        {    
            /* If no cache is present, show the gif preloader and run an AJAX request: */
            $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

            $.get(element.data('page'),function(msg){
                $('#contentHolder').html(msg);
                
                /* After page was received, add it to the cache for the current hyperlink: */
                element.data('cache',msg);
            });
        }
        else $('#contentHolder').html(element.data('cache'));
        
        e.preventDefault();
    })
    
    /* Emulating a click on the first tab so that the content area is not empty: */
    the_tabs.eq(0).click();
});

Op de voorpagina wordt page1.html geopend in div contentHolder
Ik wil dus op page1.html een link maken naar page3.html, zodat als men daarop klikt, deze geopend wordt in die contentHolder.

Is dit duidelijker? Het is voor mij ook een leerproces met jQuery :P
Alle benodigdheden voor cupcakes, taarten en andere lekkere dingen :-9 www.bakgoed.nl
  vrijdag 7 september 2012 @ 09:36:55 #156
56176 Catch22-
Ben je Blind?!
pi_116489940
1$("a.linkToFirstTab").click(function() { $("#tab-3").click(); });
?

waarbij je de eventhandler aan de juiste tab linked en tab-3 vervangt door het id van het tab dat je wil openen
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?
pi_116490013
of gewoon kijken welke functie er aan tab 3 hangt, en die direct aanroepen.
zcflevo.nl
  vrijdag 7 september 2012 @ 09:48:29 #158
51684 The_Tankgirl
Kate Bush is the best
pi_116490233
Ah, het wordt dus toch tijd om mij er wat meer in te verdiepen :P
Bedankt voor jullie antwoorden :)
Alle benodigdheden voor cupcakes, taarten en andere lekkere dingen :-9 www.bakgoed.nl
  vrijdag 7 september 2012 @ 10:43:02 #159
56176 Catch22-
Ben je Blind?!
pi_116491646
gebruik gewoon

http://jqueryui.com/demos/tabs/

dat werkt als een trein.
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 7 september 2012 @ 10:52:38 #160
51684 The_Tankgirl
Kate Bush is the best
pi_116491914
Dankjewel! Die is inderdaad een stuk duidelijker :D
Alle benodigdheden voor cupcakes, taarten en andere lekkere dingen :-9 www.bakgoed.nl
  dinsdag 11 september 2012 @ 09:39:11 #161
56176 Catch22-
Ben je Blind?!
pi_116634851
http://jqfundamentals.com/

Must-read als je wat met jQuery wil gaan doen, of doet, maar er niets van snapt :)
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?
pi_116640072
iemand ooit een bedrijf/evenement page gemaakt op facebook?

als ik een extra tab wil invoegen, is dat dan een webpagina die geintergreerd wordt in facebook?

en heb ook voorbeelden gezien (ben ze ff kwijt) die daadwerkelijk tabbladen maken
kan er alleen geen goede uitleg over vinden hoe dat werkt, heeft iemand een idee?
pi_116640253
Wat heeft dat met HTML/CSS te maken?
zcflevo.nl
pi_116640360
het intergreren werkt met iframes
  dinsdag 11 september 2012 @ 13:37:39 #165
50298 QM84
Het Orakel
pi_116641185
quote:
0s.gif Op dinsdag 11 september 2012 13:11 schreef MrNiles het volgende:
het intergreren werkt met iframes
Daar geef je het antwoord al..

Tabs aanmaken, is gewoon een link toevoegen naar een pagina die je zelf ergens host. Deze wordt dan in een iframe ingeladen. Alle uitleg hierover staat trouwens op de developerspagina's van Facebook.

[ Bericht 5% gewijzigd door QM84 op 11-09-2012 13:46:30 ]
dat dus.
  dinsdag 11 september 2012 @ 14:28:32 #166
56176 Catch22-
Ben je Blind?!
pi_116642779
quote:
11s.gif Op dinsdag 11 september 2012 09:39 schreef Catch22- het volgende:
http://jqfundamentals.com/

Must-read als je wat met jQuery wil gaan doen, of doet, maar er niets van snapt :)
http://fixingthesejquery.com/

die ok trouwens
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?
pi_116644282
quote:
11s.gif Op dinsdag 11 september 2012 14:28 schreef Catch22- het volgende:

[..]

http://fixingthesejquery.com/

die ok trouwens
Jezus wat een misselijkmakende usability-failure :') Als je niet wilt dat mensen je website bezoeken, haal 'm dan gewoon offline ;(
zcflevo.nl
  dinsdag 11 september 2012 @ 15:59:13 #168
50298 QM84
Het Orakel
pi_116646142
Oef.. gelukkig dat er meer mensen zo over denken.. Ik werd ook niet bepaald blij van die site..

Goed voorbeeld van iemand die wel weet hoe jQuery werkt, maar niet hoe websites werken..
dat dus.
  dinsdag 11 september 2012 @ 17:23:27 #169
56176 Catch22-
Ben je Blind?!
pi_116649625
het is hier geen showcase toch? :P
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?
pi_116704964
Weet iemand hoe ik met een simpel javascript, data kan krijgen van een andere website?

Site A heeft bijvoorbeeld info (komt via PHP uit een DB):

Dag: maandag
Te doen: sporten

Site B (een site die geen PHP ondersteund en niet bij de DB kan van site A) moet via een script, dat ophalen:

En printen: Maandag: Sporten bijvoorbeeld.
pi_116706776
Ik weet nog heel weinig van scripten, ben echt net begonnen. Nu focus ik me op de semantiek van HTML dus wil graag alles netjes neerzetten zoals het hoort. Nou heb ik een hele suffe vraag, en ik heb al in een boek gekeken op op w3schools en nog wat sites maar ik kan het antwoord niet zo letterlijk vinden.

Mag je een h2 heading boven meerdere paragrafen gebruiken, of moet je dan perse een h3 gebruiken na een h2? Met andere woorden: is het toegestaan/netjes om dat te doen?
pi_116707359
@JDx: volgens mij kun je geen scripting met ajax (javascript) aanroepen van een andere server, je kunt wel javascript includen in je HTML document <script>

@Meteoric: Volgens mij hoeft dat niet, maar een H3 na een H2 is natuurlijk wel een 'mooie' oplossing die duidelijk gelezen kan worden door zoekmachines, waarde van H2 is hoger dan een H3.
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_116709049
Heb het zelf al uitgevonden:

SITE A (vraagt info op van site b):

<script type="text/javascript"><!--
day_id = 1;
//-->
</script>
<script type="text/javascript"
src="http://www.site-b.nl/iframe.js">
</script>

SITE B (iframe.js):

function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://www.site-b.nl/getinfo.php?id=" + day_id);
ifrm.style.width = 800+"px";
ifrm.style.height = 600+"px";
ifrm.style.border = 0;
document.body.appendChild(ifrm);
}
makeFrame();

En dat terwijl ik nog nooit met JavaScript heb gewerkt! :D

Kon wel al PHP btw.
pi_116727427
quote:
0s.gif Op woensdag 12 september 2012 21:15 schreef Meteoric het volgende:
Ik weet nog heel weinig van scripten, ben echt net begonnen. Nu focus ik me op de semantiek van HTML dus wil graag alles netjes neerzetten zoals het hoort. Nou heb ik een hele suffe vraag, en ik heb al in een boek gekeken op op w3schools en nog wat sites maar ik kan het antwoord niet zo letterlijk vinden.

Mag je een h2 heading boven meerdere paragrafen gebruiken, of moet je dan perse een h3 gebruiken na een h2? Met andere woorden: is het toegestaan/netjes om dat te doen?
ligt eraan hoe je het wilt gebruiken. Als beide titels het zelfde niveau hebben moet je dezelfde tag gebruiken. Als de een een subkopje is van de ander, moet je een niveau lager (dus hogere index) gebruiken.

Kijk anders ook eens naar de <section> tag
zcflevo.nl
  donderdag 13 september 2012 @ 02:43:46 #175
230788 n8n
Pragmatisch
pi_116728924
Tegenwoordig kan je min of meer af door slechts h1 te gebruiken. In een pagina kan een section, in een section een header en een article, in een article kan weer een header en een section met allen h1-elementen terwijl het nog steeds semantisch correct is.
“Specialization is for insects”.—Robert Heinlein
  donderdag 13 september 2012 @ 09:20:43 #176
56176 Catch22-
Ben je Blind?!
pi_116731396
Ik zou gewoon een JSON paginaatje opzetten die niet anders doet dan wat JSON uitpoepen nav een request, dat is met javascript goed te parsen
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?
  woensdag 19 september 2012 @ 11:21:25 #177
27454 InTrePidIvity
Looks like it's broken...
pi_116973000
Ik wil graag dat de navigatielinks over de volledige hoogte van de header van kleur veranderen (en datzelfde gebied moet dus ook actief zijn als hover), maar hoe zet ik dat in CSS? Geef ik die eigenschap mee aan de ul, li of a? En hoe doe ik dat?

...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
  woensdag 19 september 2012 @ 12:35:25 #178
56176 Catch22-
Ben je Blind?!
pi_116975511
li:hover :)

en dan de Li de volledige hoogte geven, de A centreren met een padding of een line-height(hack)
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?
pi_116987830
Ik kom net een site tegen waarin alle pagina's eindigen op .whtml. Weet iemand wat dat inhoudt?
  woensdag 19 september 2012 @ 17:30:58 #180
56176 Catch22-
Ben je Blind?!
pi_116988004
.whtml : If you would like to have a uniform set of web pages having a consistent look, then you can create wrappers around your html web page. This way you ensure that all your html web pages have the same scheme. The ME web page is an example of the use of wrappers (https://www.purdue.edu/ME)

maar waarschijnlijk niets. Je kan in principe elke extensie gebruiken.
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?
pi_116989209
quote:
11s.gif Op woensdag 19 september 2012 12:35 schreef Catch22- het volgende:
li:hover :)
Tuurlijk niet, dat werkt alleen met muis. Met andere vormen van navigatie (toetsenbord, touch) heb je dan geen hover-state meer. Gewoon op de a:href dus.
Nee.
  woensdag 19 september 2012 @ 20:28:57 #182
56176 Catch22-
Ben je Blind?!
pi_116997302
dan gebruik je li:hover a voor het hovereffect en geef je de li een class voor een actief item.

Of ik snap niet wat hij wil, dat kan ook nog
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?
pi_116999388
Dan nog heb je alleen een :hover effect op de parent. Dat gaat dus niet af met keyboardnavigatie e.d. Als je een hover-state hebt moet je m.i. ook op z'n minst een :focus state hebben. En eigenlijk gewoon een :focus, :hover, :active, :visited state natuurlijk.
Nee.
pi_117020207
quote:
11s.gif Op woensdag 19 september 2012 12:35 schreef Catch22- het volgende:
li:hover :)

en dan de Li de volledige hoogte geven, de A centreren met een padding of een line-height(hack)
Sowieso line-height gebruiken, anders krijg je glitches met verschillende fontrenderings of ontbrekende fonts.
zcflevo.nl
  donderdag 20 september 2012 @ 13:20:12 #185
27454 InTrePidIvity
Looks like it's broken...
pi_117021084


Het werkt wel (in Chrome, heb nog geen andere dingen getest), maar ik heb zo'n vermoeden dat het qua CSS allemaal erg lelijk is :P De rode pijl geeft weer waar de muis zich bevindt, het is de bedoeling dat dus de hele hoogte van het element klikbaar is.

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		.top-menu ul {
    height: inherit;
    margin-left: 8px;
}

.top-menu li {
    display: inline;
    list-style-type:none;
    padding: 10px 0 95px;
    -webkit-border-bottom-right-radius:.6em;
       -moz-border-bottom-right-radius:.6em;
    border-bottom-right-radius:.6em;
}

.top-menu li:hover {
    background-color: #fff;
    color: #223053;
}

.top-menu li a {
    font-weight: bold;
    font-size:15px;
    color: #fff;
    padding: 0 8px 95px;
}

.top-menu > li:first-child > a {
    border-left:none;
}

.top-menu li a:hover {
    color: #223053;

}
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
pi_117065186
Jongens, zouden jullie eens willen kijken of de live stream het bij jullie doet?
In chrome doet hij het wel, bij mijn zusje niet, en bij mij op Firefox ook niet.
SPOILER
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.
Ik weet dat hij te breed is, maar dat is voor latere zorg.

Hmm ik zie eigenlijk niks vreemds in de scriptcode, heeft iemand enig idee waar het aan kan liggen dat hij het niet consequent doet.

1
2
3
4
5
6
7		<object id="MediaPlayer" width="550" height="309" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"><param name="filename" value="http://livestreams.omroep.nl/npo/3fm_vsr-bb" />

<param name="Showcontrols" value="True" /><param name="autoStart" value="True" /><param name="url" value="http://livestreams.omroep.nl/npo/3fm_vsr-bb" />
<param name="showcontrols" value="True" /><param name="autostart" value="True" /><param name="url" value="http://livestreams.omroep.nl/npo/3fm_vsr-bb" />

<embed id="MediaPlayer" width="550" height="309" type="application/x-mplayer2" src="http://livestreams.omroep.nl/npo/3fm_vsr-bb" filename="http://livestreams.omroep.nl/npo/3fm_vsr-bb" Showcontrols="True" autoStart="True" url="http://livestreams.omroep.nl/npo/3fm_vsr-bb" showcontrols="True" autostart="True" /></object>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
Of saté?
pi_117184638
Deze CSS-noob is wat aan het klooien met een code.
Op www.popkoor2000.nl/site kan je zien dat ik de 3 modules onderin naast elkaar wil hebben. Ze moeten in totaal net zo breed worden als het stuk erboven.
In index.php staat
1
2
3		<div id="wrapper2" class="user1"><jdoc:include type="modules" name="user1" style="xhtml" /></div>
<div id="wrapper2" class="user2"><jdoc:include type="modules" name="user2" style="xhtml" /></div>
<div id="wrapper2" class="user3"><jdoc:include type="modules" name="user3" style="xhtml" /></div>  

In styles.css staat
1#wrapper2 {margin:0 auto; width:300px ; height:160px; margin-top: 3px; text-shadow: none; position: relative; background-image: url('http://www.heartofstone.co.uk/HOS/UL/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);padding: 4px;text-shadow: 0 1px 0 #FDFDFF;}
en ook
1
2
3		.user1 { text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: left; width: 250px; margin: 10px;}
.user2,{ text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: center; width: 250px; margin: 10px;}
.user3 { text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: right; width: 250px; margin: 10px;}

Ik zal vast een domme fout maken, aangezien ik hier weinig van snap. Ik heb al een paar uur gepuzzeld, ook door een % te nemen bij de user123 in de CSS. Helaas werkte dat ook niet.
Kan iemand me vertellen hoe ik die drie modules naast elkaar krijg, met een kleine ruimte er tussen?
I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
  maandag 24 september 2012 @ 10:45:43 #188
134533 donroyco
dus niet Donroyco
pi_117184719
Alledrie een float left meegeven.
Daarnaast de komma achter .user2, { verwijderen
<div id="wrapper2" > drie keer kan dus niet, maak daar een class van.
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. :'(
pi_117184856
Dank je wel voor de reactie.
Ik heb ze alledrie float left gegeven en ook de komma weggehaald.
Dat derde onderdeel snap ik nog, aangezien ik nog geen kaas heb gegeten van class.

Ik zie echter dat de drie modules nu nog niet samen de gehele breedte van het middenstuk vormen. Als ik echter de getallen aanpas bij width van user1 en 2 en 3 wordt het niet breder.
Wat doe ik fout?
I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
  maandag 24 september 2012 @ 10:51:41 #190
137776 boem-dikkie
Jedi Mind Baby!
pi_117184865
Inderdaad. Class maken van wrapper 2. Die de stijl meegeven die bij alle drie de divs gelijk is. En vervolgens met .user1/2/3 specifieke stijl geven.

Voor de rest zoals donroyco al zegt, left floaten.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_117185005
Volgens mij begin ik het te snappen.
Heb van #wrapper2 nu .wrapper2 gemaakt en
1<div id="wrapper2" class="user1">
veranderd in [code]<div class="wrapper2">.
Heb ik dat zo goed begrepen?
De breedte klopt nog niet, maar misschien kan ik daar met wat gesleutel aan wat waarden verandering in brengen.
I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
pi_117185043
Je hebt een fixed-width layout, dus je kunt gewoon even uitrekenen/testen hoeveel pixels margin je tussen die blokken moet hebben om ze precies uit te lijnen.
zcflevo.nl
  maandag 24 september 2012 @ 11:03:20 #193
137776 boem-dikkie
Jedi Mind Baby!
pi_117185200
quote:
0s.gif Op maandag 24 september 2012 10:56 schreef -J-D- het volgende:
Volgens mij begin ik het te snappen.
Heb van #wrapper2 nu .wrapper2 gemaakt en
[ code verwijderd ]

veranderd in [code]<div class="wrapper2">.
Heb ik dat zo goed begrepen?
De breedte klopt nog niet, maar misschien kan ik daar met wat gesleutel aan wat waarden verandering in brengen.
Je kunt er <div class="wrapper2 user2"> van maken. Dan kun je user 2 nog apart opmaken voor stijlen die je bij de andere divs met wrapper2 niet wil. Bijvoorbeeld je middelste blok, met een margin left en right, om zo ruimte te creëren.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_117185471
Dank je, KomtTijd en boek-dikkie. Met beide tips ben ik aan de slag.
Heb net wrapperuser1 en 2 en 3 aangemaakt en alleen wrapperuser2 krijgt een margin.
Kom nog niet op de hele breedte uit en als ik het getal iets aanpas, springt het laatste blok naar de volgende regel.
Vind het nog wel raar, want ik heb alledrie de vakken 277 breed gemaakt en de middelste een margin van 3 gegeven.
3x277+3+3 = 837 en dat is minder dan de breedte van dat middenstuk (980 dacht ik).
Ergens maak ik een domme cijferfout.
I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
  maandag 24 september 2012 @ 11:20:59 #195
137776 boem-dikkie
Jedi Mind Baby!
pi_117185783
Heb je padding op je divs? Want als je een div van 277 breed hebt, met een padding van 20 px. Is hij dus als het ware 277 + 20 + 20 breed.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_117185914
1
2
3		<div class="wrapperuser1"><jdoc:include type="modules" name="user1" style="xhtml" /></div>
<div class="wrapperuser2"><jdoc:include type="modules" name="user2" style="xhtml" /></div>
<div class="wrapperuser3"><jdoc:include type="modules" name="user3" style="xhtml" /></div> 
1
2
3		.wrapperuser1 {width:287px ; height:160px; margin-top: 3px;  position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;}
.wrapperuser2 {margin:3px; width:287px ; height:160px; margin-top: 3px;  position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;}
.wrapperuser3 {width:287px ; height:160px; margin-top: 3px;  position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;}



In de div zelf staat geen padding maar bij de wrapperuser123 wel, namelijk 2px.

[ Bericht 2% gewijzigd door -J-D- op 24-09-2012 11:31:52 ]
I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
  maandag 24 september 2012 @ 11:31:53 #197
137776 boem-dikkie
Jedi Mind Baby!
pi_117186140
Okay als alle blokken dezelfde stijl hebben maar hier en daar een extra padding of margin kun je het zo doen.

1
2
3		<div class="wrapper2 user1"></div>
<div class="wrapper2 user2"></div>
<div class="wrapper2 user3"></div>

Je kunt dan de wrapper2 opmaken zoals voor elk blok gelijk:

1.wrapper2 { width: 200px; height: 100px; }

En voor specifieke stijlen zoals bijvoorbeeld het middenste blok doormiddel van de user* class.

1.user2 { margin: 0px 20px 0px 20px; } 

Dat is het idee van meerdere classes gebruiken.

Je kunt dus in jouw geval een opmaak maken voor het blok met wrapper2, want die is voor elk blok hetzelfde. En voor het middenste blok, waar dus een margin moet, user2 opmaken.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_117186509
Volgens mij heb ik nog ergens een verborgen padding staan, want de wrapperuser3 heeft nog een ruimte aan de rechterkant. Het is echter niet de padding: 0px 10px 6px 10px; volgens mij, want dat is de ruimte die de afstand van de inhoud tot de rand van die user3 aangeeft?

Ben nu met Chrome Web Developer aan het klooien om te kijken of ik een getal kan veranderen zodat de rechter ook tot rechts aansluit,.
I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
  maandag 24 september 2012 @ 12:55:03 #199
56176 Catch22-
Ben je Blind?!
pi_117188560
dat is nooit goed. Je moet altijd beredeneren waarom het mis gaat, anders schiet je er niets mee op.
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?
pi_117188840
quote:
11s.gif Op maandag 24 september 2012 12:55 schreef Catch22- het volgende:
dat is nooit goed. Je moet altijd beredeneren waarom het mis gaat, anders schiet je er niets mee op.
Dat snap ik, maar na een paar uur puzzelen zie je soms de oorzaak niet.

Ik ben al zover dat het niet in de eigenschappen van wrapperuser1, wrapperuser2 en wrapperuser3 zit.
Volgens Web Developer eindigt wrapperuser3 iets links van het einde, dus het gat dat daar zit ligt niet aan een marge van wrapperuser3, lijkt me.
Wat het wel is, is nog een raadsel.
I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] met font tags :) #28
Index

» digital corner

» development

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