Antworten auf deine Fragen:
Neues Thema erstellen

DIV Container

S

schmito

Guest

Hey Leute, ich hab ein Problem und zwar: Ich hab mir ne fun-Homepage geschrieben, anfangs mit HTML und dann hab ich sie in CSS geschrieben (mit den DIV Containern). Es ist alles prima gelaufen... BIS mir auffiel, wenn ich meine Homepage minimiere dann verschieben sich die einzelnen DIV Container innereinander. Hier ist meine Homepage bei der ich dieses Problem habe: und hier mein CSS Code:
(Das ich die Größe nicht auf alle Auflösungen angepasst habe weiß ich :rolleyes: , das kommt noch)

Code:
#main {
    border-right-width: 1px;
    border-left-width: 0px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-style: solid;
    border-color: #000000;
    right: 10%;
    left: 20%;
    top: 10%;
    bottom: 20%;
    position: fixed;
    padding-right: 4px;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    overflow: auto;
    background-color: #FFFE00;
    opacity:0.7; 
    filter:alpha(opacity=70);
    max-height: 1433.6px;
    min-height: 537.6px;
    max-width: 1792px;
    min-width: 716.8px;
}

#header {
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    border-color: #000000;
    right: 10%;
    left: 10%;
    top: 0%;
    bottom: 90%;
    position: fixed;
    padding-right: 4px;
    padding-left: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #FFFE00;
    max-height: 204.8px;
    min-height: 76.84px;
    max-width: 2048px;
    min-width: 819.2px;
    opacity:0.7; 
    filter:alpha(opacity=70);

}

p.header-schrift {
    font-family: monospace, Arial, Verdana;
    font-size: 30px;
    color: blue;
    text-indent: 10%;
}

#footer {
    border-right-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-top-width: 0px;
    border-style: solid;
    border-color: #000000;
    right: 60%;
    left: 10%;
    top: 80%;
    bottom: 0%;
    position: fixed;
    padding-right: 0px;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 0px;
}

#footer2 {
    border-right-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-top-width: 0px;
    border-style: solid;
    border-color: #000000;
    right: 10%;
    left: 60%;
    top: 80%;
    bottom: 0%;
    position: fixed;
    padding-right: 0px;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 0px;
}

#navigation  {
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
    background-color: #FFFE00;
    opacity:0.7; 
    filter:alpha(opacity=70);
    right: 80%;
    left: 10%;
    top: 10%;
    bottom: 20%;
    position: fixed;
    padding-top: 2px;
    padding-left: 0px;
    padding-right: 2px;
    padding-bottom: 2px;
    max-height: 1433.6px;
    min-height: 537.6px;
    max-width: 256px;
    min-width: 165px;
    overflow: auto;
    /*background-image:url(picture/navibar.png);*/
}

#navigation  ul{
    List-style-type: none;
}

#navigation li{
    border: 0px;
}

#navigation a{
    display: block ;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 4px;
    padding-bottom: 2px;
    background: transparent;
}

#navigation a:hover, #navigation  li.active a {
    background: lightgray;
    opacity:0.5; 
    filter:alpha(opacity=50);
    color: #000073;
}

a.navi-hyper:link {
    text-decoration: none;
    color: #000073;
    font-size: 12pt;
    font-weight: bold;
    font-family: Arial, Verdana;
}

a.navi-hyper:hover {
    text-decoration: none;
    color: #000073;
    font-size: 12pt;
    font-weight: bold;
    font-family: Arial, Verdana;
}

a.navi-hyper:active {
    text-decoration: none;
    color: #000073;
    font-size: 12pt;
    font-weight: bold;
    font-family:  Arial, Verdana;
}

a.navi-hyper:visited {
    text-decoration: none;
    color: #000073;
    font-size: 12pt;
    font-weight: bold;
    font-family: Arial, Verdana;
}

p.main-h1 {
    font-family: arial;
    font-size: 25px;
    color: #006b00;
    text-indent: 30%;
}

p.main-h2 {
    font-family: arial;
    font-size: 19px;
    color: #820000;
    text-indent: 4%;
}

p.main-h3 {
    font-family: arial;
    font-size: 16px;
    color: #820000;
    text-indent: 5%;
}

p.main-text {
    font-family: arial;
    color: #000000;
    text-indent: 3%;
}

p.text-stämme{
    text-indent:3%;
    color:black;
    font-size: 14pt;
}

#h2{
    color:green;
    text-indent:3%;
}

p.dl{
    text-indent:3%;
    color:black;
}
a.dlh:link {
    color:blue;
    text-indent:3%;
}

a.dlh:visited {
    color:blue;
    text-decoration:none;
    text-indent:3%;
}

a.dlh:hover{
    color:green;
    text-decoration:none;
    text-indent:3%;
}

a.dlh:active {
    color:blue;
    text-decoration:none;
    text-indent:3%;
}

p.text{
    text-indent:3%;
    font-size: 14px;
}

p.text-mc{
    text-indent:3%;
    color:red;
}

p.text-red{
    text-indent:3%;
    color:red;
}

a.hyper-mc:link {
    color:green;
    text-decoration:none;
    text-indent:3%;
}

a.hyper-mc:visited {
    color:green;
    text-decoration:none;
    text-indent:3%;
}

a.hyper-mc:hover{
    color:green;
    text-decoration:none;
    text-indent:3%;
}

a.hyper-mc:active {
    color:green;
    text-decoration:none;
    text-indent:3%;
}

a.hyper-partner:link {
    color:green;
    text-decoration:none;
    text-indent:3%;
    font-size: 14pt;
    font-family: monospace, Arial, Verdana;
}

a.hyper-partner:visited {
    color:green;
    text-decoration:none;
    text-indent:3%;
        font-size: 14pt;
    font-family: monospace, Arial, Verdana;
}

a.hyper-partner:hover{
    color:green;
    text-decoration:none;
    text-indent:3%;
        font-size: 14pt;
    font-family: monospace, Arial, Verdana;
}

a.hyper-partner:active {
    color:green;
    text-decoration:none;
    text-indent:3%;
    font-size: 14pt;
    font-family: monospace, Arial, Verdana;
}

p.text-stämme2{
    text-indent:3%;
    color:blue;
}

a.footer-hyper:link {
    color:red;
    text-decoration:none;
    text-indent:3%;
    font-size: 12pt;
    font-family: Arial, Verdana;
}

a.footer-hyper:visited {
    color:red;
    text-decoration:none;
    text-indent:3%;
    font-size: 12pt;
    font-family: Arial, Verdana;
}

a.footer-hyper:hover{
    color:red;
    text-decoration:none;
    text-indent:3%;
    font-size: 12pt;
    font-family: Arial, Verdana;
}

a.footer-hyper:active {
    color:red;
    text-decoration:none;
    text-indent:3%;
    font-size: 12pt;
    font-family: Arial, Verdana;
}

p.dev-text {
    font-family: monospace, Arial, Verdana;
    font-size: 14pt;
    color: green;
    text-indent: 3%;
}

p.copyright {
    font-family: monospace, Arial;
    color: yellow;
}
Ich bitte um Hilfe!

mfg Tobias
 

S

schmito

Guest

AW: DIV Container

Danke,
aber ich hab ein CSS Buch zu Hause und da steht das auch so drin.
 

mwxx

Nicht mehr ganz neu hier

AW: DIV Container

Lass doch besser die Container floaten (=Suchstichwort 1) und arbeite gegen das Ineinanderschieben mit der CSS-Eigenschaft min-width (=Suchstichwort 2)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.354
Mitglieder
67.531
Neuestes Mitglied
webahoi
Oben