css Bereich für den Artikel vergrößern

blackcow

[INDENT]Hallo,
Ich habe ein Problem wie bekomme ich die Seite breiter im Bereich Artikel/ Seite .
Das heißt wenn ich ein größeren Banner einbaue schießt er über dem Bereich.

Ich möchte das dieser bereich größer wird , damit mir der banner nicht drüber geht.

hier mal den css code

Code

/*  
Theme Name: Xcitement
Theme URI: http://www.webkatalog.net-tec.biz
Description: A Wordpress Theme For Your Blog <br> - Designed by <a href="http://www.webkatalog.net-tec.biz">NET-TEC Artikelverzeichnis</a> 
Author: NET-TEC Artikelverzeichnis
Author URI: http://www.webkatalog.net-tec.biz
� 2008, NET-TEC Artikelverzeichnis. All rights reserved. 
*/


/* 
   * Default HTML tags 
   */
a {
    color: #444;
    }


a:visited {
            color: #444;
            text-decoration: underline;
}


a:hover {
    color: #1d8dbe;
}


acronym, abbr {
                cursor: help;
                }


blockquote {
    border-left: 3px solid #e6e5e5;
    margin-left: 15px;
    padding-left: 5px;
}


body {
       background: url("images/background.jpg");
       color: #444;
       font-size: 62.5%;
       font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
       margin: 0px auto;
       padding: 0;
       text-align: center;
       }


cite {
    font-size: 90%;
    font-style: normal;
}


h2 {
     font-size: 12px;
     margin: 15px 0 6px 0;
     padding: 3px 0 3px 5px;
     font-weight: bold;
     color: #af265c;
     background: url("images/titlebg.jpg");
}


h2 a,
h2 a:visited,
h2 a:hover,
h2 a:visited:hover { 
                     text-decoration: none;
                     color: #787878;
                     }
h3 {
     font-size: 120%;
     margin-top: 0;
}


img { 
      padding: 3px;
      border: #444 1px solid;
      background: #eeeeee;
      }


img.alignleft { 
                float: left;
                margin: 3px 3px 3px 0;
                }


img.alignright { 
                 float: right;
                 margin: 0 3px 3px 3px;
                 }


li { 
     margin: 0;
     padding: 0;
     list-style-type: none;
     }




ol#comments li p {
                   font-size: 100%;
                   }


ul { 
     margin: 0;
     padding: 0;
     }


/*
   * Classes
   */


/* The credits at the bottom of the site */
#credit {
          width: 900px;
          color: #444;
          font-size: 11px;
           text-align: right;
          }


#credit a, 
#credit a:hover,
#credit a:visited,
#credit a:visited:hover {
                          color: #f6a1ce;
          padding-right: 20px;
                          }


/* For the blog tagline */
.description { 
               float: right;
           padding: 0 635px 0 0;
               color: #f29bcc; 
               font-size: 11px;
           text-decoration:none;
               font-family: Verdana;
               font-weight: normal;
               }


/* Link to the comments */
.feedback {
            color: #ccc;
            text-align: right;
            clear: both;
            text-transform: lowercase;
            }


.feedback a,
.feedback a:hover,
.feedback a:visited,
.feedback a:visited:hover { 
                            text-decoration: none;
                            }


/* The post informations */
.meta { 
        font-size: 0.9em;
        }


.meta li, 
ul.post-meta li { 
                  display: inline;
                  }


.meta ul { 
           display: inline;
           list-style: none;
           margin: 0;
           padding: 0;
           }


.meta a { 
          color: #1d8dbe;
          text-transform: lowercase;
          text-decoration: none;
          }


.meta { 
        color: #555;
        font-weight: normal;
        letter-spacing: 0;
        }




.storycontent { 
                font-size: 115%;
                }


/* Comment form design */
#commentform #author, 
#commentform #email, 
#commentform #url, 
#commentform textarea {
                        background: #f6f6f6;
                        border: 1px solid #333237;
                        color: #444;
                        }


#commentform textarea {
    width: 99%;
}


#commentlist li ul {
    border-left: 1px solid #ddd;
    font-size: 110%;
}


ol#commentlist li { 
                  list-style: decimal;
                  }
#content {
           float: left;
           width: 618px;
           margin: 16px 8px 20px 8px;
           text-align: left;
           }


#content ol li { 
                 list-style: decimal;
                 }


#content ul { 
              margin-top: 10px;
              margin-left: 35px;
              }


#content ul li { 
                 list-style-image: none;
                 }


#content-big {
           float: left;
           width: 570px;
           margin: 16px 8px 20px 8px;
           text-align: justify;
           }












#header {
          font-size: 28px;
          font-weight: bold;
      text-decoration:none;
          font-family: Verdana;
          margin: 0 auto;
          height: 300px;
          width: 900px;
          padding: 0;
          background: url("images/header.jpg");
          }






#header a,
#header a:hover,
#header a:visited,
#header a:visited:hover {
                          float: left;
                          color: #787878;
                      padding: 16px 0 0 108px;
                          text-decoration: none;
                          }












#footer { 
          width: 900px;
          height: 63px;
          margin: 0 auto;
          color: #fbf6fa;
          background: url("images/footer.jpg") no-repeat;
    border-right: 3px solid #f6f6f6;
    border-left: 3px solid #f6f6f6;
    border-bottom: 3px solid #f6f6f6;
          }
#footer a, 
#footer a:hover,
#footer a:visited,
#footer a:visited:hover {
                         color: #ffffff;
                          }




/* 
   * Left sidebar 
   */
#menu-left { 
             float: left;
             padding: 3px 10px 20px 15px;
             width: 230px;
             font-size: 11px;
             }


#menu-left h2 {
     font-size: 12px;
     margin: 15px 0 6px 0;
     padding: 3px 0 3px 15px;
     font-weight: bold;
     color: #1d8dbe;
     border-top: #edf5f9 1px solid;
     border-bottom: #edf5f9 1px solid;
     background: url("images/sidemenu.jpg"); 
}
#menu-left a,
#menu-left a:visited { 
                             text-transform: lowercase;
                             text-decoration: none;
                             color: #464646;
                             }


#menu-left a:hover,
#menu-left a:visited:hover  { 
                              color: #1d8dbe;
                              }


#menu-left ul ul { 
                   margin-left: 15px;
                   }


#menu-left ul ul li { 
                      list-style-image: url("images/icon.gif"); 
                      }
.music { 
       text-align: center;
                      }
/* End of left sidebar */






input#s {
          width: 160px;
          background: #f6fafc;
          border: 1px solid #b5d6e9;
          color: #333333;
          margin-bottom: 5px;
}


#rap { 
       width: 900px;
       margin: 0 auto;
       background: url("images/main.jpg") repeat-y;
       text-align: left;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
       }


#searchbutton { 
                margin-top: 2px;
                }

Alles anzeigen

[/INDENT]

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marvin_S

Hi,

habe mir den Code mal angeschaut. Ohne einen Link zu deiner Website kann ich dir nicht viel helfen. Was du aber machen kannst, ist mal alle Breiten die 900px betragen, waren glaube ich 4stk ( header, footer, #rap und nochwas.. ) in z.B. 1000px oder ebend die Breite wie dein Banner breit ist, ändern.

Also einfach im Editor Suchen&Ersetzen, 900 mit 1000 oder andere Breite.

Weitere kann man erst sehen sobald man die Seite vor Augen hat.

Grüße
Marvin

blackcow

http://pinnwandpic.de/?page_id=1982

habe mal auf der Seite ein Banner drinne musst aber bisschen runterscrollen damit du den banner auch sehen kannst. Es fällt dir sofort auf das er drüberhinaus ragt.

hatte mal überall 100px eingegebn nur es kommt keine Änderung, alles bleibt so wie es war.

Marvin_S

Du musst noch

HTML

#content {         
   float: left;            
   width: 618px;
   margin: 16px 8px 20px 8px;     
   text-align: left;      
}

und

HTML

#rap {        
    width: 900px;    
    margin: 0 auto;    
    background: url("http://forum.wordpress-deutschland.org/images/main.jpg") repeat-y;    
    text-align: left;   
    border-top: 3px solid #ffffff;   
    border-right: 3px solid #ffffff;  
    border-left: 3px solid #ffffff;    
}

anpassen. Mach #rap mal auf 1000px width und #content auf 718px width.

Gruß
Marvin

blackcow

so dies habe ich jetzt hinbekommen nur das desinge ist stehengeblieben, das graue mein hintergrund.
schau dir das doch noch mal an.

Marvin_S

Hi,

ist ja normal wenn http://pinnwandpic.de/wp-content/the…images/main.jpg nur 900px groß ist, dass da ein stück rechts frei bleibt.

Also entweder das Hintergrundbild breiter machen oder den repeat rausnehmen, damit als Standardwert X und Y repeat ist und er sowohl nach rechts als auch nach unten das Hintergrundbild widerholt.

Grüße
Marvin

Willkommen! Melden Sie sich an oder registrieren Sie sich.

css Bereich für den Artikel vergrößern

Jetzt mitmachen!