Whitespace in een div

[klepje]

Beste Tweakers,

Wij zijn bezig met een project voor school en moeten daarvoor een webportal maken. Dit moet in html, css & php (en eventueel andere talen zoals javascript).

Nu hebben we een tijdlijn gemaakt waarbij de gebruiker verticaal kan scrollen. Hiervoor hebben we deze tijdlijn gebruikt, maar dan aangepast aan onze stijl: http://jqueryfordesigners.com/fun-with-overflows/
Deze heeft een vaste breedte en met procenten werken werkt niet.

Nu hebben we dus een breedte meegegeven van 2000px, in Chrome & Safari (webkit browsers) kapt hij de breedte dan af waar er geen content meer is. In Firefox, IE & Opera krijg je dan wel een witruimte naast de content. Is het mogelijk om wat Chrome & Safari doen, door middel van bijv. CSS ook te kunnen realiseren in Firefox, IE en Opera?

Sorry dat het zo onduidelijk is, ik kan het niet echt goed verwoorden. Hierbij dan ook een afbeelding waar het verschil opstaat:



Alvast bedankt!
Wesley

[TERW_DAN]

Post eens hoe je CSS eruit ziet. Hoe positioneer je die elementen naast elkaar?

[Timons106]

Misschien handig om de code te posten?
(Of heb je precies dezelfde CSS code als op die site gebruikt? Bij mij kapt hij in iedergeval niet af in IE met deze code)

[ Voor 65% gewijzigd door Timons106 op 06-01-2012 11:54 ]

[Beatboxx]

Gewoon de width kleiner maken?

[Gideonnn]

Waarom heb je een width van 2k meegegeven als ik vragen mag?

[Bosmonster]

Gideonnn schreef op vrijdag 06 januari 2012 @ 12:55:
Waarom heb je een width van 2k meegegeven als ik vragen mag?

Waarschijnlijk omdat je anders geen horizontale scrollbalk kunt forceren, tenzij je absoluut gaat positioneren.

[Gideonnn]

Wat als je white-space:nowrap; meegeeft aan de div waarin je kan scrollen? Of ipv float:left; gewoon display:inline-block; gebruiken?

[Bosmonster]

Geen "of" dan, maar "en". inline-block + nowrap, anders gaan ze gewoon naar de volgende regel ipv een scrollbar te forceren. (Geen idee of dat in de praktijk ook werkt, maar zonder zeker niet).

[ Voor 21% gewijzigd door Bosmonster op 06-01-2012 14:24 ]

[klepje]

@ Gideonnn, die hebben we meegegeven omdat ze anders onder elkaar komen te staan.
En die nowrap, waarbij moeten we die zetten? We hebben het al bij .tl-events geprobeerd, maar dan faalt hij in chrome (laat alleen de bovenste 'gebeurtenis' zien in de browser, in de broncode staan ze dan wel allebei)

Hierbij de code:

HTML:

<div id="timeline">
            <ul class="tl-events">
                <li>
                    <h3> 31 December </h3>

                    <ul>
                        <li>
                            <a href="#new-admin">
                                <span>
                                    <span> Nieuwe Admin: Naam </span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#new-klant-1">
                                <span> Nieuwe Klant: Naam </span>
                            </a>
                        </li>
                    </ul>
                </li>

                <li>
                    <h3> 31 December </h3>

                    <ul>
                        <li>
                            <a href="#new-admin">
                                <span>
                                    <span> Nieuwe Admin: Naam </span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#new-klant-1">
                                <span> Nieuwe Klant: Naam </span>
                            </a>
                        </li>
                    </ul>
                </li>

<!-- En hierachter staan er dan natuurlijk nog veel meer, maar die heb ik weggelaten -->
                
                
            </ul>
        </div>

Cascading Stylesheet:

div, ul, li {
                zoom: 1;
            }

            ul ul,
            ul ul li {
                zoom: 0;
            }

            #timeline {
                height: 120px;
                margin-top: 10px;
                padding: 20px;
                overflow: scroll;
                /*cursor: -moz-grab !important;*/ /* should this be applied with JS? */
            }

            .tl-events {
                width: 2000px;       /* HIER GAAT HET OM */
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .tl-events li {
                float: left;
                width: 250px;
                margin-right: 10px;
                
            }

            .tl-events ul {
                list-style: none;
                display: block;
                margin: 0;
                padding: 0;
            }

            .tl-events ul li a {
                text-decoration: none;
                color: #000;
                background: #D9E4FF;
                border: 1px solid #D9E4FF;
                -moz-border-radius: 4px;
                display: block;
                margin: 2px 2px;
                padding: 2px;
            }

            .tl-events ul li a:hover,
            .tl-events ul li a:focus {
                outline: 0;
                background: #C2CCE4;
                border: 1px solid #B0BACF;
            }

            .doodle {
                display: none;
            }

[Bosmonster]

Nowrap gaat geen effect hebben op floats. Die gaan geen scrollbalk forceren (lees mn vorige reacties nog eens)

[R4gnax]

Bosmonster schreef op vrijdag 06 januari 2012 @ 14:23:
Geen "of" dan, maar "en". inline-block + nowrap, anders gaan ze gewoon naar de volgende regel ipv een scrollbar te forceren. (Geen idee of dat in de praktijk ook werkt, maar zonder zeker niet).

Ja dat werkt 100% in de praktijk. Zelf meermalen toegepast op verschillende image carousels.

[klepje]

R4gnax schreef op vrijdag 06 januari 2012 @ 17:11:
[...]
Ja dat werkt 100% in de praktijk. Zelf meermalen toegepast op verschillende image carousels.

Werkt het ook in onze code? En waar moet ik deze beide dan plaatsen in de CSS? Alvast bedankt!

[R4gnax]

klepje schreef op zaterdag 07 januari 2012 @ 22:16:
[...]


Werkt het ook in onze code? En waar moet ik deze beide dan plaatsen in de CSS? Alvast bedankt!

Cascading Stylesheet:

.tl-events {
  display:block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.tl-events li {
  display: inline-block;
  *display: inline;
  margin: 0 10px 0 0;
  padding: 0;
  width: 250px;
  white-space: normal;
  zoom: 1;
} 

Overigens, als je wilt zien hoe krachtig deze techniek met inline-blocks precies is, dan zou ik aanraden om eens te lezen: http://stackoverflow.com/a/7256297

[ Voor 13% gewijzigd door R4gnax op 08-01-2012 13:40 ]