[Declan]

Hi!

Ich habe ein paar Problemchen ein phpBB-Template an mein etomite-template anzupassen. Ich muss dazu sagen, dass ich ein absoluter Dau in Sachen CSS bin.

Mein wichtigstes Problem: Ich kann machen was ich will ... Der Banner behält ca 7px Abstand zum Hintergrund.

Den gesamten CSS-Code kann ich nicht posten, da es ca 14 DIN-A4 Seiten sind.

Das Forum:http://www.oste*opathie-ra*tgeber.de...opathie-forum/
Die Seite an die es angepasst werden soll(ist alles noch im Aufbau.):
http://www.ost*eopathie-ra*tgeber.de/
(bitte keine ausgeschriebenen URLs und Suchwörter nennen! Danke!)

Ich hoffe ich poste das wichtigste:

html {
	height: 100%}

{ margin: 0; padding: 0; }
	
body { 
	margin:0px 0; 
	padding:0; 
	color:#ccc;  
	background: #343434 url('bg.jpg') repeat-x;
	line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:0%; font-family:Arial, Sans-Serif 
}


table {
	width: 100%;
	padding: 0}

form, .checkbox, input.radio, .helpline, p {
	margin: 0;
	padding: 0;
	border: 0px none; }
	
input.button {
	margin: 0;
	padding: 1px 3px;
	background-color: #ddd;
	border: 1px outset}



.avatar img {
	background-color: #fff;
	border: 3px solid #fff}
	
html>body .avatar img {
	padding: 3px;
	background-color: #fff;
	border: 1px solid #dbdbdb}


#forum {
	width: 787px;
	height: 100%;
	background-color: #fff;
	margin: 0 auto}

	
#bodyline {
	width: 787px;
	padding: 0px 0;
	vertical-align: top;
	text-align: left}



#top_image {
	text-align: center}

#top_image img {
	border: 0px none;
	width: 787px;
	height: 266px}



#menu {
	height: 18px;
	line-height: 18px;
	padding: 0 3px 1px}
	
#menu #left a {
	padding-right: 0px}
	
#menu #right a {
	padding-left: 0px}

.mainmenu {
	line-height: 18px}




div.spacing {
	height: 10px;
	clear: both}



.postbuttons img {
	border: 0px none;
	margin-right: 10px}



.pad0-0-4 {
	padding: 0 0 4px}
	
.pad0-0-10 {
	padding: 0 0 10px}

.pad4 {
	padding: 4px}
	
.pad25 {
	padding: 25px}

.pad60 {
	padding: 60px}

div.timezone {
	padding: 0 3px}

div.copyright {
	padding: 5px}

.quote, .code {
	margin: 10px;
	padding: 10px}

.quote .inside_quote, .code .inside_code {
	padding: 10px}

div.hr {
	height: 1px;
	background-color: #ccc;
	margin: 5px 0}
	
div.hr hr {
	display: none}



input.post, textarea.post, select, input.postfile {
	margin: 0;
	border: 1px solid #666}

input.post, textarea.post, input.postfile {
	padding: 2px 3px}

input.post {
	height: 19px}

html>body input.post {
	height: 12px}

.helpline {
	background-color: #ebebeb}



.postmini {
	width: 25px}
	
.postsmall {
	width: 90px}
	
.postmedium {
	width: 150px}
	
.postbig {
	width: 225px}
	
.postbiggest {
	width: 450px}



.block {
	display: block}

.clear {
	clear: both}

.left {
	float: left;
	text-align: left}
	
.right {
	float: right;
	text-align: right}
	
.txtcenter {
	text-align: center}

.txtmiddle {
	text-align: center;
	vertical-align: middle}

.txtright {
	text-align: right}

.txttop {
	vertical-align: top}
	
.txtbottom {
	vertical-align: bottom}
	
.txtleft {
	text-align: left}
	

	
td.row1	{
	background-color: #f3f3f3}
	
td.row2 {
	background-color: #ebebeb}
	
td.row3 {
	background-color: #e3e3e3}



td, th, input, select, textarea, .message {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	text-decoration: none;
	color: #111;
	font-size: 10px;
	line-height: 13px}

td a {
	color: #9f0002;
	text-decoration: underline}	

td a:hover {
	color: #9f0002;
	text-decoration: none}

tr.lines_1 th .nav, tr.lines_3 th .nav, .nav {
	font-size: 11px;
	line-height: 13px;
	font-weight: bold}		

tr.lines_1 th .nav a, tr.lines_3 th .nav a, .nav a {
	color: #9f0002;
	text-decoration: none}

tr.lines_1 th .nav a:hover, tr.lines_3 th .nav a:hover, .nav a:hover {
	color: #9f0002;
	text-decoration: underline}

.code {
	background-color: #fefefe;
	border: 2px solid #d6d6d6;
	font-family: Courier, 'Courier New', sans-serif;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	text-decoration: none;
	color: #0000b4;
	font-size: 11px;
	line-height: 13px}

.code a {
	color: #0000b4;
	text-decoration: underline}	

.code a:hover {
	color: #0000b4;
	text-decoration: none}

.quote {
	background-color: #fefefe;
	border: 2px solid #d6d6d6;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	text-decoration: none;
	color: #555;
	font-size: 10px;
	line-height: 13px}

.quote a {
	color: #555;
	text-decoration: underline}	

.quote a:hover {
	color: #555;
	text-decoration: none}
	
.edited {
	font-style: italic}




tr.toplines th {
	border-left:0px solid #000; border-right:0px solid #000; border-top:1px solid #000; border-bottom:1px solid #000; line-height: 24px;
	height: 24px;
	font-weight: bold;
	text-align: center;
	padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}

tr.lines_1 th {
	border-left:0px solid #000; border-right:0px solid #000; border-top:1px solid #000; border-bottom:1px solid #000; padding-left:2px; padding-right:2px; padding-top:5px; padding-bottom:6px}

tr.lines_3 th {
	border-left:0px solid #000; border-right:0px solid #000; border-top:1px solid #000; border-bottom:1px solid #000; padding-left:2px; padding-right:2px; padding-top:3px; padding-bottom:3px}



table.index_body td.one img {
	width: 46px;
	height: 25px}
	
table.index_body td.one {
	padding: 4px;
	text-align: center}
	
table.index_body td.two {
	padding: 4px;
	width: 100%}
	
table.index_body td.three {
	padding: 4px;
	text-align: center;
	white-space: nowrap}

table.index_body_icons td img {
	vertical-align: middle}
	
table.index_body_icons td {
	white-space: nowrap;
	text-align: center}



table.groupcp td.one {
	padding: 4px 7px;
	width: 150px;
	height: 26px}
	
table.groupcp td.two {
	padding: 4px 5px 4px 4px}
	
table.groupcp td.three {
	padding: 4px 7px;
	height: 26px}



table.memberlist td.one {
	padding: 4px 7px;
	height: 26px}



table.modcp td.one img {
	width: 19px;
	height: 18px}
	
table.modcp td.one {
	padding: 4px;
	text-align: center}
	
table.modcp td.two {
	padding: 8px 4px;
	width: 100%}
	
table.modcp td.three {
	padding: 4px;
	text-align: center;
	white-space: nowrap}

table.modcp td.four {
	padding: 4px;
	white-space: nowrap;
	width: 150px}

table.modcp td.five {
	padding: 4px}

table.modcp td.six {
	padding: 4px 7px;
	vertical-align: top;
	font-weight: bold;
	text-align: left;
	width: 150px;
	height: 100px}
	
table.modcp td.seven {
	padding: 4px 7px;
	vertical-align: top;
	text-align: left;
	width: 470px}
	
table.modcp td.eight {
	padding: 4px 7px}

table.modcp td.nine {
	padding: 4px 7px;
	height: 18px;
	line-height: 18px}



table.posting_body td.one {
	padding: 4px 7px;
	width: 150px;
	height: 26px}
	
table.posting_body td.two {
	padding: 4px 5px 4px 4px}
	
table.posting_body td.three {
	padding: 4px 7px;
	vertical-align: top;
	width: 150px}

table.posting_body td.four {
	padding: 4px 5px 4px 4px;
	vertical-align: top}
	
table.posting_body td.four div {
	padding-bottom: 3px}

table.posting_body td.five {
	padding: 4px 7px}

table.posting_body td.six {
	padding: 4px 7px;
	height: 130px}
	
table.posting_body td.seven {
	padding: 4px 5px 4px 4px;
	vertical-align: top}

table.posting_body td.eight {
	padding: 4px 7px;
	vertical-align: top;
	font-weight: bold;
	width: 135px;
	text-align: left}
	
table.posting_body td.nine {
	padding: 4px 7px 10px;
	vertical-align: top;
	text-align: left}

..............

[hemfrie]

Hi Declan,

Die weißen Abstände oben rechts und links liegen nicht am CSS sondern am HTML.

Geh mal auf Seitenquelltext anzeigen und packe den gesamten Quelltext in einen Editor mit Zeilennummerierung.

Der linke Abstand wird in Zeile 55 durch <td>&nbsp;</td> erzeugt.
Der rechte Abstand ebenfalls durch <td>&nbsp;</td> in Zeile 281.

[Declan]

Hi hemfrie!

Danke dir, das hat geklappt!

Sieht halt jetzt ziemlich Banane aus (das überstehende weiß)

Im CMS-Template ist für das Content-Feld folgender Code:

.content { 
	background: #FFF url('bgmain.jpg') repeat-y center;
	color: #ccc; 
	margin: 0 auto; 
	padding: 0; 
	width: 787px
}

Da wird quasi ein weißer Streifen mit schwarzem Rand links und rechts in den Hintergrund eingefügt.

Wenn ich das ins Forum Template einfüge tut sich allerdings nix?!

_______________________________
EDIT:

Weil der Bereich nicht als Content definiert ist denke ich mal, oder?

[hemfrie]

Ja, es kommt in Deinem Template kein Html-Element vor, dass diese CSS-Klasse (class="content") besitzt.

[Declan]

Hmm ok ... dann muss ich es wohl jemanden machen lassen, der nen Plan davon hat. Hab nämlich keine Ahnung wie der Bereich definiert ist, bzw. wo ich <div class="content"></div> einfügen muss.

Danke dir

[hemfrie]

Was genau möchtest Du denn erreichen ? Das der Bereich unter dem Header-Bild bündig abschließt ?

[Declan]

Ja, genau das.

Das Problem is dann noch zusätzlich, dass wenn ich den Hintergrund hiermit fülle:

http://www.oste*opathie-ra*tgeber.de...ges/bgmain.jpg

Dann geht der Text ja auch noch in den grauen Hintergrund. Also muss man das dann auch noch anpassen.

[hemfrie]

Dein Problem sollte recht schnell lösbar sein. Als erstes nimm mal das komplette Div <div id="top_image"> aus dem <table id="forum"> heraus und packe es stattdessen genau vor die Tabelle.

also

<div id="top_image">...</div>
<table id="forum">...</table>

Jetzt noch die Breite von #forum auf 770px ändern und das ganze sollte passen

[Declan]

Also ich habe folgenden Code gefunden.

		<div id="top_image">
			<a href="{U_INDEX}"><img src="templates/NoseBleed/images/top_image.jpg" alt="{L_INDEX}" /></a>
		</div>

Den <table id="forum"> Code kann ich nirgens finden. Problem ist, dass das alles in ca 50 verschiedene "tpl" Dateien gepackt ist.

Ich hab alle durchsucht und nix gefunden (natürlich mit der Suchfunktion )

Der code oben war in der Datei overall_header.

[hemfrie]

Hast Du nach dem kompletten String <table id="forum"> gesucht oder auch mal nur nach der id="forum" ?

Schau auch mal im Seitenquelltext im Browser danach, vielleicht siehst Du ja irgendwas innerhalb der Tabelle nach dem man gut suchen kann.