Autor |
Nachricht |
klsa12
Threadersteller
Dabei seit: 14.11.2007
Ort: Dresden
Alter: 38
Geschlecht:
|
Verfasst Sa 01.03.2008 09:52
Titel Text geht über Rand hinaus |
|
|
Ich habe folgendes Problem...
auf meiner Joomla (1.5) Seite habe ich ein vorgefertigtes Layout hochgeladen was ich nach meinen Wünschen anpassen will. Aber schon beim ersten Problem bin ich am verzweifeln. Der Text ist länger als der Contentbereich breit ist und geht über den Rand hinaus, bzw. dank dem overflow-code wird der Rest der drüber hinaus geht nicht mehr gezeigt.
Was ist im Code falsch das es den Text nicht richtig einpasst?
www.martin-boose.de/bichareh
Hier der Code...
Zitat: | /* ----- Main Layout Elements ----- */
body {
background: #ffffff;
text-align: center;
padding: 0;
margin: 0;
font-family: Arial, Verdana, sans-serif;
}
#container {
min-width: 760px;
max-width: 960px;
font-size: 12px;
margin: 0 auto;
text-align: left;
clear: both;
}
#header {
background-image: url('../images/bg-header.jpg');
background-color: #48b5eb;
height: 185px;
margin: 0 auto;
clear: both;
}
#headerinside {
min-width: 760px;
max-width: 960px;
margin: 0 auto;
height: 140px;
padding-top: 10px;
text-align: left;
clear: both;
}
#leftsidebar {
float: left;
width: 20%;
overflow: hidden;
}
#main {
float: left;
width: 60%;
overflow: hidden;
}
#rightsidebar {
float: left;
width: 20%;
overflow: hidden;
}
#footer {
clear: both;
text-align: center;
font-size: 10px;
padding-top: 10px;
}
a, a:visited {
color: #b20a0a;
}
a:hover {
color: #890707;
}
#searchForm {
padding-top: 10px;
}
/* ----- Top Menu ----- */
#topmenu {
margin: 0 auto;
height: 39px;
text-align: center;
padding-top: 7px;
clear: both;
}
#topmenu .moduletable {
border: 0;
padding: 0;
margin: 0 auto;
}
#topmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
#topmenu li {
display: inline;
margin: 0;
padding: 0;
border-right: 1px solid #444444;
}
#topmenu a, #topmenu a:visited {
font-weight:bold;
padding-right: 10px;
padding-left: 10px;
color: #f7f79b;
text-decoration: none;
}
#topmenu a:hover {
text-decoration: underline;
}
/* ----- Left Sidebar Elements ----- */
#leftsidebar ul {
margin: 0px;
padding-left: 20px;
padding-top: 5px;
}
#leftsidebar ul li {
margin: 0px;
padding: 0px;
list-style-type: square;
}
#leftsidebar ul li a {
text-decoration: none;
}
#leftsidebar ul li a:hover {
text-decoration: underline;
}
#leftsidebar h3 {
margin: 0px;
padding: 0px;
padding-top: 10px;
border-bottom: 1px solid #777777;
font-size: 16px;
}
/* ----- Right Sidebar Elements ----- */
#rightsidebar .moduletable, #rightsidebar .moduletable_text {
border: 1px solid #000000;
margin-top: 10px;
padding: 5px;
}
#rightsidebar .moduletable h3, #rightsidebar .moduletable_text h3 {
margin: -5px;
margin-bottom: 5px;
padding: 2px;
padding-left: 18px;
color: #ffffff;
background-color: #000000;
border-bottom: 1px solid #777777;
font-size: 16px;
background-image: url('../images/moddeco.png');
background-repeat: no-repeat
}
#rightsidebar p {
margin-top: 0px;
margin-bottom: 10px;
}
/* Additional markups */
.pagenavcounter, .pagenav {
font-size: 10px;
}
.contenttoc {
padding: 5px;
}
div.componentheading { /* Component heading */
font-size: 16px;
border-bottom: 1px solid #777777;
font-weight: bold;
margin-top: 10px;
border-bottom: 1px solid #cccccc;
}
td.contentheading { /* Post titles/headings */
font-size: 16px;
font-weight: bold;
clear: both;
padding-top: 10px;
}
table.contentpaneopen { /* Table wrapping posts */
margin: 0;
padding: 0;
}
#form-login-remember { /* Small 'remember me?' text in login form */
font-size: 12px;
padding-bottom: 5px;
}
#form-login {
text-align: center;
}
#form-login ul, #form-login-username, #form-login-password, #form-login-remember {
text-align: left;
}
fieldset.input {
border: 0;
}
#form-login #form-login-remember {
text-align: center;
}
form {
margin:0;
}
td.sectiontableentry1 {} /* Alternating rows for polls */
td.sectiontableentry2 { /* Alternating rows for polls */
background-color: #f9f9f9;
}
.button {
background-color: #ddecf3;
font-size: 12px;
font-family: verdana, arial;
border-top: 1px solid #e7f7ff;
border-left: 1px solid #cde4ef;
border-bottom: 1px solid #000000;
border-right: 1px solid #245167;
}
.buttonheading img {
border: none;
margin: 0;
padding: 0;
}
span.small { /* Small text underneath post title, i.e. 'Written by...' */
font-size: 10px;
margin: 0;
padding: 0;
}
td.createdate { /* Small date under post titles */
font-size: 10px;
text-align: left;
color: #999999;
}
td.modifydate { /* The 'Last Updated' date under posts/modules. */
font-size: 10px;
text-align: right;
font-style: italic;
}
a.readon { /* The 'Read More...' link under posts/modules. */
font-size: 10px;
float: right;
text-align: right;
}
td.article_column {
padding-right: 10px;
}
table.pollstableborder {
text-align: left;
width: 100%;
}
p {
margin: 0;
padding: 0;
}
span.breadcrumbs {
font-size: 10px;
color: #666666;
}
.crumbbg {
background-color: #fff0f0;
}
div.bannerheader {
font-size: 10px;
}
|
|
|
|
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Sa 01.03.2008 10:47
Titel
|
|
|
Im zweiten Artikel "Germanys Next Topmodel ist...", im dritten Absatz. Schau mal, was nach
Zitat: | "In der glorreichen Pro7-Show "The Next Uri Geller" wurden 8 Wochen lang aus einem Haufen verrückter" |
kommt. Dort folgt ein Möchtegern-Link, bei dem einige Zeichen in HTML-Entitäten umgewandelt wurden. Z.B. auch die spitzen Klammern der Element-Tags. Und dann ist das natürlich kein HTML mehr, sondern nur noch stinknormaler Text.
Und das href-Attribut in diesen Link-Elementen ist bei einigen ganz schön lang und ohne Leerzeichen natürlich. Das kann natürlich nicht umgebrochen werden und endet dann in 'ner ewig langen Zeilen, die alles auseinander drückt.
Langer Rede, kurzer Sinn: Mit was auch immer du deinen Text eingibst, das funktioniert nicht so richtig. Oder du gibst die Links als HTML ein und das Teil wandelt dann unter anderem die spitzen Klammern um.
Ok?
|
|
|
|
|
Anzeige
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Sa 01.03.2008 10:47
Titel
|
|
|
Du hast mehrfach < maskiert, wo es nicht maskiert werden sollte Dadurch werden einige Links keine Links, sondern ihr HTML-Code inkl. ellenlanger URL in den Text geschrieben, wodurch die komplette Tabelle ausgedehnt wird.
Übrigens haben Tabellen in Deinem Markup absolut nix verloren, da würde ich mal ordentlich aufräumen. Und aus
Code: | <div class="componentheading">Willkommen auf der Startseite</div> |
wird
Code: | <h2>Willkommen auf der Startseite</h2> |
(das Logo würde ich in h1 stellen.) Ähnliches gilt hier:
Code: | <td class="contentheading" width="100%">test</td> |
Und schau Dir Dein Alphatransparenz-png-Logo mal im IE 6 an, und siehe dann entweder http://www.satzansatz.de/cssd/tmp/alphatransparency.html oder probiere (zumindest für IE < 7) ein gif mit Indextransparenz und dem dunkleren Rot-Ton als Hintergrund - das dürfte bei den sehr ähnlichen Rot-Tönen kaum auffallen. Dennoch empfehle ich erstere Variante. Das gif bekommt dann der IE 5.0
|
|
|
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Sa 01.03.2008 10:49
Titel
|
|
|
Ha!
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Sa 01.03.2008 10:53
Titel
|
|
|
Zusatz-Tipps brauchen halt so 1 bis 2 Minuten
|
|
|
|
|
klsa12
Threadersteller
Dabei seit: 14.11.2007
Ort: Dresden
Alter: 38
Geschlecht:
|
Verfasst Sa 01.03.2008 11:54
Titel
|
|
|
uhh ihr seid geil, es hat funktioniert!!!!
Danke
|
|
|
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Sa 01.03.2008 12:55
Titel
|
|
|
heiko_rs hat geschrieben: | Zusatz-Tipps brauchen halt so 1 bis 2 Minuten |
Touché.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Text geht über die Div hinaus
Text läuft im IE 7 über footer hinaus
[CSS] Bild ragt über <div> hinaus
Border springt über's Ziel hinaus
CSS -Inhalt geht über mein DIV hinaus... warum?
Rand im IE
|
|