Formulier stylen zonder <br> te gebruiken

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Goededag,

Ik ben een formulier aan het opzetten voor mijn website.

De volgende code heb ik in html staan:
<form>
<tr>
<td>*First Name:</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>*Last Name:</td>
<td><input type="text" name="lastname"></td>
</tr>
<tr>
<td>*Phone:</td>
<td><input type="text" name="phone" maxlength="20"></td>
</tr>
<tr>
<td>*Email:</td>
<td><input type="email" name="email" maxlength="50"></td>
</tr>
</form>
toon volledige bericht
Echter wil ik First Name, Last Name etc.. onder elkaar zetten maar ik wil niet gebruik maken van de <br> tag.

Hoe kan ik het dan doen, via CSS?

BVD!

Acties:
  • 0 Henk 'm!

  • Cyphax
  • Registratie: November 2000
  • Laatst online: 15:51

Cyphax

Moderator LNX
Maak er <label>s van (dus krijg je <label for="firstname">First Name</label> maar geef die formelementen dan ook even het bijbehorend id naast de name) en dat element definieer je in je CSS dan als block-level element, met display: block

[ Voor 18% gewijzigd door Cyphax op 24-10-2011 18:20 ]

Saved by the buoyancy of citrus


Acties:
  • 0 Henk 'm!

  • Avalaxy
  • Registratie: Juni 2006
  • Laatst online: 14:50
Een formulier hoort sowieso niet in table rows met table definitions, en laatstgenoemden horen sowieso niet buiten een tabel.

Wat jij moet doen is gewoon label elementen en input elementen gebruiken die je in een form zet, eventueel aangevuld met een legend element binnen een fieldset element. Dingen naast elkaar zetten en dergelijken kun je vrij gemakkelijk door eventueel wat divjes toe te voegen en met CSS float te spelen. Maar dat heb je vast zelf al opgezocht.

Hier heb je een formuliertje die ik ooit gebouwd heb, zit semantisch al iets correcter in elkaar dan jouw voorbeeld:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
        <fieldset>
            <legend>
                <h3>Contactformulier</h3>
            </legend>
            <form action="bla" method="post">
                <label for="name">Uw naam:</label><br />
                <input type="text" name="name" id="name" class="wide_text" placeholder="Uw naam" required /><br />
                <label for="email">Uw e-mail:</label><br />
                <input type="email" name="email" id="email" class="wide_text" placeholder="uw@emailadres.tld" required /><br />
                <label for="message">Uw bericht:</label><br />
                <textarea rows="4" cols="30" name="message" id="message" placeholder="Uw vraag..." required></textarea><br /><br />
                <input type="submit" name="submit" value="Verstuur" class="button black" />
            </form>
        </fieldset>


Klopt nog niet helemaal, maar you get the idea.

[ Voor 54% gewijzigd door Avalaxy op 24-10-2011 18:25 ]


Acties:
  • 0 Henk 'm!

  • mithras
  • Registratie: Maart 2003
  • Niet online
Wij stijlen forms altijd in een <dl> en zien de <dl> ook als een van de meest semantisch bruikbare oplossingen (hoewel de meningen daarover zijn verdeeld). Je krijgt dan zoiets:

HTML:
1
2
3
4
5
6
7
8
9
<form>
  <dl>
    <dt><label for="first-name">First name</label></dt>
    <dd><input type="text" name="first-name" id="first-name"></dd>

    <dt><label for="last-name">Last name</label></dt>
    <dd><input type="text" name="last-name" id="last-name"></dd>
  </dl>
</form>


Je kan dan met css dit stylen zoals je wilt. Een van de mogelijkheden is inderdaad alle labels in één kolom en de inputs in een tweede kolom.

Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Hmm super voor de reacties, ik ben er nog een beetje nieuw mee.

Moet ik dan in CSS, form dt & form dd stylen of anders?

Bedankt.

Acties:
  • 0 Henk 'm!

  • Avalaxy
  • Registratie: Juni 2006
  • Laatst online: 14:50
In het geval van mijn voorbeeld (alles onder elkaar) hoef je niet veel te stylen. Als je de labels en editor naast elkaar wilt hebben dan zul je de kolom/het element waar deze dingen in zitten moeten stylen.

Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Jij gebruikt de br's, mij is sterk afgeraden om dit te gebruiken.

Acties:
  • 0 Henk 'm!

  • Tentacle1
  • Registratie: Augustus 2001
  • Laatst online: 13-03 09:12

Tentacle1

60% Puur Sap!

Als je echt geen br wilt gebruiken kan je ook in je css de label op display: block zetten, maar ik zie niet echt waarom een br een probleem zou moeten zijn i.c.m. een label.

System specs


Acties:
  • 0 Henk 'm!

  • Cyphax
  • Registratie: November 2000
  • Laatst online: 15:51

Cyphax

Moderator LNX
EvertonPride schreef op maandag 24 oktober 2011 @ 19:07:
Jij gebruikt de br's, mij is sterk afgeraden om dit te gebruiken.
Door wie, en waarom? Een br is gewoon een linebreak, als je dat form hebt opgebouwd uit regels, met op de ene regel een label met caption, en op de volgende een formulierelement, dan is daar toch niets mis mee. Wat je wel zou mogen voorkomen, en wat ook afgeraden wordt, is om er tabellen voor te gebruiken, maar dat heb je wel in de gaten lijkt me.

Wat je wel kan doen is wat lezen over block-level elementen en inline elementen, hoe dat een beetje in elkaar steekt, voor zover je dat nog niet weet. Als je dat snapt heb je zo ook een mooie oplossing bedacht voor jezelf. :)

Saved by the buoyancy of citrus


Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Het is een schoolopdracht, we moeten een slecht uitziende site verbeteren, bij technisch aspect staat dit:

Geen tabellen, geen frames, geen <br/>’s en geen spaties om de pagina in te delen en om elementen te positioneren

Ik zal eens lezen over het block-element. ;)

Acties:
  • 0 Henk 'm!

  • Avalaxy
  • Registratie: Juni 2006
  • Laatst online: 14:50
Dan gooi je de BR's weg en pak je een margin oid :Y)

Acties:
  • 0 Henk 'm!

  • Killemov
  • Registratie: Januari 2000
  • Laatst online: 19-05 12:52

Killemov

Ik zoek nog een mooi icooi =)

EvertonPride schreef op maandag 24 oktober 2011 @ 18:08:
...
Ik ben een formulier aan het opzetten voor mijn website.
...
Dus je hebt gelogen. Tweakers.net is niet bestemd voor het maken van jouw huiswerk.

Hey ... maar dan heb je ook wat!


Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Niet echt gelogen, ik heb dit namelijk ook nodig voor mijn eigen website, maargoed als het niet mag dan doe maar een slotje.

Acties:
  • 0 Henk 'm!

  • MueR
  • Registratie: Januari 2004
  • Laatst online: 09:02

MueR

Admin Tweakers Discord

is niet lief

Killemov schreef op maandag 24 oktober 2011 @ 19:33:
[...]

Dus je hebt gelogen. Tweakers.net is niet bestemd voor het maken van jouw huiswerk.
En jij mag een toontje lager zingen. Modereren doen wij wel.

Anyone who gets in between me and my morning coffee should be insecure.


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 16-05 11:46

Bosmonster

*zucht*

Tabellen zijn semantisch gezien net zo geschikt voor formulieren als een definition list. Het heeft in dit geval praktisch dezelfde semantiek.

De voornaamste reden om geen tabellen te gebruiken is toegankelijkheid. Er zijn twee elementen in pagina's die voor blinden heel lastig zijn in pagina's en dat zijn tabellen en formulieren. Die twee combineren is dus geen goed idee.

Een DL kan op zich prima, maar is feitelijk ook dubbele semantiek. Een label is al verbonden aan een input, dus waarom dat nog een keer extra benadrukken. Daarnaast zijn DL's redelijk drama om te stylen als het iets ingewikkelder wordt.

Dan kun je nog Lists gebruiken, zoals een Ordered of Unordered List, simpelweg als lijst van invoermogelijkheden. Persoonlijk vind ik dit de beste keuze, omdat het verder geen dubbele semantiek toevoegt, en eenvoudig is te stylen. Daarnaast is het eenvoudig voor een screenreader om tussen list-items te springen.

Als laatste kun je ook gewoon div's gebruiken en dat is ook prima, aangezien het formulier op zichzelf staand goed genoeg is en de div's puur zijn voor opmaak.

Wat veel belangrijker is dan welk wrapper element je gebruikt, is natuurlijk correct omgaan met formulier-elementen, zoals fieldsets, legends, labels, etc. En het gebruik van goede foutmeldingen en invoer-hints.

sidenote:
Semantiek staat niet altijd gelijk aan toegankelijkheid of usability. Interessant artikel in deze context:
http://www.frankwatching....ienden-10-usability-tips/

Als je het hebt over semantiek, bedenk je dan dus ook waarom je het hebt over semantiek. En gebruik het niet alleen als buzzword, maar toets bij voorkeur aan de praktijk.

[ Voor 18% gewijzigd door Bosmonster op 24-10-2011 20:54 ]


Acties:
  • 0 Henk 'm!

  • geert1
  • Registratie: Maart 2006
  • Laatst online: 27-05 14:28
Het belangrijkste basisfeit dat je allereerst tot je zou moeten nemen is dit: Je kiest je html-structuur niet op basis van het gewenste uiterlijk van je pagina. Je kiest elk html-element op basis van semantiek, oftewel: Welk element het meest inhoudelijk beschrijvend is van het onderdeel dat je aan het maken bent. Daarom plaats je bijvoorbeeld een opsomming in een ul / li structuur en een paragraafje tekst in een p-element. Voor het uiterlijk gebruik je dan css. Dat dus qua theorie. Een voorbeeld van hoe ik mijn formulieren opzet, zodat je er alle kanten mee op kunt:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form>
  <div class="form-field form-field-text">
    <label for="contact-name">Uw naam:</label>
    <input type="text" id="contact-name" />
  </div>
  <div class="form-field form-field-text">
    <label for="contact-email">Uw e-mailadres:</label>
    <input type="text" id="contact-name" />
  </div>
  <div class="form-field form-field-select">
    <label for="contact-subject">Onderwerp:</label>
    <select id="contact-subject"><option>Ik heb een vraag</option><option>Ik heb een klacht</option></select>
  </div>
  <div class="form-field form-field-submit">
    <input type="submit" value="Verzenden" />
  </div>
</form>

Omschrijving in het kort: Gewoon een label en een invulveld, samen geplaatst als logische eenheid in een div-element met telkens een overeenkomstige css-class ("form-field") voor stijling. Om ze naast elkaar te plaatsen gebruik je op de label en op de input/select de eigenschap "float:left" en vaak een vaste breedte (zoals "width: 150px") en je bent een heel eind. De omringende div (class="form-field") zou je dan voorzien van een marge aan de onderkant (in je stylesheet), om daarmee de tussenruimte te beheren. Persoonlijk gebruik ik de fieldset- en legend-elementen alleen bij langere formulieren die uit meerdere "blokken" bestaan (zoals een onderdeel "adresgegevens" en een onderdeel "persoonsgegevens" in hetzelfde formulier. Voor simpele formulieren mag het wel, maar hoeft het niet.

Vervelende bijkomstigheid is dat de form-field-divjes gecleard moeten worden vanwege de manier waarop de float-eigenschap werkt. Hoe dat werkt lees je hier.

Algemene tips: Lees je allereerst in over semantisch gebruik van HTML, kun je hier beginnen. Daarna alles leren over de veelgebruikte css-eigenschappen, zodat je structuur en uiterlijk goed van elkaar gescheiden houdt. Succes!

Edit: Wat Bosmonster zegt: Naast gebruik van div-elementen kan een ul/li-structuur ook prima. En semantiek en accessibility komen inderdaad niet altijd overeen, maar liggen vaak in elkaars verlengde en je inlezen in beide onderwerpen is dus het devies.

[ Voor 12% gewijzigd door geert1 op 24-10-2011 21:14 ]


Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 25-05 10:12
EvertonPride schreef op maandag 24 oktober 2011 @ 19:26:
Het is een schoolopdracht, we moeten een slecht uitziende site verbeteren, bij technisch aspect staat dit:

Geen tabellen, geen frames, geen <br/>’s en geen spaties om de pagina in te delen en om elementen te positioneren

Ik zal eens lezen over het block-element. ;)
Het lijkt me dat dat over de template gaat. Een form is eerder onderdeel van de content. Als je daarin een enter nodig hebt is de manier gewoon om een <br> te gebruiken.

Ze bedoelen natuurlijk dat je niet je menu van je header scheidt door er 3 <br>'s tussen te zetten, en het logo in het midden uitlijnt door er 589 &nbsp;'s voor te zetten enzo... Dat is wat anders dan een linebreak in een formulier. Ze bedoelen natuurlijk dat je niet je menu van je header scheidt door er 3 <br>'s tussen te zetten, en het logo in het midden uitlijnt door er 589  's voor te zetten enzo...
En als je docent het daar niet mee eens is, is dat eerder zijn/haar fout dan die van jou. Al ben jij dan helas waarschijnlijk wel degene die met de gebakken peren zit.

Acties:
  • 0 Henk 'm!

  • geert1
  • Registratie: Maart 2006
  • Laatst online: 27-05 14:28
mcDavid schreef op maandag 24 oktober 2011 @ 21:00:
[...]

Het lijkt me dat dat over de template gaat. Een form is eerder onderdeel van de content. Als je daarin een enter nodig hebt is de manier gewoon om een <br> te gebruiken.

Ze bedoelen natuurlijk dat je niet je menu van je header scheidt door er 3 <br>'s tussen te zetten, en het logo in het midden uitlijnt door er 589 &nbsp;'s voor te zetten enzo... Dat is wat anders dan een linebreak in een formulier. Ze bedoelen natuurlijk dat je niet je menu van je header scheidt door er 3 <br>'s tussen te zetten, en het logo in het midden uitlijnt door er 589  's voor te zetten enzo...
En als je docent het daar niet mee eens is, is dat eerder zijn/haar fout dan die van jou. Al ben jij dan helas waarschijnlijk wel degene die met de gebakken peren zit.
Een br tussen een label en een input is inderdaad al minder "fout" dan die andere voorbeelden die je noemt, maar het is alsnog niet handig. Ik hou voor mezelf de regel aan dat ik de br-tag alleen gebruik om tekst te onderbreken. Om niet-tekstuele elementen te plaatsen zijn er veel betere methodes, zoals "display:block", marge, position, float, enzovoort. Daarmee heb je veel fijnere controle dan een br-tag. Een br-tag schuift ook altijd een hele regel op, en twee br's twee regels. Maar wat nu als je er 8 pixels ruimte tussen wilt hebben? Of als je later in een redesign besluit om de elementen toch naast elkaar te plaatsen? Ga je dan in een uitgebreide site alles doorlopen om die br's te verwijderen? Oftewel: Gebruik css voor je opmaak, en html voor je structuur. Scheelt je een hoop ellende en maakt het allemaal veel leuker. De br-tag heeft zijn plaats in lopende teksten, vaak binnen een paragraaf-element, wanneer je op een nieuwe regel wilt beginnen.

[ Voor 24% gewijzigd door geert1 op 24-10-2011 21:26 ]


Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Oke weer bedankt voor de reacties, begin het steeds meer te begrijpen.

@geert, ik heb jou het meeste gevolgd en ik ben tot de volgende html-code gekomen voor mijn form:
<form>
<div class="form-field form-field-text">
<label for="fname">First Name:</label>
<input type="text" id="fname" />
</div>
<div class="form-field form-field-text">
<label for="lname">Last Name:</label>
<input type="text" id="lname" />
</div>
<div class="form-field form-field-text">
<label for="phone">Phone:</label>
<input type="text" id="phone" />
</div>
<div class="form-field form-field-email">
<label for="email">Email:</label>
<input type="email" id="email" />
</div>
<div class="form-field form-field-text">
<label for="business">Business:</label>
<input type="text" id="business" />
</div>
<div class="form-field form-field-text">
<label for="address">Address:</label>
<input type="text" id="address" />
</div>
<div class="form-field form-field-text">
<label for="city">City:</label>
<input type="text" id="city" />
</div>
<div class="form-field form-field-text">
<label for="state">State:</label>
<input type="text" id="state" />
</div>
<div class="form-field form-field-textarea">
<label for="questions">Any questions or comments:</label>
<textarea id="questions" rows= "10" cols="100"></textarea>
</div>
<div class="form-field form-field-submit">
<input type="submit" value="Submit" />
</div>
</form>
toon volledige bericht
Dit levert de volgende form op:

Afbeeldingslocatie: http://s4.postimage.org/obsgz5oob/Naamloos.jpg

Nu ik ik alleen nog de inputtype (behalve de questions, deze staat prima) wat naar rechts schuiven en mooi onder elkaar uitlijnen, welke handeling gebruik ik dan in mijn css?

ps: overigens komt deze site niet online en hoef de submit-button niet te werken want we maken geen gebruik van script nog etc.. dus het gaat meer om een goede vormgeving en juiste codeopmaak.

[ Voor 5% gewijzigd door EvertonPride op 25-10-2011 12:27 ]


Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 25-05 10:12
Als je alle labels een vaste breedte geeft staan je inputs netjes onder elkaar.

Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Yes, dat wilde ik doen dmv de volgende code in CSS.

label {
width: 200px;}

Ik heb het idee dat label niet de juiste codebenaming moet zijn in CSS?

Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 25-05 10:12
Jawel. Maar de label moet wel inline-block zijn anders werkt je breedte niet.

Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Perfect!

Nog 2 dingen en dan ben ik klaar.

1.
Afbeeldingslocatie: http://s4.postimage.org/emdtappuz/gmjdk.png

2. De submitbutton wil ik graag verkleinen in de breedte, hij staat nu onder input, en dat wordt allemaal 300 px verbreedt.


Momenteel de code:
label {
width: 200px;
display: inline-block;
}

input {
width: 300px;
margin: 5px;}

textarea {
width: 300px;
margin: 5px;}

Acties:
  • 0 Henk 'm!

  • Avalaxy
  • Registratie: Juni 2006
  • Laatst online: 14:50
Geef je je submit input een class="button" mee en doe je in je CSS:

Cascading Stylesheet:
1
2
3
input .button {
    width: watjijmaarwilt;
}

Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 25-05 10:12
of selecteer op het type:
Cascading Stylesheet:
1
input[type=submit]


-edit-
en als je een class meegeeft zou het dit moeten zijn:
Cascading Stylesheet:
1
input.button

(zonder spatie)

[ Voor 47% gewijzigd door mcDavid op 25-10-2011 13:34 ]


Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Optie van Avalaxy werkt. _/-\o_

Nu nog any questions or comments omhoog zetten?

Acties:
  • 0 Henk 'm!

  • koendenb
  • Registratie: Januari 2011
  • Laatst online: 11:31
Wat ook mooi is om je inputs een beetje te stylen.
Je kan ze bijvoorbeeld een beetje padding geven of een mooie border:

code:
1
2
3
4
5
input[type=text]
{
    border: 1px solid #CCCCCC;
    padding: 3px;
}


Voor je submit button werkt dit ook mooi, met bijvoorbeeld een box-shadow:

code:
1
2
3
4
5
6
7
8
input[type=submit]
{
    width: 100px;
    padding: 5px;
    -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}


Succes ermee!

Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Bedankt!

Acties:
  • 0 Henk 'm!

  • Cyphax
  • Registratie: November 2000
  • Laatst online: 15:51

Cyphax

Moderator LNX
EvertonPride schreef op dinsdag 25 oktober 2011 @ 13:36:
Nu nog any questions or comments omhoog zetten?
Heb je dat nog voor elkaar gekregen intussen? Kan lastig zijn hoor. Als je zoiets wilt weten is de snelste oplossing toch even gaan zoeken, dan heb je je antwoord het snelst (is geen kritiek trouwens maar een tip :))

Hier is wat te lezen over het verticaal uitlijnen: http://phrogz.net/css/vertical-align/index.html
Ik denk dat je hier de oplossing wel mee gaat vinden.

Saved by the buoyancy of citrus


Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Thanks ik zal er vanavond even naar kijken, niet zo'n groot punt maar wel beter als ik dat voor elkaar krijg en ik leer weer bij!

Ik ben nu een catalogus aan het maken, nu wil ik een table invoegen in de div main. Echter als ik de table tag gebruik (wordt groen in de code view) dan lees het niet meer de 2 </div's> van de container en main, wat kan ik hier aan doen?

Wij hebben in de les geleerd om een table te maken voor de catalogus dus ik moet me hier wel aan houden.

Acties:
  • 0 Henk 'm!

  • geert1
  • Registratie: Maart 2006
  • Laatst online: 27-05 14:28
Over die label die zo laag komt te staan naast het textarea: In plaats van "display: inline-block", zou ik in dit geval kiezen voor float:left op zowel de label als de input. Dan beide een vaste breedte geven en de container clearen. Lost je probleem in de laatste screenshot op, waarin het label te laag komt te staan. Daarnaast heeft inline-block problemen in IE7.
EvertonPride schreef op dinsdag 25 oktober 2011 @ 15:34:
Ik ben nu een catalogus aan het maken, nu wil ik een table invoegen in de div main. Echter als ik de table tag gebruik (wordt groen in de code view) dan lees het niet meer de 2 </div's> van de container en main, wat kan ik hier aan doen?

Wij hebben in de les geleerd om een table te maken voor de catalogus dus ik moet me hier wel aan houden.
Misschien kun je verduidelijken wat er precies niet werkt, want je bent niet heel duidelijk naar mijn mening. Je kunt toch gewoon een table plaatsen tussen de openings- en sluitingsdiv van je container? Dat zou de main-div zijn als ik het goed lees. En dan in die table gebruik maken van tr's en td's. Alvast een tip daarvoor: Kijk eens naar het juiste gebruik van de thead, tbody en tfooter tags, en de th-tag. Daarmee maak je een tabel al een stukje makkelijk toegankelijk.

[ Voor 59% gewijzigd door geert1 op 25-10-2011 15:53 ]


Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Het inline-block heb ik alleen toegepast bij de label maar niet bij de textarea. Hoe kan ik die labels dan het beste stylen zonder gebruik te maken van inline-block. De site moet het inderdaad doen op alle IE en Firefox.

Ik zal de volgende code geven wat ik heb van de catalogus.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/vacaway.css" />
<title>Vacaway - Catalogus</title>
</head>
<body>
<div class="container">
<header>
<img src="../pictures/header.jpg" width="1000" height="127">
</header>

<nav>
<a href="../index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="catalogus.html">Catalogus</a> | <a href="review.html">Review/Testimonal</a> | <a href="sitemap.html">Sitemap</a> | <a href="contact.html">Contact</a></nav>

<div class="main">
<h2>Catalogus </h2>
</div>

<footer>office hours (central time) 8:30am - 4:30pm (monday till friday)| phone: 615-449-0708 | toll free (USA): 877-333-9964 | <a href="mailto:steve@vacaway.com" target="_blank">email: steve@vacaway.com</a></footer>
</div>
</body>
</html>
toon volledige bericht
Ik wil de volgende code gebruiken (om te beginnen) onder de catalogus h2 hoofdje:
<table>
<tr>
<td>Hoi</td>
<td>Hoi</td>
<tr>
Echter zijn de dikgedrukte div's dan niet meer werkend?

Acties:
  • 0 Henk 'm!

  • koendenb
  • Registratie: Januari 2011
  • Laatst online: 11:31
geert1 schreef op dinsdag 25 oktober 2011 @ 15:47:
Over die label die zo laag komt te staan naast het textarea: In plaats van "display: inline-block", zou ik in dit geval kiezen voor float:left op zowel de label als de input. Dan beide een vaste breedte geven en de container clearen. Lost je probleem in de laatste screenshot op, waarin het label te laag komt te staan. Daarnaast heeft inline-block problemen in IE7.


[...]

Misschien kun je verduidelijken wat er precies niet werkt, want je bent niet heel duidelijk naar mijn mening. Je kunt toch gewoon een table plaatsen tussen de openings- en sluitingsdiv van je container? Dat zou de main-div zijn als ik het goed lees. En dan in die table gebruik maken van tr's en td's. Alvast een tip daarvoor: Kijk eens naar het juiste gebruik van de thead, tbody en tfooter tags, en de th-tag. Daarmee maak je een tabel al een stukje makkelijk toegankelijk.
Gewoon zoeits als dit gebruiken:

code:
1
2
3
4
5
6
7
8
9
10
label
{
    float: left;
    width: 150px;
}
input
{
    float: left;
    width: 190px;
}

Dan je form zo indelen:
code:
1
<label>Naam label:</label><input type="text" name="naamlabel" maxlength="30" /><br class="clear" />


Deze structuur gebruik al tijden en werkt super! (ben niet de enige ;))

Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Hmm ik krijg hem niet echt werkend op jouw manier.

Niemand die iets weer van mijn table-probleempje?

Pff ik schaam me kapot, vergeten de </table> te gebruiken.. 3 uur voor niks verloren. 8)7

[ Voor 32% gewijzigd door EvertonPride op 25-10-2011 18:28 ]


Acties:
  • 0 Henk 'm!

  • Tentacle1
  • Registratie: Augustus 2001
  • Laatst online: 13-03 09:12

Tentacle1

60% Puur Sap!

Even los van dat </table> ontbreekt, sluit je de <tr> ook niet goed af... maar misschien dat je dat ook al gefixt hebt.

System specs


Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Yes, ik zag het.

Het zou alleen fijn zijn als ik alleen nog een vervanging heb voor mijn inline-block toepassing.

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 16-05 11:46

Bosmonster

*zucht*

EvertonPride schreef op dinsdag 25 oktober 2011 @ 17:40:

Pff ik schaam me kapot, vergeten de </table> te gebruiken.. 3 uur voor niks verloren. 8)7
In 5 minuten had je een fatsoenlijke editor/IDE gedownload en geinstalleerd die je daar gewoon op had gewezen ;)

Voor je inline-block oplossing is al een andere oplossing aangedragen: floaten.

Acties:
  • 0 Henk 'm!

  • mcDavid
  • Registratie: April 2008
  • Laatst online: 25-05 10:12
EvertonPride schreef op dinsdag 25 oktober 2011 @ 16:12:
Het inline-block heb ik alleen toegepast bij de label maar niet bij de textarea. Hoe kan ik die labels dan het beste stylen zonder gebruik te maken van inline-block. De site moet het inderdaad doen op alle IE en Firefox.

Ik zal de volgende code geven wat ik heb van de catalogus.html:


[...]


Ik wil de volgende code gebruiken (om te beginnen) onder de catalogus h2 hoofdje:


[...]


Echter zijn de dikgedrukte div's dan niet meer werkend?
toon volledige bericht
Als je nou gewoon eens [code]-tags gebruikt ipv quotes, zou het al een stuk overzichtelijker zijn.

Acties:
  • 0 Henk 'm!

  • geert1
  • Registratie: Maart 2006
  • Laatst online: 27-05 14:28
@EvertonPride: Zou je de reacties in dit topic goed willen lezen alvorens te reageren? Je hebt nu al twee keer letterlijk gevraagd naar dingen die al (meerdere keren) beantwoord zijn :)

Verder lijkt het me erg handig om meer te investeren in je basiskennis. Als je een css-eigenschap of html-element toepast op de gok, alsof het een soort trucje is, dan kom je niet ver. Je zult dan telkens vastlopen op de meest basic dingetjes. En dat is logisch, want je staat nog aan het begin van het vak en scholen bieden niet genoeg ruimte om dit fatsoenlijk te leren. Je huidige werk- en denkwijze is voor jezelf niet heel nuttig en ook niet bepaald leuk. Probeer je dus te concentreren op basiskennis in de breedte (front-end ontwikkeling en het web in zijn algemeenheid) voordat je een specifiek probleempje probeert op te lossen. Dan kun je een probleem later beter plaatsen in een groter geheel, terwijl je weet welke gereedschappen je beschikbaar hebt om het probleem te lijf te gaan.

Dus pak er eens een actueel boek bij, lees goeie tutorials of vind een goede stageplek met mensen die de tijd voor je nemen. Want van leraren en opleidingen leer je meestal te weinig, en wat je leert is verouderd.

[ Voor 26% gewijzigd door geert1 op 26-10-2011 09:18 ]


Acties:
  • 0 Henk 'm!

  • Josh64
  • Registratie: Juni 2010
  • Laatst online: 02-01-2024

Josh64

iOS aangedreven

Zit de TS toevallig op de Hogeschool Zuyd op CMD? Stoutert ;-)

Acties:
  • 0 Henk 'm!

  • EvertonPride
  • Registratie: Juli 2007
  • Laatst online: 26-05 23:46
Haha klopt, ik verdiep me in de materie!

Bedankt voor de informatie mensen.

Acties:
  • 0 Henk 'm!

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

En volgende keer iets meer zelfinzet tonen... GoT is geen afhaalchinees voor code!

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Pagina: 1