|
|||
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"> © 2001 . Name . <a href"#"> email senden </a> </div> </div> </body> </html> 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
__________________
lernt euch selbst kennen! Alles beginnt bei euch selbst. Vergesst nicht, dass ihr der Dreh- und Angelpunkt der Schöpfung seid. Der Mensch ist sowohl Weg als auch Wegbeschreiter. |
Sponsored Links |
|
|||
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 |
Sponsored Links |
|
|||
Hallo alle zusammen,
ich bin total traurig bzw. 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
__________________
lernt euch selbst kennen! Alles beginnt bei euch selbst. Vergesst nicht, dass ihr der Dreh- und Angelpunkt der Schöpfung seid. Der Mensch ist sowohl Weg als auch Wegbeschreiter. |
|
|||
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> ... |
|
|||
Hallo alle zusammen,
so jetzt bin ich an einem anderen Layout dran ... diesmal mit Anhang ... und Codec alles zusammen + meine Problemme 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.
__________________
lernt euch selbst kennen! Alles beginnt bei euch selbst. Vergesst nicht, dass ihr der Dreh- und Angelpunkt der Schöpfung seid. Der Mensch ist sowohl Weg als auch Wegbeschreiter. |
|
|||
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 ...
__________________
lernt euch selbst kennen! Alles beginnt bei euch selbst. Vergesst nicht, dass ihr der Dreh- und Angelpunkt der Schöpfung seid. Der Mensch ist sowohl Weg als auch Wegbeschreiter. |
|
|||
Hallo ...
bitte könnt ihr mir nicht verraten... wie ich die Buttons ... zusammen nebeneinander stellen kann...
__________________
lernt euch selbst kennen! Alles beginnt bei euch selbst. Vergesst nicht, dass ihr der Dreh- und Angelpunkt der Schöpfung seid. Der Mensch ist sowohl Weg als auch Wegbeschreiter. |
Sponsored Links |
|
|||
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 ... 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%;} 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;} Hoffentlich könnt ihr mir jetzt weiterhelfen, nach dem ich konkreter auf die Fehler eingegangen bin.
__________________
lernt euch selbst kennen! Alles beginnt bei euch selbst. Vergesst nicht, dass ihr der Dreh- und Angelpunkt der Schöpfung seid. Der Mensch ist sowohl Weg als auch Wegbeschreiter. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
paar Probleme mit dem CSS Layout | SimonK. | CSS | 6 | 05.10.2008 14:57 |
Probleme mit Layout | kruemelchen26 | CSS | 0 | 15.05.2007 22:40 |
Layout Probleme | SchwarzerMagier | CSS | 18 | 01.08.2006 13:06 |
Neues layout - Probleme mit der Positionierung der Elemente | MettyBirdy | CSS | 13 | 19.07.2005 11:03 |
Probleme mit Mehrspaltigem Layout | RalfEggert | CSS | 0 | 27.09.2004 16:39 |