[CSS]Problème Mise en page
Problème Mise en page [CSS] - HTML/CSS - Programmation
Marsh Posté le 25-09-2020 à 09:26:24
On ne fait pas les exercices à la place des gens car ce ne serait pas trop pédagogique ! ^^
Reprend ton court ou lit le très bon tutoriel d'Alsacréation (
https://www.alsacreations.com/tuto/ [...] odule.html ) et revient avec un travail un peu plus aboutis...
Idéalement dans un https://jsfiddle.net/ahxmez7j/ ou un codepen.io car la correction sera plus facile pour nous.
---------------
D3
Marsh Posté le 25-09-2020 à 09:51:43
J'ai trouvé ce matin 
A tête reposée, c'est souvent plus simple 
Sujets relatifs:
- Lancer galerie lightbox sans images dans la page
- Problème reception mail depuis un formulaire (OVH)
- VNC sur une page web
- [PHP] Problème nouveau avec exif_read_data
- [CSS] problème de mise en page
- Probleme Mise en page HTML et CSS
- [CSS] problème de mise en page à l'impression
- Problème de mise en page avec CSS
- mise en page css-->probleme son flash
- [CSS] Probleme de mise en page
Marsh Posté le 24-09-2020 à 19:35:46
J'ai besoin d'aide, je suis un peu perdue... J'ai commencé une formation de développeur Web à l'AFPA, depuis 2 semaines, et on a attaqué les CSS
Pour faire simple, j'ai le HTML suivant, et je dois créer le CSS derrière qui va bien, pour:
- mettre les 2 articles côte à côtes;
- la partie aside à droite de la section avec l'id recipe
- le footer, à sa place, en bas
J'ai fait le CSS dessous; le aside est bien à droite, mais les 2 articles ne sont pas côte à côte, et le footer se balade à droite, sous le aside
Si vous auriez des pistes pour m'aider, ce serait gentil
<main class="container">
<section id="presentation">
[....]
</section>
<section id="recipe">
<h2><span>Les Must Have</span><br />La Selection Ultime</h2>
<article>
[...]
</article>
<article>
[...]
</article>
</section>
<aside> <img id="vignette" src="img/rolex_daytona.png" alt="Rolex Daytona Watch" />
[...]
</aside>
</main>
<footer>
<p>2020 - Sacha & Rolex</p>
</footer>
#recipe {
background-color: grey;
color: white;
float: left;
width: 73%;
}
aside {
position: flex;
width: 25%;
background-color: #685959;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 15px;
float: right;
}