zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung und Layout Probleme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.10.2006, 22:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2006
Beiträge: 30
dabidu befindet sich auf einem aufstrebenden Ast
Standard 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
__________________
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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.10.2006, 11:23
Wissensbegierig
neuer user
 
Registriert seit: 17.05.2006
Beiträge: 89
Synoxis befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.10.2006, 14:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2006
Beiträge: 30
dabidu befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 17.10.2006, 14:36
Benutzerbild von sinistar
Schwarzschaf
XHTMLforum-Mitglied
 
Registriert seit: 28.06.2006
Beiträge: 108
sinistar befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
Carpe diem! ...ma non dimenticare la notte.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.10.2006, 14:56
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.10.2006, 15:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2006
Beiträge: 30
dabidu befindet sich auf einem aufstrebenden Ast
Standard

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.
Angehängte Grafiken
Dateityp: jpg test.jpg (16,3 KB, 8x aufgerufen)
Dateityp: jpg phaseEdito.jpg (17,3 KB, 5x aufgerufen)
__________________
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.10.2006, 16:06
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
lernt euch selbst kennen!
Ich kenn mich schon ganz gut, deshalb würde ich lieber den Code deines anderen Layouts kennenlernen
Mit Zitat antworten
  #8 (permalink)  
Alt 19.10.2006, 00:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2006
Beiträge: 30
dabidu befindet sich auf einem aufstrebenden Ast
Standard

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 ...
Angehängte Grafiken
Dateityp: jpg Unbenannt-2.jpg (14,3 KB, 13x aufgerufen)
Angehängte Dateien
Dateityp: zip index_Phase.zip (1,4 KB, 0x aufgerufen)
__________________
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.
Mit Zitat antworten
  #9 (permalink)  
Alt 22.10.2006, 02:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2006
Beiträge: 30
dabidu befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.10.2006, 10:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2006
Beiträge: 30
dabidu befindet sich auf einem aufstrebenden Ast
Standard

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%;}
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;}
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.
Angehängte Grafiken
Dateityp: gif ueberschrift.gif (1,8 KB, 2x aufgerufen)
Dateityp: jpg unterNavi.jpg (18,7 KB, 2x aufgerufen)
Dateityp: jpg layout11.jpg (10,5 KB, 3x aufgerufen)
Dateityp: gif footer.gif (2,9 KB, 1x aufgerufen)
__________________
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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
paar Probleme mit dem CSS Layout SimonK. CSS 6 05.10.2008 15:57
Probleme mit Layout kruemelchen26 CSS 0 15.05.2007 23:40
Layout Probleme SchwarzerMagier CSS 18 01.08.2006 14:06
Neues layout - Probleme mit der Positionierung der Elemente MettyBirdy CSS 13 19.07.2005 12:03
Probleme mit Mehrspaltigem Layout RalfEggert CSS 0 27.09.2004 17:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:10 Uhr.