• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3-Spalten-Layout

Mario348

Mario348

Neues Mitglied
Ich möchte gerne links und rechts vom dunkelgrauen container, also im hellgrauen container weitere Elemente platzieren.

Dazu benötige ich ja ein 3-Spalten-Layout.

Bisher habe ich 2 Container (Navi und Footer ausgeschlossen), content und inhalt.

Wie kann das an euinfachsten realisieren?

Hier mein bisheriger CSS Code:

Code: 
body {
color: #FFFFFF;
font-weight: bold;
background-color: #A0A0A0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: left;
object-align: center;
}

h1 {color: #F57900, font-size: 16px, margin-top: 10px;}

p {margin-top:15px; margin-bottom:15px;}

a {
text-decoration: underline;
color: #F57900;
}    

a:visited {
text-decoration: underline;
color: yellow;
}   

a:hover {
text-decoration: underline;
color: red;
}

a:active {
text-decoration: none;
color: red;
}

* {
scrollbar-base-color:#F57900;
scrollbar-arrow-color:black;
scrollbar-shadow-color: black; 
}

#oben
 {      
    width:                 1280px;
    height:             262px;
    background-repeat:          no-repeat;
}



#content
 {
    clear:                both;
    width:                  739px;
      float:                left;
        vertical-align:            left;
        margin:                         0px 0px 243.5px 243.5px;
    padding:            10px;
        background-color:        #2E3436;


}



* html #content {
    padding:0;
    height:95%;
    overflow:auto;
}



* html, * html body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
    
}



p, h1, h2, h3 {
padding-bottom: 10px;
}

#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
background: transparent;
} 



* {
padding:0;
margin:0;
}



#footer {
position: fixed;
bottom: 0;
width: 100%;
margin: -7.5em 243.5px 0 243.5px;
line-height: 1.5em;
text-align: center;
background: #111111;
} 


* html #footer
    {
        margin-top: -7.5em;
    }


#navigation {

    margin:0;
    padding:0;
    position:fixed;
    width:193px;
    height:1280px;

}


#inhalt {
    position:absolute;
    width:592px;
    height:1280px;

}

eset1, eset2, eset3 {

clear: both;
margin: 50px 243px 50px 243px;
background: transparent;

}

.p1 { border:2px solid #F57900;
      margin-bottom:30px;
      margin-right:50px;
      padding:6px;
      font-size:12pt;
         

      }



.font-big {
font-family: Verdana, sans-serif;
font-size:16px; font-weight:bold;
color:#000000;
}
.font-small {
font-family: Verdana, sans-serif;
font-size:10px; font-weight:normal;
color:#000000;
}
.table {
background-color:#000000;
width:50%;
}
.head {
background-color:#FFA500;
}
.main {
background-color:#919191;
font-family: Verdana, sans-serif;
font-size:12px; font-weight:normal;
color:#000000;
}
.foot {
background-color:#FFA500;
}
.align {
text-align:left;
}
.textarea {
background-color:#FFFFFF;
color:#000000;
font-family : Verdana, Helvetica, sans-serif;
font-size: 12px;
border : 1px solid #808080;
}
.input {
background-color:#FFFFFF;
color:#000000;
font-family : Verdana, Helvetica, sans-serif;
border : 1px solid #808080;
font-size: 12px;
}
.select {
background-color:#FFFFFF;
color:#000000;
font-family : Verdana, Helvetica, sans-serif;
font-size: 12px;
}
.button {
width : 130px;
}

#button {
    position:absolute;
    left:50%;
    top:50%;
    width: 100px;
    height: 100px;
    margin-left:113px;
    margin-top:322px;
}
 
Code: 
<h1>Header</h1>
<ul id="Menu">
  <li>...</li>
</ul>
<ul id="News">
  <li>...</li>
</ul>
<h2>Seitentitel</h2>
<p>Text</p>
Code: 
#Menu {
  float:left;
}
#News {
  float:right;
}
 
Efchen schrieb:
Code: 
<h1>Header</h1>
<ul id="Menu">
  <li>...</li>
</ul>
<ul id="News">
  <li>...</li>
</ul>
<h2>Seitentitel</h2>
<p>Text</p>
Code: 
#Menu {
  float:left;
}
#News {
  float:right;
}
Zum Vergrößern anklicken....

Jetzt hat sich aber der Abstand von der Navigation zum mittleren Container vergrössert...
Aber dazwischen soll ja eben kein Abstand sein.
 
Mario348 schrieb:
Aber leider habe ich nicht gefunden, was den Abstand verursacht...
Zum Vergrößern anklicken....

Abstand - wo? Mach doch einmal bitte eine Screenshot oder gehe genauer auf dei Problem ein..


Edit: mach statt float:right mal float:left. Oder verringere deine Breite des Containers wo die gefloateten Elemente drin sind. float left setzt ganz links an den rand, float right ganz rechts. wenn die 2 elemente schmaler sind als der Container in dem sie sind, dann ist klar das dort ein Abstand dazwischen entsteht.
 
sry aber wenn du es jetzt nicht auf die Reihe bekommst, ich poste es gerne nocheinmal, extra fett, wenn daraufhin keine reaktion oder hilfestellung kommt, kann ich leider nichtmehr helfen und muss mich ausklingen.

Zitat:
Abstand - wo? Mach doch einmal bitte eine Screenshot oder gehe genauer auf dei Problem ein..


Wir können alle leider nicht hellsehen und um dir helfen zu können, solltest du es uns so leicht wie möglich machen, damit wir uns in dein Problem reindenken können.


Gruß
Loon3y
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben