[CSS] voor dummies - deel 13

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_73240998
Ik heb geen probleem hoor Succes verder!
pi_73247848
quote:
Op woensdag 30 september 2009 13:51 schreef Swetsenegger het volgende:

Als het semantisch zo bedoeld was is het wel erg lullig dat een <ul> onder elkaar geplaatst wordt
Je verwart nu semantiek met de standaard rendering van browsers, terwijl ze niets met elkaar te maken hebben.
  vrijdag 2 oktober 2009 @ 17:17:39 #29
87680 Mirel
Mirel wil een bongophone.
pi_73311195
Hoi, op http://mirelmasic.nl/portfolio.html wil ik dat het fototje links wordt uitgelijnd en de tekst rechts.
Als ik de breedte en hoogte van de foto instel, gaat ie naar het midden. Ik heb dan geprobeerd margins en paddings te gebruiken, maar ze doen niks.
Foto is #thumb.

1
2
3
4
5		#thumb {
   border: 5px solid #000000;
   width: 175px;
   height: 175px;
}   

Zonder de width en height gaat ie wel naar links, maar dan over het kopje heen, en de border trekt door naar rechts naar de rand van het grijze vlak.
When all else fails, you always have delusion.
pi_73311607
De foto is niet #thumb, de foto staat in een div die ID #thumb heeft. Daardoor maak je het jezelf alleen maar lastiger. Zonder die div gaat het zonder enige css al goed (naja alleen de border).

-edit-
Ik zie dat je echt OVERAL waar mogelijk divs omheen hebt lopen zetten. Doe dat niet. Is alleen maar lastig.

[ Bericht 25% gewijzigd door twirky op 02-10-2009 17:36:55 ]
  vrijdag 2 oktober 2009 @ 17:34:16 #31
87680 Mirel
Mirel wil een bongophone.
pi_73311704
Hoe zou ik het anders doen zonder div? Het is niet de bedoeling dat ik die plaatjes ga verwijzen in het css bestand.
When all else fails, you always have delusion.
pi_73311856
quote:
Op vrijdag 2 oktober 2009 @ 17:34 schreef Mirel het volgende:
Hoe zou ik het anders doen zonder div? Het is niet de bedoeling dat ik die plaatjes ga verwijzen in het css bestand.
In je css hoeft niets anders. Je moet alleen die div weghalen en het ID (waarom eigenlijk een ID ipv een class?) in de <img>-tag zetten.
  vrijdag 2 oktober 2009 @ 17:43:29 #33
87680 Mirel
Mirel wil een bongophone.
pi_73311990
Ja ok, de div is weg en hij doet het goed. En vertel me maar eens goed wat het verschil is tussen een id en een class want van m'n leraar word ik ook niet wijzer.
Ik dacht altijd dat je met classes meerdere divs van dezelfde naam neer kon zetten, maar ik heb datzelfde nu op m'n pagina met id's en het werkt. Dus ik heb gewoon het foute idee

[ Bericht 46% gewijzigd door Mirel op 02-10-2009 17:49:48 ]
When all else fails, you always have delusion.
pi_73312274
Het belangrijkste verschil waar je tegenaan loopt, is dat een ID altijd uniek moet zijn. Dat betekent dus dat je een ID per pagina maar één keer mag gebruiken. Een class mag je zo vaak herhalen als je zelf wilt.

Verder zijn er niet echt strikte regels wanneer je wat gebruikt. Maar om bovenstaande reden zijn ID's vaak nuttig voor gebruik met javascript en formulieren, en classes voor CSS.

Maar nogmaals, zolang je een element maar één keer gebruikt maakt het geen biet uit wat je kiest. Loop je de kans dat een element vaker terugkomt, gebruik dan een class.

-edit-
Ja je CSS kijkt er wel overheen, maar als je je pagina door de W3-validator haalt, geeft die foutmeldingen. Op zich voor jou niet zo'n ernstige, maargoed als het toch niet uitmaakt, waarom dan toch stug een ID gebruiken heh
pi_73312532
quote:
Op vrijdag 2 oktober 2009 17:43 schreef Mirel het volgende:

Ik dacht altijd dat je met classes meerdere divs van dezelfde naam neer kon zetten, maar ik heb datzelfde nu op m'n pagina met id's en het werkt. Dus ik heb gewoon het foute idee
Ja, het werkt. Helaas voldoet het op geen enkele manier aan de specificaties, en heb je dus geen HTML geschreven maar een eigen taal gebaseerd op HTML
  vrijdag 2 oktober 2009 @ 18:06:18 #36
87680 Mirel
Mirel wil een bongophone.
pi_73312731
Als ik even voor de grap alles vervang met classes dan gaat m'n layout stuk. Was het nou zo dat je de eerste instantie van een naam eerst als id moet doen en de rest als class?
When all else fails, you always have delusion.
pi_73313197
quote:
Op vrijdag 2 oktober 2009 @ 18:06 schreef Mirel het volgende:
Als ik even voor de grap alles vervang met classes dan gaat m'n layout stuk. Was het nou zo dat je de eerste instantie van een naam eerst als id moet doen en de rest als class?
Heb je ook in je css alle hekjes (#) door punten (.) vervanen dan?
  vrijdag 2 oktober 2009 @ 18:21:45 #38
87680 Mirel
Mirel wil een bongophone.
pi_73313302
*kwartje valt
When all else fails, you always have delusion.
  vrijdag 2 oktober 2009 @ 18:29:13 #39
87680 Mirel
Mirel wil een bongophone.
pi_73313576
Zo, alles is vervangen. denk dat ik er nu wel uitkom. Nog een vraagke echter Kan ik hyperlinks los van elkaar definieren? Ik probeerde wat en het ging niet goetttt. Gaf een link een id en ging die toen proberen te opmaken in m'n css bestand, maar ik het gevoel dat ik de syntax weer fout had.
When all else fails, you always have delusion.
pi_73313751
Je kunt een link net als ieder ander element stijlen door er een id of class aan te geven.

Of als je alle links wilt stijlen gewoon naar de tag verwijzen.

Lees ook dit even door, misschien verduidelijkt dat het hele verhaal wat: http://www.w3schools.com/Css/css_syntax.asp
pi_73314086
Of naar alle links binnen een onderdeel verwijzen, scheelt vaak een hoop code (voor alle links in de header dus "#header a" bijv.).
  vrijdag 2 oktober 2009 @ 18:58:12 #42
87680 Mirel
Mirel wil een bongophone.
pi_73314402
quote:
Op vrijdag 2 oktober 2009 18:48 schreef Roy_T het volgende:
Of naar alle links binnen een onderdeel verwijzen, scheelt vaak een hoop code (voor alle links in de header dus "#header a" bijv.).
nog handiger, scheelt mij weer achteraf alle a's een class te geven.
When all else fails, you always have delusion.
  zondag 4 oktober 2009 @ 14:33:19 #43
87680 Mirel
Mirel wil een bongophone.
pi_73357428
En daar ben ik weer.

Ik heb heel sterk het vermoeden dat ik iets compleet fout doe met mijn menu (eigenlijk geen vermoeden ). Ik heb geprobeerd de woorden in het midden te krijgen, maar uiteindelijk heb ik het los gepositioneerd ipv in het midden uit te lijnen. Als ik nu een dropdown maak, dan gaat dat helemaal fout. De dropdown komt standaard niet onder de juiste knop terecht vanwege alle margins en paddins die ik zorgeloos overal neer heb gesmeten.
Momenteel heb ik de dropdown alleen onder http://www.mirelmasic.nl/portfolio.html staan, als je over de portfolio knop heen gaat.

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		.menu {
   background: #010200;
   width: 1000px;
   height: 20px;
   color: white;
   font-size: 15px;
   font-family: century gothic, verdana, tahoma;
}

.menulist {
   margin: 0px;
   padding-left: 280px;
}

.menulist li {
   padding-right: 142px;
   display: inline;
   list-style-type: none;
}

li:hover ul { 
   display: block;
}

.dropdown {
padding: 0px;
background: black;
}

li ul {
   position: absolute;
   padding-left: 189px;
   display: none;
}

(laatste 3 dingetjes heb ik vluchtig gedaan)

1
2
3
4
5
6
7
8
9
10
11
12		   <div class="menu">
      <ul class="menulist">
         <li><a href="index.html">Home</a></li>
         <li><a href="portfolio.html">Portfolio</a>
            <ul >
               <li class="dropdown"><a href="test.html">dropdown1</a></li><br>
               <li class="dropdown"><a href="test.html">dropdown2</a></li>
            </ul>
         </li>
         <li><a href="about.html">About</a></li>
      </ul>
   </div>


Komt er op neer, hoe maak ik het menu initieel goed zodat de dropdown straks het ook goed doet?

Maar wat ik niet snap, hoe kan ik de dropdown ooit goed krijgen als ik sowieso padding-left moet gebruiken om de menuitems elk wat uitelkaar te plaatsen? Dan zal ik die alsnog weer los moeten doen.
When all else fails, you always have delusion.
pi_73358438
Ik heb nu even geen tijd, maar wat me wel meteen opvalt (en nee, dat heeft hier niets mee te maken ) is de <br> achter een <li>, die daar écht niet hoort (<li>'s staan altijd al onder elkaar; het zijn block-level elementen). En dan nog: <br> is niet echt XHTML, terwijl je in je doctype zegt dat je dat gebruikt

Goed, dat was mijn reactie waar je verder niets aan hebt
pi_73358678
Je kunt de hoofdmenu-items en submenu-items apart stylen. Een div om het menu is eigenlijk ook niet nodig, je kunt ook de ul opmaken.

Voor het maken van een dropdownmenu gebruik ik meestal de techniek die wordt beschreven op http://htmldog.com/articles/suckerfish/dropdowns/ .
fokstok.nl
  zondag 4 oktober 2009 @ 15:21:09 #46
87680 Mirel
Mirel wil een bongophone.
pi_73358895
quote:
Op zondag 4 oktober 2009 15:04 schreef Roy_T het volgende:
Ik heb nu even geen tijd, maar wat me wel meteen opvalt (en nee, dat heeft hier niets mee te maken ) is de <br> achter een <li>, die daar écht niet hoort (<li>'s staan altijd al onder elkaar; het zijn block-level elementen). En dan nog: <br> is niet echt XHTML, terwijl je in je doctype zegt dat je dat gebruikt

Goed, dat was mijn reactie waar je verder niets aan hebt
Ja de <br> was daar omdat anders de dropdown naast etlkaar ging, weet niet waarom
When all else fails, you always have delusion.
  zondag 4 oktober 2009 @ 19:53:59 #47
87680 Mirel
Mirel wil een bongophone.
pi_73366403
Alleen de ul overlaten en die stylen lukt me niet. Hij neemt geen kleuren of width en height over.

Hoe krijg ik de menulinks gecentered? Ik heb OVERAL geprobeerd margin: 0 auto in te doen, werkt niet.
When all else fails, you always have delusion.
  zondag 4 oktober 2009 @ 20:09:09 #48
87680 Mirel
Mirel wil een bongophone.
pi_73367030
Even met foto's, ben overnieuw begonnen.

Dit is met de code:
1
2
3
4
5
6
7		   <div class="menu">
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="portfolio.html">Portfolio</a></li>
         <li><a href="about.html">About</a></li>
      </ul>
   </div>

en
1
2
3
4
5
6
7
8
9
10
11
12		.menu {
   font-family: century gothic;
   background: #010200;
   height: 20px;
}

ul, li {
   padding: 0px;
   background: red;
   display: inline;
   list-style: none;
}

Achtergrond is tijdelijk rood voor de duidelijkheid.


Wat moet ik nú doen om de menulinks gecentered te krijgen, met een afstand tussen elke menu item? Ik heb tot nu toe geprobeerd margin: 0 auto eigenlijk overal al in te doen

Kijk, als ik dat zelf een padding-left of margin-left doe om ze in het midden te krijgen, en padding-right om ruimte te maken tussen elk menu item, dan gaat dat straks backfiren met een dropdown, want die zal dan die afstanden meenemen. Bij de uitklap krijg je dan het woord met een heleboel lege ruimte zoals:

De uitklap moest ik trouwens ook precies daar onder positioneren, hij kwam er niet standaard onder.
When all else fails, you always have delusion.
  zondag 4 oktober 2009 @ 20:53:51 #49
87680 Mirel
Mirel wil een bongophone.
pi_73369381
IK HEB HET WAAAA

(text align center, en dan ipv het gehele linkgeval uit elkaar zetten alleen het a gedeelte

edit: nou heb ik de kanker op die dropdown, display staat op block maar de 2 links staan nog steeds onder elkaar. Ik ga het gewoon brak fixen met een <br>.



[ Bericht 47% gewijzigd door Mirel op 04-10-2009 21:21:40 ]
When all else fails, you always have delusion.
pi_73370314
als ik nou deze html heb:

1
2		<input type='radio' name='antwoord' value='".$antwoord->antwoordnr."' />
<p>".nl2br($antwoord->antwoord)."</p>


Hoe zorg ik er dan voor dat de tekst netjes naast de radiobutton komt te staan? In FF krijg ik het wel voor elkaar, maar IE wil absoluut niet wat ik wil.

ongeveer zo dus:

o Dit is de tekst die over
   meerdere regels doorloopt
   maar op alle regels is
   geïndent.
Trotse poster van het 37000000ste bericht ^O^
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - deel 13
Index

» digital corner

» development

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