6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)
  • Q:
    Bijdrager
    Vin

    border in deze code

    hallo!

    Ik heb deze code om een vimeo film op m’n site te zetten:

    [code:1:e324bdccd8]<object width="600" height="450" background="#ffffff"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3805357&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3805357&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="600" height="450"></embed></object>[/code:1:e324bdccd8]

    Maar ik wil dat er een witte rand om die video heen komt.
    Bij alle afbeeldingen heb ik dat met een css code gedaan, maar nu bij de video lukt het me niet.
    Hoe zou ik kunnen fixen dat er een witte rand om de video heen komt?

    Bedankt!

    (voor voorbeeld witte rand zie: hier)

    Bijdrager
    Rub3n

    Een div om je video heen. Zoals hieronder:
    [code:1:49130dbc2e]<div class="videoborder">
    <object width="600" height="450" background="#ffffff"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3805357&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3805357&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="600" height="450"></embed></object>
    </div>[/code:1:49130dbc2e]

    en in je css:
    [code:1:49130dbc2e]div.videoborder{
    width: 600px;
    height: 450px;
    border: 10px solid #FFF;
    }[/code:1:49130dbc2e]

    Bijdrager
    palahala

    Met bijvoorbeeld Safari’s Develop menu (aanzetten in Preferences, Advanced) of Firebug in Firefox, kun je rechts op die witte rand van die afbeelding klikken en Inspect Element kiezen.

    Je ziet dan als HTML:
    [code:1:57bb831535]<span class="nothumb">
    <img src="http://www.graphsic.com/files/gimgs/15_img0598editraw2web.jpg"/>
    [/code:1:57bb831535]
    en als CSS:
    [code:1:57bb831535].nothumb img {
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 20px 30px 30px 20px;
    display: block;
    margin: 0 0 1px;
    }[/code:1:57bb831535]
    Ofwel: een “img” element binnen iets dat als class “nothumb” heeft, krijgt die rand.

    Je moet iets dergelijks dan ook toevoegen aan je “object” HTML code. Dat kan op vele manieren, bijvoorbeeld de eerste regel van de CSS uitbreiden tot:
    [code:1:57bb831535].nothumb img, .nothumb .video {[/code:1:57bb831535]
    en dan je video insluiten in een element dat je CSS class “video” geeft (misschien mag je “object” ook wel die class geven, maar dat weet ik niet omdat sommige browsers die “object” gebruiken, maar andere juist voor de “embed” uit jouw code zullen kiezen). Dus:
    [code:1:57bb831535]<span class="nothumb">
    <div class="video">
    <object width="600" height="450" background="#ffffff">
    ….
    </object>
    </div>
    </span>[/code:1:57bb831535]

    Of:
    [code:1:57bb831535].nothumb img, .video {[/code:1:57bb831535]
    met:
    [code:1:57bb831535]<div class="video">
    <object width="600" height="450" background="#ffffff">

    </object>
    </div>[/code:1:57bb831535]

    Bijdrager
    Rub3n

    Hmmz. Feitelijk het zelfde als de 1e oplossing?

    Bijdrager
    palahala
    ”Rub3n”

    Hmmz. Feitelijk het zelfde als de 1e oplossing?

    Ja, verdikke, had je die niet even 10 minuten eerder kunnen neerzetten? Nu heb ik blijkbaar minimaal 8 minuten verkloot aan het tikken van mijn uitleg.;-)

    Hola, je hebt je border stiekem dikker gemaakt!:-)

    Bijdrager
    Vin

    bedankt voor de hulp!!!

    Ik heb deze code in de css gezet:
    [code:1:332bcf45e6].nothumb img, .video {
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 20px 30px 30px 20px;
    display: block;
    margin: 0 0 1px;
    }[/code:1:332bcf45e6]

    de .nothumb en de .nothumb img stonden nog niet in de css!
    Die stonden in de php template. Vandaar dat ik er ook niet uit kwam.
    Alle css werd geregeld in het css bestand behalve de rand, die stond in een php bestand…
    Maar nu is het gelukt! Bedankt nogmaals!

6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.