Bonjour
Voici ma page CSS telle que je l'ai conçue.
body {
background-color: beige;
background-image: url(cabecera.jpg);
background-repeat: no-repeat;
width: 200px; height: 580px;
}
ul {margin-top: 200px; color: yellow; }
p { margin-left: 200px; width: 550px; margin-right: 15px;}
img { float: right; margin-right: -550px; border: solid orange 3px; width: 80px; height: 104px; }
h1 { margin-left: 220px; width: 600px; margin-top: -150px;
}
Ce que je veux
Voici le script de la page HTML donné.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="sobre.css" type="text/css" />
<meta charset="UTF-8">
<title>Uluka Graphiks Portfolio</title>
</head>
<body>
<img src="yo.jpg" alt="" />
<ul>
<li> Identidad</li>
<li>Ilustración</li>
<li>FotografíaPapel</li>
<li>Web </li>
</ul>
<h1>Sobre mi</h1>
<p>Me llamo Saioa Vicandi, tengo 27 años, vivo en Bilbao y este es mi portafolio.</p>
<p>¡Bienvenido!</p>
<p>Con él pretendo mostrar mis trabajos más recientes en Identidad, Ilustración,
Fotografía, Papel y Web. A pesar de la varidad de ámbitos en los que he trabajado,
me he especializado en diseño y maquetación web.</p>
<p>Mi meta ahora, como diseñadora web, es integrarme a un equipo de trabajo que
actue en todos los ámbitos del diseño gráfico, para poder aprender de ellos
y ampliar mi capacidad creativa.</p>
<p>Si estás interesado en ver mi currículum o si quieres enviarme algún comentario,
duda o sugerencia escríbeme a esta dirección: savicandi@gmail.com</p>
<p>Saioa Vicandi</p>
</body>
</html>
Je dois mettre en forme cette page html avec une feuille de style CSS. Il doit y avoir une image à gauche (j'ai utilisé le background-image) et un menu visible sur cette image et une photo à droite qui est déjà dans le HTML.
Ce que j'obtiens
En utilisant le float: right, la photo se met à la droite de la 1ère image et non à la droite du texte. C'est pourquoi j'ai ajouté une margin--right : -550px et elle est bien à droite du texte MAIS le texte ne s'enroule pas autour.
J'ai essayé de mettre des <div> et des class pour les 2 images afin de les positionner mais dans ce cas, le menu ne se met pas sur l'image 1 et le texte est décalé vers le bas.
Comment puis-je procéder ? Merci pour vos conseils.
Christine59