Ergebnis 1 bis 2 von 2

Thema: Text geht über Rand hinaus

  1. #1
    Teeny
    Registriert seit
    23.11.2007
    Beiträge
    41
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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...

    /* ----- 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;
    }
    [/u]
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Mach mal das overflow: hidden; raus. Das führt ja dazu, dass überschüssiger Text nicht angezeigt wird. Soll der Besucher wirklich deshalb auf Textstücke verzichten?
    Vermutlich kommst du insgesamt auf mehr als 100% Breite, auch wenn die drei Boxen rechnerisch exakt 100% ergeben. Zu berücksichtigen sind dabei auch noch padding-, margin- und border-Werte.

    Alternativ reduziere auch mal die Breiten etwas und nimm statt 60% z.B. nur mal 55%.

Ähnliche Themen

  1. Bild schießt über Div hinaus
    Von Guest im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.07.2007, 18:10
  2. Gif über Wall geht nicht!
    Von im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 27.11.2006, 14:46
  3. Text im div-Layer am unteren Rand ausrichten?
    Von Ivanman im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 27.10.2005, 13:53
  4. Text über tabellenrand!
    Von im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 23.05.2005, 16:16
  5. °°JS-Navi soll über 2.Frame hinaus öffnen°°F1! F1!
    Von Blazin im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 19.07.2004, 16:42

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •