Firefox & IE / Positionen

Status
Nicht offen für weitere Antworten.
Danke Maik, die Seite ist jetzt komplett Fertig.
Könntest du mir zum Abschluss die Reihenfolge von margin und padding erklären?
Ich teste das immer aus. :rolleyes:

Bsp: margin: 0 0 0 0

Für was steht welche Zahl?

Ansonsten danke ich dir vielmals. Meine erste fertige Seite. :)

Mit freundlichen Grüßen,
-Raid-
 
Mahlzeit :)
Könntest du mir zum Abschluss die Reihenfolge von margin und padding erklären?
Ich teste das immer aus. :rolleyes:

Bsp: margin: 0 0 0 0

Für was steht welche Zahl?
Die vier Angaben beginnen oben (= margin-top / padding-top) und setzen sich dann im Uhrzeigersinn fort.

SELFHTML - margin hat gesagt.:
Bei mehreren Angaben werden diese abhängig von deren Anzahl interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.
SELFHTML - padding hat gesagt.:
Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.
 
Hi zusammen,
ich hab da noch ne Frage. Wie kann ich die Seite "fest" darstellen lassen.
Bsp.: http://www.goarmy.de
Auch wenn man hier den Browser minimiert und verkleinert verschiebt sich nichts.
Bei mir sieht das etwas anders aus:

unbenanntba5.jpg


Wie kann ich diesen "Effekt" erzielen?

Zudem will ich das Links, die im Body stehen, eingefärbt werden.
Hier mein Code:
Code:
a:link { color: white; }
a:visited { color: white; }
a:hover { color: red; }

Das funktioniert leider nur, wenn ich diesen Code:
Code:
<style type="text/css">
a:link { color: white; }
a:visited { color: white; }
a:hover { color: red; }
</style>

direkt in die jeweilige Seite einfüge, wenn ich den Code nur in die layout.css setze, funktioniert es nicht.

Hoffe ihr (Maik *grins*) könnt mir da weiterhelfen.

Mit freundlichen Grüßen,
-Raid-
 
Hi,

hierfür müsstest du das DIV #wrapper mit einer fixen Breite ausstatten und ggfs. mit margin:0 auto im Browserfenster horizontal zentrieren - in der genannten Seite, die auf einem tabellengestützten Layout basiert, besitzt die äußere Tabelle ebenfalls eine feste Breite und wird mit dem HTML-Attribut align=center im Viewport horizontal zentriert.

Die beiden äußeren Rand-Grafiken liessen sich dann auch in einer einzigen Grafik vereinen, und als Hintergrund für den Dokumentkörper oder das DIV#wrapper deklarieren.

Zu deiner Frage bzgl. der Linkformatierung empfehle ich dir meinen Artikel CSS Wie können Links in einer Seite unterschiedliche Schriftfarben erhalten? in den Webmaster FAQ.
 
Hi Maik,
das mit den Linkfarben habe ich noch rausbekommen, bevor du gepostet hattest. *stolz*
Hab es so gemacht:
Code:
	div#footer a:link {
		color: white;
  }	
	div#footer a:visited{
		color: white;
  }  
	div#footer a:hover{
		color: #970202;
		text-decoration:none;

Mit der fixen Breite kann ich dir leider nicht folgen.
Hab es mit Margin und Padding versucht, aber ich bekomme nicht das Resultat, was ich haben will. :confused:

Code:
[...]
	html,body {
		align: center;
		margin:0;
		padding:0;
		height:100%;
}
	body {
	    font-size:100.01%;
		font-family: Times New Roman;
		margin: 0em 0em; padding: 0em 2em;
	    background: #121212 url(images/BarL.jpg) left top repeat-y;
  }
		h1#header {
	    font-size: 1.0em;
		margin: 0px 0px 0em; padding: 74px;
		background: url(images/Header.jpg);
  }
  
	ul {
		list-style:none;
  }
    ul.Navigation {
		font-size: 14px;
		float: left;
		margin: 0;
		padding: 0em 0em;
		clear: left;
		width:135px;
  }
    li.NaviDown {
		color: white;
		background: url(images/NaviDown.jpg);
		margin: 0px 0px; padding: 0px 0px;
		width: 135px; height: 19px;
		clear: left;
		text-align:center;
}
  }
    ul.Navigation li {
		list-style: none;
		border: 0px solid;
		clear: left;
  }
    ul.Navigation a {
		display: block;
		padding: 2px;
        clear:left;
  }
    ul.Navigation a:link {
		color: white; background: url(images/NaviButton.jpg);
		text-decoration:none;
		text-align:center;
		clear: left;
  }
    ul.Navigation a:visited {
		color: white;
		text-decoration:none;
		text-align:center
		color: white; background: url(images/NaviButton.jpg);
		text-align:center;
  }
    ul.Navigation a:hover {
		color: #970202; background: url(images/NaviButtonOver.jpg);
		text-align:center;
  }
    ul.Navigation a:active {
		color: #000000; background: url(images/NaviButtonPressed.jpg);
		text-align:center;
  }
    ul#Uhrzeit {
		text-align:center;
		color:white;
		float: left;
		margin: 0;
		margin-top:15px;
		padding: 0;
		clear: left;
  }
    ul#Uhrzeit li.Uhrzeit {
		color: white;
		background: url(images/Counter.jpg);
		margin: 0; padding: 0;
		width: 135px; height: 19px;
		clear: left;
		text-align:center;
  }
    ul#Counter {
		text-align:center;
		color:white;
		float: left;
		margin: 0;
		margin-top:15px;
		padding: 0em 0em;
		clear: left;
  }
    ul#Counter li.Counter {
		color: white;
		background: url(images/Counter.jpg);
		margin: 0px 0px; padding: 0px 0px;
		width: 135px; height: 19px;
		clear: left;
		text-align:center;
  }
    div#Inhalt {
		background: #262626;
        margin: 0 0 3% 138px;
        padding: 0 0%;
        color: #ffffff;
  }
    div#Inhalt li.admin {
		display: block;
		text-align: center;
		font-size: 1em;
		margin: 0em 0em;
		background: url(images/NaviDown.jpg);
		height:1%;
  }
    div#Inhalt h2 {
		font-size: 1em;
		margin: 0em 0em;
		background: url(images/NaviDown.jpg);
		height:1%;
  }
    div#Inhalt p {
		font-size: 1em;
		margin: 0em 0em;
		padding: 0.8em 1em;
		margin-bottom: 0em;
  }
    div#footer {
        margin:  auto auto; padding: auto auto;
        text-align: center;
        position:absolute;
        bottom:0;
        left:16px;
        right:16px;
        color: #FFFFFF; background: url(images/NaviDown.jpg);
  }	
	div#footer a:link {
		color: white;
  }	
	div#footer a:visited{
		color: white;
  }  
	div#footer a:hover{
		color: #970202;
		text-decoration:none;
  }
	div#wrapper {
		position:relative;
		background:url(images/BarR.jpg) right top repeat-y;
		min-height:100%;
		height:auto !important;
		height:100%;
		padding:0px 16px 0 16px; margin:0 auto 0 0px;
  }
    div#NaviBar {
		margin: 0 0 0% 9px;
		padding: 0 0%;
		color: #ffffff; background: url(images/BarR.jpg);

Mit freundlichen Grüßen,
-Raid-
 
Schau dir doch zum Vergleich einfach mal den Quellcode der von dir genannten Seite etwas genauer an.

Die äußere Tabelle, die deinem DIV #wrapper entspricht, besitzt eine feste Breite (width="1059"), die sie beim Verkleinern des Browserfensters beibehält, und somit alle in ihr eingebundenen Seitenbereiche / Inhalte in ihrer vorgesehenen Position verharren.

Bei dir nimmt das DIV #wrapper aber derzeit ohne jegliche Breitenangabe einem Blockelement entsprechend eine relative Breite von 100% im Viewport ein, und reagiert auf das horizontale Verkleinern des Browserfensters, sprich verkleinert sich ebenfalls, und der Inhalt der rechten Spalte verschiebt sich somit nach links, und dürfte ab einem gewissen Grad an gewissen Stellen in die nächste Zeile umgebrochen werden.

Wenn für die Eltern-Box aber eine feste Breite deklariert wird, behält sie diese auch beim Skalieren des Browserfensters, und die Spalten verschieben sich somit nicht mehr.

In Anlehnung zur genannten Seite würde die Regel für die Box #wrapper dann folgendermaßen lauten:

Code:
div#wrapper {
    position:relative;
    width:1059px; /* fíxe Breite für die Box */
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px;
    margin: 0px auto; /* zentriert die Box horizontal im Fenster */
  }
 
So, da das F1-Qualifying vorbei ist, hab ich mich mal fix dran gesetzt, und in der angehängten Vorlage Nr.3 dem DIV #wrapper eine Breite von 800px verpasst (ich weiß ja nicht, welche Breite dir da vorschwebt) und die beiden Randgrafiken "BarL.jpg" und "BarR.jpg" in einer Grafik (wrapper_border.png / 800*1px) zusammengeführt, die der Box als Hintergrundbild dient.

Desweiteren habe ich als Zugabe in dem Layoutkonzept eine globale linke Spalte #leftCol eingerichtet, die nun die Navigation, die Uhrzeit und den Counter umschliesst, und vom Inhalt rechts umflossen wird - somit entfallen die immer wiederkehrenden float:left- und clear:left-Eigenschaft im Stylesheet für die einzelnen Listen.

Ich hoffe, dass du anhand dieses Beispiels die Technik nun besser nachvollziehen kannst.
 

Anhänge

  • demo_-Raid-_v3.zip
    75,3 KB · Aufrufe: 17
Erstmal danke, dass du dir solch eine Mühe gemacht hast.
Ich habe in den letzten 7 Tagen 50 Stunden an der Seite garbeitet und du schüttelst sowas aus dem Ärmel... :eek:

Gute Idee die Lightbox.css auszulagern. :rolleyes:
Sowie ich das sehe, hast du den Hintergrund und die Leisten in die Datei:
wrapper_border.png
gepackt.
Das Problem ist nur, dass ich eine %-Angabe machen wollte, damit die Seite sich der Auflösung anpasst.

Habe jetzt alle Seiten angepasst, ist doch einiges hinzugekommen, was bei deiner Version nicht dabei war. :)
Die Seite ist aktualisiert auf dem Server.
(Der Webspace ist bestellt, deswegen muss die Seite langsam fertig werden.)

Hab' einen guten Editor, damit kann ich sehr einfach sehen, was du verändert hast:
unbenanntfv0.jpg


War das jetzt schlimm, dass ich immer gecleart habe, oder ist das einfach nur besser von der Übersicht?

Zudem hätte ich noch eine Frage. Meine Uhr will einfach nicht laufen (Sekunden). Versuche jetzt schon seit 3 Stunden diese Uhr zum laufen zu bringen. :mad:
Code:
var Datum = new (Date);
var Tag = Datum.getDate();
var Monat = Datum.getMonth();
var Jahr = Datum.getFullYear();
var Monatname = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
var Stunde = Datum.getHours();
var Minute = Datum.getMinutes();
var Sekunde = Datum.getSeconds();

if(Sekunde < 10)
{
    Sekunde = "0" + Sekunde;
}

if(Minute < 10)
{
    Minute = "0" + Minute;
}

if(Stunde < 10)
{
    Stunde = "0" + Stunde;
}
/*window.setTimeout("showtime()",1000);*/

document.write(Tag+"."+Monatname[Monat]+"."+Jahr+" "+Stunde+":"+Minute+":"+Sekunde);
 
Deinen Beitrag von heute Mittag habe ich aber so interpretiert, dass du nun ein fixes Layout einrichten möchtest, eben so, wie auf der von dir verlinkten Seite.

Wenn du weiterhin eine relative Breite für die Parent-Box verwenden möchtest, solltest du für sie zusätzlich mit der min-width-Eigenschaft eine Mindestbreite einrichten, damit sie sich nur bis zu einem bestimmten Punkt zusammenstauchen lässt.

Aber Achtung: diese Eigenschaft wird von den älteren IE-Versionen bis einschliesslich dem IE6 nicht unterstützt, und es wäre ein Workaround erforderlich, wie ihn z.B. Stu Nicholls mit Min-Width for Internet Explorer demonstriert.

Jo, ich hab vorhin mal entsprechend dem HTML-Code für eine chronologische Reihenfolge im Stylesheet gesorgt, denn ich hasse nämlich nichts mehr, wenn die Selektoren in einer wahllosen Reihenfolge im CSS-Code umherschwirren, und man ständig darin rauf- und runterscrollen muss, um sich die einzelnen Passagen näher anzuschauen.

Eine funktionstüchtige Alternative zu deinem Uhrzeit-Script findest du hier http://www.jswelt.de/index.php?opencat=JavaScripts&artid=1004961413
 
Das war doch, was ich wollte. :rolleyes: War leicht irritiert.
Die Seite wird jetzt bis 1024x768 komplett angezeigt, bei einer Auflösung unter 1024x768 muss man scrollen.

Du hast echt auf alles 'ne Antwort.

Die Uhrzeit habe ich entfernt. Ich hätte sonst einen Banner in die Seite einfügen müssen.
Jetzt steht an der Stelle das Datum + Tagnamen:
Samstag, 24.05.2008

Das war's dann auch erstmal wieder von mir, bis zum nächsten mal. :)

Mit freundlichen Grüßen,
-Raid-
 
Status
Nicht offen für weitere Antworten.
Zurück