positionierung von layers (diese <div>-dinger)

mordilla · 09.05.2011

hallo zusammen

ich suche echt schon ne ganze weile, aber irgendwie finde ich nicht wirklich, was ich brauche, resp. weiss nicht, wonach ich exakt suchen muss ... und ich werde auch noch weitersuchen, aber vielleicht hat ja hier jemand erbarmen mit mir und möchte mir auf die schnelle helfen ...

ich versuche, eine website für ne kollegin zu basteln. leider hab ich von layers nicht allzuviel ahnung (bin irgendwie bei den frames hängen geblieben *schäm*), bin aber willens, es zu lernen. nur eilt es langsam mit der website für meine kollegin, deswegen dachte ich mir, es gibt bestimmt leute, die sehen, was ich falsch mache ... könnte man ein zip mit dem aktuellen css, html, bildern und einem bild, wie es sein soll, runterladen.

ich weiss, diese vorgehensweise ist hier nicht sehr beliebt, aber ich kriege echt langsam die krise :'( ... aber ich übe natürlich weiter!!!

danke schonmal :danke:

bea

simonpicos · 09.05.2011

AW: positionierung von layers (diese <div>-dinger)

Blinkblinkblink... Ich weiß nicht ganz genau was du von uns möchtest. Ich gehe davon aus, dass du möchtest, dass es so aussieht wie in dem Bild. Ich verstehe allerdings nicht was die bunten boxen sollen. Gut, ich les mich mal ein wenig in deinen quelltext rein, und meld mich dann mal.

Gruß!

terrapack · 09.05.2011

AW: positionierung von layers (diese <div>-dinger)

Hallo bea,

da hast du dich ja ganz schön verzettelt mit den div-Containern. So in etwa sollte das aussehen, dass du überhaupt die Chance hast, die gewünschte Struktur hinzubekommen:

HTML:

<div class="container">
  <div class="topcontainer">
    <div class="ecke-li-ob"> </div>
    <div class="oben"> </div>
    <div class="ecke-re-ob"> </div>
  </div>
  <div class="maincontainer">
    <div class="links"> </div>
     <div class="navilinks"> </div>
     <div class="wrapper"> </div>
     <div class="content"> </div>
     <div class="rechts"> </div>
  </div>
  <div class="footercontainer">
    <div class="ecke-re-un"> </div>
    <div class="unten"> </div>
    <div class="ecke-li-un"> </div>
  </div>
</div>

Ich hoffe, das gibt dir eine grundsätzliche Idee, wie diese "Div-Dinger" ;-) funktionieren.
Aber wenn die Zeit eilt, warum benutzt du kein CMS mit vorgefertigtem Template wie z.B. Joomla?

simonpicos · 09.05.2011

AW: positionierung von layers (diese <div>-dinger)

terrapack hat schon mal recht, allerdings gibt es noch einiges zu ergänzen:

Also was du mit deiner css gemacht hast weiß ich nicht so genau. Im unteren Bereich hast du sage und schreibe 32 Kommentare eingebaut?! Dadurch ist die hälfte der Datei unrelevant für den browser. Ich weiß nicht ob du das beabsichtigst. außerdem scheinst du mal css und html kommentare zu verwurschteln... Darf ich fragen mit welchem Editor du arbeitest? Normale Editoren schlage bei sowas eigentlich Alarm...

Wenn ich dir genaue Hilfe geben soll, dann stelle doch bitte gezielte Fragen, damit ich auch darauf Antworten kann. So kann ich nämlich eigentlich fast nichts sagen, obwohl es eigentlich viel zu sagen gibt... Sorry

Gruß, simonpicos!

mordilla · 09.05.2011

AW: positionierung von layers (diese <div>-dinger)

@terrapack
zumindest schaut das logisch aus, wenn ichs so durchlese

hab zumindest die idee verstanden!
joomla hab ich versucht, aber ich möchte gerne diese div-dinger verstehen :-D
danke schön!!!

@simonpicos
das zeuchs mit den kommentaren wollte ich einfach mal noch nicht löschen, ich weiss, dass das meinste unrelevant ist.
meine problem ist, dass ich irgendwie nicht begreife, wie das mit den div's funktioniert und ich nichts gescheites im web finde, was mir hilft, das zu verstehen (weil ich vermutlich nach dem falschen suche).
und die farben waren für mich, dass ich irgendwie seh, was wo sein könnte ...

simonpicos · 09.05.2011

AW: positionierung von layers (diese <div>-dinger)

Klick!! Viel Lesearbeit aber extrem Hilfreich!

JannisL · 09.05.2011

AW: positionierung von layers (diese <div>-dinger)

1. Die Div´s würde ich als Blöcke bezeichnen. Oder Boxen

2.:Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
Perfekt zum kapieren

simonpicos · 09.05.2011

AW: positionierung von layers (diese <div>-dinger)

JannisL schrieb:
1. Die Div´s würde ich als Blöcke bezeichnen. Oder Boxen
2.:Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
Perfekt zum kapieren

Danke Jannis, kannte ich noch nicht! Kenne mich zwar ganz gut aus, sowas zum nachlesen ist allerdings nicht schlecht

Zum TO: die layers sind was anderes, wie JannisL es schon sagte sollte man es besser als Box-Modell bezeichnen.

Gruß!

mordilla · 09.05.2011

AW: positionierung von layers (diese <div>-dinger)

oh, das scheints zu sein :-D

tanketööön

mordilla · 13.05.2011

AW: positionierung von layers (diese <div>-dinger)

hmmm ... extrem viel weiter bin ich noch nicht (auch aus zeitgründen). habs jetzt mal auf , wenn jemand mit dem firebug mal schauen mag und mir sagen kann, warum diese dinger nicht IN den conainern sind sondern irgendwo unten ... *grummel*

lauffreak · 13.05.2011

AW: positionierung von layers (diese <div>-dinger)

Hi

Du musst die container mit float positionieren und ihnen eine Breite mitgeben- am besten in %.
Wie soll es denn eigentlich ausschauen?
Wenn die Farben "lesbar" wären- yellow , silver tec. wäre es leichter die Positionen zu finden.
Grüße*lauffreak

woelffin · 20.05.2011

AW: positionierung von layers (diese <div>-dinger)

Gaaaanz viel nützliche und gut verständliche Infos gibts auch auf dieser Seite:
The StyleWorks { Herzlich Willkommen }
lg
woelffin

Kroarr · 21.05.2011

AW: positionierung von layers (diese <div>-dinger)

Hallo, ich bin selber noch absoluter Anfänger. Haben mir aber trotzdem schnell erlaubt, an Deinem css was zu ändern und ein div verschoben. Keine Ahnung, ob es auch so aussehen sollte. Wie gesagt, selber absoluter Anfänger. Aber war wieder eine kleine Übung mehr

Hier noch schnell der Code

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sovrana spa</title>
<link href="css/sovrana.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
    <div id="wrapper">
        <div id="topcontainer">
            <div id="ecke-li-ob"></div>
            <div id="oben"></div>
            <div id="ecke-re-ob"></div></div>
        <div id="maincontainer">
            <div id="links"></div>
            <div id="navilinks">navi</div>
              <div id="contentcontainer">
                <div id="toprechts">kopf</div>
                <div id="rechts"></div>
                <div id="content">
                  <p>Warum</p>
                  <p>will</p>
                  <p>dieser</p>
                  <p>blöde</p>
                  <p>Text </p>
                  <p>nicht</p>
                  <p>scrollen?</p>
                  <p>warum </p>
                  <p>läuft</p>
                  <p>er</p>
                  <p>einfach </p>
                  <p>über</p>
                  <p>den </p>
                  <p>content</p>
                  <p>drüber?</p>
                  </div>
         </div>
            
        </div>
        <div id="footercontainer">
            <div id="ecke-li-un"></div>
            <div id="unten"></div>
            <div id="ecke-re-un"></div>
</div></div></div></div>
</body>
</html>

Code:

body, html{ 
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background-color: #E4E5d6;
        font-color: #0F0;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 18px;
        }
ul, ol, dl {
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-left: 15px;
    padding-right: 15px;
}
a img {
    border: medium none;
}
a:link {
    color: #42413C;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
}
#container {
    background-color: #E4E5d6;
    margin: 0 auto;
    width: 100%;
}
#wrapper {
    height: 540px;
    margin: 30px auto 0;
    width: 840px;
}
#topcontainer {
    height: 20px;
    margin: 0;
    position: relative;
    width: 100%;
}
#maincontainer {
    height: 500px;
    margin: 0;
    position: relative;
    width: 100%;
}
#footercontainer {
    height: 20px;
    margin: 0;
    position: relative;
    width: 100%;
}
#ecke-li-ob {
    position:relative;
    background:url(../bilder/li-ob.png) no-repeat;
    float:left;
    height: 20px;
    width: 20px;
}
#oben {
    background:url(../bilder/oben.png);
    float: left;
    height: 20px;
    width: 800px;
}
#ecke-re-ob {
    background:url(../bilder/re-ob.png);
    float: left;
    height: 20px;
    width: 20px;
}

#contentcontainer {
    position: relative;
    width: 100%;
}

#links {
    background:url(../bilder/links.png);
    float: left;
    height: 500px;
    width: 20px;
}
#rechts {
    background:url(../bilder/rechts.png);
    float: right;
    height: 500px;
    width: 20px;
}
#navilinks {
    background:url(../bilder/navi.png);
    float: left;
    height: 500px;
    width: 215px;
}
#toprechts {
    background:url(../bilder/top.png);
    float: left;
    height: 140px;
    width: 585px;
}
#content {
    background:url(../bilder/content.png);
    float: left;
    height: 360px;
    width: 585px;
    overflow:auto;
}
#ecke-li-un {
    background:url(../bilder/li-un.png);
    float: left;
    height: 20px;
    width: 20px;
}
#unten {
    background:url(../bilder/unten.png);
    float: left;
    height: 20px;
    width: 800px;
}
#ecke-re-un {
    background:url(../bilder/re-un.png);
    float: left;
    height: 20px;
    width: 20px;
}
#clearfloat {
    clear: both;
    font-size: 1px;
    height: 0;
    line-height: 0;
}

Naja, habs mal probiert

Grüässli

sokie · 21.05.2011

AW: positionierung von layers (diese <div>-dinger)

Hallo Mordilla,
pass auf, dass Du Dich durch zu viele Möglichkeiten nicht verunsichern lässt.
wenn der Inhalt nicht über den container "content" hinauslaufen, die gesamthöhe der Seite aber auch nicht verlängern soll, kannst du das per overflow:auto lösen.
wenn die fläche des gesamten oberen Teils (inklusive inhalte) nicht flexibel ist, gibt es aber auch gar keinen Grund irgendetwas zu slicen, schonmal gar nicht verschiedene Container für die Ecken anzulegen.
wenn die linke Seite komplett von der Navigation eingenommen wird, und auch diese dem Anschein nach nicht in der Höhe flexibel ist, brauchst du auch keinen Wiggel mit floats und clear.
bau die seite nochmal vernünftig ohne slicing und Eckencontainer auf.