XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Positionierung und Layout Probleme (http://xhtmlforum.de/showthread.php?t=42457)

dabidu 15.10.2006 21:05

Positionierung und Layout Probleme
 
Hallo alle zusammen,

Ich komme irgendwie mit dem Layout nicht weiter, deshalb wollte ich mich an euch wenden.


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
        background-color: #31639C;
        margin: 0px;
        padding:0;
        text-align: center;
        font: 12px Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 2em;
        font-weight: 100;
        color: #000000;
        margin: auto;
        padding: 100px;

}

#container {
        background-color: yellow;
        border: 1px solid #31639C;
        color: black;
        width: 600px;
        text-align: left;
        background-color: #CECE9C;


}

#naviSonne {
        position: absolute;
        top: 5px;
        left: 350px;
        bottom: 250px;
}

#navioben {
        color: black;
        border: 1px solid #31639C;
        position: absolute;
        top: 40px;
        background-color:#31639C ;
        width: 650px;
}

#navioben li {
          display: inline;

}

#navioben a {
        text-decoration: none;
}


#menu {
        border: 1px solid #31639C;
        background-color:#31639C;
        text-align: left;
        height: 20px;                                                /*wird nicht nach links formatiert*/
}

#menu li{
        display: inline;
}

#menu a {
        text-decoration: none;

}

#contents {
        color: black;
              margin: 15px;
        line-height: 2em;
}

.box1 {
        /*border: 1px solid red;*/
        width: 250px;
        float: left;
        text-align: justify;

}

.box2, .box3 {
        float: right;
        width: 250px;
    /*    border: 1px solid #31639C; */
    text-align: justify;
}

#footer {
        clear: both;
        text-align: center;
        background-color: #31639C;
}

</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="container">
    <div id="naviSonne"> <img src="img/sonne.gif" width="41" height="38" border="0" alt=""></div>
        <div id="navioben">
        <ul>
        <li> <a href="#"><img src="img/menue_home.gif" width="108" height="40" border="0" alt=""></a></li>
        <li> <a href="#"><img src="img/menue_thema1.gif" width="94" height="41" border="0" alt=""></a> </li>
        <li> <a href="#"><img src="img/menue_thema2.gif" width="94" height="41" border="0" alt=""></a></li>
        <li> <a href="#"><img src="img/menue_thema3.gif" width="94" height="41" border="0" alt=""></a></li>
        <li> <a href="#"><img src="img/menue_thema4.gif" width="94" height="41" border="0" alt=""></a></li>
        <li> <a href="#"><img src="img/menue_kontakt.gif" width="91" height="40" border="0" alt=""></a></li>
        </ul></div>
                <div id="menu">
                <ul>
                <li> <a href="#">  home </a> </li>
                <li> <a href="#"> . untermenü n°1 </a> </li>
                <li> <a href="#"> . untermenü n°2 </a> </li>
                <li> <a href="#"> . untermenü n°3 </a> </li> </div>
                          <div id="contents">

                          <div class="box1"> <h3> Überschrift 1 </h3>
                          Herzlich Willkommen auf dieser Website. Der Platz auf der Startseite würde sich für News oder eine kurze Beschreibung der Menüpunkte anbieten, damit der Besucher sofort weiss, was ihn erwartet. Dies ist nur Blindtext, also ein beliebiger Text, der als Platzhalter beim Layout dient und später durch Originaltext ersetzt wird. Je mehr Text in den 2 Spalten dieser unsichtbaren Tabelle steht, desto länger wird sie. </div>

                          <div class="box2"> <h3> Überschrift 2 </h3>
                          Hier kann mehr Text stehen oder auch eine Grafik platziert werden. Damit das Layout nicht zerstört wird, darf die Grafik eine Breite von 250 Pixeln nicht überschreiten.</div>

                          <div class="box3"> <h3> Überschrift 3 </h3>
                          Hier kann mehr Text stehen oder auch eine Grafik platziert werden. Damit das Layout nicht zerstört wird, darf die Grafik eine Breite von 250 Pixeln nicht überschreiten.</div>

                          </div>
        <div id="footer"> &copy 2001 . Name . <a href"#"> email senden </a> </div>
</div>

</body>
</html>

Problemschilderung:

1) von <div id="navioben"> Ich bekomme die Bilder(Buttons) nicht einander gehängt, d.h. zwischen den Bildern ist 1px platz, und kann man die Lücken füllen.

auf jedenfall soll das Layout am Ende so aussehen:
Layout 2 . START

Aber irgendwie funktioniert es bei mir nicht so genau..

Und ich wollte euch bitten mir zu erklären, warum ich nicht weiter komme.

mfg

dabidu

Synoxis 16.10.2006 10:23

Kannst du noch ein Bild anhängen wie es jetzt aussieht ?

Ich würde allerdings die Navigation anders aufbauen. Und zwar würde ich jedem Listenpunkt eine einzelne Klasse geben und dort im CSS die Grafiken/Buttons als background definieren.


Gruß,
Synoxis

dabidu 17.10.2006 13:12

Hallo alle zusammen,

ich bin total traurig bzw. :cry:

aber egal, sorry.. ich kann leider nicht die Dateien als Anhang schicken, weil
1) ich weiss nicht, wie man eine *.html Datei pdf, zip, oder zu gif format
umwandeln kann.
Und da ich nichts ausserdem Code und die hab ich schon reingepostet.

Ich beschreibe mal wie das Aussieht, und zwar, wenn man sich den Link anschaut, sieht man ja, dass eine Sonne, dann Buttoms und dann ein Links kommen gel...
genau die drei teile sind ein wenig nach rechts geruscht,
und Der Buttom von dem Schrift nach links.
hmmm ich kann nicht ...

Aber ein Tipp von mir, was ihr machen könnt, ihr könnt ja mein Code nehmen und in ein Phase Editor von neu editieren, und ihr wird auch den gleichen fehler merken, wie bei mir.

Übrigens, ich entschuldige mich für meine Formulierung, hoffentlich könnt ihr mich nachvollziehen ...

okey... bis dannn

sinistar 17.10.2006 13:36

Dann überschreib das mal hiermit:

Code:

* {
margin: 0;
padding: 0;
}


body {
        background-color: #31639C;
        margin: 0;
        padding:0;
        text-align: center;
        font: 12px Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 2em;
        font-weight: 100;
        color: #000000;
        margin: auto;
        padding: 100px;

}

#container {
        background-color: yellow;
        border: 1px solid #31639C;
        color: black;
        width: 600px;
        text-align: left;
        background-color: #CECE9C;
        margin: 0 auto;


}

#naviSonne {
        position: absolute;
        top: 5px;
        left: 350px;
        bottom: 250px;
}

#navioben {
        color: black;
        border: 1px solid #31639C;
        background-color:#31639C ;
        width: 650px;
       
}

#navioben li {
          display: inline;

}

#navioben a {
        text-decoration: none;
}


#menu {
        border: 1px solid #31639C;
        background-color:#31639C;
        text-align: left;
        height: 20px;                                                /*wird nicht nach links formatiert*/
}

#menu li{
        display: inline;
}

#menu a {
        text-decoration: none;

}

#contents {
        color: black;
              margin: 15px;
        line-height: 2em;
}

.box1 {
        /*border: 1px solid red;*/
        width: 250px;
        float: left;
        text-align: justify;

}

.box2, .box3 {
        float: right;
        width: 250px;
    /*    border: 1px solid #31639C; */
    text-align: justify;
}

#footer {
        clear: both;
        text-align: center;
        background-color: #31639C;
}

Der erste Teil (* {margin:0;padding:0;}) sorgt dafür, dass die Abstände zurückgesetzt werden.

EvT 17.10.2006 13:56

3 Dinge:

1.) Streich margin: auto in body und setz es in #container
2.) In <div id="menu"> fehlt das schließende </ul>
3.) Schreib in #navioben alle <li> hintereinander, also ohne neue Zeile:
Code:

<li><a href="">...</a></li><li><a href="">...</a></li>  ...
und 4.) Setz den Tipp von Sinistar mit dem Universalselektor ein.

dabidu 17.10.2006 14:59

Liste der Anhänge anzeigen (Anzahl: 2)
Hallo alle zusammen,

so jetzt bin ich an einem anderen Layout dran ...

diesmal mit Anhang ... und Codec alles zusammen

+ meine Problemme :oops:

und zwar, in Morzilla sieht es ganz anders aus als in EI.

ich schicke euch mal die beiden bilder mal rüber

also die test.gif soll genau wie der phaseEditor.gif aussehen.

Die Morzilla soll die Links auch nebeneinander zeigen.

EvT 17.10.2006 15:06

Zitat:

lernt euch selbst kennen!
Ich kenn mich schon ganz gut, deshalb würde ich lieber den Code deines anderen Layouts kennenlernen ;)

dabidu 18.10.2006 23:21

Liste der Anhänge anzeigen (Anzahl: 2)
hallo alle zusammen...

also ich hab endlich heraus bekommen, wie man die Datein als anhang verschicken kann...

ups sorry hat zwar lange gedauert, aber egal jetzt kann ich es ja auch ....

jetzt noch mal meine Frage, siehe Unbekannt.gif

ich möchte gerne wissen, wie ich die Buttons zusammenstellen, ohne dass da eine Lücke ist ... zwischen den Lücken ....

bitte nur die Lücken verraten ... ich möchte daran selbst weiter arbeiten ...

guten Abend ...

dabidu 22.10.2006 01:47

Hallo ...

bitte könnt ihr mir nicht verraten...

wie ich die Buttons ... zusammen nebeneinander stellen kann... :oops:

dabidu 22.10.2006 09:57

Liste der Anhänge anzeigen (Anzahl: 4)
Hallo bzw. Guten Morgen

Guten morgen Deutschland...

Auf jedenfall hab ich an dem UbungsLayout weitergearbeiet ..

in den Anhängen wird ihr halt sehen... wie das Layout aussieht, mit welchen Fehler es sich beherrt ...

:arrow: Bild "Ueberschrift", könnt ihr mir vielleicht sagen, wie ich den Abstand zw. dem Uberschrift und Text herstellen kann.

Code:

#contents{background-color: #CECE9C; height: 50px; line-height: 15pt;  padding: 20px; text-align: justify;}
.box1{border: 0px solid red; float: left; width: 260px;}
.box2, .box3{border: 0px solid red; float: right; width: 260px;}

.box1 h3, .box2 h3, .box3 h3 {font-size: 90%;}

:arrow: Bild "untenNavi", dass konnte ich auch nicht, im IE sind die Links nach links gewandert ... keine Ahnung, wie es weiter gehen soll...


Code:

#naviUnten{
        margin: 0 auto;
        text-align: left;
        border: 1px solid #31639C;
        background-color: #31639C;
        height: 30px;

}

#naviUnten ul {
        margin: 10 auto; // position: absolute; left: 62px;
        top: 175px;}

#naviUnten li{
        list-style-type: none; display: inline; margin: 0px;
        border: 0px solid #31639C; padding: 0px;

}


#naviUnten a{text-decoration: none; color: black;}  /*visited, active #naviUnten a:hover{color: yellow;}  */
#naviUnten a:hover {text-decoration: underline; color: yellow;}

:arrow: Bild "footer", ich kriege kein Abstand zw. grayenTextBox und footer

Hoffentlich könnt ihr mir jetzt weiterhelfen, nach dem ich konkreter auf die Fehler eingegangen bin.


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019