28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème avec Tabs Affichage contenu 1er onglet

Bonsoir,

J'ai un souci avec des onglets où je voudrais que le contenu du premier onglet s'affiche.
Je ne souhaite pas utiliser du javascript.
Il y a un codage en trop ou absent mais je ne vois pas, malgré mes recherches avant de poster ...
Si une bonne âme peut m'aiguiller ...
Merci d'avance.

HTML :
	<!DOCTYPE html>
<html>
	<head>
	
	
	<link rel="stylesheet" type="text/css" href="css/tab_onglet2bis.css" media="all" />
	
	
</head>
	<div id="tabs">
			<ul>
				<li id="One"><a href="#One" id="first">Premier onglet</a>
					<div>
						<p>Texte 1er onglet
						 <span class="marge">&nbsp;</span></p>
</div>
				</li>
				<li id="Two"><a href="#Two" id="sec">Deuxième onglet</a>
					<div>
						<p>Texte 2eme onglet</p>
						</div>
				</li>
				<li id="Three"><a href="#Three" id="third">Troisième onglet</a>
					<div>
						<p>Texte 3eme onglet</p>
						</div>
				</li>
				<li id="Four"><a href="#Four" id="Fourth">Quatrième onglet</a>
					<div>
						<p>Texte 4eme onglet</p>
						</div>
				</li>
				
				<li id="Six"><a href="#Six" id="Sixth">Cinquième onglet</a>
					<div>
						<p>Texte 5eme onglet
						<span class="marge">&nbsp;</span></p>
						</div>
				</li>
			</ul>
		</div>
		</html>


Codage CSS



.marge {
margin-left: 52em;
}
#bar {
	position: fixed;
	width: 100%;
	top: 0;
}

#content > p {
	font-size: 13px;
	
	text-align: left;
	color: #416C80;
}

li div p {
	font-size: 13px;
	line-height: 24px;
	text-align: left;
	color: #000000;
}

a {
	color: #000000;
	text-decoration: none;
	outline: none;
}

#tabs-content {
	position: relative;
	clear: both;
}

li div {
	-webkit-transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	-ms-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	border: 3px solid #565552;
	float: left;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	padding: 0 15px;
	position: absolute;
	visibility: hidden;
	width: auto;
	left: 0;
	background: no-repeat, -moz-linear-gradient(top,  #E3E3E3 0%, #FFFFFF 100%); /* FF3.6+ */
	background: no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E3E3E3), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
	background: no-repeat, -webkit-linear-gradient(top,  #E3E3E3 0%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
	background: no-repeat, -o-linear-gradient(top,  #E3E3E3 0%,#FFFFFF 100%); /* Opera 11.10+ */
	background: no-repeat, -ms-linear-gradient(top,  #E3E3E3 0%,#FFFFFF 100%); /* IE10+ */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#E3E3E3', EndColorStr='#FFFFFF'); /* IE6,IE7 */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E3E3E3', endColorstr='#FFFFFF', GradientType=0 ); /* IE6-9 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#E3E3E3', EndColorStr='#FFFFFF')"; /* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorStr='#E3E3E3', EndColorStr='#0FFFFFF')"; /* IE */
background: no-repeat, linear-gradient(to bottom,  #E3E3E3 0%,#FFFFFF 100%); /* W3C */
  
}



#tabs {
overflow: visible;
	margin:0px 0px 0px 19px;
	min-height: 200px;
	width: 807px;
}

ul {
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
}


#tabs li {
	float: left;
	list-style-type: none;
}


#tabs li a {

background: #CD0432;
background: -webkit-linear-gradient(top, #E80539 12px, #CD0432 25px);
background: linear-gradient(to bottom, #E80539 12px, #CD0432 25px);
border: 1px solid #888888;
margin: 0 1px 0 0;
	padding: 5px 17px;
	position: relative;
	z-index: 1;
	font-size: 14px;
	border: 3px solid #565552;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	display: block;
	top: 1px;
	color: #ffffff;
	overflow: visible;
}

#tabs li a:hover {
background: #e3e3e3;
background: -webkit-linear-gradient(top, #fff 12px, #e3e3e3 25px);
background: linear-gradient(to bottom, #fff 12px, #e3e3e3 25px);
border-top: 3px solid #565552;
border-left: 3px solid #565552;
border-right: 3px solid #565552;
overflow: visible;
	
	
}

#tabs-content div p {
	position: relative;
	text-align: justify;
	
}



#One:target a,#Two:target a,#Three:target a,#Four:target a,#Five:target a, #Six:target a {
	color: #000000;
	border-bottom: none;
	top: 1px;
	background: #e3e3e3;
background: -webkit-linear-gradient(top, #fff 12px, #e3e3e3 25px);
background: linear-gradient(to bottom, #fff 12px, #e3e3e3 25px);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E3E3E3));
	background: -moz-linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
	background: -o-linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
	background: -ms-linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
	background: linear-gradient(center top , #FFFFFF 12px, #E3E3E3 25px) repeat scroll 0 0 transparent;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E3E3E3', GradientType=0 ); /* IE6-9 */
	padding-top: 6px;
	}

#One:target div,#Two:target div,#Three:target div,#Four:target div,#Five:target div,#Six:target div {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	visibility: visible;
	-webkit-border-radius: 0px 0px 24px 24px;
	-moz-border-radius: 0px 0px 24px 24px;
	border-radius: 0px 0px 24px 24px;
		
}

#wrap {
	margin-left: 15px;
   margin-right: auto;
	width: 807px;
	
}

#container {
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);

	-webkit-border-radius: 24px 24px 24px 24px;
	-moz-border-radius: 24px 24px 24px 24px;
	border-radius: 24px 24px 24px 24px;

	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.09) inset;
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.09) inset;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.09) inset;
	color: #416C80;
	margin: 50px auto;
	padding: 30px 60px;
	width: 807px;
}

i {
	-webkit-transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	-ms-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}

i:hover {
	background: none repeat scroll 0 0 #F26D5E;
	color: #FFFFFF;
}
Salut,

Je ne sais pas trop si j'ai bien compris ton problème mais voici un apperçu :

http://jsfiddle.net/3Gy5w/

Ce que j'ai ajouté pour qu'uniquement le 1er onglet soit visible : 
li#One div{
    opacity:1;
}


Ce que j'ai retiré dans li div (il empeche l'affichage de l'onglet): 
visibility: hidden;

Modifié par artsx (22 Aug 2013 - 16:06)
Bonjour,

Trop top !!!
Ca fonctionne impec à présent !
artsx, je te dois une fière chandelle !
Infiniment merci ...

Je clôture le sujet.
Sujet clos
Aller à