tekst over plaatje

Status
Niet open voor verdere reacties.
G

gebruiker78

Gebruiker
Lid geworden
29 jun 2010
Berichten
428
hallo,
ik wil zoiets als facebook.com,
dat je een plaatje hebt, en daar rechts (op het plaatje) je inlog dingen.
ik heb dit:
<img src="../images/mydabo.png" alt="mydabo.com"></img>
</div>
<div class="headerspan">
david
</div>

maar ik krijg bijv "david", niet over de afbeelding (alleen er achter).
normaal is google een goede vriend maar de keren dat het werkt zit de tekst erachter.

dus hoe krijg ik een plaatje met een form of text eroverheen? net als bij facebook.com

(de mydabo.png = 950px bij 80px)
 
Manier 1 :


<html>
<head>
<style>
.headerspan {
position:absolute;
width:990px;
height:271px;
border:3px #ccc solid;
top:0px;
left:0px;
z-index:0;
}
.headercontentspan {
text-align:right;
width:990px;
height:271px;
position:absolute;
top:0px;
left:0px;
z-index:1;
padding:20px;
}
</style>
</head>
<body>
<div class="headerspan">
<img src="http://www.bba-bn.net/include/designs/atrox_design/Bilder/header.png"/>
<div class="headercontentspan">
<form>
<input type="text" value="david"><br/>
<input type="text" value="david"><br/>
<input type="text" value="david"><br/>
<input type="text" value="david"><br/>
<input type="text" value="david"><br/>
</form>
</div>
</div>
</body>
</html>
 
Manier 2:


<html>
<head>
<style>
.headerspan {
width:990px;
height:271px;
border:3px #ccc solid;
background-image:url(http://www.bba-bn.net/include/designs/atrox_design/Bilder/header.png);
background-repeat:no-repeat;
}
.headercontentspan {
text-align:right;
padding:20px;
}
</style>
</head>
<body>
<div class="headerspan">
<div class="headercontentspan">
<input type="text" value="david"><br/>
<input type="text" value="david"><br/>
<input type="text" value="david"><br/>
<input type="text" value="david"><br/>
<input type="text" value="david"><br/>
</div>
</div>
</body>
</html>
 
50% oplossing:
<TABLE background="../images/mydabo.png" height="80" width="950">
<TR><TD>Email:<TD><TD>Password:<TD><TR>
<TR><TD><input type="text" name="email"/><TD><TD><input type="password" name="password"/><TD><TD><input type="submit" value="Log in"><TD><TR>
<TR><TD><TD><TD><TD><TD><a href='register.php'>Register</a><TD><TR>
</TABLE>

alleen staan de <TD> heel ver uit elkaar (verdeeld over 950px) maar ik wil alleen de afbeelding zo groot hebben voor de rest kan de tabel 100px zijn.
weet iemand hoe dat moet?
zoals dit dus!
(sorry voor paint kunsten!)
 
Laatst bewerkt:
Beetje vreemd dat je een vraag stelt met DIV layers en vervolgens met een Table oplossing komt zonder naar de opgedragen oplossingen te kijken.
Zo moet het er in ieder geval uitzien:

<table background="../images/mydabo.png" height="80" width="950">
<tr>
<td width="600">&nbsp;</td>
<td>email:</td>
<td colspan="2">password:</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="text" name="email"/></td>
<td><input type="password" name="password"/></td>
<td><input type="submit" value="log in"/></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td><a href='register.php'>register</a></td>
</tr>
</table>


Let op dat je elementen moet sluiten. Anders werkt het niet.
Als je een cell start dan begin je met <td> en eindig je met </td>.
Voor een rij geldt precies hetzelfde maar dan met <tr> beginnen en </tr> eindigen.
 
Ik wil Je wil je iets anders laten zien.

PHP: 
	<title>Untitled 2</title>
    <style type="text/css">
<!--
    .left{ float:left; top:200px;Left:10px;}
	#panel{Z-INDEX:2; position:absolute; display:block;text-align:left;background:#009;}
    #three a{width:200px; height:155px; display:block; background:url(images/normal.jpg) 0 0 no-repeat #999;  font-size:20px; font-weight:bold; text-decoration:none; padding:23px 0 0 30px;}
    #three a{font-weight:bold; text-decoration:none; color:#fff;}
    #three a:hover{width:200px; height:155px; display:block; background:url(images/hover.jpg) 0 0 no-repeat #FFF; color:#fff; text-decoration:none;}
    .block{width:200px; height:145px;}
-->
</style>
</head>

<body>

<div id="panel" class="left">
				<div id="three" class="block">
				   	<a href="test.htm" target="werkplaats">mytest</a>
				</div >
				<br />
</div >
	<br />	<br />	<br />	<br />	<br />	<br />	
</body>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan