Problem mit CSS LAyout

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

~~n********r~~

16:50, 13.10.2005

Hi,

ich bin gerade dabei ein CSS LAyout zu erstellen. Leider habe ich ein paar Fehler drinne und wei? nciht wo.
Also, es wir im IE richtig angezeigt aber in Firefox nicht. Beim Firefox steht das Men? so weit rechts, das man nicht mal die Listenpunkte sieht.
Au?erdem ist das Men? im Textinhalt drinne. Was muss ich ?ndern, das es nicht mehr so ist?

Zweite Sache:
Wie kann ich das Komplette Layout von rechts in die mitte hohlen, ohne das die Schrft dann auch zentriert ist?
Und wie mache ich es, dass das Men? dierekt am content dran ist ohne abstand?

hier mein code:

<!doctype html public "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
  <title>Test Layout</title>
  <style type="text/css">
         #menue
         {
          width:100px;
          color:red;
          border:1px ridge #cecece;
          float:left;
         }
         #content
         {
          width:600px;
          color:blue;
          border:1px ridge #dedede;
          float:center;
         }
  </style>
</head>
<body>
<div width="700px" style="margin:0px;">
     <div id="menue">
          <li><a href="#">Hallo</a></li>
          <li><a href="#">Hallo</a></li>
          <li><a href="#">Hallo</a></li>
          <li><a href="#">Hallo</a></li>
          <li><a href="#">Hallo</a></li>
     </div>
     <div id="content">
          <h3>Hallo</h3><br><br><br>
          shdjksdfjhdsjkfhkjsdfhjkh<br>
          sehjksdfhjksdhfkjhsdjkfhsdjk<br>
          sdahkjdshfjkhdskfjhsdkjfkjsdf<br>
     </div>
</div>
</body>
</html>

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
wickedthunder

wickedthunder hat kostenlosen Webspace.

17:23, 13.10.2005
Also, wegen zentrieren:
Du kannst den Html-tag <center>...</center> benutzen, allerdings ist dieser nicht html4-gerecht.
Ich benutze zum zentrieren Javascript, also, wenn man von 1024px breite ausgeht:
document.getElementById("...").style.marginLeft = (document.width-1024)/2;
1024 ist die breite deines Elements, das kannste ab?ndern.
Autor dieses Themas
~~n********r~~

20:50, 13.10.2005
das ist sch?n, aber ich will es nicht zentrieren, weil wenn ich es so wie du mache, ist die schrift auf links und nur der content in der mitte, aber immer noch nicht alles, so wie ich es will
gsk

gsk hat kostenlosen Webspace.

12:47, 14.10.2005
padding-left:20px;

#menue
{
width:100px;
color:red;
border:1px ridge #cecece;
float:left;
padding-left:20px;
}

http://css4you.de/ kennst du bestimmt schon.
Autor dieses Themas
~~n********r~~

12:59, 14.10.2005
ok, jetzt kann ich alles lesen, aber das men? ist immer noch im textflu
gsk

gsk hat kostenlosen Webspace.

18:14, 14.10.2005
http://css4you.de/wslayout1/index.html
guck dir mal die beispiele unten an. da ist bestimmt was f?r dich dabei.
alopex

alopex hat kostenlosen Webspace.
18:27, 14.10.2005
Zentriert wird ein Block (beispielsweise <div> oder <p>) mit "margin: auto;".

Dann kannst du den Text im Blockelement immer noch so ausrichten, wie du m?chtest ( mit "text-align").

Teste deine Layouts immer zuerst mit dem Firefox, und erst wenn es dort hinhaut, kuckst du, was der IE dazu sagt. Umgekehrt geht das nicht, weil der IE viel mehr interpretiert (er versucht zu erraten, was du darstellen wolltest) als der Firefox. Verhaut der Firefox dein Layout, dann ist mit ziemlich gro?er Wahrscheinlichkeit dein Code daran schuld.

Au?erdem hilft es, XHTML statt HTML zu schreiben. Dazu ben?tigt deine HTML-Datei einen speziellen Header in der ersten Zeile:

<!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>
... 

Das zwingt den IE, von seiner "Raterei" abzulassen und den Quellcode so zu interpretieren, wie es auch der Firefox macht (meistens).

Verlinke mal bitte deine Seite, damit wir schauen k?nnen, wie du das Layout haben m?chtest (also so, wie es der MSIE anzeigt).

MfG
alopex

*nachtr?glich_einf?g*

So m?sste es gehen:
```
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>Test Layout</title>

<style type="text/css">

div#main {
  margin-left: auto;
  margin-right: auto;
  width: 720px;
  heigt: 100%;
  border: 1px green dashed;
}

div#menue
{
position: relative;
width:100px;
color:red;
border:1px ridge #cecece;
float:left;
clear: right;
}

div#content
{
position: relative;
width:600px;
color:blue;
border:1px ridge #dedede;
float:right;
}

</style>

</head>

<body>

<div id="main">

  <div id="menue">
  <li><a href="#">Hallo</a></li>
  <li><a href="#">Hallo</a></li>
  <li><a href="#">Hallo</a></li>
  <li><a href="#">Hallo</a></li>
  <li><a href="#">Hallo</a></li>
  </div>

  <div id="content">
  <h3>Hallo</h3><br><br><br>
  shdjksdfjhdsjkfhkjsdfhjkh<br>
  sehjksdfhjksdhfkjhsdjkfhsdjk<br>
  sdahkjdshfjkhdskfjhsdkjfkjsdf<br>
  </div>

</div>
</body>
</html>
```
Beitrag ge?ndert am 14.10.2005 18:43 von alopex
tengwar

tengwar hat kostenlosen Webspace.

18:46, 14.10.2005
Falsche Anzeige in Internet Explorer wegen box-modell-bug. Internet Explorer 6 kann es richtig anzeigen (d.h. so wie Firefox), wenn in der Dokumenttypangabe verlinkt ist.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city