Anordnen von Elementen mit CSS

Status
Nicht offen für weitere Antworten.
T

tantebootsy

Erfahrenes Mitglied
Hi,
ich habe nach diesem CSS-Tutorial versucht, eine Page mit CSS zu machen.
Nun habe ich das Problem, dass ich noch eine Hauptnavi unter dem Titel einfügen möchte, hier aber die einzelnen Bilder nicht nebeneinander bekomme.
Ich möchte die Hauptnavi per FAR machen.
Hier meine Seite.
Vielleicht kann mal jemand von Euch drüberschauen, wäre klasse! :)
Gruß,
Micha
 
Hi,

versuch mal, in allen H1-Tags die CSS-Eigenschaft float: left aufzunehmen.

Weiterhin würde ich bei den H1-Überschriften Aussen- und Innenabstände zu Null definieren:
Code: 
h1{ margin: 0;
    padding: 0;}
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Okay, thx, jetzt funktioniert es im Netscape, Mozilla, Firefox und Opera, nur IE6 macht noch zicken.
Ich gebe überall die gleichen Angaben ein doch der IE interpretiert sie alle gleich außer für ein einziges Bild! Und damit verschiebt sich alles ... Wenn ich beim bt_backg.jpg "margin-left:-12px" angebe passt es! :confused:
Wenn mir jemand noch nen Tipp zum IE weiß, damit's auch dort gut aussieht, wäre ich dankbar, werde auch noch selbst suchen.
Gruß,
Micha
 
Zuletzt bearbeitet:
Hi,

organisiere die Navigations anders. Nimm sie nicht mit float: left aus dem normalen Textfluss.
Stattdessen bringst du mit den entsprechenden margin-left/right-Werten (150 Pixel) zwischen
die beiden Spalten. Dabei gilt es den 3-Pixel-Bug zu beachten, der im IE auftritt (es entstehen
drei Pixel breite Lücken zwischen den Elementen). Dieser ist jedoch durch einen CSS-Filter zu
beheben.

Hier mein Lösungsvorschlag:
HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oktavia</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
  <!--
html { height:100% }

body { height:100%; margin:0; padding:0; background-color:#963 }
body.center_ie { text-align:center } /*Der IE 5 und 5.5 zentriert die Seite nicht auf korrekte Weise, nur über text-align, was dafür eigentlich nicht vorgesehen ist.*/

h1{ margin: 0;
    padding: 0;}
table { background-color:#000 }
img 	{ border-style:none }

a:link { font-family:Verdana,Helvetica,Arial,sans-serif;
         vertical-align:top;
         font-style:normal;
         font-variant:normal;
         font-size:1.0em;
         line-height:1.2em;
         font-weight:normal;
         font-stretch:normal;
         color:#000000;}
a:hover { color: #00f; }
a:visited { color: #606: }

.intro { font-family:Verdana,Helvetica,Arial,sans-serif;
         font-style:normal;
         font-variant:normal;
         font-size:1.0em;
         line-height:1.2em;
         font-weight:normal;
         font-stretch:normal;
         color:#EEE;
         text-align:center;}

.zentriert { position: absolute;
             width: 500px;
             height: 400px;
             left: 50%;
             margin-left: -250px;  /* Um die Hälfte der Breite nach links schieben */
             top: 50%;
             margin-top: -200px;   /* Um die Hälfte der Höhe nach oben schieben */
             background-color:#fff;}

.box1 { width:760px;
        height:100%;
        margin: 0px auto;
        text-align:left;
        background-color:#fff;}

/* Navigations-Element */
#navigation{ margin-left: 150px;
             margin-right: 150px;
             height: 40px;}
/* Filter für IEs */
* html #navigation{ margin-left: 147px;  /* 3 Pixel berücksichtigen */
                    margin-right: 147px;}

.rightCol{ float: right;}
* html .rightCol{ margin-left: -3px;  /* 3 Pixel berücksichtigen */}

.leftCol{ float: left;}
* html .leftCol{ margin-right: -3px;  /* 3 Pixel berücksichtigen */}
 //-->
</style>
</head>
<body class="center_ie">
<div class="box1">
  <div style="background-image:url(http://www.kreate.de/tmp/bilder/top.jpg); background-repeat:no-repeat; height:150px">&nbsp;</div>
  <div class="rightCol">
    <div style="background-image:url(http://www.kreate.de/tmp/bilder/right.jpg); background-repeat:no-repeat; height:39px; width:150px">&nbsp;</div>
    <div style="background-image:url(http://www.kreate.de/tmp/bilder/rs.jpg); background-repeat:no-repeat; height:200px; width:150px">&nbsp;</div>
  </div>
  <div class="leftCol">
    <div style="background-image:url(http://www.kreate.de/tmp/bilder/left.jpg); background-repeat:no-repeat; height:39px; width:150px">&nbsp;</div>
    <div style="background-image:url(http://www.kreate.de/tmp/bilder/nebennavi.jpg); background-repeat:no-repeat; height:200px; width:150px">&nbsp;</div>
  </div>
  <div id="navigation">
    <h1 style="float:left; background:url(http://www.kreate.de/tmp/bilder/bt_start.jpg);"><span style="visibility: hidden;">hello</span></h1>
    <h1 style="float:left; background:url(http://www.kreate.de/tmp/bilder/bt_film.jpg);"><span style="visibility: hidden;">hello</span></h1>
  </div>
</div>
</body>
</html>
Getestet in: IE 5.0, IE 5.5, IE 6, Opera 6.06, Opera 7.54, Netscape 6.2, Netscape 7.1, Firefox 1.0

Ciao
Quaese
 
Also erst mal vielen Dank für Deine Mühe!

Leider hat das trotzdem nicht hingehauen ... Mit zwei Elementen ging es ja noch gut, aber sobald der Background-Button dazugekommen ist hat man gesehen, dass sich die Elemente überlappen, da die no-repeats draußen waren. Habe ich dann das no-repeat beim Film-Button wieder rein, war auch wieder die Lücke da ...

Ich habe jetzt noch ewig am Code rumprobiert, ohne das Problem lösen zu können, scheint einfach ein Megabug beim IE zu sein, wie mir scheint ... *nerv*

Ich habe es nun vorläufig so "gelöst", dass ich bei den zwei Buttons, wo die Lücke entstand, in Imageready die Breite vergrößert und dementsprechend bei den danebenliegenden Buttons die Breite verringert habe.
Es fällt auf, dass nun beide Buttons, wo das Problem auftrat (einer war 54 Pixel breit, der andere 59 Pixel), genau 66 Pixel Breite haben, erst dann tritt keine Lücke mehr auf ((!)).
Also ein Rechenfehler beim IE?

Ich hab trotzdem noch ne Frage zu Deinem Code, Quaese:

Was bedeutet denn das Sternchen bzw. der ganze Ausdruck in dieser Zeile:

Quaese hat gesagt.:
HTML: 
* html .leftCol{ margin-right: -3px;  }
Zum Vergrößern anklicken....

Ist das eine andere Schreibweise für "attributbedingte Formate", könnte man das also auch so schreiben:

HTML: 
div[class=leftCol]

Ich hab halt im SelfHTML gelesen, dass z.B.

HTML: 
*[lang|=en] {margin-left:3px}

vom IE 5-6 noch nicht ausgelesen wird, von dem her passt das ja mit dem "Filter" von dem du gesprochen hast. Nur Deine Schreibweise leuchtet mir nicht ein.

Gruß,
MIcha
 
Hi,

bei meiner Schreibweise handelt es sich um den Star html Selector Bug, der eben nur von IEs
interpretiert wird.

Das die Lücke genau bei 66 Pixeln nicht mehr auftritt liegt sicherlich an dem mit visibility versteckten
Text. Werden Elemente mit dieser Eigenschaft versteckt, wird der Platz trotzdem reserviert und
freigehalten. Wahrscheinlich hat der Text eine Breite von 66 Pixeln und somit auch das H1-Element.
Wenn du die Schriftgrösse für den SPAN-Tag verringerst, wird sicherlich auch der benötigte Platz
und somit die erforderliche Buttonbreite geringer.

Ich habe meinen Quelltext jetzt nochmals angepasst.
HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
<title>Oktavia</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
  <!--
html { height:100% }

body { height:100%; margin:0; padding:0; background-color:#963 }
body.center_ie { text-align:center } /*Der IE 5 und 5.5 zentriert die Seite nicht auf korrekte Weise, nur über text-align, was dafür eigentlich nicht vorgesehen ist.*/

h1{ margin: 0;
    padding: 0;}
table{ background-color:#000 }
img{ border-style:none }

a:link { font-family:Verdana,Helvetica,Arial,sans-serif;
         vertical-align:top;
         font-style:normal;
         font-variant:normal;
         font-size:1.0em;
         line-height:1.2em;
         font-weight:normal;
         font-stretch:normal;
         color:#000000;}
a:hover { color: #00f; }
a:visited { color: #606: }

.intro { font-family:Verdana,Helvetica,Arial,sans-serif;
         font-style:normal;
         font-variant:normal;
         font-size:1.0em;
         line-height:1.2em;
         font-weight:normal;
         font-stretch:normal;
         color:#EEE;
         text-align:center;}

.zentriert { position: absolute;
             width: 500px;
             height: 400px;
             left: 50%;
             margin-left: -250px;  /* Um die Hälfte der Breite nach links schieben */
             top: 50%;
             margin-top: -200px;   /* Um die Hälfte der Höhe nach oben schieben */
             background-color:#fff;}

.box1 { width:760px;
        height:100%;
        margin: 0px auto;
        text-align:left;
        background-color:#fff;}

/* Navigations-Element */
#navigation{ margin-left: 150px;
             margin-right: 150px;
             height: 40px;}
/* Filter für IEs */
* html #navigation{ margin-left: 147px;  /* 3 Pixel berücksichtigen */
                   margin-right: 147px;}

.rightCol{ float: right;}
* html .rightCol{ margin-left: -3px;  /* 3 Pixel berücksichtigen */}

.leftCol{ float: left;}
* html .leftCol{ margin-right: -3px;  /* 3 Pixel berücksichtigen */}
 //-->
</style>
</head>

<body class="center_ie">
  <div class="box1">
    <div style="background-image:url(http://www.kreate.de/tmp/bilder/top.jpg); background-repeat:no-repeat; height:150px">&nbsp;</div>
    <div class="rightCol">
      <div style="background-image:url(http://www.kreate.de/tmp/bilder/right.jpg); background-repeat:no-repeat; height:39px; width:150px">&nbsp;</div>
      <div style="background-image:url(http://www.kreate.de/tmp/bilder/rs.jpg); background-repeat:no-repeat; height:200px; width:150px">&nbsp;</div>
    </div>
    <div class="leftCol">
      <div style="background-image:url(http://www.kreate.de/tmp/bilder/left.jpg); background-repeat:no-repeat; height:39px; width:150px">&nbsp;</div>
      <div style="background-image:url(http://www.kreate.de/tmp/bilder/nebennavi.jpg); background-repeat:no-repeat; height:200px; width:150px">&nbsp;</div>
    </div>
    <div id="navigation">
      <h1 style="float:left; background:url(http://www.kreate.de/tmp/bilder/bt_start.jpg) no-repeat; width: 73px;"><span style="visibility: hidden;">hello</span></h1>
      <h1 style="float:left; background:url(http://www.kreate.de/tmp/bilder/bt_film.jpg) no-repeat; width: 66px;"><span style="visibility: hidden;">hello</span></h1>
      <h1 style="float:left; background:url(http://www.kreate.de/tmp/bilder/bt_backg.jpg) no-repeat; width:84px;"><span style="visibility:hidden">hello</span></h1>
      <h1 style="float:left; background:url(http://www.kreate.de/tmp/bilder/bt_down.jpg) no-repeat; width:88px;"><span style="visibility:hidden">hello</span></h1>
      <h1 style="float:left; background:url(http://www.kreate.de/tmp/bilder/bt_forum.jpg) no-repeat; width:66px;"><span style="visibility:hidden">hello</span></h1>
      <h1 style="float:left; background:url(http://www.kreate.de/tmp/bilder/bt_spons.jpg) no-repeat; width:83px;"><span style="visibility:hidden">hello</span></h1>
    </div>
  </div>
</body>
</html>
Ciao
Quaese
 
Zuletzt bearbeitet:
Quaese hat gesagt.:
Das die Lücke genau bei 66 Pixeln nicht mehr auftritt liegt sicherlich an dem mit visibility versteckten
Text. Werden Elemente mit dieser Eigenschaft versteckt, wird der Platz trotzdem reserviert und
freigehalten. Wahrscheinlich hat der Text eine Breite von 66 Pixeln und somit auch das H1-Element.
Wenn du die Schriftgrösse für den SPAN-Tag verringerst, wird sicherlich auch der benötigte Platz
und somit die erforderliche Buttonbreite geringer.
Zum Vergrößern anklicken....

Na darauf muss man auch erst mal kommen .. :p
So, durch eigenes Suchen bin ich auf die Seite von Stu Nicholls gestoßen wo ich erfahren habe, dass ja scrollen innerhalb eines Textfeldes auch ohne Frames möglich ist. Wusste ich vorher auch nicht ...
Also habe ich nun nach seiner Anleitung das Layout nochmals komplett neu aufgebaut und im Großen und Ganzen funktioniert es nun auch, siehe Page .

Zwei Probleme habe ich allerdings noch:

1. Ich schätze, ich habe hier den 3px-Bug, von dem Du, Quaese, gesprochen hast: Im IE erscheint das Bild in der rechten oberen Ecke nicht, nur wenn ich zusätzlich margin-left:-3px angebe. Dann ist aber dieser häßliche Balken rechts neben dem Bild zu sehen. Ebenso, wenn ich das Bild kleiner mache.
Ich weiß nicht, wie ich dieses Problem lösen soll.

2. Außer im Opera erscheinen fast überall dort, wo ich Bilder als Links verwendet habe kleine Streifen in der Farbe, wie ich die Linkfarbe angegeben habe. Woran liegt denn das? Habe schon mit padding und border rumprobiert, aber ohne Ergebnis ...

Wäre schön wenn mir nochmals jemand helfen könnte,

Gruß,
MIcha
 
Hi,

das erste Problem lässt sich lösen, wenn du in #kopf die Hintergrundfarbe der Body-Farbe (#963)
anpasst.

Das zweite Problem tritt auf, weil die Leerzeichen standardmässig mit einem Unterstrich formatiert
werden. Weise den entsprechenden Klassen einfach die Eigenschaft text-decoration:none zu.
Code: 
    a.kopf1, a.kopf2, a.kopf3, a.start, a.film,
    a.proj, a.down, a.gaest, a.spons, a.crew,
    a.fotos, a.drebp, a.doku, a.drehb, a.story,
    a.rueck, a.weitr, a.gitar, a.on { text-decoration: none;}

Im IE tritt bei mir ausserdem zwischen Inhaltsbereich und Footer eine Lücke auf. Diese entsteht, weil
du den Footer für den IE ein Pixel nach unten verschiebst. Dieses Pixel muss bei der Höhe wieder
korrigiert werden.
Code: 
* html #fuss { margin-bottom:-1px;
               height: 21px;
}
Ciao
Quaese
 
Also jetzt mal ehrlich: Quaese, du bist doch 'n Bot, oder? ;) Kaum hat man die Frage formuliert, is auch schon die Antwort da ... Heute is Sonndag und da hat man doch zu relaxen, anstatt vor'm PC zu hängen! :p

Also Spaß bei Seite: vielen Dank für Deine Hülfe bisher! :)

Anstatt das Bild rechts oben nun um 3px zu verschieben ändere ich dessen Breite um 3px, da sich sonst das Bild über den Link "Sponsoren" schiebt. Das klappt nun auch, dank Deinem Tipp mit der Hint.farbe.

Beim Abstand unten musste ich noch 'n bisserl rumprobieren, denn als ich die Höhe auf 21px gesetzt habe war bei mir zum Fenster hin wieder ne Lücke da ... Also hab ich auch hier die Hint.farbe angepasst und zusätzlich noch background-repeat auf repeat-x gesetzt. Kannst du nochmals schauen, wie's nun bei Dir aussieht? Is die Lücke weg?

Gruß,
Micha

P.S. Achso, ich hab weiter oben gesehen, dass Du IE 5.x und 6 nebeneinander laufen läßt. Wie hast du denn das geschafft? Ich hatte bei mir mal ne Standalone 5.x laufen + die 6er Version aber er hat immer nur 6 geöffnet ...
 
Hi,

das Basteln am Footer hat sich gelohnt - die Lücke tritt bei mir jetzt nicht mehr auf!

Wie du mehr IEs nebeneinander verwenden kannst, ist hier nachzulesen.

Du musst aber ebenfalls ein Bot sein ... denn mit Relaxen hat deine Sonntagsarbeit auch
wenig zu tun ;)

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück