Tekst verspringt

  • Onderwerp starter Onderwerp starter Lomp
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

Lomp

Gebruiker
Lid geworden
21 feb 2010
Berichten
23
Hallo een volgend probleem wat ik bij het vorige probleem weer niet had. Ik heb mijn lay out verkleind. Echter als ik f12 indruk zie ik dat de layout netjes in het midden staat, terwijl de tekst er totaal buiten staat. In dreamweaver geeft ie het netjes binnen de lijntjes aan:confused:

Wat te doen oooh machtige goden der html?:D
 
Hallo

Onmogelijk te zien wat er fout gaat zonder code.

Post je code (html en eventueel css) om te kijken wat er gebeurt.

greetz
P
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 395px;
top: 33px;
}
#apDiv2 {
position:absolute;
width:200px;
height:60px;
z-index:1;
left: 610px;
top: 300px;
}
.stijl1 {
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div align="center"><img src="Fitinuwregio/Index.jpg" width="700" height="800" alt="index.html" />
<div class="stijl1" id="apDiv2">Fitness Centrum</div>
</div>
</body>
</html>

Dit is de code. En zo ziet het er uit in dreamweaver zelf:


En zo in internet explorer:


Ben een leek wat dit betreft misschien kan het ook anders? Heb je andere oplossingen? graag!

tnx
 
Hoi

Je gebruikt apdiv.

Dit zijn divs met een absolute positie.
Met andere woorden, je apdiv2 staat altijd op links 610 px en boven 300 px. En aangezien hierin je tekst staat, zal deze ook altijd zo staan.

Als je je scherm kleiner of groter maakt, zal je merken dat de tekst ook mee verschuift terwijl je afbeelding in het midden blijft staan. Dit omdat de afbeelding gecentreerd is, en je tekst niet (omwille van de apdiv).

Eigenlijk zou je je figuur moeten slicen. Met andere woorden enkele delen 'eruit knippen'. Dan heb je een figuur voor je header, en een achtergrondfiguur voor je knoppen. Deze ga je dan in een layout gieten.

Het voordeel: je laadt verschillende kleine figuren in, en je hoeft maar 1 figuur voor de achtergrond van je knop in te laden die je meerdere keren gaat gebruiken (per link).

Ik hoop dat dit je al een eindje op weg helpt. Het zal, vrees ik, een lang proces worden en stap voor stap moeten gaan.

Zowiezo: kijk even hier: http://www.w3schools.com om een uitgebreide basis te ontwikkelen ivm websites maken, html, css, ...

greetz
P
 
Hoi Lomp,
Een tekst op de juiste plaats boven een image-knop krijgen is één.
Maar twee is waarschijnlijk: je wilt dat het een link wordt, dat die link net zo groot is als de knop, en dat als de bezoeker een grotere lettergrootte kiest, de tekst nog wel op de knop blijft staan.
Alles kan met css, en dit ook! :)
Het wordt alleen vrij ingewikkeld als je hier niet wat ervaring mee hebt.

Een makkelijker manier is: een plaatje maken van elke knop inclusief de tekst op die knop. Met css kan je dan elk knop-image naar de plek rangeren waar ie moet komen (onafhankelijk van de resolutie van de bezoeker), en in de html kan je er een link van maken.

Een mini-handleiding voor hoe je dit kunt doen, met ook nog een "hover-image" (als je met de muis over een knop beweegt, een net iets ander plaatje: ingedrukte knop, of een andere kleur, enz.) staat hier:
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan