Décalage des images

Décalage des images - HTML/CSS - Programmation

Marsh Posté le 28-11-2006 à 20:49:42    

Bonjour,
 
Je suis en train de créer, dans le cadre d'un TPE, un site web sur la Domotique.
J'ai récupéré un kit graphique sur le web et je le bidouille à ma façon pour qu'il colle avec ce que j'avais en tête...
 
Voila un aperçu de ce qu'il donne :
 
http://img122.imageshack.us/img122/9489/sanserreurwr3.th.jpg
 
Et après avoir mis du texte (en assez grande quantité... ^^), voila à quoi je me retrouve confronté ^^ :  
 
http://img66.imageshack.us/img66/7715/avecerreuret2.th.jpg
 
Mon soucis est donc que, quand j'ajoute "trop" de texte, j'ai un décalage des images, ce qui est assez dérangeants...
J'ai tenté avec ceci :  
 
http://img332.imageshack.us/img332/3790/testiframecm0.th.jpg
 
Mais le résultat n'est pas vraiment ce que je voulais.
Donc je m'en remet à vous. Seriez-vous comment je pourrais "fixé" les images pour pouvoir ensuite ajouté du texte comme je veux ?
 
Merci d'avance.

Reply

Marsh Posté le 28-11-2006 à 20:49:42   

Reply

Marsh Posté le 28-11-2006 à 21:03:31    

C'est à la mode en ce moment, mais comment veux-tu que quelqu'un te réponde si tu donnes pas de code ou de moyen d'accéder au code... Y'a pas de devin ici jusqu'à preuve du contraire....

Reply

Marsh Posté le 28-11-2006 à 21:05:39    

C'est a se demander pourquoi le concepteur du kit graphique s'est mis en tete de faire un découpage de l'image principale alors que c'est inutile.
 
Suffit d'appliquer un background a ton body et de le positionner en haut a gauche, sans répétition.
 
CSS:
body {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

Reply

Marsh Posté le 28-11-2006 à 21:08:02    

Oups pardon... toutes mes excuses ^^
 

Citation :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- Domotique ~ Design by Diablo.Inc -->
<html>
<head>
<title>Espace-domotique.com</title>
<style type="text/css">
<!--
a:link, a:active, a:visited {
color: #4A265A;  
text-decoration: underline}
 
a:hover {
color: #4A265A;  
text-decoration: none}
 
-->
</style>
</head>
<body bgcolor="#000000" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table width="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<table width="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="images/dig_temp2_01.jpg" width="240" height="95"></td>
<td><img src="images/dig_temp2_02.jpg" width="225" height="95"><img src="images/bannierepourweb2.gif" width="400" height="95"></align></td>
<td width="315" height="95" bgcolor="#000000">&nbsp;</td>
</tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
 
<table border="0" width="240" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="images/dig_temp2_04.jpg" width="240" height="85"></td>
</tr>
 
<tr>
<td><img src="images/dig_temp2_06.jpg" width="30" height="25"></td>
<td><A HREF="page1.html"><IMG SRC="images/link_1.jpg"width="210" height="25" border="0" alt="link_1"></A><td>
</tr>
 
<tr>
<td><img src="images/dig_temp2_08.jpg" width="30" height="30"></td>
<td><A HREF="page2.html"><IMG SRC="images/link_2.jpg"width="210" height="30" border="0" alt="link_1"></A></td>
</tr>
 
<tr>
<td><img src="images/dig_temp2_10.jpg" width="30" height="30"></td>
<td><A HREF="page3.html"><IMG SRC="images/link_3.jpg"width="210" height="30" border="0" alt="link_1"></A></td>
</tr>
 
<tr>
<td><img src="images/dig_temp2_12.jpg" width="30" height="30"></td>
<td><A HREF="page4.html"><IMG SRC="images/link_4.jpg"width="210" height="30" border="0" alt="link_1"></A></td>
</tr>
 
<tr>
<td><img src="images/dig_temp2_14.jpg" width="30" height="25"></td>
<td><a href="page5.html"><img src="images/link_5.jpg"width="210" height="25" border="0" alt="link_1"></a></td>
</tr>
 
<tr>
<td width="10" bgcolor="#000000">&nbsp;</td>
<td width="230" height="314" colspan="2" bgcolor="#000000" valign="top">
<!-- Side Panel --><br><br>
<font face="Arial" size="2" color="#FFFFFF"><strong>
Commentaires...
</strong></font>
<!-- Side Panel -->
</tr>
</table>
</td>
</td>
<td align="center" valign="top" bgcolor="#00000">
<!-- Content --><br><br>
<img src="images/hr.gif" width="464" height="11" border="0">
<blockquote><font face="Arial" size="2" color="#fffff"><strong>
Index
</strong></font></blockquote>
<img src="images/hr.gif" width="464" height="11" border="0">
<!-- Content -->
</td>
</tr>
</table>
 
</body>
</html>


 
Voila ^^ :D

Reply

Marsh Posté le 28-11-2006 à 21:09:26    

Un kit graphique des années 90 :)

Message cité 1 fois
Reply

Marsh Posté le 28-11-2006 à 21:12:04    

C'est fort possible ^^
Mais je n'avais vraiment pas envie de me casser la tête, et son look me plaisait bien.
 
Merci pour ta réponse un peu plus haut, mais après avoir essayé, ça ne change rien à mon design (enfin presque). J'ai toujours mon problème...


Message édité par _diablogore_ le 28-11-2006 à 21:22:28
Reply

Marsh Posté le 28-11-2006 à 21:26:22    

afbilou a écrit :

Un kit graphique des années 90 :)


Utilisé chez razorback toute première mouture, non ? :D

Reply

Marsh Posté le 28-11-2006 à 22:16:37    

Reply

Marsh Posté le 04-12-2006 à 18:29:56    

Ce serait plus ça oui.
Donc en gros, je met mes images en arrière-plan et ensuite j'écris les textes et tout dessus. C'est à peu près ça non ?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed