18041 sujets

Questions générales et questions de débutants

Débutant à partir d'un moéle de comprendre un peu le html et le cs

Bonjour,
Une question de débutant ...
A partir d'un modèle j’essaie de construire ma page d’accueil.
je voudrai faire les choses suivantes :
avoir ma section sidebar 2 moins large, comme la sidebar 1
avoir plus de largeur dans la section content content.
J'utilise un fichier html5 libre ainsi que le css, que je tente de modifier selon mes besoins.
le buit étant d'avoir une page d’accueil en modéle pour les autres.
je suis un vrai débutant Smiley confused .
vola mes 2 fichier de code.
je n'ai pas rempli les champs des séctions j'en suis à la mise en page.
HTML /
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>BONIMUSIC</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper"><!-- #wrapper -->

<header><!-- header -->
<h1><a href="#">bonimusic</a></h1>
<h2>Cours de guitare</h2>
<img src="IMAGES/test pour site.png" width="400" height="150" alt=""><!-- header image -->
</header><!-- end of header -->

<nav><!-- barre de menu du hauttop nav -->
<div class="menu">
<ul>
<li><a href="#">Acceuil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Fingerstyle</a></li>
<li><a href="#">Plectre</a></li>
<li><a href="#">Blues</a></li>
<li><a href="#">Contact </a></li>
<li><a href="#">Liens </a></li>
<li><a href="#">Liens </a></li>
<li><a href="#">Liens </a></li>

</ul>
</div>
</nav><!-- end of top nav -->

<section id="main"><!-- #main content and sidebar area -->

<aside id="sidebar1"><!--contenu collen gauche sidebar1 -->
<h3>Things To Do</h3>
<ul>
<li><a href="#">Play Games</a></li>
<li><a href="#">Chat With Friends</a></li>
<li><a href="#">Swap Stories</a></li>
<li><a href="#">Sell Stuff</a></li>
<li><a href="#">Buy Stuff</a></li>
<li><a href="#">Trade Stuff</a></li>
</ul>

<h3>Sponsors</h3>
<img src="images/ad125.jpg" alt="" /><br /><img src="images/ad125.jpg" alt="" /><br /><br />

<h3>Related Articles</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
</ul>

<h3>Connect With Us</h3>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>

</aside><!-- end of sidebar1 -->

<section id="content"><!-- #content -->

<article>
<h2><a href="#">Section 1 article</a></h2>
<img src="images/bwarch.jpg" alt="" class="alignleft" /><p>texte a remplir
. <a href="#">texte souligné</a>. suite du texte.</p>
<p>TEXTE2.</p>
</article>

<article>
<h2><a href="#">Section2 article</a></h2>
<p>texte section 2

</section><!-- end of #content -->

<aside id="sidebar2"><!-- contenu collonne de droite sidebar2 -->
<h3>Stuff</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>

<h3>More Stuff</h3>
<ul>
<li><a href="#">Blah, blah and all blah</a></li>
<li><a href="#">More blah</a></li>
</ul>

<h3>S'more Goodies</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>

<h3>Did You Know?</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>

<h3>FAQ</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>

</aside><!-- end of sidebar -->

</section><!-- end of #main content and sidebar-->

<footer><!-- contenu footer-->
<section id="footer-area">

<section id="footer-outer-block">
<aside class="footer-segment">
<h4>Friends</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #first footer segment -->

<aside class="footer-segment">
<h4>Awesome Stuff</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #second footer segment -->

<aside class="footer-segment">
<h4>Coolness</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #third footer segment -->

<aside class="footer-segment">
<h4>Blahdyblah</h4>
<p>&copy; 2010 <a href="#">yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</aside><!-- end of #fourth footer segment -->

</section><!-- end of footer-outer-block -->

</section><!-- end of footer-area -->
</footer>

</div><!-- #wrapper -->
<!-- Free template created by http://freehtml5templates.com -->
</body>
</html>


CODE CSS
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>BONIMUSIC</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper"><!-- #wrapper -->

<header><!-- header -->
<h1><a href="#">bonimusic</a></h1>
<h2>Cours de guitare</h2>
<img src="IMAGES/test pour site.png" width="400" height="150" alt=""><!-- header image -->
</header><!-- end of header -->

<nav><!-- barre de menu du hauttop nav -->
<div class="menu">
<ul>
<li><a href="#">Acceuil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Fingerstyle</a></li>
<li><a href="#">Plectre</a></li>
<li><a href="#">Blues</a></li>
<li><a href="#">Contact </a></li>
<li><a href="#">Liens </a></li>
<li><a href="#">Liens </a></li>
<li><a href="#">Liens </a></li>

</ul>
</div>
</nav><!-- end of top nav -->

<section id="main"><!-- #main content and sidebar area -->

<aside id="sidebar1"><!--contenu collen gauche sidebar1 -->
<h3>Things To Do</h3>
<ul>
<li><a href="#">Play Games</a></li>
<li><a href="#">Chat With Friends</a></li>
<li><a href="#">Swap Stories</a></li>
<li><a href="#">Sell Stuff</a></li>
<li><a href="#">Buy Stuff</a></li>
<li><a href="#">Trade Stuff</a></li>
</ul>

<h3>Sponsors</h3>
<img src="images/ad125.jpg" alt="" /><br /><img src="images/ad125.jpg" alt="" /><br /><br />

<h3>Related Articles</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
</ul>

<h3>Connect With Us</h3>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>

</aside><!-- end of sidebar1 -->

<section id="content"><!-- #content -->

<article>
<h2><a href="#">Section 1 article</a></h2>
<img src="images/bwarch.jpg" alt="" class="alignleft" /><p>texte a remplir
. <a href="#">texte souligné</a>. suite du texte.</p>
<p>TEXTE2.</p>
</article>

<article>
<h2><a href="#">Section2 article</a></h2>
<p>texte section 2

</section><!-- end of #content -->

<aside id="sidebar2"><!-- contenu collonne de droite sidebar2 -->
<h3>Stuff</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>

<h3>More Stuff</h3>
<ul>
<li><a href="#">Blah, blah and all blah</a></li>
<li><a href="#">More blah</a></li>
</ul>

<h3>S'more Goodies</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>

<h3>Did You Know?</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>

<h3>FAQ</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>

</aside><!-- end of sidebar -->

</section><!-- end of #main content and sidebar-->

<footer><!-- contenu footer-->
<section id="footer-area">

<section id="footer-outer-block">
<aside class="footer-segment">
<h4>Friends</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #first footer segment -->

<aside class="footer-segment">
<h4>Awesome Stuff</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #second footer segment -->

<aside class="footer-segment">
<h4>Coolness</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #third footer segment -->

<aside class="footer-segment">
<h4>Blahdyblah</h4>
<p>&copy; 2010 <a href="#">yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</aside><!-- end of #fourth footer segment -->

</section><!-- end of footer-outer-block -->

</section><!-- end of footer-area -->
</footer>

</div><!-- #wrapper -->
<!-- Free template created by http://freehtml5templates.com -->
</body>
</html>


Merci pour toute réponse, même si elle me semble basique, j'ose la poser.
Cordialement
Salut bienvenu à toi

Tout ce que je peux te conseiller c'est d'utiliser un bon vrai tutoriel avec les bases en html et les bases en css et surtout de ne pas prendre un template tout fait si tu n'y comprend rien.

Pour répondre à tes deux petites question, pour "avoir ta section sidebar 2 moins large" faut jouer avec la propriété width en css et pour "avoir plus de largeur dans la section content content" bah c'est la même chose.
Modifié par JENCAL (04 Feb 2016 - 11:06)
Sujet clos
Aller à