Gebied voor tekst maken

[Remius]

Ik ben met een site bezig en loop tegen een probleem aan. Hier een simpele layout om het wat te verduidelijken

[img=http://img132.imagevenue.com/loc258/th_83023_probleem.jpg]

Ik heb de hele layout in Photoshop gemaakt incl. wat rolloverbuttons in Imageready, vervolgens bij Imageready gekozen voor 'saved optimized as' en dan 'HTML and images'. Ik open in Frontpage dan mijn site om er aan verder te werken. Nu wil ik in dat lichtgrijze vak tekst plaatsen, maar Frontpage ziet dit als een plaatje, dus hier kan ik geen tekst neerzetten. Ik heb toen via 'Invoegen' -> 'Laag' een laag ingevoegd over dat lichtgrijze vlak. Nu kan ik gewoon daar tekst neerzetten en alles werkt perfect. Maar... als ik dan de resolutie verander naar bijv. 1024 (werk op 1152*864) dan verspringt de tekst naar rechts, omdat de hele laag verschruift.

Oftewel: hoe moet ik tekst op dat lichtgrijze vlak zien te krijgen, op zo'n manier dat bij welke resolutie dan ook de tekst gewoon goed staat?

Ik hoop dat ik duidelijke genoeg ben bvd.

[ Voor 25% gewijzigd door Remius op 16-04-2006 12:34 ]

[XWB]

Waarom Photoshop? Met een paar divjes en wat css heb je dat zo gemaakt.

[JeroenGans]

Een div doet inderdaad wonderen, misschien daar eens mee spelen, Frontpage maakt hoe dan ook brakke code.. Probeer dat deel eens zelf te kopieren coderen natuurlijk , tutorialtje: http://www.sitemasters.be...als/tutorials&cat=2&id=90

[ Voor 8% gewijzigd door JeroenGans op 16-04-2006 12:43 ]

[Remius]

Ik ben een nogal een leek op dat gebied, ik heb dus geen idee hoe dat allemaal moet en met Photoshop en Imageready kon ik vrij makkelijk een layout maken dus vandaar...

[Remius]

Thnx Jeroen ik zal het eens proberen

[XWB]

Remius schreef op zondag 16 april 2006 @ 12:38:
Ik ben een nogal een leek op dat gebied, ik heb dus geen idee hoe dat allemaal moet

Erg moeilijk is het niet Gewoon even die tutorial van JeroenGans doornemen, en je moet er wel komen. Maarrrr omdat ik vandaag in een goede bui ben:

Cascading Stylesheet:

#container
{
    background-color: #666;
    border: 1px #000 solid;
    height: 300px;
    width: 400px;
}

#header
{
    background-color: #000;
    padding: 10px;
    height: 50px;
    margin: 10px;
}

#content
{
    background-color: #999;
    padding: 10px;
    margin: 10px;
    height: 180px;
}

HTML:

<div id="container">
    <div id="header">
    
    </div>
    <div id="content">
        Hier tekst zoveel je wil ;)
    </div>
</div>

[Remius]

Pffff zelfs van die tutorial snap ik niet veel Ik heb de site even online gegooid dat is misschien wel zo makkelijk: http://www.qualitytechnology.nl/ Als je de site bekijkt op 1024*768 staat de tekst goed, maar als je hem bekijkt op 1152*864 verspringt de tekst. Waar moet ik dat CSS en HTML tussen plakken?

[XWB]

Dat komt waarschijnlijk door die div met absolute positie, die geef je nu een vaste positie maar dat gaat niet op wanneer je de resolutie verandert.

Maar ik snap je code ook niet goed, je hebt een JS functie om images te preloaden maar je roept die functie pas in de body onload aan

[Remius]

Ik heb dus totaal geen verstand van al die html codes en kan dus ook niet zien of het een bende is ;P Maar dat zal waarschijnlijk wel omdat ik het eerst in Imageready heb gemaakt, vervolgens geladen heb in Frontpage en toen verder gegaan ben met bewerken. Ik zie nu ook dat de laag waarin de tekst staat helemaal niet verspringt hij blijft gewoon precies op dezelfde plek staan. Maar weet iemand een (simpele) oplossing?

[XWB]

Cascading Stylesheet:

<div style="position: absolute; width: 694px; height: 383px; margin-left: 30px; margin-top: 170px; border:#000000 1px solid;" id="laag1">

in plaats van

Cascading Stylesheet:

<div style="position: absolute; width: 694px; height: 383px; z-index: 1; left: 156px; top: 154px" id="laag1">

[Remius]

Hacku: je bent geweldig! Hardstikke bedankt man