Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

de Box (CSS)

None
22 antwoorden
  • Hallo,
    een nieuwe poging om met CSS iets te doen:
    http://www.ruudleeuw.com/temp-petrykowski-il14.htm
    Ik loop voor dit moment tegen 4 probleempjes op:
    1.ik wil the boxen centreren; ik zie wel margin-left en margin-right mogelijkheden maar ik wil het dus in het midden uitlijnen
    2.boven in de pagina wil ik de titel en de fotografen strak onder elkaar maar doordat (?) ik die titel fontsize 24px heb genomen staat het nu te ver uit elkaar..?
    3. sommige fotos wil ik in de box centreren; als ik <div style="text-align: center;"> kies, dan valt de foto helemaal buiten de box…
    4. Ik heb nu een class style gekozen: .border { width: 700px; height: 380; padding: 10px; border: SOLID 3PX #FF6600; } maar de hoogte wil ik eigenlijk alsl "wrap" of "auto" ipv height: 380.
    Eigenlijk naar dit voorbeeld (werkend met tables):
    http://www.ruudleeuw.com/trv-uk04.htm
    Als iemand me hiermee weer een stapje verder kan helpen ? bedankt!
  • Kijk hier eens tussen.
    http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
  • 1.
    zet alles in een <div id="wrap">
    en dan in je CSS: #wrap{ margin:0 auto; }

    2. ik weet niet precies wat je edoelt met strak onder elkaar. Je kan igg de <br> tussen <h3> en <img> weghalen. Dat scheelt al wat.

    3. probeer s <img src="bla" align="center"> (weet niet cker of dat werkt)

    4. zowel width als height hoeven niet te worden gespecificeerd. Dat komt vanzelf goed, hoop je dan…
    Ook zou ik aanbevelen om alle <span style=bla> weg te werken. Evt zelfs in een externe stylesheet, maakt t vaak wat overzichtelijker.
  • Thanks.
    Helaas nokte de internet verbinding van Multikabel er vanavond mee dus ik zit dit te lezen in de nachtdienst zonder gelegenheid om de suggesties te testen.
    Het voorbeeld op de tutorials zet de boxen naast elkaar, niet onder elkaar wat mijn bedoeling is.
    De <span definities om de tekst vet te zetten heb ik er in gezet omdat ik nog niet weet hoe ik dat in de stijl def. kwijt kan.
    Ik had de hoogte van de Box op "auto" staan maar dat pakt de tekst wel maar de foto valt er buiten. Externe style definitie is niets voor mij, daarvoor zijn mijn pagina's te verschillend.
    In vergelijk met tables vind ik dat CSS helemaal niks, maar als dat de toekomst is…
    Hopelijk heb ik straks weer internet thuis en kan ik wat gaan proberen, kom er vast op terug, bedankt zover.
  • hohoho, CSS is niets?!? Het duurt mssn een tijdje tot je alles hebt waar je t hebben wilt, maar dan heb je ook iets or.
    Nouja, knutsel maar eevn verder, en als t niet wil lukken, horen we t wel :wink:
  • Ik denk niet dat het ligt aan de moeilijkheidsgraad van css waarom het niet lukt…

    Er staat een prehistorisch doctype in, verander dat eens in een andere:
    www.w3.org/QA/2002/04/valid-dtd-list.html

    Er staan onafgesloten elementen in.

    Dingen als <SPAN STYLE="FONT-WEIGHT: BOLD;"> kun je beter in je <head> verwerken zoals je al met sommige dingen hebt gedaan, of zoals Marientje al zei, in een extern stylesheet. Waarom doe je sommige dingen wel in de head en andere niet?

    Na het plaatsen van een juist doctype kun je fouten ontdekken m.b.v.:
    http://validator.w3.org

    Centreren met css staat uitgelegd op:
    http://maxdesign.com.au/presentation/center/

    Het goed krijgen van de boxen zou ik doen door:
    - een div als box te nemen i.p.v. een p;
    - afbeeldingen floaten om ze links of rechts te plaatsen, text-align: center om ze in het midden te krijgen (text-align moet op de inhoud v/d box, niet op de afbeelding zelf).

    Ik denk dat de volgende links wat meer inzicht geven:
    http://css.maxdesign.com.au/selectutorial/
    www.456bereastreet.com/lab/developing_with_web_standards/css/
    www.hotdesign.com/seybold/
    www.artypapers.com/csshelppile/category.php?8
    Het helpt je niet meteen aan de slag, maar ik denk dat het zeer nuttig is om te lezen, om door te krijgen wat je met css kunt en hoe je het gebruikt.
  • [quote:aa29570efb]In vergelijk met tables vind ik dat CSS helemaal niks[/quote:aa29570efb]
    Appels en peren.
    CSS gebruik je om onderdelen van je website op te maken in de breedste zin van het woord: afmetingen, kleuren, positioneren.

    Nu gaat dat laatste (positioneren) niet met tabel(cellen) want die hebben een vaste indeling. Vandaar de voorkeur aan <div>'s icm CSS.
  • Appels en peren? Onzin, als je het voorbeeld in mijn 1e posting had bekeken had je gezien dat die tabellen staan waar ik ze hebben wil compleet met kader en achtergrond kleur. Ik kwam op CSS omdat Firefox mijn achtergrond niet fixeerde.
    En zo simpel is CSS niet als je ziet wat voor waanzinnige broncodes in het begin van het document voor CSS moet worden opgenomen…
    Wat doet dat "doc.type"precies? Het was inderdaad heel oud, ooit mee begonnen en met copy paste vaak meegenomen. Die nieuwe code overgenomen maar aan display voor de pagina helpt dat niks.
    Hoop suggesties gekregen en ga die napluizen, kan effe duren voordat ik er iets van begrijp.
    Bedankt allemaal!
  • Zou ik wat meer uitleg over "zet alles in een <div id="wrap">" kunnen krijgen? Kan dit niet plaatsen.
    Het align="center" werkt niet om een foto in het midden van de box te zetten.
    De <SPAN def voor bold heb ik in de Body def kunnen verwerken als font-weight: bold; en dat werkt dus dat is al weer een stapje in de goede richting.
    R
  • [quote:7515182451]had je gezien dat die tabellen staan waar ik ze hebben wil compleet met kader en achtergrond kleur[/quote:7515182451]
    Ik heb dat ook wel gezien, en je kan een tabel an sich wel een plaats geven, maar als je een tabelcel (td) met menu hebt en een td met inhoud, dan kun je die nooit met css ten opzichte van elkaar verplaatsen… maargoed :wink:
    [quote:7515182451]En zo simpel is CSS niet als je ziet wat voor waanzinnige broncodes in het begin van het document voor CSS moet worden opgenomen…[/quote:7515182451]
    Dat is ook niet handig en overzichtelijk, beter is een apart bestand op te nemen als stylesheet en deze in de head-sectie van je pagina aan te roepen met <link rel="stylesheet" href="css_bestand.css" type="text/css">
    Je hoeft dan ook maar 1 bestand aan te passen om de opmaakverandering op al je pagina's door te voeren.
    [quote:7515182451]Wat doet dat "doc.type"precies? [/quote:7515182451]
    DOCTYPE vertelt de browser welke HTML/XHTML specificatie gebruikt wordt (strict/transitional/frameset). Bij jou DOCTYPE ontbreekt dat zelfs helemaal. Kijk daarvoor eens op http://www.w3schools.com/tags/tag_doctype.asp
  • Vwb die link naar:
    http://maxdesign.com.au/presentation/center/
    Begint met een aantal suggesties die niet werken op IE4 tm 6, dus dat is niks.
    Ik heb geprobeerd met in de body de definitie body { text-align: center; } maar dan gaat ook de tekst centreren en dat wil ik niet. Ik wil alleen de boxen centeren
    <CENTER></CENTER> heeft hetzelfde onwenselijke effect.
    Het volgende werkt bij mij (in Firefox) niet, alles blijft gecentreerd:
    The only problem with this new rule is that all content on the page is now center-aligned. To overcome the center alignment problem, a new declaration is added within the containing block rule set - "text-align: left". The final CSS code is:

    body { text-align: center; }

    div#container
    {
    margin-left: auto;
    margin-right: auto;
    width: 50em;
    text-align: left;
    }
    Wat is dat 50em overigens?
  • em is een lengtemaat: http://www.htmlhelp.com
    eference/css/units.html
  • Dat het bij mij nog niet klopt, heb ik gezien (een vorige suggestie copy/paste: ahd niet in de gaten dat het een link was naar meer info..)
    Denk dat ik hier voor ga:
    HTML Strict DTD
    Use this when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS):
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Moet die verwijzing naar "http://www.w3.org etc er ook bij?
    Nog even over vorige suggestie: bedankt voor die link, staat weer een hoop info op.
    Ik heb geen interesse in algemene stijlregel voor al mijn pagina's, dat wil ik per se niet.
    "je kan een tabel an sich wel een plaats geven, maar als je een tabelcel (td) met menu hebt en een td met inhoud, dan kun je die nooit met css ten opzichte van elkaar verplaatsen"… d.i. volkomen acadabra voor mij! Maar ik geloof niet dat ik een tabel met menu heb en ik wil ook niks t..o.v. elkaar verplaatsen, dus niet relevant voo rmij.
    Hier op werk zie ik dat de presentatie in IE6 weer anders is dan thuis met Firefox maar ik zoek nog steeds naar een oplossing voor centreren van de boxen in combinatie van niet (!) centreren in de boxen v/d tekst en soms wel v/d foto en een wrap van de border om de tekst en de foto….
  • op http://maxdesign.com.au/presentation/center/ staat toch precies wat je moet doen? Punt 2 is 'Resetting text-align'. Als je punt 2 volgt, dan is die 'wrap' gecentreerd, maar alles binnen die wrap niet meer. Dat artikel legt precies uit wat Marientje bedoelt.

    Verder staat er op die pagina dat de vermelde oplossing [i:5506984d5d]in eerste instantie[/i:5506984d5d] niet werkt met bepaalde browsers, maar als je verder leest, komt dat zeker weten allemaal goed.

    De verwijzing naar de W3C in je doctype hoort er gewoon bij.

    Verschillen in browserweergave kun je zoveel mogelijk voorkomen door browsers in Standards mode te laten renderen. Dat krijg je door een juist doctype te nemen (zoals je inmiddels hebt gedaan). Zie je weergaveverschillen, dan kan dat enerzijds liggen aan bugs in IE. Anderzijds kan dat simpelweg liggen aan fouten in de stylesheet. Dat is vaak het meest waarschijnlijk.

    [code:1:5506984d5d]<body>
    <div id="wrap">

    <div class="box1">
    <a href="#"><img scr="plaatje.jpg" class="floatleft"></a>
    <p>Tekst</p>
    </div>

    <div class="box2">
    <a href="#"><img scr="plaatje.jpg" class="floatleft"></a>
    <p>Tekst</p>
    </div>

    </div>

    </body>[/code:1:5506984d5d]Gebruik voor de styling van je pagina de manier op Max Design. Wil je een plaatje in een box centreren, dan geef je bijv. box2 een text-align="center" mee, waardoor alles in box2 gecentreerd wordt. Vervolgens 'undo' je dat centreren voor de tekst door [code:1:5506984d5d].box2 p {text-align: left}[/code:1:5506984d5d]
  • Ok…
    Ik heb die tekst van Max Design overgenomen
    De <DIV id="wrap"> onder <BODY> geplaatst en voor </BODY> de codering </DIV> geplaatst.
    En bij de foto's <P CLASS="box1"> vervangen door <DIV Class="box1">
    en </P> door </DIV>
    En bij de tekst <P> en </P>
    In de IMG=SRC codering heb ik ALIGN="Left" vervangen door Class="floatleft"
    En het resultaat is: http://www.ruudleeuw.com/test-css1
    Dat op Max Design is dus onzin.
    Ook de wrap werkt niet en de tekst staat nog steeds gecentreerd ipv om de foto heen! Ook de foto's staan gecentreerd, terwijl dit niet de bedoeling is (class floatleft werkt dus niet).
    De boxen staan ook te veel op elkaar gestapeld, er moet ruimte tussen.
    Schiet niet op zo.
  • Correctie link:
    http://www.ruudleeuw.com/test-css1.htm
  • Voor alle duidelijkheid nog even mijn stijl definitie:
    <STYLE TYPE="Text/Css">
    <!–
    BODY { background-image: url(bkgr-propliner.gif); background-repeat: repeat; background-attachment: fixed; font-family: comic sans ms; color: #800000; background-color: #ffffff; font-size: 15px; font-weight: bold;
    text-align: center; }
    H3 { font-size: 24px; }
    IMG { margin: 3px; }
    .box1 { width: 700; height: auto; padding: 10px; border: SOLID 3PX #FF6600; }
    .box2 { width: 500; height: auto; padding: 10px; border: SOLID 3PX #FF6600; }
    A:link { color: #0000FF; background: #FFFFFF; }
    A:hover { color: #FF0000; background: #FFFFFF; }
    A:visited { color: #000088; background: #FFFFFF; }
    –>
    </STYLE>

    En of ik daar nu van Max Design het volgende bijplak, doet er nul komma nul aan toe:
    div#container
    {
    margin-left: auto;
    margin-right: auto;
    width: 50em;
    text-align: left;
    }

    Voorbeeld v/d inhoud van de box:
    <DIV CLASS="box1">
    <A HREF="tmp-il14-michal01.jpg"><IMG SRC="tmp-il14-michal01-th.jpg" BORDER="2" VSPACE="3" HSPACE="3" WIDTH="400" HEIGHT="299" CLASS="floatleft" /></A><P>
    On June 26, 2005 an unexpected visitor arrived at Okecie airport in Warsaw. Claiming engines being too thirsty Ilyushin IL-14 make an emergency stop for refuelling.<BR>
    For a long time this Ilyushin IL-14 was parked in a derelict condition at Moscow - Myachkovo (UUWM). For a restoration it was transferred to Zhukovsky (UUBV) and although the aircraft was restored to airworthy condition, it was to say at least, only provisionally.<BR>
    Photo: Michal Petrykowski.</P>
    </DIV>

    Ik krijg ook geen ruimte tussen de boxen door er <P> tussen te zetten (dat had ik met tabellen wel, ah life was simpel then!)
    Overigens check ik nu alles zowel met Firefox als met IE6; dat het dus niet werkt ligt niet aan bugs in browsers.
  • Als ik de box definitie verander met de align left code:
    .box1 { width: 700; height: auto; padding: 10px; border: SOLID 3PX #FF6600; text-align: left }
    Zie
    http://www.ruudleeuw.com/test-css2.htm
    Dan gaat alles naar links, staat de tekst er niet om heen, staat plaatje no.2 ook naar links ("floatright" !) en luistert de box niet naar mijn breedte def van 700 wide (maar gaat over de hele pagina).
  • [list:781a184d8d][*:781a184d8d]Ik zie styling voor een een container-div, terwijl die niet in de body voorkomt.
    [*:781a184d8d]Ik zie een wrap-div die niet gestyled is.
    [*:781a184d8d]Waarom staat al die inline styling er als je ze inmiddels een class hebt meegegeven?
    [*:781a184d8d]En waarom heb je classes zoals floatleft aangemaakt, maar style je die classes niet?[/list:u:781a184d8d]Er is vanalles mis met [i:781a184d8d]jouw[/i:781a184d8d] code, maar [i:781a184d8d]zeker niet[/i:781a184d8d] met het artikel op Max Design.

    Als je de aanwijzingen niet snapt en zelfs tot onzin verklaart, dan lijkt het me beter om eerst even te gaan nadenken of je wel CSS wilt leren. Als je zo graag tabellen wilt gebruiken: het is niet verboden hoor.
    Als je dan toch CSS wilt leren, dan stel ik voor dat je bijv. eerst eens die lijst met links langsgaat die ik eerder gaf, om ze goed te lezen. Nog meer tips en zowat die hele pagina heb je door een ander laten stylen.
  • Ja hallo, ik heb gedaan wat me aangeraden is en op Max Design staat die suggestie van die Container
    Idem voor die wrap-div, volgens mij heb ik die letterlijk overgenomen en dat kan je mij dan wel kwalijk nemen…

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.