Header Anpassungs Problem

[schmatz]

Hallo zusammen.

Hoffe mir kann jemand helfen. In meinem Forum: http://www.new-trailers.de/ habe Ich ein kleines Header Problem. Bei normalen Auflösungen (1024x768 oder 1280x1024) vom Bildschin haut der Header hin. Ist die Auflösung aber höher auf einem Laptop z.b. 1366x..... dann sieht das ganze so aus: http://i.imgur.com/eSopt.jpg.
Sprich, das Forum ist Breiter als die Headergrafik. Keine Ahnung woran es liegen könnte. Falls mir jemand dazu einen Tip geben könnte, sag Ich schon mal Danke.

[schmatz]

Würde es ggf. helfen wenn Ich die Stylesheet.css mal mit Poste??

[Talk19zehn]

Hello schmatz,
die betreffenden CSS-Notationen zu posten wäre sicherlich ratsam. An das Style komme ich nämlich nicht heran, da der Link zum Style bei mir ins Leere läuft.

Ich habe dem QT mittels Firebug entnehmen können und ist nur als ein Anhaltspunkt gedacht:

Code: Alles auswählen

#logo {
    background: url("./images/logo.gif") repeat scroll center transparent;
    height: 199px;
    margin: 0;
    padding: 0;
    width: 980px;
}

und habe das Folgende probiert:

Code: Alles auswählen

#logo {
    background: url("./images/logo.gif") no-repeat scroll center top transparent;
    height: 199px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Und in der ID hdr habe ich die 100% demarkiert.

Nun ist das Logo zentriert. Nur, es ist mit 980px für eine 1024er-Breite leider zu breit bemessen.
Taste dich an die Höhe und Breite der Grafik einfach heran, lege ggf. den Schriftzug im Bild nach links.

Edit:
[ externes Bild ]
Viele Grüße

[schmatz]

OK, hier ist erstmal die css. Vielleicht hilft das auf anhieb weiter:

Code: Alles auswählen

/*  phpBB 3.0 Style Sheet
    --------------------------------------------------------------
	Style name:	nual_x
	Based on style:	subSilver (the default phpBB 2 style)
	Original author:	subBlue ( http://www.subBlue.com/ )
	Modified by:	eXtremepixels ( http://www.extremepixels.com )
	
	This is an alternative style for phpBB3 for those wishing to stay with
	the familiar subSilver style of phpBB version 2.x
	
	Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
    --------------------------------------------------------------
*/

/* Begin eXtremepixels CSS */

#hdr {
	background: #534C3C url('./images/top_head_x.gif');
	width: 100%;
	height: 199px;
	margin: 0px;
	padding: 0px; 
}

#logo {
	background: url('./images/logo.gif');
	width: 980px;
	height: 199px;  
	float: middle;
	margin: 0px;
	padding: 0px; 
}

#hdr_rs {
	background: #534C3C 
	width: 251px;
	height: 127px;
	float: right;
	margin: 0px;
	padding: 0px; 
}

#hdr_sub {
	background: #534C3C url('./images/top_nav_repeat.gif');
	width: 100%;
	height: 17px;
	margin: 0px;
	padding: 0px; 
}

#nav {
	background: #181818 url('./images/nav_back.gif');
	width: 100%;
	height: 29px;
}

#sub_nav{
	background: #534C3C url('./images/nav_btm_repeat.gif');
	width: 100%;
	height: 21px;
	margin: 0px;
	padding: 0px; 
}

#hdr_base{
	background: #534C3C url('./images/nav_end_btm.gif');
	width: 100%;
	height: 12px;
	margin: 0px;
	padding: 0px; 
}

#sub_nav_ls{
	background: #534C3C url('./images/nav_btm_ls.gif');
	width: 121px;
	height: 21px;
	float: left;
	margin: 0px;
	padding: 0px; 
}

#sub_nav_rs{
	background: #534C3C url('./images/nav_btm_rs.gif');
	width: 121px;
	height: 21px;
	float: right;
	margin: 0px;
	padding: 0px; 
}

#nav_back {
	background: #181818 url('./images/nav_back.gif');
	width: 100%;
	height: 29px;
}

#outerwrap {
	width:97%;
	margin: 20px 10px 20px 15px;
}

#innerwrap {
	background: #403A2E;
	padding: 10px 25px 10px 25px;
}

.topcat_main {
	background: url('./images/top_cat_back.gif');
	width: 97%;
	height: 14px;
}

.topcat_ls {
	background: url('./images/top_cat_ls.gif');
	width: 36px;
	height: 14px;
	float: left;
}

.topcat_rs {
	background: url('./images/top_cat_rs.gif');
	width: 36px;
	height: 14px;
	float: right;
}

.cat_main {
	background: url('./images/cat_back.gif');
	width: 100%;
	height: 33px;
}

.cat_ls {
	background: url('./images/cat_top_ls.gif');
	width: 72px;
	height: 33px;
	float: left;
}

.cat_rs {
	background: url('./images/cat_top_rs.gif');
	width: 72px;
	height: 33px;
	float: right;
}


.cattext {
	color: #676046;
	font-size:11px;
	font-weight: bold;
	padding-top:10px;
}

.cattext a:link { color: #676046; text-decoration:none }
.cattext a:visited { color: #676046; text-decoration:none }
.cattext a:hover { color: #635A49; text-decoration:underline }
.cattext a:active { color: #676046; text-decoration:none }

.cat_btm {
	background: url('./images/cat_btm_x.gif');
	width: 100%;
	height: 12px;
}

.cat_btm_ls {
	background: url('./images/cat_btm_ls.gif');
	width: 121px;
	height: 12px;
	float: left;
}

.cat_btm_rs {
	background: url('./images/cat_btm_rs.gif');
	width: 121px;
	height: 12px;
	float: right;
}

#footer {
	background: url('./images/footer_x.gif');
	height: 49px;
}

#footer_rs {
	background: url('./images/footer_rs.gif');
	width: 70px;
	height: 49px;
	float: right;
}

#outerleft {
	border-left: 3px solid #2e2a21;
	border-right: 3px solid #2e2a21;
}

#outerright {
	border-left: 1px solid #212121;
	border-right: 1px solid #212121;
}

/* End eXtremepixels CSS */



/* Layout
 ------------ */
* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #a79372;
	background: #342e22 url('./images/back.gif');
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0px;
	padding: 0px;
}

#wrap {
	background: #635A49;
	width: 78%;
	text-align:left;
}

#wrapcentre {
	margin: 0px;
}

#wrapfooter {
	text-align: center;
	clear: both;
	margin: 15px 0px 15px 0px;
}

#wrapnav {
	width: 100%;
	margin: 0;
	background-color: #ECECEC;
	border-width: 1px;
	border-style: solid;
	border-color: #A9B8C2;
}

#logodesc {
	margin-bottom: 5px;
	padding: 5px 25px;
	background: #D9DFE4;
	border-bottom: 1px solid #4787A7;
}

#menubar {
	margin: 0px;
}

#datebar {
	margin: 10px 25px 0 25px;
}

#findbar {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.forumrules {
	background-color: #F9CC79;
	border-width: 1px;
	border-style: solid;
	border-color: #BB9860;
	padding: 4px;
	font-weight: normal;
	font-size: 1.1em;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.forumrules h3 {
	color: red;
}

#pageheader {
position: relative; /* peekaboo bug fix for IE6 */
min-width: 0; /* peekaboo bug fix for IE7 */ 
}
#pagecontent { }
#pagefooter { }

#poll { }
#postrow { }
#postdata { }


/*  Text
 --------------------- */
h1 {
	color: black;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-weight: bold;
	font-size: 1.8em;
	text-decoration: none;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	text-decoration: none;
	line-height: 120%;
}

h3 {
	font-size: 1.3em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 120%;
}

h4 {
	margin: 0;
	font-size: 1.1em;
	font-weight: bold;
}

p {
	font-size: 1.1em;
}

p.moderators {
	margin: 0;
	float: left;
	color: #807056;
	font-weight: bold;
}

.rtl p.moderators {
	float: right;
}

p.linkmcp {
	margin: 0;
	float: right;
	white-space: nowrap;
}

.rtl p.linkmcp {
	float: left;
}

p.breadcrumbs {
	margin: 0;
	float: left;
	color: #807056;
	font-weight: bold;
	white-space: normal;
	font-size: 1em;
}

.rtl p.breadcrumbs {
	float: right;
}

p.datetime {
	margin: 0;
	float: right;
	white-space: nowrap;
	font-size: 1em;
}

.rtl p.datetime {
	float: left;
}

p.searchbar {
	padding: 2px 0;
	white-space: nowrap;
	margin-bottom:5px;
} 

p.searchbarreg {
	margin: 0;
	float: right;
	white-space: nowrap;
}

.rtl p.searchbarreg {
	float: left;
}

p.forumdesc {
	padding-bottom: 4px;
}

p.topicauthor {
	margin: 1px 0;
}

p.topicdetails {
	margin: 1px 0;
}

.postreported, .postreported a:visited, .postreported a:hover, .postreported a:link, .postreported a:active {
	margin: 1px 0;
	color: red;
	font-weight:bold;
}

.postapprove, .postapprove a:visited, .postapprove a:hover, .postapprove a:link, .postapprove a:active {
	color: green;
	font-weight:bold;
}

.postapprove img, .postreported img {
	vertical-align: bottom;
}

.postauthor {
	color: #807056;
}

.postdetails {
	color: #807056;
}

.postbody {
	font-size: 1.3em;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
}

.postbody li, ol, ul {
	margin: 0 0 0 1.5em;
}

.rtl .postbody li, .rtl ol, .rtl ul {
	margin: 0 1.5em 0 0;
}

.posthilit {
	background-color: yellow;
}

.nav {
	margin: 0;
	color: #807056;
	font-weight: bold;
}

.pagination {
	padding: 4px;
	color: #807056;
	font-size: 1em;
	font-weight: bold;
}

.cattitle {

}

.gen {
	margin: 1px 1px;
	font-size: 1.2em;
}

.genmed {
	margin: 1px 1px;
	font-size: 1.1em;
}

.gensmall {
	margin: 1px 1px;
	font-size: 1em;
}

.copyright {
	color: #807056;
	font-weight: normal;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.titles {
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.3em;
	text-decoration: none;
}

a.titles:link { color: #a59d6f }
a.titles:visited { color: #91895C }
a.titles:hover { color: #635A49 }
a.titles:active { color: #91895C }

.error {
	color: red;
}


/* Tables
 ------------ */
th {
	height: 18px; 
	color: #2e2a21;
	font-size: 10px;
	font-weight : bold; 
	background-color: #988b69;
	background-image: url('./images/strip_back.gif');
	white-space: nowrap;
	padding: 0px 10px 1px 10px;

}


td.profile {
	padding: 4px;
}

.tablebg {
	background-color: #000000;
}

.catdiv {
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: white url('./images/cellpic2.jpg') repeat-y scroll top left;
}
.rtl .catdiv {
	background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;
}

.cat {
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #C7D0D7;
	background-image: url('./images/cellpic1.gif');
	text-indent: 4px;
}

.row1	{ background-color: #2E2A21; border-top: 1px #474033 solid; border-left: 1px #474033 solid; padding:6px }
.row2	{ background-color: #353026; border-top: 1px #474033 solid; border-left: 1px #474033 solid; padding:6px }
.row3	{ background-color: #2E2A21; border-top: 1px #474033 solid; border-left: 1px #474033 solid; padding:6px }

.spacer {
	background-color: #000000;
}

hr {
	height: 1px;
	border-width: 0;
	background-color: #D1D7DC;
	color: #D1D7DC;
}

.legend {
	text-align:center;
	margin: 0 auto;
	background: #000000;
}

/* Links
 ------------ */

a:link {
	color: #9e997e;
}

a:active, a:visited {
	color: #9e997e;
}

a:hover {
	color: #d9a441;
}


a.forumlink {
	color: #9e997e;
	font-weight: bold;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 1.2em;
}
a.forumlink:visited { color: #9e997e }
a.forumlink:hover { color: #d9a441 }
a.forumlink:active { color: #91895C }

a.topictitle {
	color: #9e997e;
	margin: 1px 0;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 1.2em;
}

a.topictitle:visited { color: #9e997e }
a.topictitle:hover { color: #d9a441 }
a.topictitle:active { color: #9e997e }

th a,
th a:visited {
	color: #2e2a21 !important;
	text-decoration: none;
}

th a:hover {
	color: #635A49;
	text-decoration: underline;
}


/* Form Elements
 ------------ */
form {
	margin: 0;
	padding: 0;
	border: 0;
}

input {
	color: #333333;
	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	padding: 1px;
	border: 1px solid #A9B8C2;
	background-color: #FAFAFA;
}

textarea {
	background-color: #FAFAFA;
	color: #333333;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.3em; 
	line-height: 1.4em;
	font-weight: normal;
	border: 1px solid #A9B8C2;
	padding: 2px;
}

select {
	color: #333333;
	background-color: #FAFAFA;
	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	border: 1px solid #A9B8C2;
	padding: 1px;
}

option {
	padding: 0 1em 0 0;
}

option.disabled-option {
	color: graytext;
}

.rtl option {
	padding: 0 0 0 1em;
}

input.radio {
	border: none;
	background-color: transparent;
}

.post {
	background-color: white;
	border-style: solid;
	border-width: 1px;
	font-size:13px;
}

.btnbbcode {
	color: #807056;
	font-weight: normal;
	font-size: 1.1em;
	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
	background-color: #403A2E;
	border: 1px solid #807056;
}

.btnmain {
	font-weight: normal;
	background-color: #403A2E;
	border: 1px #807056 solid;
	color: #807056;
	cursor: pointer;
	padding: 1px 5px;
	font-size: 1.1em;
}

.btnlite {
	font-weight: normal;
	background-color: #403A2E;
	border: 1px #807056 solid;
	color: #807056;
	cursor: pointer;
	padding: 1px 5px;
	font-size: 1.1em;
}

.btnfile {
	font-weight: normal;
	background-color: #403A2E;
	border: 1px #807056 solid;
	color: #807056;
	cursor: pointer;
	padding: 1px 5px;
	font-size: 1.1em;
}

.helpline {
	background-color: #F2F0F0;
	border-style: none;
}


/* BBCode
 ------------ */
.quotetitle, .attachtitle {
	margin: 10px 5px 0 5px;
	padding: 4px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #403A2E;
	color: #807056;
	background-color: #403A2E;
	font-size: 0.85em;
	font-weight: bold;
}

.quotetitle .quotetitle {
	font-size: 1em;
}

.quotecontent, .attachcontent {
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #403A2E;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
	background-color: #2E2A21;
	color: #807056;
}

.attachcontent {
	font-size: 0.85em;
}

.codetitle {
	margin: 10px 5px 0 5px;
	padding: 2px 4px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #403A2E;
	color: #807056;
	background-color: #403A2E;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.8em;
}

.codecontent {
	direction: ltr;
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #403A2E;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	color: #06B506;
	font-size: 0.85em;
	font-family: Monaco, 'Courier New', monospace;
	background-color: #2E2A21;
}

.syntaxbg {
	color: #FFFFFF;
}

.syntaxcomment {
	color: #FF8000;
}

.syntaxdefault {
	color: #0000BB;
}

.syntaxhtml {
	color: #000000;
}

.syntaxkeyword {
	color: #007700;
}

.syntaxstring {
	color: #DD0000;
}


/* Private messages
 ------------------ */
.pm_marked_colour {
	background-color: #000000;
}

.pm_replied_colour {
	background-color: #A9B8C2;
}

.pm_friend_colour {
	background-color: #007700;
}

.pm_foe_colour {
	background-color: #DD0000;
}


/* Misc
 ------------ */
img {
	border: none;
}

.sep {
	color: black;
	background-color: #FFA34F;
}

table.colortable td {
	padding: 0;
}

pre {
	font-size: 1.1em;
	font-family: Monaco, 'Courier New', monospace;
}

.nowrap {
	white-space: nowrap;
}

.username-coloured {
	font-weight: bold;
}

[Talk19zehn]

Hello schmatz,

uuups, - ich dachte du gibst nur den betreffenden Teil hinein. Hast du dich denn bereits mit CSS befasst? Obige Vorschläge ausprobiert / ergänzt?

Das macht mich ein wenig stutzig: float: middle;
Momentan verstehe ich das float noch gar nicht, - ehrlich. Wahrscheinlich müsste ich mir das Style erst installieren.
Reine Spekulation: An der Stelle hätte ich im Zusammenhang der vorgeannten Idee ggf. background-position: top center; genutzt...?

[schmatz]

Folgende beiden Sachen habe Ich geändert:

#logo {
background: url('./images/logo.gif');
width: 980px;
height: 199px;
float: middle;
margin: 0px;
padding: 0px;

und:

#wrap {
background: #635A49;
width: 78%;
text-align:left;

um den Header anzupassen.

[Talk19zehn]

Hello schmatz, so wird das leider nix, denke ich. Ich weiß nun, warum "center" interpretiert wurde.

Meine Vorschläge basieren folglich auf deinen Änderungen, - versuche sie umzusetzen / anzupassen. Ist nicht schwer!!

BTW:
Deine Grafik ist nicht abstrakt genug, als das sie in der vollen Breite mittels repeat-x ausgegeben werden kann. Das Original enthält eine abstrakte Grafik, die mit repeat-x wiederholbar ist.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Edit: ungefähr so.... --> auf Basis deiner genannten Änderungen.

Code: Alles auswählen

#logo {
background: url("./images/logo.gif");
background-repeat: no-repeat;
background-position: top center;
height: 199px;
margin: 0;
padding: 0;
width: 100%;
}

In der ID #hdr hatte ich die 100% mittels Firebug demarkiert. Das heißt, du kannst probeweise die Zeile löschen oder auskommentieren.

Code: Alles auswählen

#hdr {
   background: #534C3C url('./images/top_head_x.gif');
   width: 100%;
   height: 199px;
   margin: 0px;
   padding: 0px;
}

Wenn du nun die Grafik unter Beibehaltung der Seitenverhältnisse verkleinerst, sollte es auch in kleineren Auflösungen gehen.

Nochmalige Grüße

[schmatz]

Haut hin, muß nur noch wie Du schon geschrieben hast, die Grafik etwas anpassen. Bedanke mich der kompetenten Hilfe,