✔ Probleme mit dem Banner

A1eX · 19. August 2008

Hallo erstma,
ich habe ein Problem mit meiner Seite und zwar ist mein Banner jetzt links ausgerichtet und wenn jemand einen größeren Bildschrim hat, wird der gleiche Banner rangehängt sodass zwei Banner einananderhängen. Um das zu vermeiden, will ich das ein einziger Banner in der Mitte steht, aber irgendwie bekomm ich das nicht hin und deshalb wollte ich hier mal Nachfragen, ob mir hier jemand helfen kann..

Code:

<head>
    
   
    <b:skin><![CDATA[/*

/* **************************
Name: Blogy-Curved
Blogger by: http://Blogandweb.com
Designer: 
Date: Ago 07
***************************** 

*//* Definición de variables
   ====================
   
   -- (Colores) --
   
   <Variable name="textocolor" description="Color general del texto"
             type="color" default="#333333" value="#333333">
   <Variable name="enlacecolor" description="Color de los enlaces (links)"
             type="color" default="#006699" value="#006699">
   <Variable name="colorenlaceencima" description="Color del link al pasar el mouse"
             type="color" default="#56bdea" value="#56bdea">
   <Variable name="colortituloblog" description="Color del título del blog"
             type="color" default="#C0DF72" value="#a6e5f4">
   <Variable name="descripcioncolor" description="Color de la descripción del blog"
             type="color" default="#a6e5f4" value="#a6e5f4">
   <Variable name="colortituloentrada" description="Color del título de las entradas"
             type="color" default="#006699" value="#006699">
   <Variable name="colorfecha" description="Color de fecha"
             type="color" default="#9ec13f" value="#006699">
   <Variable name="colortituloslateral" description="Color de los titulos en la barra lateral"
             type="color" default="#006699" value="#006699">
   <Variable name="colortextolateral" description="Color del texto en la barra lateral"
             type="color" default="#000" value="#000000">

*/

#outer-wrapper {
}

#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
}

/*-- (Generales) --*/

body {
	font: 80%/150% "Trebuchet MS", Tahoma, Arial;
	color: $textocolor;
	background: #fff;
	margin: 0px;
	padding: 0px;
}
a {
	color: $enlacecolor;
	text-decoration: none;
}
a:visited {
	color: #006699;
	text-decoration: none;
}

a:hover {
	color: $colorenlaceencima;
}
img {
	border: none;
}
p {
	padding: 0px 0px 15px;
	margin: 0px;
}
h1 {
	margin: 0px;
	font: lighter 2.4em/1.2em "trebuchet MS", "Lucida Sans Unicode", Georgia;
	color: #FFFFFF;
}
h1 a, h1 a:visited{
	color: #FFFFFF;
	text-decoration: none;
}
h1 a:hover{
	color: #FFFFFF;
	text-decoration: none;
	border: none;
	background: none;
}
h2 {
	color: #006699;
	margin: 0px 0px 2px;
	width: 100%;
	font: lighter 1.5em/1em "trebuchet MS", "Lucida Sans Unicode", Georgia;
	padding-bottom: 3px;
}
h2 a, h2 a:visited {
	color: #006699;
	text-decoration: none;
}
h2 a:hover {
	color: #56bdea;
	text-decoration: none;
}
h3 {
	font: bold 125%/100% "Trebuchet MS", Tahoma, Arial;
	color: #56bdea;
	margin: 10px 0px 5px;
}
h4 {
	font: normal 130%/100% "Trebuchet MS", Tahoma, Arial;
	color: #758d38;
	margin: 10px 0px 5px;
}
form {
	margin:0px;
	padding:0px;
}

#main-wrapper {overflow:hidden;} 
.clear {clear:both;}
#blog-pager-newer-link {float: left;} 
#blog-pager-older-link {float: right;} 
#blog-pager {text-align: center; }

/*-- (Cabecera) --*/

#header-wrapper {
	background: url(http://img352.imageshack.us/img352/2339/bannerheimkinokopiemn8.png) ;
	height: 126px;
	position: center;
	color: ;
}

#headerimg {
	position: center;
	padding: 10px 0px 0px 10px;
	margin: 0px au;
	width: 960px;
}

#header-wrapper h1 {
	color: #000000;
	line-height: 40px;
	padding-right: 10px;
	margin-right: 10px;
	float:left;
	border-right: ;
}

#header-wrapper h1 a, #header-wrapper h1 a:visited{
	display: block;
	color: $colortituloblog;
	}

#header-wrapper h1 a:hover{
	color: #a6e5f4;
}

#header-wrapper p {
	float:left;
	margin-top:15px;
	color: $descripcioncolor;
	font: 14px Georgia, "Times New Roman", Times, serif;
}

#header-wrapper a {
}

#search {
	float: right;
	position:relative;
	background: url(http://img48.imageshack.us/img48/796/unbenannt1lz6.png) no-repeat;
	width: 220px;
	height: 100px;
	margin-right: 5px;
	text-align: center;
	top: -8px;
	clear:right;
}
#searchform {
	margin: 65px 0 0;
}
#searchform br {
	display: none;
}
#searchform #s {
	width: 150px;
	height: 20px;
	padding: 3px 5px 0px 5px;
	border: 1px solid #2bbbdc;
	background: #fff;
	margin-right: 2px;
	color: #000000;
	font-weight: normal;
}
/* search form button - to specify button only use input[type="submit"] */
#searchform input {
	background: none;
	border: none;
	height: 25px;
	width:27px;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #FFF;
	background:url(http://bp3.blogger.com/_Zuzii37VUO4/RrlygqYSVZI/AAAAAAAACC8/DLc0YbGEqsM/s1600/search_button_arrow.png);
	vertical-align: middle;
}

/*-- (Menú) --*/

#navi {
	position:relative;
	height: 26px;
	width: 960px;
	margin: 0px auto;
	top: 19px;
	text-align: center;
	line-height: normal;
}
#nav {
	list-style: none;
	margin: 0 3px;
	padding: 0px;
	float: left;
	clear:both;
}
#nav li {
	float: left;
	height: 26px;
	background: url(http://bp1.blogger.com/_Zuzii37VUO4/RrlyRKYSVVI/AAAAAAAACCc/Fm9bb8O3V6E/s1600/navtabr.gif) top right no-repeat;
	margin: 0 3px;
	white-space: nowrap;
}
#nav .page_item a{
	color: #13475f;
	display: block;
	background: url(http://img404.imageshack.us/img404/6217/navtablse0.gif) top left no-repeat;
	text-decoration: none;
	padding: 0px 10px 0px 10px;
	font: bold 12px Arial, Helvetica, sans-serif;
	line-height: 26px;
}
#nav li:hover {
	background-position: 100% -36px;
}
#nav .page_item a:hover {
	background-position: 0px -36px;
	border: none;
}

#nav li.current_page_item {
	color: #13475f;
	text-decoration: none;
	background: url(http://bp0.blogger.com/_Zuzii37VUO4/RrlyQ6YSVSI/AAAAAAAACCE/djynOO1zj2I/s1600/navtabactiver.gif) top right no-repeat;
}
#nav .current_page_item a, #nav .current_page_item a:visited{
	color: #13475f;
	text-decoration: none;
	background: url(http://bp0.blogger.com/_Zuzii37VUO4/RrlyQ6YSVRI/AAAAAAAACB8/F1AdFIotVvQ/s1600/navtabactivel.gif) top left no-repeat;
}

/*-- (Contenedor) --*/

#content-wrapper {
	background: #e0f4f9;
}

#page {
	margin: 0px auto;
	width: 960px;
	background: #fff;
	border-top: 2px solid #b9e8f4;
}

/*-- (Principal) --*/

#main-wrapper {
	padding: 10px 0px 30px 13px;
	float: left;
	width: 720px;
	overflow: hidden;
}

#main-wrapper img {
	border: 1px solid #D3EAF3;
	padding: 5px;
}

#main-wrapper a {
}

#main-wrapper a:hover {
}

.post {
	clear:both;
	padding-top: 15px;
}

.titulo {
background:url(http://bp2.blogger.com/_Zuzii37VUO4/RrlxraYSVDI/AAAAAAAACAM/rxJaUh18ddQ/s1600/crv_btm.gif) no-repeat bottom;
	padding-bottom:7px;
	width: 712px;
	display: table;
}

.titulotop {
background:url(http://bp2.blogger.com/_Zuzii37VUO4/RrlxraYSVEI/AAAAAAAACAU/M0kKdBK9VDA/s1600/crv_top.gif) no-repeat top;
	padding: 9px 0 10px 0;
	width: 712px;
	display: table;
	}

.titulo .nivel2{
	width: 680px;
	margin: 0 auto !important;
}

.titulo .post {
clear:none;
padding-top:0px;
}

.post-title, .post-title a {
	width: 680px;
	margin: 0 auto !important;
        color: $colortituloentrada;
}

.post-body {
padding-top:10px;
}

.post-body blockquote {
	background: #f2f8fb;
	border-right: 2px solid #dbeff6; 
	border-bottom: 2px solid #dbeff6; 
	padding: 8px;
}

.date-header {
	float: right;
	background:  no-repeat left center;
	color:$colorfecha;
	font:bold 11px "trebuchet MS", "Lucida Sans Unicode", Georgia;
	padding-left: 38px;	
}

.post-footer {
	padding: 0px 15px;
	height: 15px;
	color: #3e98ad;
	font: bold 12px "Trebuchet MS", "Tahoma", sans-serif;
}

.post-labels {
	background: url(http://bp3.blogger.com/_Zuzii37VUO4/RrlygqYSVXI/AAAAAAAACCs/bQgwyvPWgGQ/s1600/page.gif) no-repeat left center;
	padding-left: 20px;
	float: left;
}

.post-author {
	background:  no-repeat left center;
	padding-left: 0px;
        clear:both;
	margin: 0px 0 0px 0px;
	font: 0px "Trebuchet MS", "Tahoma", sans-serif;
}

.comment-link {
	background: url(http://img115.imageshack.us/img115/9202/minicommentsyh3.gif) no-repeat left center;
	padding-left: 20px;
	float: right;
}

#blog-pager {
	clear: both;
	padding: 10px 0px;
}

#blog-pager a, #blog-pager a:visited {

	color: #59770e;
}

.blog-pager-older-link {
	padding-right: 18px;
	background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rrlx_6YSVOI/AAAAAAAACBk/h2lAqZKpWN8/s1600/mini-nav-right.gif) no-repeat right center;
}

.blog-pager-newer-link {
	padding-left: 18px;
	background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rrlx_6YSVNI/AAAAAAAACBc/atJ9kzx0aqc/s1600/mini-nav-left.gif) no-repeat left center;
}

/*-- (Lateral) --*/

#sidebar-wrapper {
	float: right;
	padding: 20px 10px 20px 0px;
	width: 200px;
	color: #666666;
	overflow: hidden;
}


#sidebar-wrapper ul{
	padding: 0;
	margin: 0 0 20px 0!important;
}

#sidebar-wrapper li{
        list-style: none;
	background: url(http://bp3.blogger.com/_Zuzii37VUO4/Rrlx_qYSVMI/AAAAAAAACBU/e0dv85l4m10/s1600/mini-monthly-archive.gif) no-repeat left center !important;
	padding: 2px 0 2px 20px !important;
}

#sidebar-wrapper #Label1 ul li  {
        list-style: none;
	background: url(http://bp1.blogger.com/_Zuzii37VUO4/Rrlx1KYSVKI/AAAAAAAACBE/tVT0TmT_BOU/s1600/mini-category.gif) no-repeat left center !important;
	padding-left: 20px;
}

#sidebar-wrapper h2 {
	font: lighter 1.3em/1em "trebuchet MS", "Lucida Sans Unicode", Georgia;
	color: $colortituloslateral;
	border-bottom: 1px dotted #1888B8;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

#sidebar a:hover{
	border: none;
}
#sidebar a, #sidebar a:visited{
	color: $colortextolateral;
	text-decoration: none;
}
#sidebar li a:hover{
	color: #1888B8;
	text-decoration: none;
}

.sidebar .widget {
	margin: 5px 0;
	padding: 0;
	border: none;
}


#sidebar-wrapper #BlogArchive1 li {
background:none !important;
}

/*-- (Pie de página) --*/

#footer-wrapper {
	clear: both;
	background:#132f3c url(http://img165.imageshack.us/img165/2948/footerbguo2.gif) repeat-x;
	border-top: 1px solid #7FD4F4;
	height: 50px;
}

#footer {
	width: 960px;
	margin: 0px auto;
	color: #56bdea;
}
#footer a, #footer a:visited {
	color: #56bdea;
}
	
#footer a:hover {
	color: #ffffff !important;
}

#footer-wrapper .links {
	margin: 0px auto;
	width: 950px;
	color: #56bdea;
	line-height: 50px;
	font-size: 100%;
}

#footer-wrapper p {
padding:0;
}

#footer-wrapper .links a, 
#footer-wrapper .links a:visited {
	color: #56bdea;
}


/*-- (Comentarios) --*/

#comments h4 {
	border-bottom: 1px dotted #4395BC;
	clear: both;
        padding:10px 0px;
}

#comments dl {
	margin:0; padding:0;
	line-height: 130%;
	width: 715px;
}

.comment-author, .comment-author a, .comment-author a:visited {
	font-weight: bold;
	font-style: normal;
	font-size: 120%;
        padding-bottom:10px;
}

.comment-body {
margin:0px;
padding:5px 0px;
}

.comment-footer {
	margin-bottom: 5px;
	display: block;
	font-size: 87%;
}

]]></b:skin>
</head>

  <body>
  <div id='outer-wrapper'><div id='wrap2'>

    <!-- links para navegadores de texto -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>ir a principal </a> |
      <a href='#sidebar'>Ir a lateral</a>
    </span>

<!-- (Cabecera) -->
    <div id='header-wrapper'><div id='headerimg'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='. (Header)' type='Header'/>
</b:section>

<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value=''/>
</div>
</form>
</div>

</div>

<div id='navi'>
<ul id='nav'>
	
	
</ul>
</div>
    </div>

<!-- (Contenedor) -->	
    <div id='content-wrapper'><div id='page'><div id='fake'>

<!-- (Principal) -->
      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog-Posts' type='Blog'/>
</b:section>
</div>

<!-- (Lateral) -->
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='Feed1' locked='false' title='Blog and Web' type='Feed'/>
<b:widget id='Label1' locked='false' title='Kategorien' type='Label'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Archiv' type='BlogArchive'/>
</b:section>
      </div>

<div class='clear'/><!-- Limpiar flotación-->


</div></div></div> <!-- fin de capa content-wrapper -->

<!-- (Pie de página) -->
    <div id='footer-wrapper'>

  <p class='center'>  Copyright Heimkino
<center><script src='http://www.ipcounter.de/count_js.php?u=54531574&amp;color=blue' type='text/javascript'/>
<noscript><a href='http://www.ipcounter.de/stats.php?u=54531574' target='_blank'><img alt='IPCOUNTER.DE - Kostenloser Live Counter!' border='0' src='http://www.ipcounter.de/count.php?u=54531574&amp;color=blue'/></a></noscript></center>
   </p>

    </div>

  </div></div> <!-- fin de capa outer-wrapper -->
</body>
</html>

Maik · 19. August 2008

Hi,

ich bin mir jetzt nicht ganz sicher, wo sich der "Banner" in dem Quellcode versteckt hält, denn etwas gleichnamiges (ID-Bezeichner, Name der Grafikdatei, o.ä.), das auf ihn deuten lässt, konnte ich beim ersten Überfliegen nicht entdecken, daher tippe ich jetzt einfach mal auf #header-wrapper

Wie auch immer, deiner Umschreibung zufolge dürften dir die CSS-Eigenschaften background-repeat und background-position behilflich sein, um die Wiederholung des Hintergrundbildes abzustellen, und es, wie gewünscht, in seinem Anzeigebereich zu positionieren.

mfg Maik

A1eX · 19. August 2008

Ja es ist #header-wrapper und das mit dem no-repeat hat wunderbar funktioniert. Danke
Aber das mit der Position geht immer noch nicht, egal ob ich right, left oder bottom mach ist immer oben links.

A1eX · 19. August 2008

A1eX hat gesagt.:
Ja es ist #header-wrapper und das mit dem no-repeat hat wunderbar funktioniert. Danke
Aber das mit der Position geht immer noch nicht, egal ob ich right, left oder bottom mach ist immer oben links.

Hab es eben gerade herausgefunden und funktioniert jetzt. Danke nochmal für die Hilfe.

Maik · 19. August 2008

Dann ist dir wohl irgendwo ein Fehler unterlaufen, denn bei mir funktioniert die horizontale Zentrierung des Hintergrundbildes erwartungsgemäß einwandfrei:

Code:

background: url(http://img352.imageshack.us/img352/2339/bannerheimkinokopiemn8.png) no-repeat center;

mfg Maik

A1eX · 19. August 2008

Jo jetzt funktioniert alles. Vielen Dank

✔ Probleme mit dem Banner

A1eX

Grünschnabel

Maik

A1eX

Grünschnabel

A1eX

Grünschnabel

Maik

A1eX

Grünschnabel

Neue Beiträge