Alignement de texte sur blog ... probleme

Alignement de texte sur blog ... probleme - HTML/CSS - Programmation

Marsh Posté le 05-08-2005 à 02:26:20    

Voila j'essaie de modifier un peu le design et le positionnement de mon blog hors j'ai un petit prob ... je voudrais que le texte présenter sur le header soit aligné a gauche avec qq pixels en bordure.
 
j'ai donc :
 

#blog-header {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", "Trebuchet MS";
  background: #e0e0e0 url(http://www.jeuxpo.com/blog/top_div.gif) no-repeat top left;
  }
 
#blog-header h1 {
  margin: 0;
  padding: 45px 60px 50px 160px;
  font-size: 200%;
  color: #fff;
  text-shadow: #81A75B 2px 2px 2px;
  background: url(http://www.jeuxpo.com/blog/top_h1.gif) no-repeat bottom left;
  }
 
#blog-header h1 a {
  text-decoration: none;
  color: #fff;
  }
 
#blog-header h1 a:hover {
  color: #eee;
  }


 
j'ai essayer de placer un texte align sans succès alors je me demandais quoi modifier pour changer l'alignement ou le positionnement du texte (quand je change le #fff dans  
#blog-header h1 le couleur du texte que je veux bouger change.
 
Merci

Reply

Marsh Posté le 05-08-2005 à 02:26:20   

Reply

Marsh Posté le 05-08-2005 à 08:23:39    

faudrait voir lecode HTML Pour savoir quel texte tu veux placer
mais sinon la commande est : text-align:left
et si ca se trouve ton texte il est peut etre placé dans l'élément à cause du padding, file ton code HTML on verra tisuite

Reply

Marsh Posté le 05-08-2005 à 14:33:26    

mon code html de toute la page ?

Reply

Marsh Posté le 05-08-2005 à 14:34:29    

ben cleui du header

Reply

Marsh Posté le 05-08-2005 à 14:45:06    

top_div.gif étant l'image sur laquelle se trouve le texte
 

/* ---( header and site name )--- */
 
#blog-header {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", "Trebuchet MS";
  background: #e0e0e0 url(http://www.jeuxpo.com/blog/top_div.gif) no-repeat top left;
  }
 
#blog-header h1 {
  margin: 0;
  padding: 45px 60px 50px 160px;
  font-size: 200%;
  color: #fff;
  text-shadow: #81A75B 2px 2px 2px;
  background: url(http://www.jeuxpo.com/blog/top_h1.gif) no-repeat bottom left;
  }
 
#blog-header h1 a {
  text-decoration: none;
  color: #fff;
  }
 
#blog-header h1 a:hover {
  color: #eee;
  }

Reply

Marsh Posté le 05-08-2005 à 14:56:51    

ça c'est le CODE CSS,
 
je veux le code HTML associé

Reply

Marsh Posté le 05-08-2005 à 15:20:56    

oui mais c'est un blog pas une page perso donc a part ce genre la j'ai rien d'autre sous la main

Reply

Marsh Posté le 05-08-2005 à 15:26:57    

lol...
 
Clic droit, code source, man... ;)
 
:lol:

Reply

Marsh Posté le 05-08-2005 à 15:28:42    

si tu veux la page
 
http://gagency.blogspot.com/
 
je parle du texte en blanc que je voudrais repousser a gauche

Reply

Marsh Posté le 05-08-2005 à 15:39:31    

#blog-header h1 {
  margin: 0;
  padding: 45px 60px 50px 50px;
  font-size: 200%;
  color: #fff;
  text-shadow: #81A75B 2px 2px 2px;
  background: url(http://www.jeuxpo.com/blog/top_h1.gif) no-repeat bottom left;
  }
 
c'est ce qu'il y a en gras qu'il faut changer. ca correspond au padding left:
mais bizarre cette facon de mettre en page. lol.
m'enfin tu as la réponse, le text est placé grâce au padding

Reply

Marsh Posté le 05-08-2005 à 15:39:31   

Reply

Marsh Posté le 05-08-2005 à 15:40:45    

je croi t'es pas sur le bon genre de forum ........;;
sinon ca c l'html de ta page:
/style>
 
 
<!-- --><style type="text/css">@import url(http://www.blogger.com/css/navbar/main.css);
@import url(http://www.blogger.com/css/navbar/1.css);
</style>
 
</head>
 
<body><!-- --><div id="b-navbar"><a href="http://www.blogger.com/" id="b-logo" title="Go to Blogger.com"><img src="http://www.blogger.com/img/navbar/1/logobar.gif" alt="Blogger" width="80" height="24" /></a><form id="b-search" action="http://www.google.com/search"><div id="b-more"><a href="http://www.blogger.com/" id="b-getorpost"><img src="http://www.blogger.com/img/navbar/1/btn_getblog.gif" alt="Get your own blog" width="112" height="15" /></a><a href="http://www.blogger.com/redirect/next_blog.pyra?navBar=true" id="b-next"><img src="http://www.blogger.com/img/navbar/1/btn_nextblog.gif" alt="Next blog" width="72" height="15" /></a></div><div id="b-this"><input type="text" id="b-query" name="q" /><input type="hidden" name="ie" value="UTF-8" /><input type="hidden" name="sitesearch" value="gagency.blogspot.com" /><input type="image" src="http://www.blogger.com/img/navbar/1/btn_search.gif" alt="Search" value="Search" id="b-searchbtn" title="Search this blog with Google" /><a href="javascript:BlogThis();" id="b-blogthis">BlogThis!</a></div></form></div><script type="text/javascript"><!--
 
function BlogThis() {Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) { Q=y.getSelection();} else if (x.getSelection) { Q=x.getSelection();}popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&u=' + escape(location.href) + '&n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475,height=300,top=175,left=75,status=yes,resizable=yes');void(0);}
 
 --></script><div id="space-for-ie"></div>
 
<div id="wrap"> <!-- #wrap - for centering -->
 
<!-- Blog Header -->
<div id="blog-header">
  <h1>
     
 Gaming Agency
 
  </h1>
</div>
 
 
<div id="content"> <!-- #content wrapper -->
 
<!-- Begin #main-content -->
<div id="main-content">
 
 
   

Reply

Marsh Posté le 05-08-2005 à 15:40:59    

enfin le debut...

Reply

Marsh Posté le 05-08-2005 à 15:44:02    

gatsusat a écrit :

#blog-header h1 {
  margin: 0;
  padding: 45px 60px 50px 50px;
  font-size: 200%;
  color: #fff;
  text-shadow: #81A75B 2px 2px 2px;
  background: url(http://www.jeuxpo.com/blog/top_h1.gif) no-repeat bottom left;
  }
 
c'est ce qu'il y a en gras qu'il faut changer. ca correspond au padding left:
mais bizarre cette facon de mettre en page. lol.
m'enfin tu as la réponse, le text est placé grâce au padding


merci beaucoup et si je voudrais remonter le texte par exemple ? lequel serais ce

Reply

Marsh Posté le 05-08-2005 à 15:56:55    

padding: 45px 60px 50px 50px;  
 
normalement ca se découpe en 4 truc le padding :  
padding-top : 45px;
padding-right: 60px;
padding-bottom: 50px;
padding-left: 50px;
 
et on peut tout condenser en  
padding: Top  Right  Bottom  Left
ca fait haut droite bas gauche
 
à toi maintenant de deviner quelle valeur tu dois modifier

Reply

Marsh Posté le 05-08-2005 à 16:13:53    

thx :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed