28172 sujets

CSS et mise en forme, CSS3

Problème de positionnement <aside> et <section>.

Hello,

chose promis, chose due. Je suis de retour avec des questions.
le problème semble pas très compliqué, mais j'ai les yeux qui piquent à force de regarder ces lignes de code, alors je me tourne vers vous !

J'ai dans ma page un <div> qui me sert de conteneur, afin de centrer le design sur la page.
J'essaye juste de mettre un bloc <aside> et un bloc <section> l'un à côté de l'autre, dans ce conteneur.
Le résultat : ils sont bien l'un à côté de l'autre, mais pas du tout dans mon conteneur !

Je vous mets les bouts de code :

edit : désolé pour la taille verticale de ce qui suit.

HMTL :


	<body>
		<nav id="top_menu">
			<ul>
				<li><a href="#">.projects</a></li>
				<li><a href="#">.aboutus</a></li>
				<li><a href="#">.media</a></li>
				<li><a href="#">.contact</a></li>
			</ul>
		</nav>
		<div class="cl"></div>
		<div id="wrapper">
			<header id="header"></header>
			<div id="slideshow"></div>
			<div id="blue_space"></div>
			<div class="cl"></div>
			<aside id="content"></div>
			<section id="right_panel"></section>
		</div>
	</body>


CSS :

/* RESET */
body {
	/* font-family: Helvetica, Arial, Verdana, sans-serif; */
	font-size: 14px;
	margin: 0;
	padding: 0;
	background-color: #1d03b6;
}
 
ul, ol, dl, h1, h2, h3, h4, h5, a {
	padding: 0;
	margin: 0;
	font-weight: normal;
}

.cl { clear : both; }
/* RESET */ 
/* HTML5 */
header, section, footer, aside, nav, article, figure {
	display: block;
	margin: 0;
}
/* HTML 5 */

@font-face { font-family : AldoApache;
				src: url('AldotheApache.ttf') format="truetype"; }

.wrapper {
	width : 1000px;
	margin : 0 auto;
}
 
#top_menu {
	height : 25px;
	background : url(JPEG/banner.jpg);
}
#top_menu ul {
	width : 565px;
	margin : 0 auto;
	padding-left : 435px;
	line-height : 25px;
	list-style : none;
}
#top_menu ul li { 
	float : left; 
	width : 25%;
	vertical-align : middle;
	text-align : right;
	margin : 0;
	padding : 0;
}
#top_menu ul a, #top_menu ul a:visited {
	padding : 0px 0px 0px;
	display : block;
	font-family : AldoApache, verdana, helvetica, sans serif;
	font-size : 15px;
	color : #fff;
	text-decoration : none;
}
#top_menu ul a.active, #top_menu ul a:hover, #top_menu ul a:active, #top_menu ul a:focus {
	text-decoration : none;
	font-family : AldoApache, verdana, helvetica, sans serif;
	font-weight : bold;
	color : #5e7cf4;
	background-color : #eee;
}

#header  {
	background : url(JPEG/header.jpg);
	height : 145px;
	width : 1000px;
	margin : 0 auto;
	padding : 0;
}

#slideshow  {
	background : url(JPEG/slideshow.jpg);
	width : 1000px;
	height : 130px;
	margin : 0 auto;
	padding: 0;
}

#blue_space {
	background : url(JPEG/blue_space.jpg);
	width : 1000px;
	height : 60px;
	margin : 0 auto;
	padding: 0;
}

aside#content {
	background : url(JPEG/content_back.jpg) top left no-repeat;
    width : 680px;
    height : 325px;
    padding : 0;
	margin : 0 auto;
	float : left;
}

#right_panel {
	background : url(JPEG/right_panel.jpg) top left no-repeat;
	width : 320px;
	height : 325px;
	margin : 0 auto;
	display : block;
}


Quelqu'un aurait il une idée ?

Peace.
Modifié par aur8l (28 Oct 2011 - 19:48)
bonsoir,

id dans le html est "." dans les style. : petite confusion entre class et id .

cordialement,
GC
En effet !
Mais ça ne règle pas le problème...
Bien vu cependant !
Modifié par aur8l (28 Oct 2011 - 19:58)
Re, j'ai réglé le problème en intégrant <aside> et <section> dans un <div>.

See you Smiley cligne
Sujet clos
Aller à