28173 sujets

CSS et mise en forme, CSS3

Agrandir une nav-box

Voila je suis en train de modifier mo ntheme et j'aimerait augmenter la taille de ma nav-bar car je la trouve trop illisible et pouvoir agrandir la taille des liens ainsi qu'ajouter un hover d'une autre couleur quand on click sur une des categories. Le soucis c'est que je ne qait pas comment m'y prendre... Smiley bawling

J'ai tenté de toucher au margin et autres top mais sans succes.

Si quelqu'un avait une idée, je suis preneur

Le site

http://daleetstudios.free.fr/dc/

P.S : la nav-bar en question c'est le bandeau orange et voici un exemple de ce que j'aimerait faire considerant que j'aimerait aussi integrer ma barre de recherche :

http://www.picdo.net/Fichiers/820e8235e1ccc4d873207c4d320e1d3/navbar.png
Modifié par TGM (23 Dec 2006 - 16:31)
Bonjour,

Essayes 
ul#nav-box {
	margin : 0 0 20px 0;
height: 30px; /*----------------------- là --------*/
line-height: 30px;/*----------------------- là --------*/	
	padding : 10 1em 10 3;
	border-bottom:1px solid #bebebe;
	list-style-type : none;
	background-color: #f3a305;
	color: #fff;
	font-weight : bold;
	font-size : 14px; 
	text-align: left;
	
}
[code]
Merci je test de suite Smiley cligne

Merci ca fonctionne parfaitement Smiley cligne
Modifié par TGM (23 Dec 2006 - 01:12)
Je ne sait pas ce que j'ai fait, j'ai voulu mettre ma barre de recherche dans ma nav-bar et maintenant les liens ne sont plus cliquables.

Edit: J'aimerait juste que la barre de recherche soit au meme niveau que la seconde sidebar...
Modifié par TGM (23 Dec 2006 - 02:31)
Je vous met le code pour la search bar :

#search {position: absolute; top: 50px ; text-align: right; width: 850px;}

html:lang(fr) #search input {font-size: 0px; width: 22px;}

    /*   bloc recherche */
    
#search input {
	background: transparent url(img/bgSearchBtn.png) no-repeat top left;
	border: none; 
	height: 22px;
	margin: 0 15px 0 0;
	margin-top: 30px;
	}

#search input#q {
	font-size: 1em;
	width: 175px;
	background: transparent url(img/bgSearch.png) no-repeat top left;
	color: #ffffff;
	height: 22px;
	}
Bonjour,

Comme nous sommes le 24 décembre ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<style type="text/css">
/* Les &#65533;l&#65533;ments HTML en g&#65533;n&#65533;ral
-------------------------------------------------------- */
* {
		margin: 0; padding: 0;
		}
	body{
		background: #bebebe url(img/bgPage.png) center repeat-y;
		color: #000000; font-family: Arial, Helvetica, sans-serif;
		font-size: 75%;
		}

h1, h2, h3, h4, h5, h6{
	font-family: "Trebuchet MS", sans-serif;
}

h1{font-size: 1.4em;}
h2{font-size: 1.3em;}
h3{font-size: 1.2em;}
h4{font-size: 1.1em;}
h5{font-size: 0.9em;}
h6{font-size: 0.8em;}

pre, code{
	font-size: 1.2em;
}

pre{
	width: 100%;
	overflow: auto;
	border: 1px solid #CCC;
}

fieldset{
	border: none;
}

label{
	cursor: pointer;
	
}

.field label{
	display: block;
}

img {border:0;}

input,textarea{
	border: 1px solid #999;
}

textarea{
	width: 90%;
	font-size: 1em;
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
}

a{
	color: #ED8000;
	text-decoration: none;
}



a:hover{
	color: #ED8000;
	text-decoration: underline;
}

.left{
	float: left;
	margin-right: 1em;
}

.right{
	float: right;
	margin-left: 1em;
}

/* La page
-------------------------------------------------------- */


#page {margin: 0 auto; width: 950px;text-align: left;}
#main {margin-left:0; padding:5px 0 0 0;border: 1px solid black;}
#sidebar {float:right; position:relative; width:200px; top: -15px;}
#sidebar2 {float:right; position:relative; width:200px; top:-15px;}
#content {width: 530px; position:relative; text-align: left;padding: 0 5px;} 



 
/* L'ent&#65533;te
-------------------------------------------------------- */
#top {
		height: 90px; width: 950px;
		position: relative;
		/*background: white url(img/bgTop.png) left bottom no-repeat;*/	}
	#top h1 {
		position: absolute; top: 0; left: 30px;
		}
	#top h1 a {
		font-size: 30px; line-height: 1em;
		text-decoration: none;
		color: #006699;
		}
	#top h1 a:hover {color: #FF9900;}



html:lang(fr) #search input {font-size: 0px; width: 22px;}

    /*   bloc recherche */ 
#search {
position: absolute; 
top: 5px;
right: 5px; 
text-align: right; 
width: 250px;
height: 20px;
background: yellow;
}
    
#search input {
float: right;
background: red url(img/bgSearchBtn.png) no-repeat top left;
border: none; 
height: 20px;
}

#search input#q {
font-size: 1em;
width: 175px;
height: 20px;
background: blue url(img/bgSearch.png) no-repeat top left;
color: #ffffff;
} 


/* Le contenu
-------------------------------------------------------- */
.post {
		position: relative;
		line-height: 1.5em;
		margin: 0 0 1.5em 40px;
		padding: 0 20px 0 0;
	}
	.post .day-date {
		position: absolute; top: -2px; left: -45px;
		width: 40px; color: #494949;
		font-family: Helvetica, Arial, Geneva, sans-serif;
		margin: 0; padding: 0;
		}
	.post .day-date span {
		display: block; text-align: center; font-weight: bold;
		}
	.post .day-date .day {
		text-shadow: 2px 2px 2px #ccc;
		font-size: 2em; padding: 8px 0 0 0;
		}
	.post .day-date .month {}
	.post .post-info {
		font-size: 0.9em;
		color: #000;
		font-family: "HelveticaNeue-Light", Helvetica Neue Light, Helvetica, Arial, Geneva, sans-serif;
		margin: 0 0 0.3em 0; padding: 0 0 0 5px;
		line-height: 1.3em;
		}
		
	.post .post-chapo {
	padding-left : 5px;
	   }	
		
	.post .post-content {
	padding-left : 5px;
	   }
	.post .post-info a {
		color: #494949;
	   }
	.post h2.post-title  {
	   font-size: 1.8em;
	   color: #494949;
	   margin: 0 0 2px 0;
	   padding-left : 5px;
	   }
	.post .post-title a {
		text-decoration: none;
		color: #494949;
		}
	.post-info-co {
	background: transparent url(img/addcomment.gif) no-repeat 300px 51%;
	clear: both;
	font-size: 1em;
	text-align: right;
	margin-bottom: 3em;
	padding-bottom: 10px;
	margin-top: 3em;
	padding-top: 10px;
	border-top: 1px dotted #AAAAAA;
	border-bottom: 1px dotted #AAAAAA;
	margin: 20px;
}

.post-info-co span{
	display: none;
	}
	
.post-info-co a{
	padding-left: 12px;
}

/* Billet vu
****************************************************************/
.post-read {
	clear: both;
	font-size:: 1em;
	text-align: right;
	margin-bottom: 3em;
}	

.post .post-title a:hover {color: black}

/* *****************************************
	Contenu du billet
********************************************/
	.post a {color: #494949}
	.post a:visited {color: #a5cf05}
	.post-content h1 {font-size: 2.2em}
	.post-content h2 {font-size: 1.8em}
	.post-content h3 {font-size: 1.6em}
	.post-content h4 {font-size: 1.5em}
	.post-content h5 {font-size: 1.4em}
	.post-content h6 {font-size: 1.2em}
	.post-content p {line-height: 1.4em}
	.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6  {
		color: #494949; line-height: 1.3em;
		margin: 0 0 0.5em 0;
		clear: both;		/* Permet le retour &#65533; la ligne des titres apr&#65533;s une image*/
		}
	.post-content p, .post-content ul, .post-content ol, .post-content pre, .post-content address {margin: 0 0 1em 0}
	/* &#65533;lements de mise en forme des tag PRE et CODE ***** TEST ***** */
    .post-content abbr {cursor: help; color: #000}
    .post-content pre, .post-content code {
        border: 1px #ccc solid;
        padding: 5px;
        background-color: #494949;
        font-size: 1.2em;
        overflow: auto;
        }
	.post p img {
		float: left; display: block;
		padding: 0.5em;
		margin: 5px 15px 15px 0;
		background-color: #eee;
		border: 1px #ccc solid;
		}
    .form-help {
	    color:#B2B2B2; 
		font-size:9px; 
		margin:2px 0;
		}


#trackbacks h3, #comments h3{
	color: #ffffff;
	border: 1px solid #D2D2D2;
	background: #99c300;
	padding: 0px 2px 2px 5px;
	}
	
#trackbacks blockquote, #comments blockquote{
	border: 1px solid #D2D2D2;
	margin: 0;
	padding: 0 1em;
	background: #F5F5F5;
}

/* La barre de navigation
-------------------------------------------------------- */

#sidebar , #sidebar2 {
	color : gray;
	font-size: 0.9 em;
	line-height: 1.3em;
	}

	

#sidebar div, #sidebar2 div{
	margin: 10px 30px 0 0;
	padding-bottom: 10px;
	
}
#sidebar a, #sidebar2 a{
	color : gray;
	font-size: 0.9 em;
	line-height: 1.3em;	
	text-decoration: none;
	}

#sidebar a:hover, #sidebar2 a:hover{
	color : gray;
	
	text-decoration: underline;
	}
	
#sidebar a:acive, #sidebar2 a:active{
	color : gray;
	font-weight: bold;
	text-decoration: none;
	}
	
#sidebar div, #sidebar2 div{
	color: inherit;
}

#sidebar div ul,  #sidebar2 div ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar h2,  #sidebar2  h2, #sidebar h3, #sidebar2  h3{
	color: #ffffff;
	background: transparent url(img/bgSidebarTitles.gif) repeat-x bottom;
	text-align: left;
	text-transform:uppercase;
	padding: 2px 2px 2px 5px;
	border: 1px solid #bebebe;
		
}



#sidebar h3, #sidebar2  h3{
	border-top: 1px solid #D2D2D2;
	padding-top: 10px;
	font-size: 1.4em;
	text-align: left;
	margin-left: 15px;
}

#calendar table{
	width: 150px;
	margin: 0 auto;
	font-size: 0.8em;
}

#calendar caption{
	margin: 0 auto;
	background: #EEE;
	padding: 0.5em 0;
	color: #666;
}

#calendar abbr{
	border: none;
}

#calendar td{
	background: #F5F5F5;
	text-align: center;
}

#calendar td a{
	display: block;
	font-weight: bold;
	background: #E0E0E0 url(images/today.png) no-repeat right top;
	color: #933;
}


#statistiques {
	padding-top: 10px;
	}
	
#q{
	padding-left: 18px;
	background: #f5a406 url(img/q.png) no-repeat left;
} 

#sidebar div#calendar{
	/*border-top: 1px solid #F0F0F0;*/
}

#sidebar div#calendar table{
	font-size: 0.8em;
	text-align: left;
	margin: 0 auto;
	border-collapse: collapse;
}

#sidebar div#calendar table caption{
	margin: 0 auto;
}

#sidebar div#calendar table th{
	color: #AB2121;
	background: transparent;
}

#sidebar div#calendar table td{
	width: 14%;
	line-height: 1.5em;
	border: 1px solid #D2D2D2;
}

#sidebar div#calendar table td a{
	display: block;
	background: #AB2121;
	color: #ED8000;
	font-weight: bold;
	text-decoration: none;
}

#sidebar div#calendar table td a:hover{
	background: #ED8000;
	color: #AB2121;
}

#sidebar2 #lastComments {
	font-size: 0.8em;
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
	

	

	
/* Le pied de page
-------------------------------------------------------- */
#footer{background:#9ec80a; color:#FFF; font:normal 12px Arial,Helvetica,sans-serif; height:15px; padding:15px; text-align:center; clear: both;}
#footer a{color:#FFF; text-decoration:none;}

/* --- 
NAVIGATION HORIZONTALE
--- */	 

#menu{
background-color: #f3a305;
position: relative;
width: 100%;
height: 30px;
overflow: hidden;
}

#menu ul {
list-style-type : none;
}

#menu li {
width: 100px;
float: left;
border-bottom:1px solid #bebebe;	
color: #fff;
font-weight : bold;
font-size : 14px; 
text-align: left;	
height: 30px; 
line-height: 30px;
}

#menu li a {
display: block;
color: #fff;
text-decoration: none;
border-right: 0.8px solid #fff;
padding-left: 10px;	
}

#menu li a:hover {
text-decoration: underline;
color: #000;
border-right: 0.7px solid #fff;
background-color: yellow;	
}



.date { /* date */
    background:url('./img/date.png') no-repeat;
	width:47px;
	height:50px;
	color: white;
	text-align:center;
	position:absolute;
	left:-40px;
	top: -10px;
}

.date_day { /* jour */
	display: block;
	font-size: 1.9em;
	text-align: center;
	font-weight: bold;
	padding : 8px 0;
}

.date_month { /* mois */
	display: block;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
	margin: -9px;
	text-transform:uppercase;
	
}
</style>

	<body>
<div id="page">

<div id="top">
    <div id="logo">
	<a href="/dc/index.php"><img src="http://daleetstudios.free.fr/dc/themes/RedFluid_2D/img/logo.jpg" width="950" height="90" /></a>
    </div>

</div>

<div id="menu">
	<ul>	
		<li><a href="/dc/index.php">Accueil</a></li>
		<li><a href="/dc/index.php">Rss</a></li>
		<li><a href="/dc/index.php">Contact</a></li>
		<li><a href="/dc/index.php">Tags</a></li>
    </ul>
		
	<div id="search">
		<form action="/dc/index.php" method="get">
			<p class="field"><input type="submit" class="submit" value="Go !" /><input name="q" id="q" type="text" size="10" value="" accesskey="4" />	
			</p>	
		</form>
	</div>
	
</div>	
	
<div id="main">

	<div id="sidebar">
							
			
	<div id="syndicate">
		<h2>Abonnement RSS</h2>
		<ul>
		<li><a href="/dc/rss.php">fil rss</a></li>

		<li><a href="/dc/rss.php?type=co">fil rss commentaires</a></li>
		<li><a href="/dc/atom.php">fil atom</a></li>
		<li><a href="/dc/atom.php?type=co">fil atom commentaires</a></li>
		</ul>
		</div>
			
	<div id="links">
		<h2>Liens</h2>

		    	    </div>
	</div>
		

	<div id="sidebar2">
					
	<div id="calendar">
		<h2>Archives</h2>
		<table summary="Calendrier">
<caption>décembre 2006</caption><thead><tr><th scope="col"><abbr title="lundi">lun</abbr></th><th scope="col"><abbr title="mardi">mar</abbr></th><th scope="col"><abbr title="mercredi">mer</abbr></th><th scope="col"><abbr title="jeudi">jeu</abbr></th><th scope="col"><abbr title="vendredi">ven</abbr></th><th scope="col"><abbr title="samedi">sam</abbr></th><th scope="col"><abbr title="dimanche">dim</abbr></th></tr></thead>

<tbody><tr><td> </td><td> </td><td> </td><td> </td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td><a href="/dc/index.php?2006/12/11">11</a></td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td></tr>

<tr><td>18</td><td>19</td><td>20</td><td>21</td><td><a href="/dc/index.php?2006/12/22">22</a></td><td>23</td><td>24</td></tr>
<tr><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
</tbody>

</table>		</div>
			
	<div id="categories">
		<h2>Catégories</h2>
		<ul><li><a href="/dc/index.php?General">General</a></li></ul>		</div>
	</div>
		
	<div id="content">
								


<!-- Boucle sur la liste de billets -->
	<div class="post">
		        <small class="date">
        <span class="date_day">22</span>
        <span class="date_month">dec</span>
        </small>		
		<h2 id="p2" class="post-title"><a
		href="/dc/index.php?2006/12/22/2-la-feuille-de-style-fete-ses-10-ans">La feuille de style fete ses 10 ans</a></h2>
		<p class="post-info">Par Laurent,
		à 02:33		dans  <a href="/dc/index.php?General">General</a>

		</p>
		<div class="post-content" lang="fr">
			<img src="/dotclear/images/10yearscss.jpg" alt="CSS" /><br />
<br />
Le Consortium World Wide Web célébre cette année le dixième anniversaire du <a href="http://fr.wikipedia.org/wiki/CSS">CSS</a>.. Et oui... Il y a 10 ans, a Rocquencourt France, a été officialisé la naissance des feuille de style. Depuis il y a eu beaucoup d'évolutions...<p><a href="/dc/index.php?2006/12/22/2-la-feuille-de-style-fete-ses-10-ans" title="Lire La feuille de style fete ses 10 ans">Lire la suite</a></p>		</div>
		
		<p class="post-info-co"><a href="/dc/index.php?2006/12/22/2-la-feuille-de-style-fete-ses-10-ans#co"
		title="commentaires pour : La feuille de style fete ses 10 ans">aucun commentaire</a></p>
	</div>

	<div class="post">
		        <small class="date">
        <span class="date_day">11</span>
        <span class="date_month">dec</span>
        </small>		
		<h2 id="p1" class="post-title"><a
		href="/dc/index.php?2006/12/11/1-first-post">Premier billet</a></h2>
		<p class="post-info">Par Laurent,
		à 00:16		dans  <a href="/dc/index.php?General">General</a>

		</p>
		<div class="post-content" lang="fr">
			<img src="/dotclear/images/10yearscss.jpg" alt="CSS" /><br />
<br />
Le Consortium World Wide Web célébre cette année le dixième anniversaire du <a href="http://fr.wikipedia.org/wiki/CSS">CSS</a>.. Et oui... Il y a 10 ans, a Rocquencourt France, a été officialisé la naissance des feuille de style. Depuis il y a eu beaucoup d'évolutions...<p><a href="/dc/index.php?2006/12/11/1-first-post" title="Lire Premier billet">Lire la suite</a></p>		</div>
		
		<p class="post-info-co"><a href="/dc/index.php?2006/12/11/1-first-post#co"
		title="commentaires pour : Premier billet">un commentaire</a></p>
	</div>

					</div>
		

</div>		

<div id="footer"><p>© 2006 <a href="http://daleetstudios.free.fr/dotclear/" title="Le Blog Daleet Studios">E-Design</a> | Propulsé par <a href="http://www.dotclear.net/" title="Moteur de blog gratuit">DotClear</a> | <a onclick="new Effect.ScrollTo('top',{duration:3.0});;return false;" href="#">Haut de page</a> | <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr" title="Contenu sous licence creative commons" alt="creative commons" >Creative Commons</a></p>

</div>

</div> <!-- end #page -->
</body>
</html>
Bon,

Il va donc falloir faire un mélange des 2 css (j'ai fait sauter quelques id ...) et le code que j'ai posé en plus 

* {margin: 0; padding: 0;} /* pour éliminer les margins et paddings  par défaut de chaque classe

/* --- 
NAVIGATION HORIZONTALE  : j'ai éliminer ta class #nav-bar remplacé par #menu */	 

#menu{
background-color: #f3a305;
position: relative;/*  pour fixer la position absolute de ton bloc recherche*/
width: 100%;
height: 30px;
overflow: hidden;
}

#menu ul {  /*  Classique menu avec rollover */
list-style-type : none;
}

#menu li {
width: 100px;
float: left;
border-bottom:1px solid #bebebe;	
color: #fff;
font-weight : bold;
font-size : 14px; 
text-align: left;	
height: 30px; 
line-height: 30px;
}

#menu li a {
display: block;
color: #fff;
text-decoration: none;
border-right: 0.8px solid #fff;
padding-left: 10px;	
}

#menu li a:hover {
text-decoration: underline;
color: #000;
border-right: 0.7px solid #fff;
background-color: yellow;	
}

    /*   bloc recherche */ 
#search {
position: absolute; 
top: 5px;
right: 5px; 
text-align: right; 
width: 250px;
height: 20px;
background: yellow;
}
   
#search input {
float: right;
background: red url(img/bgSearchBtn.png) no-repeat top left;
border: none; 
height: 20px;
margin: 0;
padding: 0;
}

#search input#q {
font-size: 1em;
width: 175px;
height: 20px;
background: blue url(img/bgSearch.png) no-repeat top left;
color: #ffffff;
}


Chez moi, il n'y a pas de perturbation sur la mise en page, ce qui doit te gener c'est peut etre:
* {margin: 0; padding: 0;}


Bon courage
Faut que je remplace le code a parti d'ou ?

Parce qu'en fait j'ai fait le remplacment mais c'est toujours pas ca. La barre de recherche se retrouve tout en haut du top avec une autre couleur...

J'ai remis mon css par defaut en attendant une autre solution de ta part, merci quand meme pour l'aide Smiley cligne
Modifié par TGM (24 Dec 2006 - 02:09)
Sujet clos
Aller à