Precision en CSS

Question

cyber-junkie

28 Feb 2014 à 22:56

Salut tout le monde,

Bon j'essayais de coder mon nouveau site, j'ai eu qulques lessons en CSS mais j'ai du mal quant a la pratique, voici le site :

http://parapyramide.com/test/site.html

et voici la partie CSS:


nav {
height:46px;
width:100%;
background-color:red;
margin:0;

}

#nav_container {  /* inside the nav */ 
height:46px;
width:1000px;
background-color:red;
margin:0 auto;
}

#logo {
height:46px;
width:160px;
margin:0;
padding:0;
border-right:1px solid black;
display:inline-block;
}

#search {
height:46px;
width:48px;
margin:0;
padding:0;
border-right:1px solid black;
display:inline-block;
}


#menu {
height:46px;
width:48px;
margin:0;
padding:0;
border-right:1px solid black;
display:inline-block;
}

/* then the categories links are made in a list */

nav ul {

list-style-type: none;



}

nav li
{
    display: inline-block;
}

nav a  {

	text-decoration:none;
	color:red;

}
#cat {
	height:35px;
	width:50px;
	margin-right:5px;
	padding:auto;
	color: red;
	font: gautami bold;
	font-size:10px;
	border:1px solid black;
	background: white;
}

#gif {

height:33px;
width:73px;
margin-left:2px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:2px solid white;

padding:3px;
color: red;
font: gautami bold;
font-size:10px;
border:1px solid black;	
background: blue;

}





/* And then comes the body */
#page {
width:1000px;
margin: 150px auto;
border:1px solid black;

}
section {
width:1000px;
border:1px solid black;
}

article {
width:940px;
text-align:center;
margin:50px auto;
border:1px solid black;
}

article h1 {
font-size:20px;
text-align:left;
padding:10px;
}

article p {
font-size : 12px; 
}

#publication-side {
width:284px;
height:330px; 
display: inline-block;
border:1px solid black;

}

#publication-center {

width:284px;
height:330px; 
display: inline-block;
border:1px solid black;
margin: 0 32px 0 32px;

}

#pic_publication{
width:284px;
height:196px;
}

#desc_pic_publication {
height:30px;
width:260px;
background-color:red;
margin:159px auto 7px auto;
}

#text_publication {
width:284px;
height:94px;
text-align:center;
margin-top:40px;
}

cyber-junkie

28 Feb 2014 à 22:58

le site dois ressembler a ca en verité :

jprivet_dev

1 Mar 2014 à 13:13

Bonjour cyber-junkie,

Merci d'avoir donné accès à vos sources, mais quelle est votre question exactement ?
Modifié par Guiwint (01 Mar 2014 - 14:01)

cyber-junkie

2 Mar 2014 à 00:07

Bon merci d'avoir enfin repondu

J'ai un petit souci avec les marges, le probleme c'est que j'ai des publications, mais quand le texte de la publication est long, alors l'image monte, enfait l'image a une marge avec le derniere ligne du texte et moi je veux qu'elle ait une marge exacte entre elle et la premiere ligne du texte, si vous voyez ce que je veux dire ..

voici ma page :

http://parapyramide.com/test/site.html

et voici mon CSS :


@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: local("Montserrat-Bold"), url("http://themes.googleusercontent.com/static/fonts/montserrat/v4/IQHow_FEYlDC4Gzy_m8fcgFhaRv2pGgT5Kf0An0s4MM.woff") format("woff");
}


@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  src: local("Permanent Marker"), local("PermanentMarker"), url("http://themes.googleusercontent.com/static/fonts/permanentmarker/v3/9vYsg5VgPHKK8SXYbf3sMupm9E4gBdgiUiSJePew_SQ.woff") format("woff");
}

@font-face {
  font-family: "Roboto regular";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Regular"), local("Roboto-Regular"), url("http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff") format("woff");
}

@font-face {
  font-family: "Roboto bold";
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"), local("Roboto-Bold"), url("http://themes.googleusercontent.com/static/fonts/roboto/v10/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}







*{
	margin:0px;
	padding:0px;
}
a{
	text-decoration:none
}
nav {
height:46px;
width:100%;
background-color:#ff814e;
margin:0;
}

#nav_container {  /* inside the nav */ 
height:46px;
width:1000px;
background-color:#ff814e;
margin:0 auto;
padding:0;
}

#logo {
height:22px;
width:160px;
margin:0;
padding:12px;
font-family: "Montserrat";
border-right:1px solid #ff5d3d;
display:inline-block;
color:white;
background-color:#ff814e;
text-align:center;
}

#logo:hover {
height:22px;
width:160px;
margin:0;
padding:12px;
font-family: "Montserrat";
border-right:1px solid #ff5d3d;
display:inline-block;
color:white;
background-color:#ff5d3d ;
text-align:center;
}

#search {
height:30px;
width:48px;
margin:0;
padding:8px;
border-right:1px solid black;
display:inline-block;
color:black;
background-color:gray;
text-align:center;
}


#menu {
height:30px;
width:48px;
margin:0;
padding:8px;
border-right:1px solid black;
display:inline-block;
color:black;
background-color:gray;
text-align:center;
}

/* then the categories links are made in a list */

nav ul {

list-style-type: none;
margin:0;


}

nav li
{
    display: inline-block;
	
}

nav a  {

	text-decoration:none;
	

}

#cat_first {
	margin-left:205px;
	margin-right:7px;
	height:19px;
	width:50px;
	
	
	color: #ff814e;
	
	
	border:1px solid white;
	background: white;
	
	list-style:none;
	
	
	display: inline;
	padding:8px;
	
	font-family: "Montserrat";
	font-weight:bold;
	font-size:14px;
	border-radius:3px;
	background:#ffffff;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	
}

#cat_first:hover {
	margin-left:205px;
	margin-right:7px;
	height:19px;
	width:50px;
	
	
	color: white;
	
	
	border:1px solid white;
	background: white;
	
	list-style:none;
	
	
	display: inline;
	padding:8px;
	
	font-family: "Montserrat";
	font-weight:bold;
	font-size:14px;
	border-radius:3px;
	background:#ff5d3d ;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	
}
#cat {
	height:19px;
	width:62px;
	margin-right:7px;
	
	
	color: #ff814e;
	
	
	border:1px solid white;
	background: white;
	
	list-style:none;
	
	
	display: inline;
	padding:8px;
	
	font-family: "Montserrat";
	font-size:14px;
	border-radius:3px;
	background:#ffffff;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

#cat:hover {
	
	margin-right:7px;
	height:19px;
	width:50px;
	
	
	color: white;
	
	
	border:1px solid white;
	background: white;
	
	list-style:none;
	
	
	display: inline;
	padding:8px;
	
	font-family: "Montserrat";
	font-weight:bold;
	font-size:14px;
	border-radius:3px;
	background:#ff5d3d ;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	
}

#gif {

	height:10px;
	width:73px;
	margin:2px;
	
	color: white;
	
	
	border:2px solid white;
	
	
	list-style:none;
	
	
	display: inline;
	padding-top:5px;
	padding-left:10px;
	padding-bottom:5px;
	padding-right:10px;
	
	font-family: "Montserrat";
	
	font-size:12px;
	border-radius:3px;
	background:#0c2b51;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;

}

#gif:hover {

	height:10px;
	width:73px;
	margin:2px;
	
	color: #0c2b51;
	
	
	border:2px solid #0c2b51;
	
	
	list-style:none;
	
	
	display: inline;
	padding-top:5px;
	padding-left:10px;
	padding-bottom:5px;
	padding-right:10px;
	
	font-family: "Montserrat";
	
	font-size:12px;
	border-radius:3px;
	background: white;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;

}

#categories {

display:inline-block;
margin-top:12px;

}




/* And then comes the body */
#page {
width:1000px;
margin: 150px auto;
border-top:1px solid blue;
border-left:1px solid blue;
border-right:1px solid blue;
background: gray;

}
section {
width:1000px;

}

article {
width:940px;
text-align:center;
margin:50px auto;

}

article h1 {
font-family:"Roboto regular";
font-size:28px;
text-align:left;
padding:15px;
}

article p {
font-size : 14px; 
padding:10px auto;
}



#publication {

width:284px;
height:330px; 
display: inline-block;

margin: 20px 10px 0px 10px;

}

#pic_publication{
width:284px;
height:196px;
display:inline-block;
}

#desc_pic_publication {
	height:30px;
	width:284px;
	padding:2px;
	margin:-5px auto;
	background:#ff814e;
	color:white;
	font-family: "Roboto bold";
	display:inline-block;
	font-size:20px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

#text_publication {
width:284px;
height:94px;

font-family: "Roboto regular";
font-size:18px;
margin-top:40px;
display:inline-block;
}

.cont_text_publication {


font-family: "Roboto regular";
font-size:18px;
margin-top:40px;
display:inline-block;

}

jprivet_dev

6 Mar 2014 à 14:09

Bonjour cyber-junkie,

C'est dommage je ne peux voir votre code en ligne.
Je rencontre une erreur 404 sur votre page http://parapyramide.com/test/site.html

A plus tard...

Sujet clos

CSS et mise en forme, CSS3

Precision en CSS