Image gedeeltelijk buiten site plaatsen? - Softwareontwikkeling

donderdag 19 november 2009 02:07

Acties:

0 Henk 'm!

AFCA

Topicstarter

Ik heb een site gebouwd bestaande uit aantal div's. Ben een redelijke beginner. Heb een logo...wat knoppen en de main text. Nu wil ik een plaatje 'naast' de site plaatsen die gedeeltelijk contact heeft met de site. Bijvoorbeeld een poppetje die zijn handen aan de site vasthoud.

Ik krijg via css wel een image op een random plaats met bijvoorbeeld 'right' en 'top', maar hoe link ik deze aan de rand van de main text?

Plaatje erbij

het rode dus...
Kan de site url helaas niet geven.
Afbeeldingslocatie: http://jasperstevens.nl/got/website.jpg

#36

donderdag 19 november 2009 02:12

Acties:

0 Henk 'm!

gertvdijk

Vos schreef op donderdag 19 november 2009 @ 02:07:
Ik krijg via css wel een image op een random plaats met bijvoorbeeld 'right' en 'top', maar hoe link ik deze aan de rand van de main text?

Wat heb je zelf al geprobeerd en uitgetest? Is dat het enige? Is het afkijken van een bestaande website niet gelukt? Waar liep je tegenaan?
Lees je eens in in de mogelijkheden van CSS: position property (absolute/relative), background-image-position property (background van je body/omvattende div), etc.
Volgens mij is het namelijk helemaal geen rocket science als je je website niet horizontaal gecentreerd hebt staan.

Kia e-Niro 2021 64 kWh DynamicPlusLine. See my GitHub and my blog for articles on security and other stuff.

donderdag 19 november 2009 02:18

Acties:

0 Henk 'm!

F4T4L_3RR0R

http://www.sceneone.nl/positionering/absoluut.php

donderdag 19 november 2009 02:26

Acties:

0 Henk 'm!

croontje

Misschien een div in de maintext div rechts floaten en een negatieve rechter marge geven?

donderdag 19 november 2009 08:03

Acties:

0 Henk 'm!

diabolofan

croontje schreef op donderdag 19 november 2009 @ 02:26:
Misschien een div in de maintext div rechts floaten en een negatieve rechter marge geven?

Precies!

Als je een div van 500 pixels hebt, zo dus ongeveer:
.div {
width: 500px;
height: auto;
float: left
}

Dan maak je deze css erbij:
img {
width: auto;
float: right;
margin-right: -50px;
}

Dat geld dus gelijk voor alle images (img). Als je het dus voor maar 1 afbeelding wilt, dan moet je even een class bijmaken.

Suc6

donderdag 19 november 2009 08:46

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Ik zou geen float's gebruiken.

Door je main-text container een position: relative mee te geven, kun je een element daar binnen absolute ten opzichte van die container plaatsen.

Ofwel, geef je main-text een position: relative, dan kan je een extra element er binnen zetten die je met right:0px tegen de rechter rand (van je main-text) laat plakken en dan met margin-right:-100px; er nog verder buiten laat vallen.

--- edit ---

Tenzij je trouwens een website hebt die >960px breedt is, dan zou je het deel wat buiten de site valt beter als background kunnen zetten, om te voorkomen dat je een horizontale scrollbar krijgt.

[ Voor 24% gewijzigd door OkkE op 19-11-2009 09:13 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 19 november 2009 11:31

Acties:

0 Henk 'm!

Vos

AFCA

Topicstarter

Met de main-text als relative en dan een element right:0px en margin-right:-100px leverde me niets op.

Maar met de float is het wel gelukt! Mijn dank!

#36

donderdag 19 november 2009 11:48

Acties:

0 Henk 'm!

Bosmonster

*zucht*

right:0px en margin-right:-100px

En wat dacht je van gewoon right: -100px

Ik zou hier bij voorkeur ook geen floats voor gebruiken.

[ Voor 24% gewijzigd door Bosmonster op 19-11-2009 11:48 ]

donderdag 19 november 2009 11:59

Acties:

0 Henk 'm!

brtk

hier staat ook nog een tutorial voor Out-of-the-Box designs :

http://www.webdesignerwal...ss-design-out-of-the-box/

donderdag 19 november 2009 12:03

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Vos schreef op donderdag 19 november 2009 @ 11:31:
Met de main-text als relative en dan een element right:0px en margin-right:-100px leverde me niets op.

Maar met de float is het wel gelukt! Mijn dank!

Heb je ook een online voorbeeld? Ik vind floats niet de meest geschikte methode namelijk, maar misschien dat het in jouw situatie verder geen problemen opleverd.

Omdat ik in een goede bui ben, ik zou het zo doen:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
    <META http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Test</title>
    <style type="text/css">
    * { margin: 0px; padding: 0px; }
    body { background: #cccccc; }
    #container { width: 920px; margin: 0px auto; padding: 20px;
        background: #ffffff; }
    #header { height: 100px; background: #dddddd; }
    #navigation { height: 30px; margin: 20px 0px; background: #eeeeee; }
    #content { height: 500px; position: relative; }
    #image { width: 70px; height: 100px; top: 20px; right: -60px;
        position: absolute; background: #666666; }
    </style>
</head>
<body>

<div id="container">

    <div id="header">
        <p>Logo</p>
    </div>

    <div id="navigation">
        <p>Navigatie</p>
    </div>

    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Suspendisse non mi sit amet lacus ultrices sollicitudin. Integer
            euismod turpis sed ligula. Nam vehicula felis vel ipsum scelerisqu
             pulvinar. Nullam nonummy tellus a ante. Nunc volutpat elit non
             mauris. Nullam pharetra. Phasellus quis lorem. Pellentesque sem
             mi, nonummy id, ultricies ac, tincidunt in, magna. Fusce et dui.
             Vivamus ac felis nec nulla vulputate sagittis. Suspendisse at
             tellus non enim tristique placerat. Praesent dolor massa,
             ullamcorper ut, auctor ac, venenatis ut, sapien. Nunc vel dolor.
             Praesent gravida aliquet sem. Duis ipsum. Donec cursus velit
             sed arcu. Suspendisse varius. Aliquam erat volutpat. Donec varius
             lectus a eros. Ut laoreet.</p>
        <div id="image"><p>Image</p></div>
    </div>

</div>

</body>
</html>

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 19 november 2009 13:05

Acties:

0 Henk 'm!

Vos

AFCA

Topicstarter

Heb het nu via bovenstaande ^^ manier ook werkend, dank

[ Voor 192% gewijzigd door Vos op 19-11-2009 13:05 ]

#36