Antworten auf deine Fragen:
Neues Thema erstellen

Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

tomas

Noch nicht viel geschrieben

Hallo zusammen,

ich qäale mich schon länger mt folgendem Problem:
Ich baue eine Seite mit Hilfe von Ebenen.

Ich habe einen Hauptcontainer, der immer zentriert positioniert wird, mit einer festen Seitenbreite. Die Höhe ist automatisch.

Nun habe ich drin eine Ebene verschachtelt, wo Fliesstext ist. Diese Ebene ist fest positioniert, in der Höhe aber automatisch.
Nun möchte ich gerne eine andere Ebene (quasi Fußzeile) direkt unterhalb der Textebene mit der automatischen Höhe positionieren.

Wie mache ich das? Irgendwie krige ich die Fußzeilen Ebene immer nur absolut zum Hauptcontainer positioniert.

Vielen Dank im voraus
 

anoX

Nicht mehr ganz neu hier

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Du meinst wohl Boxen - nicht Ebenen.

Also da Du keinen Code gepostet hast (der würde jetzt enorm zu einer raschen Lösung beisteuern) sage ich mal direkt, wie es eigentlich funktionieren müsste:

<div id="container">
<div id="content">
<p>Text</p>
</div>
</div>
<div class="clear"></div>
<div id="footer"></div>


CSS:
.clear {
clear:left;
float:none;
}

Wenn es "nur" an der Verschachtelung lag, sollte es mit der passenden CSS so funktionieren. Wenn nicht, poste mal deinen Quelltext samt CSS.

BTW - mal mit "position: relative" versucht? Ach was schreib ich - Quelltext her, oder ich schieße. ^^
 

cebito

undefined

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Denke auch, das du mal deinen code posten solltest. Wie sind denn deine divs positioniert? Hört sich für mich an, als wäre es absolute.

@anoX - wozu der container und das clear? Das würde ausreichen, um dein Beispiel darzustellen.
HTML:
   <div id="content">
      <p>Text</p>
   </div>
<div id="footer"></div>
 
U

uffi

Guest

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Ich habe einen Hauptcontainer, der immer zentriert positioniert wird, mit einer festen Seitenbreite. Die Höhe ist automatisch.

Nun habe ich drin eine Ebene verschachtelt, wo Fliesstext ist. Diese Ebene ist fest positioniert, in der Höhe aber automatisch.
Nun möchte ich gerne eine andere Ebene (quasi Fußzeile) direkt unterhalb der Textebene mit der automatischen Höhe positionieren.

Wie mache ich das? Irgendwie krige ich die Fußzeilen Ebene immer nur absolut zum Hauptcontainer positioniert.

Grundsätzlich gilt:
position: absolute ist immer relativ zu einem Elternelement, das die Angabe position:relative hat. Gibt es kein solches Elternelement, ist der Bezugspunkt der body.

Ich gehe davon aus, dass dein Hauptcontainer ein position: relative hat und denke mal, du brauchst einen zusätzliches div, dass Text- und den Fußnotenbereich rahmt. Dieses bekommt dann ein position:absolute und der Text- und der Fußnotencontainer bekommen nichts, was auf position:static hinausläuft. Damit stehen die beiden kaputtautomatisch untereinander.

<div id="main-container">
<div id="content-container">
<div id="text">
<p>Der Text</p>
</div>
<div id="footnotes">
<p>Fußnote</p>
</div>
</div>
<div id?
</div>

Die css dazu, soweit es die Positionierung betrifft:

#main-container {position: relative}
#content-container {position: absolute}

Ich hoffe, dass hilft dir, Uschi
 

tomas

Noch nicht viel geschrieben

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Hallo zusammen,

vielen Dank für die schnellen Antworten, so richtig schlau bin ich noch nicht geworden (Anfänger).
Quellcode sieht so aus:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--

a:link {
    font-weight: normal;
    color: #036;
    text-decoration: none;
}

#HauptContainer {
    position:absolute;
    left:50%;
    top:0px;
    margin-left:-480px;
    width:960px;
    height:auto;
    z-index:0;
}
#apDiv1 {
    position:absolute;
    left:0;
    top:0;
    width:121px;
    height:79px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    left:121px;
    top:0px;
    width:210px;
    height:42px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:121px;
    top:42px;
    width:88px;
    height:37px;
    z-index:3;
}
#apDiv4 {
    position:absolute;
    left:209px;
    top:42px;
    width:10px;
    height:37px;
    z-index:4;
}
#apDiv5 {
    position:absolute;
    left:219px;
    top:42px;
    width:88px;
    height:37px;
    z-index:5;
}
#apDiv6 {
    position:absolute;
    left:307px;
    top:42px;
    width:10px;
    height:37px;
    z-index:6;
}
#apDiv7 {
    position:absolute;
    left:317px;
    top:42px;
    width:88px;
    height:37px;
    z-index:7;
}
#apDiv8 {
    position:absolute;
    left:405px;
    top:42px;
    width:10px;
    height:37px;
    z-index:8;
}
#apDiv9 {
    position:absolute;
    left:415px;
    top:42px;
    width:88px;
    height:37px;
    z-index:9;
}
#apDiv10 {
    position:absolute;
    left:503px;
    top:42px;
    width:10px;
    height:37px;
    z-index:10;
}
#apDiv11 {
    position:absolute;
    left:513px;
    top:42px;
    width:88px;
    height:37px;
    z-index:11;
}
#apDiv12 {
    position:absolute;
    left:601px;
    top:42px;
    width:10px;
    height:37px;
    z-index:12;
}
#apDiv13 {
    position:absolute;
    left:611px;
    top:42px;
    width:88px;
    height:37px;
    z-index:13;
}
#apDiv14 {
    position:absolute;
    left:699px;
    top:42px;
    width:10px;
    height:37px;
    z-index:14;
}
#apDiv15 {
    position:absolute;
    left:709px;
    top:42px;
    width:88px;
    height:37px;
    z-index:15;
}
#apDiv16 {
    position:absolute;
    left:797px;
    top:42px;
    width:10px;
    height:37px;
    z-index:16;
}
#apDiv17 {
    position:absolute;
    left:807px;
    top:42px;
    width:88px;
    height:37px;
    z-index:17;
}
#apDiv18 {
    position:absolute;
    left:895px;
    top:42px;
    width:65px;
    height:37px;
    z-index:18;
}
#apDiv19 {
    position:absolute;
    left:0px;
    top:79px;
    width:960px;
    height:66px;
    z-index:19;
}
#apDiv20 {
    position:absolute;
    left:0;
    top:145px;
    width:265px;
    height:510px;
    z-index:20;
}
#apDiv21 {
    position:absolute;
    left:70px;
    top:100px;
    width:820;
    height:auto;
    z-index:21;
    font-family: Arial, Helvetica, sans-serif;
    color: #036;
    background-image: none;
    font-size: 0.9em;
    line-height: 1.15em;
}
#apDiv22 {
    position:absolute;
    left:895px;
    top:145px;
    width:65px;
    height:375px;
    z-index:22;
}
#apDiv23 {
    position:absolute;
    left:0px;
    top:636px;
    width:960px;
    height:28px;
    z-index:23;
}
#apDiv24 {
    position:absolute;
    left:837px;
    top:654px;
    width:88px;
    height:28px;
    z-index:24;
}
#apDiv25 {
    position:absolute;
    left:925px;
    top:654px;
    width:35px;
    height:28px;
    z-index:25;
}
#apDiv26 {
    position:absolute;
    left:0px;
    top:3244px;
    width:189px;
    height:27px;
    z-index:26;
}
#apDiv27 {
    position:absolute;
    left:74px;
    top:98px;
    width:286px;
    height:26px;
    z-index:27;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #039;
}
#apDiv28 {
    position:absolute;
    left:587px;
    top:663px;
    width:147px;
    height:99px;
    z-index:28;
}
a:active {
    font-weight: bold;
}
#HauptContainer #apDiv21 t p {
    font-weight: bold;
    font-size: 18px;
}
t p strong {
    font-size: 14px;
}
#apDiv29 {
    position:absolute;
    left:0px;
    top:664px;
    width:960px;
    height:27px;
    z-index:22;
    background-color: #FFFFFF;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    line-height: 26px;
    font-size: 12px;
    font-variant: normal;
}
-->
</style>

</head>
<body bgcolor="#999999">
<div id="HauptContainer">
  <div id="apDiv1"><a href="index.html"><img src="img/textseiten/logo.gif" alt="" width="121" height="79" border="0" /></a></div>
<div id="apDiv2"><img src="img/textseiten/leiste.gif" alt="" width="839" height="42" /></div>
<div id="apDiv3"><a href="index.html"><img src="img/textseiten/mome_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv4"><img src="img/textseiten/weiss_klein.gif" alt="" width="10" height="37" /></div>
<div id="apDiv5"><a href="team.html"><img src="img/textseiten/team_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv6"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv7"><a href="praxis.html"><img src="img/textseiten/praxis_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv8"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv9"><a href="leistungen.html"><img src="img/textseiten/leistungen_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv10"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv11"><a href="info.html"><img src="img/textseiten/info_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv12"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv13"><a href="kontakt.html"><img src="img/textseiten/kontakt_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv14"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv15"><a href="links.html"><img src="img/textseiten/links_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv16"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv17"> <a href="impressum.html"><img src="img/textseiten/impressum_active.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv18"><img src="img/textseiten/weiss_gross.gif" alt="" width="65" height="37" /></div>
<div id="apDiv19"><img src="img/textseiten/rahmen_mitte.gif" alt="" width="960" height="557" /></div>
<div id="apDiv21">
    <t><strong style="font-size: 16px">Impressum</strong></t>
<p style="font-weight: bold">Anbieterkennzeichnung gem. § 10 MDStV
</p>
<p>www.augenarzt-wuppertal.de ist ein Projekt von:<br>
  Dr. Omar Abo Basha<br>
  Herzogstraße 17<br>
  42103 Wuppertal</p>
<p style="font-weight: bold">Haftungshinweis  </p>
<p>Die Inhalte werden mit großer Sorgfalt geprüft und eingepflegt. Für Änderungen, Aktualität, Vollständigkeit und Richtigkeit, bzw. bei Irrtum der zur Verfügung gestellten Informationen übernimmt der Verfasser keinerlei Gewähr. Haftungsansprüche gegen den Verfasser, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens des Verfassers kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt. Alle Angebote sind freibleibend und unverbindlich. Der Verfasser behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.</p>
<p>Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Allerdings haben wir keinen Einfluss auf die Inhalte dieser verlinkten Seiten, hierfür ist der jeweilige Dienstanbieter verantwortlich. Sollten rechtswidrige Seiten über die Hyperlinks abrufbar sein, bitten wir um eine Mitteilung an: <a href="mailto:abo-wuppertal@t-online.de">abo-wuppertal@t-online.de</a>. Wir werden dies dann überprüfen und die Links ggf. entfernen.</p>
<p><span style="font-weight: bold">Copyright </span></p>
<p>Alle Texte, Bilder, Audio-Dateien und weitere hier veröffentlichte Informationen, mit Ausnahme der entsprechend gekennzeichneten Publikationen, unterliegen dem Copyright. Eine Reproduktion oder Wiedergabe des Ganzen oder von Teilen ist ohne die schriftliche Genehmigung nicht gestattet.</p>
</div>
<div id="apDiv23"><img src="img/textseiten/leiste-unten.gif" alt="" width="960" height="28" border="0" /></div>
<div id="apDiv29">Augen&auml;rztliche Gemeinschaftspraxis Dr. med. O. Abo Basha / Dr. med. D. Gr&uuml;tzner | Herzogstra&szlig;e 17, 42103 Wuppertal | Tel: (0202) 45 14 33</div>
</div>
</body>
</html>
Und ich möchte gerne erreichen, dass sich der div23 direkt unter div21 positioniert.
Relative, absolute und static habe ich ausprobiert, funktioniert irgendwie nicht.
 

leohh

CSS verliebt

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

so richtig schlau bin ich noch nicht geworden (Anfänger).
Die absolute Positionierung ist hier nicht ratsam.
Benutz den natuerlichen Fluss ( durch die absolute Positionierung hebst du ihn auf ) und verwende float. In Europa fangen wir oben links an und genau das wird dein Browser auch tun er wird dir dein erstes Element oben links platzieren und sich dann erstmal, solange es deine Ausmaße gestatten, nach rechts seinen Platz suchen bis er ans Ende gelangt. Danach nimmt er sich die naechste 'Zeile' vor usw.

Dein Logo, kannst du als img einbinden aber deine Menuepunkte usw. solltest du als Hintergrundgrafik fuer entsprechende Elemente einsetzen. Durch float: left / right; oder display: inline; erreichst du, dass elemente nebeneinander gesetzt werden. Menues sind bevorzugt in Listen (ul) zu setzen. Lieber noch mal Grundlagen pauken und den WYSIWYG-Editor aus dem Fenster werfen ;)
 

tomas

Noch nicht viel geschrieben

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Da hast du sicherlich recht, mein problem ist nur, dass die Seite nun fast fertig ist und ich möchte nicht alles nochmal über den Haufen schmeissen, Beim nächsten mal werde ich es bestimmt anders machen.
Eigentlich ist dieses Problem dadurch entstanden, dass Explorer und Firefox die line-height irgendwie anders interpretieren. Also wenn ich es hinkriegen würde, auch lange Fliesstexte in beiden Browsern gleich lang zu machen, könnte ich mit einer definierten Höhe des Layers arbeiten und das Problem wäre gelöst. Das habe ich aber bis jetzt auch nicht hingekrieget.
Um zu verstehen, was ich meine, schau dir bitte diesen linK:

in Explorer und Firefox an. In Explorer ist der Zeilenabstand deutlich größer und das haut mir mein Design gerade bei langen Fliesstexten um.
 

anoX

Nicht mehr ganz neu hier

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Also im Firefox sieht es eigentlich ganz okay aus und da ist auch Div 23 unter Div 21. Im IE hab ich jetzt nicht geschaut.

Wenn Du allerdings den Div DIREKT DARUNTER haben willst, liegt das nicht-funktionieren daran, dass Div 19 zu hoch ist und Div 23 zu tief positioniert ist. Also nimm Div 19 ein paar px der height weg und Div 23 ein paar px bei top.

Gib jedem image ein alt="" mit (img src="blabla.jpg" alt=""), entferne die Zeichen vor deinem Doctype (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">) und trenne dich von dem <t>-Tag, den es nicht gibt. Dann hast Du sogar einen validen Quelltext.

An sich möchte ich dir aber auch raten, dich nochmal genau in das Thema CSS reinzulesen. Bei der Menge an Divs merkst Du selbst, dass man schnell den Überblick verliert und im Grunde bräuchtest Du nur diesen Aufbau:

Code:
<div id="container">
  <div id="top"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>

Die Navigation stellt man als <ul></ul> dar. Ein Tut dazu gibt es hier. Zu den Box-Modellen (Divs) ebenfalls. Also wenn Du die Absicht hast, dich weiterhin mit dem Thema zu befassen, wird es dir nicht schaden da mal reinzuschauen.


@cebito

Richtig, hätte gereicht. War "irritiert", weil tomas von einem Hauptcontainer sprach. Bei bestimmten "Faxen" mit Hintergrundbildern würde ein Container infrage kommen - so aber wohl eher nicht.
 

leohh

CSS verliebt

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Naja, alles ueber den Haufen, musst du gar nicht werfen.
Mit ein bisschen Uebung, bekommst du das binnen Minuten hin.
HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>MyPage</title>
        <style>
            #page-wrap {
                width: 980px;
                margin: 0 auto;
                background: #efefef;
            }
            #logo {
                float: left;
                background: orange;
                width: 121px; height: 79px
            }
            #logo img {
                display: block;
                widht: 121px; height: 79px;
                border: none;
                background: orange url() no-repeat;
            }
            #menu       { list-style: none; padding-top: 42px; }
            #menu li    { float: left; margin-left: 1em; width: 88px; height: 37px; background: yellow; }
            #menu a     { display: block; }
        </style>
        
    <body>
        <div id="page-wrap">
            <div id="header">
                <a id="logo" href="index.html" title="zuruck zum Ursprung"><img src="img/textseiten/logo.gif" alt=""></a>
                <ul id="menu">
                    <li><a href="link" title="link">link1</a>
                    <li><a href="link" title="link">link2</a>
                    <li><a href="link" title="link">link3</a>
                    <li><a href="link" title="link">link4</a>
                    <li><a href="link" title="link">link5</a>
                    <li><a href="link" title="link">link6</a>
                    <li><a href="link" title="link">link7</a>
                    <li><a href="link" title="link">link8</a>
                </ul>
                <br style="clear: left; height: 0; line-height: 0;">
                
            </div>
            <!-- endHeader -->
            
            <br style="clear: left; height: 0; line-height: 0;">
            
            <div id="content">
                <h3>Impressum</h3>
                <strong>Anbieterkennzeichnung gem. § 10 MDStV</strong>
                <p>
                    [url=http://www.augenarzt-wuppertal.de]www.augenarzt-wuppertal.de Augenrztliche Gemeinschaftspraxis Dr.med. Abo Basha, Dr..med. Gruetzner . Ttigkeitsschwerpunkte: Glaukomdiagnostik mittels HRT und GDx , Orthoptik (Sehschule), Kontaktlinsenanpassung, Lasertherapie und Kosmetische Lidchir[/url] ist ein Projekt von:<br>
                    Dr. Omar Abo Basha<br>
                    Herzogstraße 17<br>
                    42103 Wuppertal
                
                <h3>Haftungshinweis</h3>
                <p>
                    Die Inhalte werden mit großer Sorgfalt geprüft und eingepflegt. Für Änderungen, Aktualität, Vollständigkeit und Richtigkeit, bzw. bei Irrtum der zur    Verfügung gestellten Informationen übernimmt der Verfasser keinerlei Gewähr. Haftungsansprüche gegen den Verfasser, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens des Verfassers kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt. Alle Angebote sind freibleibend und unverbindlich. Der Verfasser behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.
                <p>
                    Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Allerdings haben wir keinen Einfluss auf die Inhalte dieser verlinkten Seiten, hierfür ist der jeweilige Dienstanbieter verantwortlich. Sollten rechtswidrige Seiten über die Hyperlinks abrufbar sein, bitten wir um eine Mitteilung an: <a href="mailto:abo-wuppertal@t-online.de">abo-wuppertal@t-online.de</a>. Wir werden dies dann überprüfen und die Links ggf. entfernen.
                    
                <h3>Copyright </h3>
                <p>
                    Alle Texte, Bilder, Audio-Dateien und weitere hier veröffentlichte Informationen, mit Ausnahme der entsprechend gekennzeichneten Publikationen, unterliegen dem Copyright. Eine Reproduktion oder Wiedergabe des Ganzen oder von Teilen ist ohne die schriftliche Genehmigung nicht gestattet.
               
            </div>
            <!-- endContent -->
            
            <div id="footer">
                <p>
                    Augen&auml;rztliche Gemeinschaftspraxis Dr. med. O. Abo Basha / Dr. med. D. Gr&uuml;tzner | Herzogstra&szlig;e 17, 42103 Wuppertal | Tel: (0202) 45 14 33
               
            </div>
            <!-- endFooter -->
           
        </div>
        <!-- endPage-wrap -->
Das z.B. ist innerhalb weniger Minuten entstanden und sollte sich wenn du die Hintergrundbilder entsprechenden Elementen vergibst deiner Seite entsprechend verhalten. Das soll nur ein erster Ansatz sein und ist keine fertige Loesung! Wenn du da jetzt mal in den 'Kot' schaust, dann sind die Inhalte 'richtig'(er) ausgezeichnet und eine Positionierung, wie du sie hast ist auch nicht ersichtlich. Deshalb lieber noch mal der Rat:
Grundlagen pauken!
 

anoX

Nicht mehr ganz neu hier

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Da hast du sicherlich recht, mein problem ist nur, dass die Seite nun fast fertig ist und ich möchte nicht alles nochmal über den Haufen schmeissen, Beim nächsten mal werde ich es bestimmt anders machen.
Eigentlich ist dieses Problem dadurch entstanden, dass Explorer und Firefox die line-height irgendwie anders interpretieren. Also wenn ich es hinkriegen würde, auch lange Fliesstexte in beiden Browsern gleich lang zu machen, könnte ich mit einer definierten Höhe des Layers arbeiten und das Problem wäre gelöst. Das habe ich aber bis jetzt auch nicht hingekrieget.
Um zu verstehen, was ich meine, schau dir bitte diesen linK:

in Explorer und Firefox an. In Explorer ist der Zeilenabstand deutlich größer und das haut mir mein Design gerade bei langen Fliesstexten um.

Erkläre mir mal

Code:
#HauptContainer #apDiv21 t p {
    font-weight: bold;
    font-size: 18px;
}
t p strong {
    font-size: 14px;
}

Das kann so schonmal nicht funktionieren. Der Tag t ist mir auch neu.

Wenn Du Text hast, spreche ihn immer mit <p></p> an.

Wenn Du verschiedene Textgrößen o.ä. hast, vergebe deinem p Klassen.

CSS:
Code:
p {
   font: 0.9em/1.15em Arial, Helvetica, sans-serif;
   color: #036;
}

p.groesser {
  font: 1.1em/1.15em Arial, Helvetica, sans-serif;
  color: #000;
}

Ansprechen kannst Du diese dann per "<p>Text</p>" bzw. "<p class="groesser">Text</p>"

Du verwendest teilweise die em- und teilweise die px-Angabe für Schriftgrößen. Leg dich auf eins fest.

Nimm die Textformatierungen aus den Divs und vergebe Texteigenschaften nur für die p-Tags.
 

tomas

Noch nicht viel geschrieben

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Also im Firefox sieht es eigentlich ganz okay aus und da ist auch Div 23 unter Div 21. Im IE hab ich jetzt nicht geschaut.

Wenn Du allerdings den Div DIREKT DARUNTER haben willst, liegt das nicht-funktionieren daran, dass Div 19 zu hoch ist und Div 23 zu tief positioniert ist. Also nimm Div 19 ein paar px der height weg und Div 23 ein paar px bei top.

Gib jedem image ein alt="" mit (img src="blabla.jpg" alt=""), entferne die Zeichen vor deinem Doctype (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">) und trenne dich von dem <t>-Tag, den es nicht gibt. Dann hast Du sogar einen validen Quelltext.

An sich möchte ich dir aber auch raten, dich nochmal genau in das Thema CSS reinzulesen. Bei der Menge an Divs merkst Du selbst, dass man schnell den Überblick verliert und im Grunde bräuchtest Du nur diesen Aufbau:

Code:
<div id="container">
  <div id="top"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>

Die Navigation stellt man als <ul></ul> dar. Ein Tut dazu gibt es hier. Zu den Box-Modellen (Divs) ebenfalls. Also wenn Du die Absicht hast, dich weiterhin mit dem Thema zu befassen, wird es dir nicht schaden da mal reinzuschauen.


@cebito

Richtig, hätte gereicht. War "irritiert", weil tomas von einem Hauptcontainer sprach. Bei bestimmten "Faxen" mit Hintergrundbildern würde ein Container infrage kommen - so aber wohl eher nicht.
Ja, werde ich definitiv machen.
Nur wie gesagt, die Seite funktioniert und aussieht erstmal so, wie ich mir vorstelle, bis auf die Tatsache, dass die Texte in Explorer und Firefox eine verschiedene Länge haben und ich dadurch nicht mit einer festen div Höhe arbeiten kann.
Wenn das definitiv nicht gehen sollte, muss ich die Seite natürlich überarbeiten, nur sieht es leider im Moment zeitlich schlecht aus...
Der T-tag ist natürlich quatsch, ist durch irgendwelche Versuche reingeraten.
Kannst du mir bitte den Link zu den Tutorials posten?
Und danke für deine Mühe ;)
 

tomas

Noch nicht viel geschrieben

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Naja, alles ueber den Haufen, musst du gar nicht werfen.
Mit ein bisschen Uebung, bekommst du das binnen Minuten hin.
HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>MyPage</title>
        <style>
            #page-wrap {
                width: 980px;
                margin: 0 auto;
                background: #efefef;
            }
            #logo {
                float: left;
                background: orange;
                width: 121px; height: 79px
            }
            #logo img {
                display: block;
                widht: 121px; height: 79px;
                border: none;
                background: orange url() no-repeat;
            }
            #menu       { list-style: none; padding-top: 42px; }
            #menu li    { float: left; margin-left: 1em; width: 88px; height: 37px; background: yellow; }
            #menu a     { display: block; }
        </style>
        
    <body>
        <div id="page-wrap">
            <div id="header">
                <a id="logo" href="index.html" title="zuruck zum Ursprung"><img src="img/textseiten/logo.gif" alt=""></a>
                <ul id="menu">
                    <li><a href="link" title="link">link1</a>
                    <li><a href="link" title="link">link2</a>
                    <li><a href="link" title="link">link3</a>
                    <li><a href="link" title="link">link4</a>
                    <li><a href="link" title="link">link5</a>
                    <li><a href="link" title="link">link6</a>
                    <li><a href="link" title="link">link7</a>
                    <li><a href="link" title="link">link8</a>
                </ul>
                <br style="clear: left; height: 0; line-height: 0;">
                
            </div>
            <!-- endHeader -->
            
            <br style="clear: left; height: 0; line-height: 0;">
            
            <div id="content">
                <h3>Impressum</h3>
                <strong>Anbieterkennzeichnung gem. § 10 MDStV</strong>
                <p>
                    [url=http://www.augenarzt-wuppertal.de]www.augenarzt-wuppertal.de Augenrztliche Gemeinschaftspraxis Dr.med. Abo Basha, Dr..med. Gruetzner . Ttigkeitsschwerpunkte: Glaukomdiagnostik mittels HRT und GDx , Orthoptik (Sehschule), Kontaktlinsenanpassung, Lasertherapie und Kosmetische Lidchir[/url] ist ein Projekt von:<br>
                    Dr. Omar Abo Basha<br>
                    Herzogstraße 17<br>
                    42103 Wuppertal
                
                <h3>Haftungshinweis</h3>
                <p>
                    Die Inhalte werden mit großer Sorgfalt geprüft und eingepflegt. Für Änderungen, Aktualität, Vollständigkeit und Richtigkeit, bzw. bei Irrtum der zur    Verfügung gestellten Informationen übernimmt der Verfasser keinerlei Gewähr. Haftungsansprüche gegen den Verfasser, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens des Verfassers kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt. Alle Angebote sind freibleibend und unverbindlich. Der Verfasser behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.
                <p>
                    Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Allerdings haben wir keinen Einfluss auf die Inhalte dieser verlinkten Seiten, hierfür ist der jeweilige Dienstanbieter verantwortlich. Sollten rechtswidrige Seiten über die Hyperlinks abrufbar sein, bitten wir um eine Mitteilung an: <a href="mailto:abo-wuppertal@t-online.de">abo-wuppertal@t-online.de</a>. Wir werden dies dann überprüfen und die Links ggf. entfernen.
                    
                <h3>Copyright </h3>
                <p>
                    Alle Texte, Bilder, Audio-Dateien und weitere hier veröffentlichte Informationen, mit Ausnahme der entsprechend gekennzeichneten Publikationen, unterliegen dem Copyright. Eine Reproduktion oder Wiedergabe des Ganzen oder von Teilen ist ohne die schriftliche Genehmigung nicht gestattet.
               
            </div>
            <!-- endContent -->
            
            <div id="footer">
                <p>
                    Augen&auml;rztliche Gemeinschaftspraxis Dr. med. O. Abo Basha / Dr. med. D. Gr&uuml;tzner | Herzogstra&szlig;e 17, 42103 Wuppertal | Tel: (0202) 45 14 33
               
            </div>
            <!-- endFooter -->
           
        </div>
        <!-- endPage-wrap -->
Das z.B. ist innerhalb weniger Minuten entstanden und sollte sich wenn du die Hintergrundbilder entsprechenden Elementen vergibst deiner Seite entsprechend verhalten. Das soll nur ein erster Ansatz sein und ist keine fertige Loesung! Wenn du da jetzt mal in den 'Kot' schaust, dann sind die Inhalte 'richtig'(er) ausgezeichnet und eine Positionierung, wie du sie hast ist auch nicht ersichtlich. Deshalb lieber noch mal der Rat:
Grundlagen pauken!
Tja, geneu, die Übung, die fehlt mir ;)
Das sieht auf jeden Fall viel übersichtlicher aus, obwohl ich einige Sachen noch nicht verstehe, weil ich einfach zu wenig Ahnung über CSS habe - deswegen werde ich mir definitiv die Grundlagen vornehmen.
Dennoch wäre ich super froh, wenn es für diesen einen Fall eine Möglichkeit gäbe, den Text in Firefox und Explorer in der gleichen px Höhe hinzukriegen, weil ich dann dem div eine feste Höhe vergeben könnte und wäre aus dem Problem erstmel raus.
 

tomas

Noch nicht viel geschrieben

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Tja, geneu, die Übung, die fehlt mir ;)
Das sieht auf jeden Fall viel übersichtlicher aus, obwohl ich einige Sachen noch nicht verstehe, weil ich einfach zu wenig Ahnung über CSS habe - deswegen werde ich mir definitiv die Grundlagen vornehmen.
Dennoch wäre ich super froh, wenn es für diesen einen Fall eine Möglichkeit gäbe, den Text in Firefox und Explorer in der gleichen px Höhe hinzukriegen, weil ich dann dem div eine feste Höhe vergeben könnte und wäre aus dem Problem erstmel raus.
Und auch dir auf jeden Fall danke für deine Mühe ;)
 

anoX

Nicht mehr ganz neu hier

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Ähm. Aus welchem Grund willst Du denn eine fixe Höhe definieren? Bzw. warum müssen die Texte auf der gleichen Höhe abschließen?

Wenn es darum geht, dass der Text etwas überlagert, kannst Du speziell für den IE einen Hack benutzen. So kannst Du z.B. die Höhe für den FF bei z.B. 400px lassen und für den IE etwas mehr Spielraum geben.

Also z.B.

Code:
   #apDiv26 {
      position:absolute;
      left:0px;
      top:3244px;
      width:189px;
      height:27px;
      z-index:26;
   }

 * + html  #apDiv26 {
      height:22px;
   }

Dies spricht dann NUR den IE7 an (ich glaube auch den 5er, aber der ist ohnehin "tot") ^^.

Mit "* html" sprichst Du den 6er an.

Bilde dir aber nicht ein, dass man jedes Problem einfach per Hack lösen kann. Bei einem sauberen Code brauch man so was in der Regel nicht. ;)

Vllt. hilft bei dir auch "float", aber um das rauszufinden müsste ich mal deinen Quelltext genauer betrachten.

Sag mal Bescheid, ob es was gebracht hat.
 

tomas

Noch nicht viel geschrieben

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Ähm. Aus welchem Grund willst Du denn eine fixe Höhe definieren? Bzw. warum müssen die Texte auf der gleichen Höhe abschließen?

Wenn es darum geht, dass der Text etwas überlagert, kannst Du speziell für den IE einen Hack benutzen. So kannst Du z.B. die Höhe für den FF bei z.B. 400px lassen und für den IE etwas mehr Spielraum geben.

Also z.B.

Code:
   #apDiv26 {
      position:absolute;
      left:0px;
      top:3244px;
      width:189px;
      height:27px;
      z-index:26;
   }

 * + html  #apDiv26 {
      height:22px;
   }

Dies spricht dann NUR den IE7 an (ich glaube auch den 5er, aber der ist ohnehin "tot") ^^.

Mit "* html" sprichst Du den 6er an.

Bilde dir aber nicht ein, dass man jedes Problem einfach per Hack lösen kann. Bei einem sauberen Code brauch man so was in der Regel nicht. ;)

Vllt. hilft bei dir auch "float", aber um das rauszufinden müsste ich mal deinen Quelltext genauer betrachten.

Sag mal Bescheid, ob es was gebracht hat.
Ich versuche mal.
Die Sache ist die, dass Explorer den Text so darstellt, wie Dreamweaver, bei Firefox fällt er aber "kürzer" aus, weil die Zeilenabstände geringer sind.
 

tomas

Noch nicht viel geschrieben

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Bzw. weicht bereits in Dreamweaver die Arbeitsansicht von "Live-view" ab. Explorer zeigt im Prinzip die Arbeitsansicht, Firefox den Live.view an.
 

tomas

Noch nicht viel geschrieben

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Leude, ich denke es wird :)



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>Untitled Document</title>
<style type="text/css">
<!--
p {
    color: #036;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
}
#apDiv1{
    float: left;
}
#apDiv3{
    float: left;
}
#apDiv4{
    float: left;
}
#apDiv5{
    float: left;
}
#apDiv6{
    float: left;
}
#apDiv7{
    float: left;
}
#apDiv8{
    float: left;
}
#apDiv9{
    float: left;
}
#apDiv10{
    float: left;
}
#apDiv11{
    float: left;
}
#apDiv12{
    float: left;
}
#apDiv13{
    float: left;
}
#apDiv14{
    float: left;
}
#apDiv15{
    float: left;
}
#apDiv16{
    float: left;
}
#apDiv17{
    float: left;
}
#apDiv23{
    float: left;
}
#apDiv24{
    float: left;
}
#apDiv29 {
    background-color: #FFFFFF;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    line-height: 26px;
    font-size: 12px;
    font-variant: normal;
}
.oneColElsCtrHdr #container {
    width: 960px;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-image: url(img/textseiten/rahmen_mitte.gif);
}
.oneColElsCtrHdr #header { 
    background: #DDDDDD; 
    padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.oneColElsCtrHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColElsCtrHdr #mainContent {
    padding: 0 70px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background: #FFFFFF;
    background-image: url(img/textseiten/rahmen_mitte.gif);
}
.oneColElsCtrHdr #footer { 
    padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
} 
.oneColElsCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

-->
</style></head>

<body class="oneColElsCtrHdr">

<div id="container">
  <div id="header">
        <div id="apDiv1"><a href="index.html"><img src="img/textseiten/logo.gif" alt="" width="121" height="79" border="0" /></a></div>
<div id="apDiv2"><img src="img/textseiten/leiste.gif" alt="" width="839" height="42" /></div>
<div id="apDiv3"><a href="index.html"><img src="img/textseiten/mome_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv4"><img src="img/textseiten/weiss_klein.gif" alt="" width="10" height="37" /></div>
<div id="apDiv5"><a href="team.html"><img src="img/textseiten/team_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv6"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv7"><a href="praxis.html"><img src="img/textseiten/praxis_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv8"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv9"><a href="leistungen.html"><img src="img/textseiten/leistungen_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv10"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv11"><a href="info.html"><img src="img/textseiten/info_active.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv12"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv13"><a href="kontakt.html"><img src="img/textseiten/kontakt_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv14"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv15"><a href="links.html"><img src="img/textseiten/links_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv16"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv17"> <a href="impressum.html"><img src="img/textseiten/impressum_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv18"><img src="img/textseiten/weiss_gross.gif" alt="" width="65" height="37" /></div>

  <!-- end #header --></div>
  <div id="mainContent">
    <h1>
      <p><strong style="font-size: 16px">Bildschirmarbeitsplatz</strong></p>
    </h1>
    <p><strong>Gesundes Arbeiten am Computer</strong></p>
    <p>Immer mehr Menschen schauen täglich über längere Zeit in einen Computerbildschirm. Dies sowohl bei der Arbeit als auch privat, beim ?Surfen? im Internet oder bei PC-Spielen. Die Augen sind dabei stark gefordert. Um ungesunden Begleiterscheinungen längerer Computeraktivität wie gereizten Augen, Nackenverspannungen, Rücken- und Kopfschmerzen vorzubeugen, sind drei Faktoren maßgebend: 
      Die Verwendung eines guten Bildschirms und dessen ergonomisch und licht-technisch richtige Platzierung sowie vor allem ein gutes, bei Bedarf mit Brille oder Kontaktlinsen korrigiertes Sehvermögen.</p>
    <p><img src="img/textseiten/Bildschirmarbeitsbrille_1.png" alt="2" width="259" height="148" /><img src="img/textseiten/Bildschirmarbeitsbrille_2.png" alt="1" width="259" height="148" hspace="30" /></p>
    <p><strong>Bildschirm/Auge: Interface zwischen Computer und Gehirn</strong></p>
    <p>Die Anforderungen an das Sehen haben sich in allen Lebensbereichen verändert: im
      Strassenverkehr wie im Haushalt oder im Berufsleben. Die körperliche Beanspruchung
      nimmt gegenüber früher ständig ab. Anstelle der Muskelkraft tritt die Fähigkeit zur
      Informationsverarbeitung, bei der die Augen und das Hirn die Hauptverantwortung
      tragen.</p>
    <p>Wer mehrheitlich am PC arbeitet, macht täglich rund 30?000 Blickwechsel zwischen
      Bildschirm, Tastatur und Arbeitsunterlage. Dies verlangt eine ausgezeichnete Sehschärfe
      und ein blitzschnelles Einstellen der Augen auf wechselnde Entfernungen,
      Blickwinkel und Kontraste.</p>
    <p><strong>Bildschirmarbeit: 30% mit Sehproblemen</strong></p>
    <p>Gemäss einer vom Marktforschungsinstitut Publitest im Auftrag des Schweizerischen
      Optikerverbandes alle 4 Jahre durchgeführten Untersuchung arbeiteten 1997 rund
      20% der Erwachsenen mindestens zwei Stunden pro Tag am Computer (1993 16%;
      1989 11%).</p>
    <p>Von den befragten ?Bildschirmarbeitern? gaben 30% an, Sehprobleme zu haben. Am
      häufigsten genannt wurden (neben Einrichtung/Beleuchtung des
      Arbeitsplatzes):</p>
    <ul>
      <p>1. Flimmern/Verschwimmen vor den Augen (49%)</p>
      <p>2. Rasches Ermüden (41%)</p>
      <p>3. Kopfschmerzen (28%).</p>
    </ul>
    <p>Häufig beklagt werden ferner auch Schmerzen in Kreuz und Rücken, aber auch in
      Schultern, Armen und Händen. Ein grosser Teil dieser Beschwerden ist durch mangelnde
      Ergonomie am Arbeitsplatz bedingt. Zu tiefe oder zu hohe Tische, ungeeignete
      Bürostühle oder eine falsche Plazierung von Bildschirm und Tastatur fördern eine
      schlechte Sitzhaltung oder erzwingen unnatürliche Bewegungen. In Fachkreisen und
      Medien ist zunehmend vom RSI-Syndrom die Rede. RSI (Repetetive Strin Injury =
      Verletzungen durch ständig wiederholte Muskelanspannung) ist kein neues Phänomen.
      Sehr einseitige Tätigkeiten und Bewegungsabläufe haben schon früher in verschiedenen
      Berufen Probleme geschaffen, so z.B. die ?Schreiberkrankheit? bei den handschriftlich
      tätigen Sekretären im letzten Jahrhundert. Auch bei Fliessbandarbeitern,
      Telefonistinnen oder Streichmusikern sind RSI-Probleme bekannt.</p>
    <p>Verspannungen im Bewegungsapparat (Nacken-, Schulterschmerzen etc.) können aber
      auch eine Folge einer ungesunden Körperhaltung zur Kompensation einer beeinträchtigen
      Sehqualität sein, indem man sich ständig leicht vorbeugt, um besser sehen zu
      können oder zur Seite neigt, um einer Blendung auszuweichen. Solche oft kaum merkbaren
      Zwangsbewegungen können sich auf die Dauer sehr negativ auswirken.</p>
    <p><strong>Sehanforderungen am Bildschirmarbeitsplatz</strong></p>
    <p>Auch bei einer guten ergonomischen Einrichtung des Arbeitsplatzes stellt die Bildschirmarbeit
      eine hohe Beanspruchung der Augen dar: Die Akkomodations- und Adaptionsfähigkeiten
      (Einstellung auf unterschiedliche Sehdistanzen und Anpassung an
      Hell/Dunkel-Kontraste) des Auges sind stark gefordert.</p>
    <p>Experten gehen für problemfreies Arbeiten am Bildschirm von einer Sehschärfe (Visus)
      von 0,8 auf beiden Augen aus. Zum Vergleich: Beim Sehtest für die Fahrprüfung reicht
      ein Visus von 0,6 auf dem einen und von 0,1 auf dem anderen Auge. Ein Visus von 1,0
      steht dabei nicht für eine maximale, sondern für eine durchschnittlich gute Sehschärfe.
      Jugendliche haben oft einen Visus von 1,5 und mehr. Eine mangelnde Sehschärfe wird
      oft unbewusst durch verstärkte Anstrengungen des Sehapparates kompensiert, was zu
      Kopfschmerzen, Verspannungen und schnellere Ermüdbarkeit führt. </p>
    <p>Auch kleinste Sehfehler (leichte Kurz- oder Weitsichtigkeit, Hornhautverkrümmung)
      und Unterschiede zwischen dem rechten und dem linken Auge, mit denen man sonst
      im Alltag bestens leben kann, können bei anhaltender Bildschirmarbeit negative Auswirkungen
      haben. Manche Sehfehler wie z.B. ein eingeschränktes räumliches Sehen
      oder latentes, das heisst unterdrücktes, normalerweise nicht sichtbares Schielen (Heterophorie)
      werden zum Teil oft erst bei der Bildschirmarbeit wahrgenommen.</p>
    <p>Naturgegebene Probleme mit der Bildschirmarbeit haben &auml;ltere Menschen ab dem<br />
      40./45. Altersjahr, wenn die Akkomodationsf&auml;higkeit das Auges abnimmt und sich die<br />
      Alterssichtigkeit (Presbyopie) immer deutlicher bemerkbar macht.</p>
    <p><strong>Was ist, was kann eine ?PC-Brille??</strong></p>
    <p>PC-Brillen sind normale Korrektionsbrillen, die ihren Trägern zu einem optimalen Sehvermögen
      auf beiden Augen verhelfen. Eine Besonderheit ist die ?PC-Brille? allenfalls
      für Leute, die diese Sehhilfe nur während der Bildschirmarbeit tragen, im sonstigen
      Leben aber gut ohne Sehhilfe zurecht kommen (wollen). Speziell für die Arbeit am PC
      ausgerichtete Brillen sind oft noch mit einer Tönung in der oberen Glashälfte versehen
      ? diese dämpft das Licht, das oberhalb der Blickrichtung über den Bildschirm ins Auge
      fällt.</p>
    <p>Soll eine Brille eigens für die PC-Arbeit ausgerichtet werden, muss der Augenoptiker
      alle relevanten Distanzen und Winkel der jeweiligen Arbeitsumgebung kennen: Sitzhöhe,
      Höhe der Arbeitsfläche(n), Distanzen zu Tastatur, Vorlage und Bildschirm, Anordnung
      und Grösse des Bildschirms, Grösse der Bildschirmschrift und Angaben zu den
      Beleuchtungsverhältnissen (Blendung, Reflexe). </p>
    <p>Zur Vorbereitung können all diese Werte mit Hilfe der nachfolgenden Mess-Skizze, z.B.
      mit einem Schneidermassband, erfasst werden. Gemessen werden die Sehdistanzen
      immer von der Nasenwurzel aus.</p>
    <p><img src="img/textseiten/Bildschirmarbeitsplatz 3.png" alt="3" width="376" height="375" /></p>
    <p>Auf Basis dieser Daten wird der Augenoptiker verschiedene optische Werte messen:
      Die Sehschärfe bei verschiedenen Text- und Hintergrundfarben, Lese- und Suchgeschwindigkeit,
      das Gesichtsfeld (oder Blickfeld) im Bildschirmbereich, das Erkennen
      von Farben sowie das räumliche und das beidäugige Sehen. Zusammen mit den üblichen
      Tests zur Brillenglasbestimmung kann auf diese Weise die für den jeweiligen Benutzer
      ideale PC-Brille definiert werden.</p>
    <p><strong>Schädliche Bildschirmstrahlung?</strong></p>
    <p>Wie verschiedene Untersuchungen belegen, haben die Bildschirm-Ger&auml;te keine direkten
      negativen Auswirkungen auf das Sehverm&ouml;gen; organische Ver&auml;nderungen am
      Auge gelten mittlerweile als ausgeschlossen.</p>
    <p> Der Kathodenstrahl der g&auml;ngigen R&ouml;hrenbildschirme erzeugt zwar R&ouml;ntgenstrahlen.
      Diese jedoch sind weit unter den zul&auml;ssigen Werten. Ausserdem wird diese Strahlung
      bei allen modernen Bildschirmen durch das Glas aufgehalten.</p>
    <p> Kritische Vermutungen, Bildschirmstrahlung k&ouml;nnte den grauen Star (Katarakt) f&ouml;rdern
      oder Fr&uuml;h- bzw. Totgeburten bei Schwangeren ausl&ouml;sen, wurden nicht best&auml;tigt. Als
      Folge anhaltender Bildschirmarbeit k&ouml;nnen auch R&ouml;tungen im Gesicht auftreten, wie
      dies u.a. bei Datatypistinnen festgestellt wurde. Ursache war die statische Aufladung
      der Raumluft rund um den Bildschirm, was nur in sehr trockenen R&auml;umen vorkommt.</p>
    <p> Indirekt sch&auml;dlich ist grunds&auml;tzlich nur eine schlechte Darstellung der Informationen
      auf dem Monitor: Flimmernde Bilder und unscharfe Textkonturen erfordern erh&ouml;hte
      Konzentration und f&uuml;hren zu schnellerer Erm&uuml;dung.</p>
    <p><strong>Auswahl des Bildschirms</strong></p>
    <p>Ein guter Bildschirm ist eine wesentliche Vorausetzungen f&uuml;r angenehmes und erm&uuml;ndungsfreies
      Arbeiten am PC. Am besten geeignet sind Schwarz-Weiss-Monitore mit
      hoher Aufl&ouml;sung. Da nur eine Farbkanone (Kathodenstrahlr&ouml;hre) verwendet wird, ist<br />
      der Bild sehr scharf. Farbmonitore verf&uuml;gen &uuml;ber drei Farbkanonen, die sich nie
      100%ig exakt justieren lassen. Eine S/W-Darstellung ist f&uuml;r die meistverbreiteten Anwendungsprogramme
      (Textverarbeitung, Buchhaltung/Fakturierung) m&ouml;glich.</p>
    <p> Wesentlich f&uuml;r eine gute Bildschirmdarstellung ist auch die Grafikkarte, die eine flimmerfreie
      Darstellung auch in hoher Aufl&ouml;sung bieten sollte. Bei vielen Grafikkarten
      sinkt n&auml;mlich in der h&ouml;chsten Aufl&ouml;sung die Bildwiederholfrequenz. Der Monitor ist so<br />
      einzustellen dass er h&ouml;chstm&ouml;gliche Aufl&ouml;sung bei mindestens 70Hz Bildwiederholfrequenz
      bietet.</p>
    <p> Randscharf und flimmerfrei sind LCD-Monitore, die zuerst in Laptop-Computern und
      seit einigen Jahren auch f&uuml;r Stand-PCs auf den Markt gekommen sind. Wegen der
      aufwendigen Herstellungsweise sind diese jedoch vergleichsweise recht teuer und nur<br />
      in kleineren Bildschirmdiagonalen erh&auml;ltlich.</p>
    <p><strong>Plazierung des Bildschirms</strong></p>
    <p>Der Monitor ist idealerweise etwa mind. 50 bis max. 80 cm von den Augen entfernt zu
      platzieren. Die Oberkante des Bildschirms sollte dabei knapp unterhalb der Augenhöhe
      zu liegen kommen, sodass sich eine Blickneigung von 25° bis max. 30° ergibt. Wenn
      möglich ist der Arbeitsplatz so einzurichten, dass Fenster und Lichtquellen links oder
      rechts des Monitors sind. Licht von hinten oder von vorn ist zu vermeiden, da es störende, die Augen irritierende und langfristig ermüdende Spiegelungen auf dem Bildschirm
      verursachen kann. Wird ein Dokumentenhalter verwendet, sollte dieser in
      gleicher Entfernung wie der Bildschirm montiert werden.</p>
    <p>Zur Vermeidung von Blindeffekten bieten verschiedene Hersteller sog. Bildschirmfilter
      an, die vor den Monitor gehängt werden können. Bessere Modelle bewirken zusätzlich
      eine je nach Monitor wirksame Kontrastverbesserung sowie die Ableitung statischer
      Aufladung rund um den Bildschirm.</p>
    <p><strong>PC-Tipps vom Augenarzt</strong></p>
    <ul>
      <li>
        <p>Achten Sie auf Ihr gutes Sehvermögen. Auch kleine, im Alltag wenig störende Sehfehler
          oder -schwächen können sich bei längerer Bildschirmarbeit negativ auf Ihr
          Wohlbefinden auswirken.</p>
      </li>
      <li>
        <p>Gönnen Sie Ihren Augen öfters eine Pause: Starren Sie nicht stundenlang in den
          Monitor, schauen Sie zwischendurch bewusst in die Ferne ? vielleicht durchs Fenster
          auf einen Baum ? und machen Sie hie und da eine Entspannungsübung.</p>
      </li>
      <li>
        <p>Versuchen Sie zwischendurch immer wieder zu blinzeln, damit die Augen regelmässig
          befeuchtet werden.</p>
      </li>
      <li>
        <p>Plazieren Sie Ihren Monitor richtig: 1. Fenster/Lichtquelle seitlich, nicht vor oder
          hinter dem Bildschirm. 2. Entfernung Nasenwurzel-Bildschirm 50-70 cm; Blickneigung
          25° bis max. 30°; die Oberkante des Bildschirms sollte knapp unterhalb der
          Augenhöhe liegen.</p>
      </li>
      <li>
        <p>Stellen Sie Ihren Monitor auf höchste Auflösung bei einer Bildwiederholfrequenz
          von mindestens 70Hz.</p>
      </li>
      <li>
        <p>Allfällige Dokumenthalter in gleicher Entfernung wie Bildschirm plazieren.</p>
      </li>
      <li>
        <p>Bildschirm regelmässig reinigen ? vermindert Reizungen/Irritationen durch Fingerabdrücke
          etc.</p>
      </li>
      <li>
        <p>Sorgen Sie für gute Beleuchtung ? im Dämmerlicht ermüden die Augen schneller.</p>
      </li>
      <li>
        <p>Achten Sie auf ein gutes Raumklima ? in trockener, abgestandener Luft leiden Ihre
          Augen schneller. Schützen Sie sie vor Rauch und Zugluft.</p>
      </li>
      <li>
        <p>Verwenden Sie nicht ? sofern nicht vom Arzt vorgeschrieben ? über längere Zeit
          Augentropfen ? diese Symptombekämpfung kann neue Probleme bringen.</p>
      </li>
      <li>
        <p>Lassen Sie Ihr Sehvermögen und Ihre Augen alle drei Jahre testen.</p>
      </li>
    </ul>
    <p> <strong>Entspannungsübungen für die Augen</strong></p>
    <ul>
      <li>
        <p>Lassen Sie den Blick von oben nach unten und von der einen Seite zur anderen
          schweifen. Schauen Sie dabei auf die Umrisse der Objekte am Rande Ihres Gesichtsfeldes.</p>
      </li>
      <li>
        <p>Halten Sie einen Bleistift in Armlänge vor sich hin. Fixieren Sie erst Ihren Blick auf
          die Spitze und schauen Sie dann entspannt in die Ferne. Wiederholen Sie diese
          Übung etwa zehnmal.</p>
      </li>
      <li>
        <p>Setzen Sie sich bequem hin. Schließen Sie die Augen, stützen Sie Ihre Ellbogen
          auf und legen Sie Ihr Gesicht so in die Hände, dass die hohlen Handflächen die
          Augen gut abdecken. Halten Sie das Gewicht des Kopfes mit den Handballen, ohne
          Druck auf die Augen auszuüben. Bleiben Sie zwei, drei Minuten in dieser Stellung,
          entspannen Sie sich. Je schwärzer Sie sehen, desto entspannter sind Ihre Augen.
          Diese Übung nennt man ?Palmieren?.</p>
      </li>
      <li>
        <p>Vergessen Sie nicht, zwischendurch immer wieder zu blinzeln. Dadurch werden die
          vorderen Regionen des Auges befeuchtet und regeneriert.</p>
      </li>
      <li>
        <p>Bei brennenden, tränenden und trockenen Augen, ständiger Müdigkeit, Kopfschmerzen
          oder Nackenverspannungen sollten Sie Ihren Arzt aufsuchen.</p>
      </li>
    </ul>
    <!-- end #mainContent --></div>
  <div id="footer">
<div id="apDiv23"><img src="img/textseiten/rahmen_unten.gif" alt="" width="837" height="28" /></div>
<div id="apDiv24"><a href="../info.html"><img src="img/textseiten/zurueck.gif" width="88" height="28" border="0"></a></div> 
<div id="apDiv25"><img src="img/textseiten/weiss_mittel.gif" alt="" width="35" height="28" /></div>
<div id="apDiv29">Augen&auml;rztliche Gemeinschaftspraxis Dr. med. O. Abo Basha / Dr. med. D. Gr&uuml;tzner | Herzogstra&szlig;e 17, 42103 Wuppertal | Tel: (0202) 45 14 33</div>
</div>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Ist zwar immer noch kompliziert, vor allem wegen der anzahl der divs, aber ich denke es tut das, was es soll. Vielen Dank für Eure Hilfe!
 

tomas

Noch nicht viel geschrieben

AW: Dreamweaver CS4 Ebenen im Hauptcontainer relativ zueinander positionieren

Noch eine Frage hätte ich: Wie kriege ich es hin, dass der erste div in footer immer linksbündig ist (sich nicht an dem letzten div von main orientiert)?

So soll es aussehen:


und so sieht es aus, wenn ich im main zwei divs nebeneinander habe:


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>Links</title>
<style type="text/css">
<!--
p {
    color: #036;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
}
#apDiv1{
    float: left;
}
#apDiv3{
    float: left;
}
#apDiv4{
    float: left;
}
#apDiv5{
    float: left;
}
#apDiv6{
    float: left;
}
#apDiv7{
    float: left;
}
#apDiv8{
    float: left;
}
#apDiv9{
    float: left;
}
#apDiv10{
    float: left;
}
#apDiv11{
    float: left;
}
#apDiv12{
    float: left;
}
#apDiv13{
    float: left;
}
#apDiv14{
    float: left;
}
#apDiv15{
    float: left;
}
#apDiv16{
    float: left;
}
#apDiv17{
    float: left;
}
#apDiv21{
    float: left;
    width: 410px;
}
#apDiv23{
    float: left;
}
#apDiv29 {
    background-color: #FFFFFF;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    line-height: 26px;
    font-size: 12px;
    font-variant: normal;
}
.oneColElsCtrHdr #container {
    width: 960px;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-image: url(img/textseiten/rahmen_mitte.gif);
}
.oneColElsCtrHdr #header { 
    background: #DDDDDD; 
    padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.oneColElsCtrHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColElsCtrHdr #mainContent {
    padding: 0 70px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background: #FFFFFF;
    background-image: url(img/textseiten/rahmen_mitte.gif);
}
.oneColElsCtrHdr #footer { 
    margin: 0;
    padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
} 
.oneColElsCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

-->
</style></head>

<body class="oneColElsCtrHdr">

<div id="container">
  <div id="header">
        <div id="apDiv1"><a href="index.html"><img src="img/textseiten/logo.gif" alt="" width="121" height="79" border="0" /></a></div>
<div id="apDiv2"><img src="img/textseiten/leiste.gif" alt="" width="839" height="42" /></div>
<div id="apDiv3"><a href="index.html"><img src="img/textseiten/mome_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv4"><img src="img/textseiten/weiss_klein.gif" alt="" width="10" height="37" /></div>
<div id="apDiv5"><a href="team.html"><img src="img/textseiten/team_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv6"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv7"><a href="praxis.html"><img src="img/textseiten/praxis_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv8"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv9"><a href="leistungen.html"><img src="img/textseiten/leistungen_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv10"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv11"><a href="info.html"><img src="img/textseiten/info_active.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv12"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv13"><a href="kontakt.html"><img src="img/textseiten/kontakt_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv14"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv15"><a href="links.html"><img src="img/textseiten/links_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv16"><img src="img/textseiten/weiss_klein.gif" width="10" height="37"></div>
<div id="apDiv17"> <a href="impressum.html"><img src="img/textseiten/impressum_inactive.gif" alt="" width="88" height="37" border="0" /></a></div>
<div id="apDiv18"><img src="img/textseiten/weiss_gross.gif" alt="" width="65" height="37" /></div>

  <!-- end #header --></div>
  <div id="mainContent">
<div id="apDiv21">
    <p><strong style="font-size: 16px">Informationen f&uuml;r unsere Patienten</strong></p>
    <p><a href="Info/Trockenes auge.html">Trockenes Auge</a></p>
    <p><a href="Info/Liderkrankungen.html">Liderkrankungen</a></p>
    <p><a href="Info/Kosmetische Lidchirurgie.html">Kosmetische  Lidchirurgie</a><a href="Lidstraffung.pdf" target="_blank" style="margin-left: 10px; color: #900; font-weight: normal;">Flyer als pdf</a></p>
    <p><a href="Info/Kosmetische Faltenbehandlung.html">Kosmetische  Faltenbehandlung</a></p>
    <p style="">- <a href="Info/Botox.html">Botox</a><a href="botox.pdf" target="_blank" style="margin-left: 10px; color: #900; font-weight: normal;">Flyer als pdf</a></p>
    <p>- <a href="Info/Unterspritzung.html">Unterspritzung</a></p>
    <p><a href="Info/Bindehauterkrankung.html">Bindehauterkrankung</a></p>
    <p><a href="Info/Hornhaut.html">Hornhaut</a></p>
    <p> - <a href="Info/Hornhauterkrankung.html">Hornhauterkrankung </a></p>
    <p> - <a href="Info/Refraktive Chirurgie.html">Refraktive Chirurgie</a></p>
    <p> - <a href="Info/Kontaktlinsenanpassung.html">Kontaktlinsenanpassung </a></p>
    <p><a href="Info/Iritis.html">Iritis</a></p>
    <p><a href="Info/Grauer Star.html">Grauer Star  (Katarakt)</a></p>
</div>
 <div id="apDiv34">
<p><strong style="font-size: 16px; color: #036;">&nbsp;</strong></p>
<p><a href="Info/Gruener Star.html">Grüner Star  (Glaukom):</a></p>
<p> - <a href="Info/Glaukomdiagnostik mittels GDx.html">Glaukomdiagnostik mittels GDx </a></p>
<p> - <a href="Info/Pachymetrie.html">Pachymetrie</a></p>
<p><a href="Info/Netzhaut.html">Netzhaut  (Retina)</a></p>
<p> - <a href="Info/Glaskoerper.html">Glaskörper </a></p>
<p> - <a href="Info/Netzhautabloesung.html">Netzhautablösung</a></p>
<p> - <a href="Info/Maculadegeneration.html">Maculadegeneration </a></p>
<p> - <a href="Info/Diabetische Retinopathie.html">Diabetische Retinopathie</a></p>
<p> - <a href="Info/Gefaessverschluss.html">Gefäßverschluss</a></p>
<p><a href="Info/Sehschule Schielen.html">Sehschule/Schielen</a></p>
<p><a href="Info/Farbenfehlsichtigkeit.html">Farbenfehlsichtigkeit</a></p>
<p><a href="Info/Bildschirmarbeitsplatz.html">Bildschirmarbeitsplatz</a></p>
<p><a href="Info/Vergroessernde Sehhilfe.html">Vergrößernde  Sehhilfe</a></p>
  </div>

<!-- end #mainContent --></div>
  <div id="footer">
<div id="apDiv23"><img src="img/textseiten/leiste-unten.gif" alt="" width="960" height="28" /></div>
<div id="apDiv29">Augen&auml;rztliche Gemeinschaftspraxis Dr. med. O. Abo Basha / Dr. med. D. Gr&uuml;tzner | Herzogstra&szlig;e 17, 42103 Wuppertal | Tel: (0202) 45 14 33</div>
</div>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
 
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.564
Beiträge
1.538.064
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben