Probleme mit div's

Dieses Thema im Forum "Webentwicklung" wurde erstellt von matze-pe, 26. Dezember 2008 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 26. Dezember 2008
    Hallo,
    habe bisschen Probleme mit div-Tags.

    Habe mir ein Template auf meine Bedürfnisse zurrechtgeschnitten, aber jetzt machen die div-Tags Probleme:

    Die vermeintlichen Tabellen sind alle mit div's realisiert worden. Das ursprüngliche Design hatte auf der rechten Seite noch ein Sub-Menü. Diesen habe ich weggenommen, da ich keine Verwendung dafür hatte.

    Nun schaut das so aus:
    {bild-down: http://img525.imageshack.us/img525/3369/screenjg1.jpg}


    Ich möchte aber, dass der Content part auf einer Höhe mit dem Menü auf der linken Seite ist.
    Bekomme das einfach nicht hin.

    Die Datei schaut folgendermaßen aus:
    (Ausschnitte)

    PHP:
    < div id = "banner" >
    <
    img src = "lib/banner.gif"  alt = ""  width = "800"  height = "140"  />
    </
    div >
    <
    div id = "left" >
    <
    h2 > Main Navigation </ h2 >
    <
    ul >
                <
    li >< a href = "index.php?goto=start" > Home </ a > </ li >
        <
    li >< a href = "index.php?goto=links" > Links </ a ></ li >
        <
    li >< a href = "index.php?goto=downloads" > Downloads </ a > </ li >
        <
    li >< a href = "index.php?goto=roller" > Roller </ a >      </ li >
        <
    li >< a href = "index.php?goto=auto" > Auto </ a > </ li >
        <
    li >< a href = "index.php?goto=sonstiges" > Sonstiges </ a > </ li >
            <
    li >< a href = "index.php?goto=dich" > Über dich </ a > </ li >
        <
    li >< a href = "index.php?goto=kontakt" > Kontakt </ a ></ li >
        <
    li >< a href = "index.php?goto=impressum" > Impressum </ a ></ li >     
        <
    li >< a href = "index.php?goto=gbook" > Gästebuch </ a > </ li >
    </
    ul >
    <
    h2 > Links </ h2 >
    <
    ul >
    <
    li >< a href = "" > Link 1 </ a ></ li >
    <
    li >< a href = "" > Link 2 </ a ></ li >
    <
    li >< a href = "" > Link 3 </ a ></ li >
    <
    li >< a href = "" > Link 4 </ a ></ li >
    <
    li >< a href = "" > Link 5 </ a ></ li >
    <
    li >< a href = "" > Link 6 </ a ></ li >
    </
    ul >



    <
    div id = "main" >

    <!-- 
    Content  -->


    <!-- 
    Content End  -->
    Die .css Datei schaut komplett so aus:

    PHP:


    body  {
    font small / 1.6em verdana sans - serif
    margin 0px
    font normal 10px verdana arial sans - serif
    color #000; 
    background - color #ddd;
    }
    {    
    color #888;    
    text - decoration none
    }
    a : hover  {
    color #000;
    text - decoration none ;
    }
    a : active  {
    color #000;
    }
    input textarea select  {
    border - top 1px solid  #858585;
    border - right 1px solid  #BEBEBE;
    border - bottom 1px solid  #DCDCDC;
    border - left 1px solid  #BEBEBE;
    background #fff url(input_image.gif) repeat-x;
    font normal 10px verdana arial sans - serif ;
    color #000;
    margin 1px ;
    }
    input . button  {
    border - top 1px solid  #DCDCDC;
    border - right 1px solid  #BEBEBE;
    border - bottom 1px solid  #858585;
    border - left 1px solid  #BEBEBE;
    background #eee;
    }
    h1 h2 h3  {
    margin 0px ;
    padding 0px ;
    font - weight normal ;
    }
    ul li  {
    padding 2px 0 2px 20px
    line - height 1.3em
    color #333333; 
    font - family Verdana Arial Helvetica sans - serif
    font - size 120 %; 
    color #7C7C7C;
    }
    ul  {
    list-
    style none
    margin 0px
    padding - left 0px
    list-
    style - type none
    }
    h1  {
    height 160px
    margin 0
    padding 0 ;
    }
    #content  {
    position  absolute ;
    left  50 %;
    width  800px ;
    margin - left  : - 400px ;
    background #393939;
    border 1px solid  #000;
    }



    #banner {
    position absolute ;
    top  22px ;
    left 0px ;
    margin 0
    padding 0 ;
    }


        
    #top {
    background #393939;
    position absolute ;
    top 0px ;
    left 0px ;
    padding 0 ;
    text - align right ;
    width 800px ;
    }
    #top li {
    margin 0
    padding 0
    display inline ;
    list-
    style - type none ;
    }
    #top a:link, #top a:visited {
    float left ;
    font - size 11px ;
    line - height 12px ;
    font - weight bold ;
    margin 4px 8px 0 8px ;
    padding 2px ;
    text - decoration none ;
    border none ;
    color #fff;
    }
    #top a:hover {
    padding 2px ;
    color #ccc;
    border - bottom 1px solid  #fff; 
    }
    #top a#active_top {
    padding 2px 2px 1px 2px ;
    color #D1D1D1;
    border - bottom 2px solid  #fff;
    }



    #left {
    display inline ;
    float left ;
    margin 0
    padding 3px 3px 3px 0px ;
    width 170px ;
    }
    #left p  {
    background #e7e7e7;
    color #eee;
    font normal 11px  "Trebuchet MS" Verdana sans - serif ;
    line - height 15px ;
    text - align left ;
    margin 0 ;
    }
    #left h2 {
    background #4D4D4D url(h2_image.gif) no-repeat;
    color #fff;
    font bold 13px  "Trebuchet MS" Verdana sans - serif ;
    text - align left ;
    line - height 17px ;
    margin 0 ;
    padding 2px 0 0 20px ;
    }
    #left ul {
    padding 0 ;
    margin 0px ;
    }
    #left li  {
    background #E7E7E7 url(li_image.gif) no-repeat;
    border - bottom 1px solid white ;
    color #eee;
    font - size 11px ;
    font - family "Trebuchet MS" Verdana sans - serif ;
    line - height 100 %;
    text - align left ;
    }

    #right {
    display inline ;
    float right ;
    margin 0
    padding 3px 0px 3px 3px ;
    width 170px ;
    }
    #right p  {
    background #e7e7e7;
    color #eee;
    font normal 11px  "Trebuchet MS" Verdana sans - serif ;
    line - height 15px ;
    text - align right ;
    margin 0 ;
    }
    #right h2 {
    background #4D4D4D url(h2_image.gif) right no-repeat;
    color #fff;
    font bold 13px  "Trebuchet MS" Verdana sans - serif ;
    text - align right ;
    line - height 17px ;
    margin 0 ;
    padding 2px 20px 0 0 ;
    }
    #right ul {
    padding 0 ;
    margin 0px ;
    }
    #right li  {
    background #E7E7E7 url(li_image.gif) right no-repeat;
    border - bottom 1px solid white ;
    color #eee;
    font - size 11px ;
    font - family "Trebuchet MS" Verdana sans - serif ;
    line - height 100 %;
    text - align right ;
    padding - right 20px ;
    }
    #right img, #left img {
    border 0 ;
    margin 1px ;
    }



    #main {
    background #fff;
    border 1px solid  #393939;
    margin 0px 100px 0 175px
    padding 0 ;
    width 620px ;
    }
    #main h2 {
    background #393939;
    color #fff;
    font bold 13px  "Trebuchet MS" Verdana sans - serif ;
    text - align left ;
    line - height 17px ;
    margin 0 ;
    padding 2px 0 0 20px ;
    }
    #main p { 
    font - size 110 %; 
    margin 1px 0 15px 0
    padding 2px
    line - height 16px ;
    }
    #main blockquote {
    color #999;
    font normal 10px Verdana Arial Helvetica sans - serif ;
    line - height 150 %;
    text - align left ;
    margin 5px 30px 5px 0px ;
    padding - left 5px ;
    border - left 5px solid  #393939;
    }
    #main p.date { 
    color #555;
    font - weight bold ;
    font - size 11px ;
    margin 0 0 5px 0 ;
    text - align left ;
    }
    #main p.posted  { 
    color #bbb;
    font - size 11px ;
    font - family "Trebuchet MS" Verdana sans - serif ;
    font - weight bold
    line - height normal ;
    text - align left
    margin - bottom 10px ;
    padding 3px ;
    border - top 1px dashed  #ccc;
    }
    #copyright {
    background #393939;
    border - top 1px solid  #000;
    padding 2px ;
    text - align center ;
    }
    Könnt ihr mit helfen?

    Gruß
    Matze
     
  2. 27. Dezember 2008
    AW: Probleme mit div's

    mach über "<div id="main">" ein "</div>"
     
  3. 27. Dezember 2008
    AW: Probleme mit div's

    und hinter <!-- Content End --> gehört auch noch ein </div> würd ich sagen...
     
  4. 27. Dezember 2008
    AW: Probleme mit div's

    Hi....also wenn ich mich nich verkuckt hab ist dein <div id="left"> nicht geschlossen....also hinter deinen Links muss auch noch ein </div>... wie murdoc schon sagte.

    Das gleiche bei deinem main div!!! und mach bei #main noch nen float: left; rein dann sollte es gehen.

    LTJ
     
  5. 27. Dezember 2008
    AW: Probleme mit div's

    Habs mir jetzt nicht wirklich angeschaut, aber nachdem, was ich so an Antworten les, sag ich dir eins: Gewöhn dir an, sauberer zu schreiben, einzuschieben und dann wird dein Quelltext übersichtlicher. Dann passieren weniger Fehler oder du findest sie selber. So kann man das doch nicht gescheit lesen.
     
  6. 27. Dezember 2008
    AW: Probleme mit div's

    Funktioniert, so wie ihrs gesagt habt
    Mit welchen .css Einstellungen bekomme ich hin, dass im Contentberich der Text 5 Pixel von dem Rand entfernt ist?
    Bw ist raus
     
  7. 27. Dezember 2008
    AW: Probleme mit div's

    entweder padding-left oder margin-left. margin ist der äußere, padding der innere abstand.
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.