28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement balise <h3> <ul>

Bonjour,

Mon problème se situe avec les balises du type <h3> et <ul>.
Lorsque j'ajoute une balise <h3>, les menus <ul> se retrouvent tous décalés vers le bas.

Voici l'exemple du problème
Je souhaiterais que tout soit aligné sur la même ligne.

Une suggestion, un éclaircissement, une optimisation du code Smiley smile

Voici le CSS
#footer {
	position: relative;
	background-color:#252525;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	width: 780px;
	height: 300px;
	border-radius: 7px 7px 7px 7px; 
	-webkit-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
}

#cadre4 {
	position: relative;
	overflow:hidden;
	float: left;
	left: 7px;
	top: 7px;
	color: #585858;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size: 10px;
	background-color:#181818;
	width: 766px;
	height: 286px;
	border-radius: 7px 7px 7px 7px; 
	-webkit-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
}

#cadre4 ul {
	float:left;
	width:150px;
	border-color: #0F3;
	border-style-right: solid;
	margin-top: 15px;
	list-style: none;
	outside: none;
	padding-left: 10px; 
	padding-top: 0px;
	Font-size:10px;
	white-space:nowrap;

}


#cadre4 li a:active, #cadre4 li a:link, #cadre4 li a:visited{
	color: #585858;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	list-style-type:none;
}

#cadre4 li a:hover, #cadre4 li a:focus{
	color: #989898;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: bold;
	text-decoration: underline;
}

.separation {
	background: #202020;
	border: 0px;
	position: absolute;
	margin-top :50px;
	margin-left: 250px;
	height: 250px;
	width : 2px;	
}

.Tmenu {
	font-family:Verdana, Geneva, sans-serif;
	font-style:normal;
	font-weight:bold;
	font-size:14px;
	font-variant:small-caps;
	color: #989898;	
}


Voici le xhtml
<div id="footer">
  <div id="cadre4">
  
                <h3 class="Tmenu">TITRE 1</h3>
					<ul style="width: 181px;">
                        <li><a href="#" title="Section 1">Section 1</a></li> 
                        <li><a href="#" title="Section 2">Section 2</a></li>
                        <li><a href="#" title="Section 3">Section 3</a></li>
                        <li><a href="#" title="Section 4">Section 4</a></li> 
                        <li><a href="#" title="Section 5">Section 5</a></li>
                        <li><a href="#" title="Section 6">Section 6</a></li>
                        <li><a href="#" title="Section 7">Section 7</a></li> 
                        <li><a href="#" title="Section 8">Section 8</a></li>
                        <li><a href="#" title="Section 9">Section 9</a></li>
					</ul>
                    <hr class="separation" style="left: -60px; top: -30px;" />

    <!--  -->

                	<h3 class="Tmenu">TITRE 2</h3>
					<ul style="width: 181px;">
                        <li><a href="#" title="Section 1">Section 1</a></li> 
                        <li><a href="#" title="Section 2">Section 2</a></li>
                        <li><a href="#" title="Section 3">Section 3</a></li>
                        <li><a href="#" title="Section 4">Section 4</a></li> 
                        <li><a href="#" title="Section 5">Section 5</a></li>
                        <li><a href="#" title="Section 6">Section 6</a></li>
                        <li><a href="#" title="Section 7">Section 7</a></li> 
                        <li><a href="#" title="Section 8">Section 8</a></li>
                        <li><a href="#" title="Section 9">Section 9</a></li>
                    </ul>
                    <hr class="separation" style="left: 130px; top: -30px;" />
                    

    <!--  -->

					<h3 class="Tmenu">TITRE 3</h3>
					<ul style="width: 181.5px;">
                        <li><a href="#" title="Section 1">Section 1</a></li> 
                        <li><a href="#" title="Section 2">Section 2</a></li>
                        <li><a href="#" title="Section 3">Section 3</a></li>
                        <li><a href="#" title="Section 4">Section 4</a></li> 
                        <li><a href="#" title="Section 5">Section 5</a></li>
                        <li><a href="#" title="Section 6">Section 6</a></li>
                        <li><a href="#" title="Section 7">Section 7</a></li> 
                        <li><a href="#" title="Section 8">Section 8</a></li>
                        <li><a href="#" title="Section 9">Section 9</a></li>
                    </ul>
                    <hr class="separation" style="left: 320px; top: -30px;" />
                  	
 
    <!--  -->

                	<h3 class="Tmenu">TITRE 4</h3>
					<ul style="width: 181.5px;">
                        <li><a href="#" title="Section 1">Section 1</a></li> 
                        <li><a href="#" title="Section 2">Section 2</a></li>
                        <li><a href="#" title="Section 3">Section 3</a></li>
                        <li><a href="#" title="Section 4">Section 4</a></li> 
                        <li><a href="#" title="Section 5">Section 5</a></li>
                        <li><a href="#" title="Section 6">Section 6</a></li>
                        <li><a href="#" title="Section 7">Section 7</a></li> 
                        <li><a href="#" title="Section 8">Section 8</a></li>
                        <li><a href="#" title="Section 9">Section 9</a></li>
                    </ul>
  </div>
</div>

Modifié par Dev35 (29 Nov 2010 - 16:37)
C'est normal, met un block (<div>) qui englobe ton <h3> et ton <ul> et c'est lui que tu indiques en float:left, et non ton <ul>.
Sujet clos
Aller à