Text über Template? Programmierungsfehler??

[Herrpolice]

Hallo Leute,

wenn ich einen etwas längeren Text schreibe dann geht der Text über das Template. Hört sich komisch an ist aber so. Heißt das Template rutscht nicht nach unten wenn man das so ausdrücken kann.

Ich habe einen Screenshoot angefügt. Bitte um Hilfe was ich wo ändern muss um dies zu ändern.

Mit freundlichem Gruß und noch einen schönen Sonntag.

Herrpolice

[Guin]

Moin,
in der CSS Datei musst du die entsprechende Klasse anpassen.
(Auf Grund der massigen Infos habe mal geraten)

[Herrpolice]

Moin,
in der CSS Datei musst du die entsprechende Klasse anpassen.
(Auf Grund der massigen Infos habe mal geraten)

Hallo,

danke erst einmal für die Antwort. Ja in der stylesheet.css Datei des Templates habe ich schon geschaut, leider bin ich mit meinem Latein am Ende und weiß nicht was ich anpassen muss. Welche Infos hättest du denn gerne? Ich weiß auch nicht was ich groß sagen soll. Auf alle Fälle "rutscht das Template nicht mit" und der Text überlagert sich mit dem Template! (Siehe Screenshot) Ich hoffe jemand kann mir helfen! Verzweifel schon.

MfG

Herrpolice

[jayjay]

moin, ohne code oder link wird das nix....

[Herrpolice]

moin, ohne code oder link wird das nix....

Ok ok! Habe hier mal so ziemlich die komplette Stylesheet.css Datei:

*/

/* THE BIG GUYS */
* {margin:0;padding:0}
body {padding: 0 0 20px;background: #fff url("img/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}

/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursorointer}
a:link {color:#c00}
a:visited {color:#999}
a:hover,a:active {color:#069}

/* FORMS */
form {margin: 0 0 1.5em}
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
fieldset {border: none}
label {display:block;padding: 5px 0}
label br {clear:left}

/* FORMS - general classes */
input.f-submit {padding: 1px 3px;background:#666;color:#fff;font-weight:bold;font-size:96%}

/* FORMS - f-wrap-1 - simple form, headings on left, form elements on right */
form.f-wrap-1 {width:100%;padding: .5em 0;background: #f6f6f6 url("img/featurebox_bg.gif") no-repeat 100% 100%;border-top: 1px solid #d7d7d7;position:relative}
form.f-wrap-1 fieldset {width:auto;margin: 0 1em}
form.f-wrap-1 h3 {margin:0 0 .6em;font: bold 155% arial;color:#c00}
form.f-wrap-1 label {clear:left;float:left;width:100%;border-top: 1px solid #fff}

/* hide from IE mac \*/
form.f-wrap-1 label {float:none}
/* end hiding from IE5 mac */

form.f-wrap-1 label input, form.f-wrap-1 label textarea, form.f-wrap-1 label select {width:15em;float:left;margin-left:10px}

form.f-wrap-1 label b {float:left;width:8em;line-height: 1.7;display:block;position:relative}
form.f-wrap-1 label b .req {color:#c00;font-size:150%;font-weight:normal;position:absolute;top:-.1em;line-height:1;left:-.4em;width:.3em;height:.3em}
form.f-wrap-1 div.req {color:#666;font-size:96%;font-weight:normal;position:absolute;top:.4em;right:.4em;left:auto;width:13em;text-align:right}
form.f-wrap-1 div.req b {color:#c00;font-size:140%}
form.f-wrap-1 label select {width: 15.5em}
form.f-wrap-1 label textarea.f-comments {width: 20em}
form.f-wrap-1 div.f-submit-wrap {padding: 5px 0 5px 8em}
form.f-wrap-1 input.f-submit {margin: 0 0 0 10px}

form.f-wrap-1 fieldset.f-checkbox-wrap, form.f-wrap-1 fieldset.f-radio-wrap {clear:left;float:left;width:32em;border:none;margin:0;padding-bottom:.7em}
form.f-wrap-1 fieldset.f-checkbox-wrap b, form.f-wrap-1 fieldset.f-radio-wrap b {float:left;width:8em;line-height: 1.7;display:block;position:relative;padding-top:.3em}
form.f-wrap-1 fieldset.f-checkbox-wrap fieldset, form.f-wrap-1 fieldset.f-radio-wrap fieldset {float:left;width:13em;margin: 3px 0 0 10px}
form.f-wrap-1 fieldset.f-checkbox-wrap label, form.f-wrap-1 fieldset.f-radio-wrap label {float:left;width:13em;border:none;margin:0;padding:2px 0;margin-right:-3px}
form.f-wrap-1 label input.f-checkbox, form.f-wrap-1 label input.f-radio {width:auto;float:none;margin:0;padding:0}

form.f-wrap-1 label span.errormsg {position:absolute;top:0;right:-10em;left:auto;display:block;width:16em;background: transparent url(img/errormsg_bg.gif) no-repeat 0 0}
form.f-wrap-1 label span.errormsg b {padding: 10px 0;margin: 0 10px 0 30px;color:#B30800;font-weight:bold;display:block;width:auto;float:none;line-height:1.3}

/* TYPOGRAPHY */
p, ul, ol {margin: 0 0 1.5em}
h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em}
h1 {font-size: 196%;margin-top:.6em}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
small {font-size:11px}

/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("img/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}

dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}

/* GENERAL */
img {border:none}
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px}

/* LAYOUT - HEADER */
#header {background: #666 url("img/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}

#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}

/* NAV - top horizontal nav */
#nav, #nav ul {padding: 0;margin: 0;list-style: none}
#nav {font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 105px 0 40px}
#nav li {position:relative;background: #999;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #666;border-right: 3px solid #252525;padding:0}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {text-decoration:none;cursorointer;color:#fff;display: block;padding: 4px 10px 2px}
#nav a:hover {color:#000}

#nav li ul {border-left: 1px solid #c00;background: #f6f6f6 url("img/featurebox_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em}
#nav li:hover ul, #nav li.sfhover ul {left: 0;z-index:99999}

#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
#nav li li.last {border-bottom:none}
#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {color:#000;padding: 3px 10px 2px;width:14em}
#nav li li a:hover {color:#fff;background:#c00}

#nav li.active {background: #c00;border-bottom: 3px solid #c00}
#nav li.active ul {border:none;background: #c00 url("img/featurebox2_bg.gif") no-repeat 100% 100%}
#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
#nav li.active a:hover {color:#000}

#nav li.active li {border:none;border-top: 1px solid #c15c5c;border-bottom: 1px solid #870000}
#nav li.active li.last {border-bottom: none}
#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff}
#nav li.active li a:hover {background: #666 url("img/sprites.gif") repeat-x 0 99%;color:#fff}

#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("img/sprites.gif") repeat-x 0 99%}

/* hide from IE mac \*/
#nav li {width:auto}
/* end hiding from IE5 mac */

/* SEARCH */
#search {color:#fff;font-weight:bold;position:absolute;top:10px;right:110px;left:auto;width:18em}
#search form {margin:0}
#search input {margin: 0 0 -1px;height:1.2em}
#search label {padding:5px 0 0;display:inline}
#search input2.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em}

/* POWERED BY - mollio logo in this case */
#poweredby {width:96px;height:63px;position:absolute;top:-102px;right:0}

/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:1200px;margin: 0 auto;position:relative}
#content-wrap {position:relative;width:100%}
#utility {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px}

#content {margin: 0 50px}
#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}

.featurebox {color:#333;padding: 15px 20px 20px;border-top: 1px solid #d7d7d7;margin: 0 0 1.5em;background: #f6f6f6 url("img/featurebox_bg.gif") no-repeat 100% 100%}
.featurebox p, .featurebox h1, .featurebox h2, .featurebox h3, .featurebox h4, .featurebox h5, .featurebox h6 {margin: 0 0 .3em;border-bottom: 1px solid #c00;color:#c00}
.featurebox p {border:none;margin: 0 0 1em;color:#444}
.featurebox a {font-weight:bold}

.thumbnail {margin: 0 0 0 10px;position:relative;z-index:9999;border: 1px solid #eee;float:right;width:100px;padding:5px;background:#fff}
.thumbnail img {border: 1px solid #000}

.pagination {background: #f2f2f2;color:#666;padding: 4px 2px 4px 7px;border: 1px solid #ddd;margin: 0 0 1.5em}
.pagination p {position:relative;text-align:right}
.pagination p a:link, .pagination p a:visited, .pagination p a:hover, .pagination p a:active {text-decoration:none;background:#fff;padding:2px 5px;border: 1px solid #ccc}
.pagination p a:hover {background:#c00;color:#fff}
.pagination p span {text-decoration:none;background:#fff;padding:2px 5px;border: 1px solid #ccc;color:#ccc}
.pagination * {margin:0}
.pagination h4 {margin-top:-1.45em;padding:0;border:none}

#resultslist-wrap {margin: 0 0 1.5em;font-size:92%}
#resultslist-wrap dt, #resultslist-wrap dl {margin: 0}
#resultslist-wrap dt {font: bold 85% arial;padding: 3px 0}
#resultslist-wrap li {padding: 0 0 1em;margin:0 0 0 1.2em;font: bold 145% arial}
#resultslist-wrap li dd {font: normal 73% arial}
#resultslist-wrap li dl {margin:0}
#resultslist-wrap dd {line-height:1.3}
#resultslist-wrap dd.filetype, #resultslist-wrap dd.date {color:#999;display:inline;padding-right:.5em}

/* TABLES */
.table1 {border: 2px solid #900;border-collapse:collapse;width:100%}
.table1 td {background: #fff url("img/sprites.gif") repeat-x 0 -1600px;padding:3px;border: 1px solid #fff}
.table1 th {text-align:left;border: 1px solid #fff}
.table1 thead th {color:#fff;font-size:145%;background: #900 url("img/sprites.gif") repeat-x 0 -1300px;padding: 10px 6px}
.table1 tbody th {color:#fff;font-size:115%;background: #88b8db url("img/sprites.gif") repeat-x 0 -1400px;padding: 6px}
.table1 tbody th.sub {font-size:100%;color:#000;background: #efefef url("img/sprites.gif") repeat-x 0 -1500px;padding: 6px}

/* TABLES - calendar */
.calendar {width:200px;font-size:92%}
.calendar td {text-align:center;border: 1px solid #ddd}
.calendar th {text-align:center}
.calendar thead th {padding: 3px 2px}
.calendar tbody th {padding: 2px}
.calendar tbody th.sub {padding: 2px}

/* 'MORE' LINK - provides an accessible alternative to just using 'more' as a link at the end of paragraphs */
a.morelink:link, a.morelink:visited, a.morelink:hover, a.morelink:active {background: transparent url("img/sprites.gif") no-repeat 5px -500px;padding-left:21px}
a.morelink:hover {background: transparent url("img/sprites.gif") 5px -400px}
.morelink span {position:absolute;left:-9999px;width:900px}

/* CODE - formatting for code inserted into body - more here: http://dizque.lacalabaza.net/temp/lipt/ */
ol.code {font-family: monospace;position:relative}
ol.code li {color: #666;margin-bottom: 1px}
ol.code code {color: #000;display: block}
ol.code .cmt {color: #4077d2}
li.tab0 code {padding-left: 4em}
li.tab1 code {padding-left: 8em}
li.tab2 code {padding-left: 12em}
li.tab3 code {padding-left: 16em}
li.tab4 code {padding-left: 20em}
li.tab5 code {padding-left: 24em}
ol.code li {background: #f3f3f3 url("img/td_bg.gif") no-repeat 100% 100%}
p.note {margin: 1em;border: 1px solid #ddd;background: #f0f0f0;padding: 1em}

/* LAYOUT TYPE B */
#type-b #content-wrap {background: transparent url("img/content_wrap_bg.gif") repeat-y 30px 0}
#type-b #content {margin: 0 23px 0 235px}

/* LAYOUT TYPE C */
#type-c #content-wrap {background: transparent url("img/content_wrap_bg.gif") repeat-y 30px 0}
#type-c #content {margin: 0 25% 0 235px}

/* LAYOUT TYPE D */
#type-d #content {margin: 0 25% 0 50px}

/* LAYOUT TYPE E */
#type-e #content-wrap {background: transparent url("img/content_wrap_e_bg.gif") repeat-y 100% 0}
#type-e #utility {position:absolute;top:0;left:auto;right:25px;width:165px;border-top: 5px solid #999}
#type-e #content {margin: 0 243px 0 50px}

/* LAYOUT TYPE F */
#type-f #content-wrap {background: transparent url("img/content_wrap_e_bg.gif") repeat-y 100% 0}
#type-f #content {margin: 0 235px 0 25%}
#type-f #utility {left:auto;right:25px}
#type-f #sidebar {right:auto;left:25px}

/* SECONDARY NAVIGATION - vertical navigation */
#nav-secondary, #nav-secondary ul {position:static}
#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("img/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursorointer}
#nav-secondary a:link {color:#000}
#nav-secondary a:visited {color:#000}
#nav-secondary a:hover {color:#c00;background: #fee url("img/sprites.gif") no-repeat 10px -695px}
#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00}
#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}

/* SECONDARY NAVIGATION - 2nd TIER */
#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("img/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
#nav-secondary li.active li {border: none;margin:0}

#nav-secondary li.active li.active a:link,
#nav-secondary li.active li.active a:visited,
#nav-secondary li.active li.active a:hover,
#nav-secondary li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - 3rd TIER */
#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
#nav-secondary li.active li.active li a:link,
#nav-secondary li.active li.active li a:visited,
#nav-secondary li.active li.active li a:hover,
#nav-secondary li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - 4th TIER */
#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
#nav-secondary li.active li.active li.active li a:link,
#nav-secondary li.active li.active li.active li a:visited,
#nav-secondary li.active li.active li.active li a:hover,
#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}


Ich hoffe damit könnt ihr was anfangen! Wenn nicht kann ich gerne noch mehr Infos liefern.

MfG

Herrpolice

[Guin]

Wenn nicht kann ich gerne noch mehr Infos liefern.

Wir hätten gerne alle Infos, die uns helfen, dir zu helfen

Wie jayjay schon schrieb, entweder (der komplette relevante) Code oder ein Link. Den ganzen Code posten macht keinen Sinn, da es einfach zu viel ist. Also nen Link, wenn du nun nicht weißt, was relevant ist. Ich hätte vermutet, dass es was mit dem Footer ist, aber das steht nicht in deiner geposteten CSS. Ohne HTML eh wieder nur raten
Und nutze die Code Tags.

[Herrpolice]

Wir hätten gerne alle Infos, die uns helfen, dir zu helfen

Wie jayjay schon schrieb, entweder (der komplette relevante) Code oder ein Link. Den ganzen Code posten macht keinen Sinn, da es einfach zu viel ist. Also nen Link, wenn du nun nicht weißt, was relevant ist. Ich hätte vermutet, dass es was mit dem Footer ist, aber das steht nicht in deiner geposteten CSS. Ohne HTML eh wieder nur raten
Und nutze die Code Tags.

Ok. Sorry wenn ich jetzt frage wie ein Obertrottel aber welchen Link brauchst du? Den zu meinem Shop?

Gruß

[Corsachriz]

Den Link zu der Website wo der Fehler auftritt, wenn es der Shop ist dann der Link zum Shop.

[Herrpolice]

Den Link zu der Website wo der Fehler auftritt, wenn es der Shop ist dann der Link zum Shop.

Ok, ihr seht jetzt dann den von mir eingestellten Text: "TEST TEST usw.". Dieser überlagert sich mit dem Template und das Template passt sich nicht dem Text bzw. der Textlänge an.

Hier der Link:

http://gideon-neder.de/shop/shop_content.php?coID=99

Bin für jede Hilfe dankbar.

Gruß

[wildmieze]

Hmm .. such mal im Template nach <div id="content" style="height:1500px"> - und nimm da mal den style raus und guck was passiert. Ich weiß nicht, obs das schon ist, aber das sprang mir direkt ins Auge ..

[Herrpolice]

Hmm .. such mal im Template nach <div id="content" style="height:1500px"> - und nimm da mal den style raus und guck was passiert. Ich weiß nicht, obs das schon ist, aber das sprang mir direkt ins Auge ..

Ok danke ich versuchs gleich...

[Herrpolice]

Hi Leute,

ok habe das mal eben gemacht. Wenn ich nur das Style lösche so wie es wildmieze gesagt hat erhalte ich Nr.1 und Nr. 2 (Screenshot beachten). Wenn ich alles lösche also die komplette Zeile die wildmieze gepostet hat erhalte ich Nr. 3.

Allerdings ist Nr. 1 und Nr. 2 auch nicht gerade zufriedenstellend weil es auch so "drückt und nicht genügend Abstand lässt. Jedoch geht das in die richtige Richtung. Hat noch jemand ne Idee?

Gruß

P.S. Im Moment ist der Shop ohne das style="height:1500px"

[wildmieze]

Na, immerhin ist der Footer schonmal drunter^^ .. fehlt noch n bissl Abstand .. und für das erste Problem fehlt wohl noch irgendwo ein clear ..

ersetze mal im stylesheet das hier:
#content {margin: 0 50px}

durch das:
#content {margin: 0 50px; padding-bottom:20px; overflow:hidden;}

das padding-bottom müsste für den Abstand zum footer sorgen (die 20px kannste natürlich anpassen), das overflow:hidden die überlappende Sidebar beheben (außer im IE6). Rein theoretisch, habs jetzt nicht getestet und bin grad in Zeitnot .. Wenns nicht funktioniert, müsste sich das jemand anders nochmal genauer anschauen, oder ich komm evtl. heute Nacht noch kurz dazu ..

[Herrpolice]

Na, immerhin ist der Footer schonmal drunter^^ .. fehlt noch n bissl Abstand .. und für das erste Problem fehlt wohl noch irgendwo ein clear ..

ersetze mal im stylesheet das hier:
#content {margin: 0 50px}

durch das:
#content {margin: 0 50px; padding-bottom:20px; overflow:hidden;}

das padding-bottom müsste für den Abstand zum footer sorgen (die 20px kannste natürlich anpassen), das overflow:hidden die überlappende Sidebar beheben (außer im IE6). Rein theoretisch, habs jetzt nicht getestet und bin grad in Zeitnot .. Wenns nicht funktioniert, müsste sich das jemand anders nochmal genauer anschauen, oder ich komm evtl. heute Nacht noch kurz dazu ..

JUHUUUU! Vielen vielen Dank! Hat hervorragend geklappt! Danke nochmals für die super Hilfe!

Gruß und noch einen schönen Abend.

[wildmieze]

freut mich, daß es funktioniert