phpBB.de

phpBB.de - Die deutsche phpBB-Community
https://www.phpbb.de/community/

Header Anpassungs Problem

https://www.phpbb.de/community/viewtopic.php?t=215696

Seite 1 von 1

Header Anpassungs Problem

Verfasst: 10.05.2011 12:58
von 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.

Re: Header Anpassungs Problem

Verfasst: 12.05.2011 10:22
von schmatz
Würde es ggf. helfen wenn Ich die Stylesheet.css mal mit Poste?? :roll:

Re: Header Anpassungs Problem

Verfasst: 12.05.2011 13:39
von 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

Re: Header Anpassungs Problem

Verfasst: 12.05.2011 14:45
von 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;
}

Re: Header Anpassungs Problem

Verfasst: 12.05.2011 16:05
von 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...?

Re: Header Anpassungs Problem

Verfasst: 12.05.2011 17:48
von 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.

Re: Header Anpassungs Problem

Verfasst: 12.05.2011 20:24
von 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!! :wink:

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

Re: Header Anpassungs Problem

Verfasst: 13.05.2011 08:02
von schmatz
Haut hin, muß nur noch wie Du schon geschrieben hast, die Grafik etwas anpassen. Bedanke mich der kompetenten Hilfe, :wink:
Alle Zeiten sind UTC+02:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de