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)

<h1> met achtergrond niet over de hele breedte

Chris Kruidenier
10 antwoorden
  • Hallo,

    Ik wil graag een kopje met een achtergrondplaatje. In css levert dat dus iets op in de trant van h1 {background-image: url…enz
    De achtergrond wil ik echter alleen achter het kopje en niet over de hele breedte van de pagina. Hoe kan ik dat vermijden.

    Alvast bedankt.

    Jos
  • Verplaatst.
  • Nattuurlijk, bedankt. Even niet opgelet.

    Trouwens, Ik ben bang dat het niet zo makkelijk kan, behalve er een width aan toe te kennen, maar ik wil de pagina liquid houden.
  • Ik ben een beetje dom, WAARHEEN verplaatst???????????? Ik kan het nergens anders vinden.
    En waarom, het gaat over webdesign en css…

    Gaarne uitleg!
  • [quote:c30bf256d4="Chris Kruidenier"]Ik ben een beetje dom, WAARHEEN verplaatst???????????? [/quote:c30bf256d4]


    hiernaartoe dus 8)
  • Als je de font-size van de heading in ems hebt gezet, dan kun je de width ook in ems zetten. Groeit het gewoon mee als de kop groter of kleiner wordt.
  • Aaaah, nu snap ik het ook, bedankt!

    Kun je de width niet op auto zetten?
  • Volgens mij nie.
    Als het dan nog steeds nie goed lukt; kun je ook nog altijd 'display: inline' proberen.
  • Klopt, Width: auto; werkt niet.
    Display: inline; onderdrukt de carriage return bij FireFox, maar niet bij IE.

    Wat je wel kunt doen is een eigen h1 definiëren, die er hetzelfde uitziet als een echte met behulp van een div en daar width op auto zetten, dat werkt wel!

    [code:1:b5fd3075e2]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/transitional.dtd">
    <HTML>
    <HEAD>
    <style type="text/css">
    body {
    background-color: #000;
    margin: 0px;
    padding: 10px 0px 10px 0px;
    }

    #container {
    background-color: #FFF;
    position: relative;
    display: block;
    width: 740px;
    height: auto;
    margin: 0px auto 0px auto;
    border: solid 1px #FC0;
    overflow: hidden;
    }

    #h1-spec {
    background-color: #0FC;
    display: block;
    font-size: 24pt;
    font-weight: bold;
    width: auto;
    float: left;
    }
    </style>

    </HEAD>

    <body>
    <div id="container">
    <div id="h1-spec">
    Test
    </div>
    </div>

    </body>
    </html>
    [/code:1:b5fd3075e2]

    Dit is getest in Firefox.
  • Een div is daar niet voor bedoeld. Lees eens do you smurf what I smurf, over div-misbruik.

Beantwoord deze vraag

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