Veel divs naast elkaar. - Softwareontwikkeling

zaterdag 14 februari 2009 22:58

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo,

Ik ben 2 maand geleden begonnen met het leren van HTML/CSS en php. Het gaat vrij goed, maar er zijn altijd een paar dingen waar je niet zelf uit lijkt te komen. Ik probeerde eerst een webpagina te maken met een table voor de opmaak, maar uiteindelijk heb ik besloten naar een nested div struktuur over te gaan. Met een table kan je alleen wel makkelijk meerdere kolommen naast elkaar plaatsen. Met divs is me dit nog niet gelukt. Het is me gelukt 3 divs naast elkaar de krijgen voor float left, float right te gebruiken. De laatste div kwam er dan tussenin te zitten. Ik heb echter geen idee hoe je meerdere divs naast elkaar kan krijgen. Ik heb de optie display:inline-block geprobeerd, maar dit werkte niet in alle browsers. Ook heb ik geprobeerd om groepen divs samen in een containing div te stoppen, om vervolgens deze containing divs naast elkaar te plaatsen. Ook dit werkte niet zoals ik het hoopte. Ik heb een tijdje rond lopen kijken op andere webpages en ik zag dat het daar wel lukte. www.nederland.fm stopt bijvoorbeeld elk plaatje in een aparte div (heleboel naast elkaar). Ik hoop dat er hier wat mensen zijn die dit probleem ook hebben gehad en die me een hint willen geven.

Alvast bedankt! groeten Bram

(P.S, de ronde hoeken van de icoontjes kunnen denk ik verkregen worden door die hoeken transparant te maken in photoshop ?

)

zaterdag 14 februari 2009 23:21

Acties:

0 Henk 'm!

KneoK

Not in a million lightyears

Is alweer een poosje geleden dat ik met HTML en CSS bezig ben geweest, maar je kunt toch al je divs die je naast elkaar wilt hebben de float:left property meegeven ? Ik weet niet of het netjes is, maar het werkt prima:

HTML:

<html>
 <head>
  <title>CSS Test</title>
 </head>
<body>

<div style="width:50px;background-color:red;float:left">1</div>
<div style="width:50px;background-color:blue;float:left">2</div>
<div style="width:50px;background-color:green;float:left">3</div>
<div style="width:50px;background-color:gray;float:left">4</div>
<div style="width:50px;background-color:cyan;float:left">5</div>
<div style="width:50px;background-color:orange;float:left">6</div>
<div style="width:50px;background-color:magenta;float:left">7</div>

</body>
</html>

Het inkijken van de broncode van een andere site is overigens geen ramp hoor, je kunt gewoon de bron van bijvoorbeeld nederland.fm bekijken, daarin zie je dat ze nederland.css laden, die kun je dan vervolgens weer gewoon openen en bekijken. Als je dan gaat kijken welke divs er naast elkaar staan in de broncode dan kun je die weer in de CSS file opzoeken en kijken welke properties ze allemaal gekregen hebben.

Voor ronde hoeken zijn overigens diverse oplossingen, als je zoekt op round corners CSS dan moet je zat tegenkomen.

[ Voor 25% gewijzigd door KneoK op 14-02-2009 23:26 ]

zaterdag 14 februari 2009 23:23

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

ah ik dacht dat je maar één de eigenschap float:left kon geven op dezelfde regel! Ik ga het zo direct proberen.

Oke het werkt! ontzettend bedankt. Ik zat blijkbaar gewoon te moeilijk te denken.

edit: hoe kan je trouwens het css bestand inzien ?

-----
oke gewoon als URL in je browser invoeren dus

Ik voel me wel dom. In de boeken die ik gelezen had behandelden ze alleen de opbouw van een pagina en niet dit soort truukjes.

[ Voor 68% gewijzigd door Verwijderd op 14-02-2009 23:28 ]

zaterdag 14 februari 2009 23:29

Acties:

0 Henk 'm!

Bitage

Netter zou zijn als je een aparte class zou aanmaken voor die float en de gemeenschappelijke eigenschappen. Dan kun je inline nog dingen aanpassen voor die specifieke div. Dus iets als:

HTML:

<html>
 <head>
  <title>CSS Test</title>
  <style type="text/css">
    div.float
    {
      float:left;
      width:50px;
    }
  </style>
 </head>
<body>

<div style="background-color:red" class="float">1</div>
<div style="background-color:blue" class="float">2</div>
<div style="background-color:green" class="float">3</div>
<div style="background-color:gray" class="float">4</div>
<div style="background-color:cyan" class="float">5</div>
<div style="background-color:orange" class="float">6</div>
<div style="background-color:magenta" class="float">7</div>

</body>
</html>

zaterdag 14 februari 2009 23:32

Acties:

0 Henk 'm!

KneoK

Not in a million lightyears

Verwijderd schreef op zaterdag 14 februari 2009 @ 23:23:
ah ik dacht dat je maar één de eigenschap float:left kon geven op dezelfde regel! Ik ga het zo direct proberen.

Oke het werkt! ontzettend bedankt. Ik zat blijkbaar gewoon te moeilijk te denken.

edit: hoe kan je trouwens het css bestand inzien ?

Wordt wel een beetje simpel, maar vooruit

Als je de broncode van een pagina bekijkt dan zul je meestal een verwijzing zien naar een CSS bestand in een tag. In het geval van nederland.fm zul je de volgende regel tegenkomen in de broncode:

<style type="text/css">@import url("nederlandfm.css");</style>

Hier zie je dat ze een bestand dat nederlandfm.css heet importeren. Als je dan vervolgens naar www.nederland.fm/nederlandfm.css gaat dan opent je browser het CSS bestand. Je kunt ze ook zo tegenkomen:

<link rel="stylesheet" href="/styles/style.css" type="text/css">

Dat betekent dat je dus naar www.website.nl/styles/styles.css kan surfen om de CSS file te openen.

@Bitage >>> Daar zat ik later inderdaad ook over te denken, dat een algemene class wellicht een goeie oplossing kon zijn.

[ Voor 5% gewijzigd door KneoK op 14-02-2009 23:33 ]

zaterdag 14 februari 2009 23:37

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

erg bedankt voor de hulp

de topic kan wat mij betreft gesloten worden

zaterdag 14 februari 2009 23:44

Acties:

0 Henk 'm!

KneoK

Not in a million lightyears

Verwijderd schreef op zaterdag 14 februari 2009 @ 23:37:
erg bedankt voor de hulp de topic kan wat mij betreft gesloten worden

Ja, maar wat jij wil is ons een rotzorg

Dit topic blijft waarschijnlijk gewoon open, is handig voor mensen die hetzelfde probleem hebben, dan kunnen ze het topic makkelijk vinden als ze de juiste keywords gebruiken.

Graag gedaan overigens hoor !