[css] Tekst positioneren tov een achtergrond - Softwareontwikkeling

zaterdag 30 juni 2007 06:16

Acties:

Verwijderd

Topicstarter

Ik heb in mijn css een achtergrond gedefinieerd. Dit is een mooie foto met daarin vier blokken verwerkt waar tekst in kan. Deze achtergrond is paginavullend. Via div's laat ik daar tekst in lopen. Probleem is echter dat als je de pagina niet in volledig formaat opent, de tekst verschuift. De positie van de tekstdiv's staat weliswaar vast, maar dat blijft ook zo als de pagina kleiner wordt. Ik heb een voorbeeld even op een testserver gezet, dit is uiteraard niet de uiteindelijke achtergrond, maar die houd ik liever geheim, aangezien het een nieuw project is waarvan mijn opdrachtgever alles nog even classified wil houden. Dus het voorbeeld is versimpeld in de zin van hoe de achtergrond eruit ziet. Denk aan een foto.

De hele site is opgebouwd in css, en dat werkt prima, alleen deze pagina dus niet. Het probleem zit hem er in: hoe krijg ik de tekst zover dat hij zich altijd over het blok heen legt waarbij ik dat wil?

[url] http://bigdaddy.fcpages.com/test08.html [/u]

zaterdag 30 juni 2007 17:08

Acties:

Geert.H

Je kan divs relatief positioneren:
bv:
margin-left:50%;
left:100px;

Redelijk basic, en als je een 'webdesigner' bent zou je dat zelf moeten weten, of iig genoeg kennis moeten hebben om erzelf achter te komen.

zaterdag 30 juni 2007 17:09

Acties:

Verwijderd

Topicstarter

Geert.H schreef op zaterdag 30 juni 2007 @ 17:08:
Je kan divs relatief positioneren:
bv:
margin-left:50%;
left:100px;

Redelijk basic, en als je een 'webdesigner' bent zou je dat zelf moeten weten, of iig genoeg kennis moeten hebben om erzelf achter te komen.

Heb ik dan ook al lang geprobeerd en als dat de tekst wel te allen tijde in de vakjes kreeg, zou ik deze vraag nu niet gepost hebben...

zaterdag 30 juni 2007 18:56

Acties:

Geert.H

Owja idd, had ik ook al gezien in mijn glazen bol dat je dat had gedaan

Heb je toevallig al meer dingen geprobeerd? En wat ging er fout bij deze manier dan? Want volgens mij moet dat gewoon werken.

zondag 1 juli 2007 21:27

Acties:

Verwijderd

Topicstarter

Als ik jouw suggesties in de code zet, blijf ik dezelfde kl8en houden als hierboven beschreven.

Voor alle duidelijkheid, wat ik wil, is dat de tekstparagrafen (zie het voorbeeld) als het ware gelocked worden (zoals je in photoshop 2 layers linkt) aan de zwarte blokken.

Zou het wellicht een optie zijn om 4 divs aan te maken, en voor die div's aan te geven dat ze een image van een zwart blok als achtergrond krijgen -> vervolgens binnen elke div weer een <p> aanmaken en die dezelfde positionele eigenschappen geven als de respectievelijke div?

[ Voor 81% gewijzigd door Verwijderd op 01-07-2007 21:43 ]

maandag 2 juli 2007 00:02

Acties:

Verwijderd

ja gebruik vier divs met background-color op #000 en stop de tekst in de divs, en positioneer die divs?

maandag 2 juli 2007 09:26

Acties:

_eXistenZ_

Overflow: hidden zetten op je divs? Zodra de tekst wil gaan lopen verdwijnt deze gewoon.

There is no replacement for displacement!

maandag 2 juli 2007 09:49

Acties:

Geert.H

Dit is mijn oplossing. Maar degene die jij aandraagt werkt ook prima. Succes met het proberen.

code:

<body>
    <head>
        <title>Test</title>
        <style type="text/css">
            body {
            background-color:black;
            }
            div#one, div#two, div#three, div#four {
            position:absolute;
            width:200px;
            height:200px;
            left:50%;
            background-color:white;
            }
            div#one{
            margin-left:-300px;
            }
            div#two{
            
            }
            div#three{
            margin-left:-300px;
            top:300px;
            }
            div#four {
            top:300px;
            }
        </style>
    </head>
    <body>
        <div id="one"> Test</div>
        <div id="two"> Test</div>
        <div id="three"> Test</div>
        <div id="four"> Test</div>
    </body>
    </html>

[ Voor 10% gewijzigd door Geert.H op 02-07-2007 09:50 ]