[CSS] voor dummies - deel 9 | Digital Corner (DIG/DEV)

donderdag 19 juni 2008 @ 14:44:54 #101

Geqxon

Op het moment heb ik wat semantiek problemen. Op een pagina heb ik een aantal openstaande berichten (zoals een PM-systeem), waarbij de afzender, enkele gegevens en de content wordt getoond.

Zoals ik het nu heb:

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

<ul class="messages">
   <li>

      
      <fieldset>
         <legend><a href="new.php?prepare&user=Pepijn">Pepijn</a></legend>

         
         <dl>
            <dt>Aan:</dt>
            <dd><a href="new.php?prepare&user=Bep">Bep</a></dd>

            <dt>Verzonden:</dt>
            <dd>19-06-08 14:17</dd>
         </dl>

         
         <p>Telefoon voor bep!</p>

         
         <ul>
            <li><a href="inbox.php?setread&id=10">Markeer als afgehandeld</a></li>
         </ul>

      </fieldset>
   </li>
</ul>

Mijn problemen met deze manier van werken:

De enkele fieldset binnen de list-item lijkt mij onnodig, klopt dit?

Is een fieldset niet enkel voor formulieren?

Is een definition list uberhaupt wel slim voor het bevatten van dit soort data?

Binnen de content van de pagina is het duidelijk wie de ontvanger van het bericht is, maar ik weet er geen goede plek voor te vinden in de HTML zelf.

Zal de legend binnen de fieldset voor een screenreader duidelijk genoeg zijn dat dit de afzender van het bericht is? Doormiddel van CSS opmaak is het iig wel duidelijk.

Kan iemand hier wat licht op schijnen? :)

vrijdag 20 juni 2008 @ 18:04:20 #102

LordNemephis

computer says no

een dikke vette TeeVeePee!

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

vrijdag 20 juni 2008 @ 22:12:30 #103

Light

quote:
Op donderdag 19 juni 2008 14:44 schreef Geqxon het volgende:
Op het moment heb ik wat semantiek problemen. Op een pagina heb ik een aantal openstaande berichten (zoals een PM-systeem), waarbij de afzender, enkele gegevens en de content wordt getoond.

Zoals ik het nu heb:
[ code verwijderd ]

Mijn problemen met deze manier van werken:
De enkele fieldset binnen de list-item lijkt mij onnodig, klopt dit?
Is een fieldset niet enkel voor formulieren?

Twee keer ja

quote:
Is een definition list uberhaupt wel slim voor het bevatten van dit soort data?

Ik zou daar gewoon een div of een span voor gebruiken.

quote:
Binnen de content van de pagina is het duidelijk wie de ontvanger van het bericht is, maar ik weet er geen goede plek voor te vinden in de HTML zelf.

In de buurt van de verzender, zou ik zeggen.

quote:
Zal de legend binnen de fieldset voor een screenreader duidelijk genoeg zijn dat dit de afzender van het bericht is? Doormiddel van CSS opmaak is het iig wel duidelijk.

Die fieldset hoort daar niet, dus die legend ook niet. Als dat de verzender is dan kun je dat gewoon als zodanig weergeven.

quote:
Kan iemand hier wat licht op schijnen?

Is het toeval (als in voor demo) dat er maar 1 bericht wordt gegeven in <ul class="messages"> ? Of laat je wel meer berichten zien (als die er zijn uiteraard)?

fokstok.nl

zaterdag 21 juni 2008 @ 01:23:50 #104

HenkBenzinetank

Toegevoegde waarde

Misschien een beetje kort door de bocht, maar bij twijfel moet je je pagina eens zonder CSS bekijken. Als de structuur dan nog te volgen is, dan zit je qua semantiek vaak ook al goed in de richting.

dinsdag 24 juni 2008 @ 15:02:54 #105

wobbel

Da WoBBeL King

In hoeverre is dit mogelijk?

Ik wil 1 grote div, met daarin een kleiner divje met tekstomloop....

Dit idee dus:

Hosted VoIP SIP trunks Vast mobiel VoIP

dinsdag 24 juni 2008 @ 20:27:33 #106

Ruud

ik ben bezig met een website, maar kom er niet uit

ik heb 2 divjes naast elkaar, de een is het linker menu en de ander is de content
bij de ene pagina is het linker divje langer, maar als ik een andere pagina open is de content weer langer (afhankelijk van de inhoud)

is het mogelijk om beide divjes even lang (height) te houden?

dinsdag 24 juni 2008 @ 20:59:00 #107

Dzy

It is I

Ruud_fr, dat is zonder foefjes niet mogelijk cross-browser, maar waarschijnlijk ben je op zoek naar "Faux columns". Zoek daar eens op

"Reality is an illusion created by a lack of alcohol."

dinsdag 24 juni 2008 @ 20:59:46 #108

Dzy

It is I

En wobbel, dit is natuurlijk heel makkelijk te krijgen door gewoon een DIV container te maken met daarin die twee divs waarvan er een float.

"Reality is an illusion created by a lack of alcohol."

dinsdag 24 juni 2008 @ 21:14:02 #109

Ruud

quote:
Op dinsdag 24 juni 2008 20:59 schreef Dzy het volgende:
Ruud_fr, dat is zonder foefjes niet mogelijk cross-browser, maar waarschijnlijk ben je op zoek naar "Faux columns". Zoek daar eens op

nee, dat is helaas niet wat ik zoek
ik wil background images meegeven aan de header, left, content en footer

dus niet aan de container

dinsdag 24 juni 2008 @ 21:51:33 #110

Dzy

It is I

Maak eens een paint? En vertel er even bij wat allemaal kan stretchen enzo. Dan kan ik je wel vertellen of dit mogelijk is

"Reality is an illusion created by a lack of alcohol."

dinsdag 24 juni 2008 @ 22:12:26 #111

Ruud

ok, zo moet het worden:

'left' en 'content' kunnen verschillen van grootte (height), maar moeten dus even lang worden/blijven

dinsdag 24 juni 2008 @ 22:30:23 #112

Dzy

It is I

Ik zou toch nog een keer naar Faux Columns kijken

Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.

"Reality is an illusion created by a lack of alcohol."

woensdag 25 juni 2008 @ 00:03:45 #113

LordNemephis

computer says no

quote:
Op dinsdag 24 juni 2008 22:30 schreef Dzy het volgende:
Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.

Dit is wel de meest makkelijke manier voor dit doel

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

woensdag 25 juni 2008 @ 03:14:58 #114

DorentuZ

quote:
Op dinsdag 24 juni 2008 22:30 schreef Dzy het volgende:
Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.

Die laatste regel kan je beter weglaten

woensdag 25 juni 2008 @ 10:55:04 #115

Ruud

quote:
Op dinsdag 24 juni 2008 22:30 schreef Dzy het volgende:
Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.

jouw uitleg is een stuk duidelijker dan de site die ik gevonden had, het is gelukt

ik heb nu 3 containers:

container 1: header
container 2: left (menu) en content
container 3: footer

thanks voor de hulp

woensdag 25 juni 2008 @ 11:01:06 #116

Dzy

It is I

Ok Dorentuz, de beste en makkelijkste manier dan

En mooi ruud dat het gelukt is.

"Reality is an illusion created by a lack of alcohol."

woensdag 25 juni 2008 @ 19:10:13 #117

Mirel

Mirel wil een bongophone.

Hoi, ik heb een stukje tekst die ik in het midden van de pagina wil. Ik dacht dus <center> en </center> voor en achter het divje te zetten zodat de tekst in het midden komt, maar elke regel tekst is dan gecentered, en dat wil ik niet.

Heb ook geprobeerd text-align: left in de .css te zetten, maar dan komt de tekst gewoon helemaal links op de pagina. De <center> code doet dus niks.

Denk dat de foto wel duidelijk is

Ik wil dus dat de tekst links uitlijnt, maar wel in het midden zit.

When all else fails, you always have delusion.

woensdag 25 juni 2008 @ 19:18:36 #118

spaceninjapirate

mhh k

Dit moet volgens mij werken:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
html {
    background-color:#000000
}
div#tekst {
   margin:0px auto 0px;
   width:400px;
}
div#tekst p{
    color:#FFFFFF;
}
</style>
</head>
<body>
<div id="tekst">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ligula ligula, rhoncus sed, consectetuer ut, mattis sit amet, enim. Vivamus laoreet placerat felis. Aenean iaculis tristique lacus. Pellentesque diam metus, tempus et, dapibus vitae, faucibus in, eros. Sed eu arcu quis urna mattis dapibus. Cras vitae metus id libero blandit consequat. Cras viverra, dolor eget pulvinar ultricies, orci lacus malesuada neque, sit amet luctus arcu eros sed dui. Morbi eros nisi, consequat ac, condimentum nec, posuere eget, nulla. Quisque bibendum venenatis sapien. Nam sem est, vulputate in, suscipit ut, tincidunt non, massa. Vestibulum sagittis enim eget mauris. Morbi consectetuer, ipsum auctor consectetuer venenatis, arcu diam iaculis metus, eu lobortis est mauris bibendum felis. Nulla ultrices, dui vitae feugiat adipiscing, tortor libero ultricies ipsum, non convallis tortor est id pede. Quisque sollicitudin. Suspendisse accumsan nulla sit amet risus.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vehicula. Nam ullamcorper, erat a congue imperdiet, turpis diam tincidunt lectus, et tempor nulla risus a dui. Morbi non nunc. Praesent ultricies nibh sed arcu. Sed dictum, quam vel tempor viverra, nunc dolor viverra nisl, quis pharetra leo ipsum in neque. Donec eget velit. Ut vulputate faucibus enim. In hac habitasse platea dictumst. Donec posuere semper urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lorem. Mauris hendrerit adipiscing nisi.</p>
</div>
</body>
</html>

[ Bericht 0% gewijzigd door spaceninjapirate op 25-06-2008 19:19:28 (typfoutje) ]

woensdag 25 juni 2008 @ 19:18:42 #119

Light

quote:
Op woensdag 25 juni 2008 19:10 schreef Mirel het volgende:
Hoi, ik heb een stukje tekst die ik in het midden van de pagina wil. Ik dacht dus <center> en </center> voor en achter het divje te zetten zodat de tekst in het midden komt, maar elke regel tekst is dan gecentered, en dat wil ik niet.

Heb ook geprobeerd text-align: left in de .css te zetten, maar dan komt de tekst gewoon helemaal links op de pagina. De <center> code doet dus niks.

[ afbeelding ]
Denk dat de foto wel duidelijk is :) Ik wil dus dat de tekst links uitlijnt, maar wel in het midden zit.

Even aangenomen dat die div met teks als id centertext heeft:

1
2
3
4

#centertext {
width: 50%; /* Of iets anders, maar je moet een breedte instellen */
margin: 0 auto; /* Links en rechts auto -> Links en rechts gelijk -> Div staat gecentreerd */
}

fokstok.nl

FOK!-Schrikkelbaas dinsdag 1 juli 2008 @ 12:51:46 #120

Swetsenegger

Egocentrische Narcist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<tr id="ipRow">
<td class="lc">spatie</td>
<td class="rc">

<table border="0" cellspacing="0" cellpadding="2">
    <tr>
   <td>IP</td>
   <td nowrap="nowrap"><input type="text" class="num" name="ip1" value="@ip1#" size=3 maxlength=3>.<input type="text" class="num" name="ip2" value="@ip2#" size=3 maxlength=3>.<input type="text" class="num" name="ip3" value="@ip3#" size=3 maxlength=3>.<input type="text" class="num" name="ip4" value="@ip4#" size=3 maxlength=3>
   </td>
  </tr>
  <tr>
   <td>mask</td>
   <td><input type="text" name="mask1" class="num" value="@mask1#" size=3 maxlength=3>.<input type="text" name="mask2" class="num" value="@mask2#" size=3 maxlength=3>.<input type="text" class="num" name="mask3" value="@mask3#" size=3 maxlength=3>.<input type="text" class="num" name="mask4" value="@mask4#" size=3 maxlength=3>
   </td>
  </tr>
  <tr>
   <td>gateway</td>
   <td><input type="text" class="num" name="gw1" value="@gw1#" size=3 maxlength=3>.<input type="text" class="num" name="gw2" value="@gw2#" size=3 maxlength=3 onFocus="if(this.disabled)this.blur()">.<input type="text" class="num" name="gw3" value="@gw3#" size=3 maxlength=3>.<input type="text" class="num" name="gw4" value="@gw4#" size=3 maxlength=3>
   </td>
  </tr>
</table>

</td>
</tr>

De 'ipRow' toggle ik display:none; en display:block dmv een onclick.

In IE krijg ik keurig dit te zien als de row visible is

1
2
3
4
5
6
7

---------------------------------------------------------------------
| cel 1                     |                                       |
---------------------------------------------------------------------
| spatie                    | IP      [].[].[].[]                   |
|                           | Mask    [].[].[].[]                   |
|                           | Gateway [].[].[].[]                   |
---------------------------------------------------------------------

In elke andere browser dit

1
2
3
4
5
6
7

---------------------------------------------------------------------
| cel 1                       |                                     |
---------------------------------------------------------------------
| spatie | IP      [].[].[].[]|
|        | Mask    [].[].[].[]|
|        | Gateway [].[].[].[]|
---------------------------------------------------------------------

Kortom, de geneste table wordt tov de parenttable in de linker cel gepropt. Terwijl die toch echt afgesloten is.
Wat doe ik fout?

-edit- ter verduidelijking: http://test.xploise.nl/test.html
In IE is het gedrag zoals ik verwacht (en wat ik nodig heb) in elke andere browser niet.

-edit- En het antwoord

http://snook.ca/archives/html_and_css/dynamically_sho/

[ Bericht 6% gewijzigd door Swetsenegger op 01-07-2008 14:11:40 ]

 | FOK! Schrikkelbaasch

dinsdag 1 juli 2008 @ 19:41:45 #121

BugWorks

Ik ben bezig met het maken van een website. De betreffende site gaat stukken tekst bevatten waardoor de scrollbar gebruikt wordt. Nu is het me opgevallen dat in IE7 de website mooi gecentraliseerd blijft staan maar in FF3 een klein beetje naar links springt (jammer genoeg).

Weet iemand hoe ik dit kan voorkomen? Alvast bedankt

.

dinsdag 1 juli 2008 @ 20:14:26 #122

DorentuZ

quote:
Op dinsdag 1 juli 2008 19:41 schreef BugWorks het volgende:
Ik ben bezig met het maken van een website. De betreffende site gaat stukken tekst bevatten waardoor de scrollbar gebruikt wordt. Nu is het me opgevallen dat in IE7 de website mooi gecentraliseerd blijft staan maar in FF3 een klein beetje naar links springt (jammer genoeg).

Weet iemand hoe ik dit kan voorkomen? Alvast bedankt .

Dat komt omdat ie altijd de scrollbalk laat zien, en firefox alleen als die nodig is.. Je zou dus overflow:scroll aan je html of body kunnen hangen (weet zo niet welke van de 2), zodat firefox zich gedraagt als IE..

dinsdag 1 juli 2008 @ 20:15:35 #123

Light

quote:
Op dinsdag 1 juli 2008 19:41 schreef BugWorks het volgende:
Ik ben bezig met het maken van een website. De betreffende site gaat stukken tekst bevatten waardoor de scrollbar gebruikt wordt. Nu is het me opgevallen dat in IE7 de website mooi gecentraliseerd blijft staan maar in FF3 een klein beetje naar links springt (jammer genoeg).

Weet iemand hoe ik dit kan voorkomen? Alvast bedankt .

Firefox laat geen scrollbalk zien als je die niet gebruikt, IE wel.
Oplossing: de volgende regel toevoegen bij of html of body:
overflow-y: scroll;

Kijk dan even in IE om te zien of je geen dubbele scrollbalk krijgt. Dat zou namelijk niet handig zijn.

fokstok.nl

dinsdag 1 juli 2008 @ 20:28:08 #124

BugWorks

Dank jullie.

donderdag 3 juli 2008 @ 18:58:49 #125

DionysuZ

Respect my authority!

Ik heb een vraagje, niet gericht op CSS, maar kan wellicht toch hier terecht omdat ik geen apart topic ervoor wil openen.

Weet iemand of ik de FIELDSET tag ook legaal kan gebruiken buiten een form, bijvoorbeeld om een menu heen (zoals fieldset met legend = main menu, sub menu, dat soort)?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

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

[CSS] voor dummies - deel 9

» digital corner

» development

» digital corner

» development