Hilfe bei Grundlayout und CSS

3. Januar 200521 j

Hallo.

Ich habe ein HTML-Layout gehabt, was ich nun in CSS umwandeln möchte.

So weit hat das auch geklappt, bis auf drei Punkte:

1. Unterhalb des Logos (70 Pixel hoch) ist ein wenig Platz, obwohl der Kopfbereich auch 70 Pixel hoch ist. Wie bekomme ich diesen Abstand weg?

2. Bei dem Div mit dem Namen "Navi2" musste ich die Höhe festlegen, damit mir der Inhalt nicht unter die Navigation geschrieben wird. Wie kann ich erreichen, dass "Navi2" immer so hoch wie "Inhalt" ist?

3. Wenn ich nun eine Tabelle in dem Div "Inhalt" erstelle, muss ich immer die Breite in Pixeln angeben und kann nicht 100% als Wert nehmen. Wieso?

Meine Style-Datei:


#Basis

{

  width: 800px;

  background: #FFFFFF;

  border: 1px solid #DFDFDF;

}

#Kopf

{

  height: 70px;

  text-align: left;

}

#Navi1

{

  text-align: left;

  background: #EBEBEB;

  border-bottom: 1px solid #D3D3D3;

}

#Navi2

{

  float: left;

  height: 600px;

  width: 140px;

  text-align: left;

  vertical-align: top;

}

#Inhalt

{

  background: #FFFFFF;

}

#Fuss

{

  clear: left;

  height: 16px;

}

Meine HTML-Datei:


<html>

<head>

<link rel="stylesheet" type="text/css" href="Style.css">

</head>

<body>

<div align="center">

  <div id="Basis">

    <div id="Kopf"><img src="Logo.png" width="300" height="70"></div>

    <div id="Navi1"><a href="index.php" target="_top">Startseite</a></div>

    <div id="Navi2">Links<br>Downloads<br></div>

    <div id="Inhalt">Mein Inhalt</div>

    <div id="Fuss">Copyright by ...</div>

  </div>

</body>

</html>

3. Januar 200521 j

ohne es mir genauer angesehen zu haben würd ich sagen das ein "</div>" fehlt

für genauere Analysen hab ich grad keine Zeit

3. Januar 200521 j

ohne es mir genauer angesehen zu haben würd ich sagen das ein "</div>" fehlt

Stimmt, aber nur hier im Forum! :WD

3. Januar 200521 j

Hi,

ich bin mir nicht sicher, ob ich Dich ganz richtig verstanden habe, aber vielleicht hilft Dir das weiter, um den Abstand zu eliminieren.

Du meintest doch, dass Dein Logo nicht ganz am oberen Seitenanfang klebt, oder?

MfG

Korea1

3. Januar 200521 j

Hi,

ich bin mir nicht sicher, ob ich Dich ganz richtig verstanden habe, aber vielleicht hilft Dir das weiter, um den Abstand zu eliminieren.

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Du meintest doch, dass Dein Logo nicht ganz am oberen Seitenanfang klebt, oder?

Jaein...

Zwische meiner horizontalen Navigation und dem Logo ist ein Abstand.

3. Januar 200521 j

Du solltest die HTML-Tags sinnvoller einsetzen und nicht wahllos div-Tags verschachteln!

Für das Menü bietet sich nämlich eine Liste an.

So dürfte es gehen (ungetestet!).

<html>

<head>

 <title>Seitentitel</title>

 <style type="text/css">

 body {

  margin: auto;

  text-align: center; /* Hack für den IE, damit er mittig ausrichtet... */

  border: 1px solid #dfdfdf;

 }

 #basis {

  width: 800px;

  background: #fff;

 }

 #navi1 {

  text-align: right;

  background: #ebebeb;

  border-bottom: 1px solid #D3D3D3;

 }

 #navi2 li {

   display: block;

 }

 #inhalt {

   text-align: left;

   width: 660px;

   margin: 5px;

   float: right;

   clear: none;

 }

 #fuss {

   clear: both;

 }

 </style>

</head>

<body>

<div id="basis">

 <img src="header.jpg" alt="Header">

 <p id="navi1">Startseite</p>

 <ul id="navi2">

  <li><a href="index.html">Startseite</a></li>

  <li><a href="links.html">Links</a></li>

  <li><a href="#">noch ein Link</a></li>

 </ul>

 <div id="inhalt">

  Ganz<br />viel<br />Inhalt<br />...

 </div>

 <p id="fuss">(C) by ...</p>

</div>

</body>

</html>

4. Januar 200521 j

Oops...

body {
margin: auto;
text-align: center; /* Hack für den IE, damit er mittig ausrichtet... */
border: 1px solid #dfdfdf;
}
#basis {
width: 800px;
background: #fff;
}

in

body {

  margin: auto;

  text-align: center; /* Hack für den IE, damit er mittig ausrichtet... */

 }

 #basis {

  width: 800px;

  background: #fff;

  border: 1px solid #dfdfdf;

 }

ändern, denn beim body gibts natürlich kein border. *rotwerd*

Sofern der Hintergrund der gesamten Seite nicht anders sein soll, als der von #basis muss background: #fff; in den body gesetzt werden.

Um den Listenpunkt wegzubekommen, bei #navi2 li liste-style: none; hinzufügen.

5. Januar 200521 j

du hast mir echt weiter geholfen!:e@sy

Was leider noch nicht geht ist, dass das Layout von "#Navi2" fortgefahren wird, wenn "Inhalt" größer wird. :confused:

Der Text aus "Inhalt" wird nun zwar nicht mehr unter "#Navi2" geschoben :marine , aber die Navigation wird halt nach dem letzten Punkt abgeschnitten. :rolleyes:

5. Januar 200521 j

Habe nun fast alle Vorschläge von dir umgesetzt und noch ein wenig weiter gemacht. Dabei ist nun folgendes heraus gekommen...

HTML-Datei:

<html>

<head>

<title>Titel</title>

<link rel="stylesheet" type="text/css" href="Layout/Style.css">

</head>


<body>

    <div id="Basis">

        <div id="Kopf"><img src="Logo.png" width="300" height="70"></div>

        <div id="Navi1"><a href="index.php" target="_top">Startseite</a></div>


        <div id="Navi2"><img src="Artikel.png" width="140" height="15">

            <ul>

                <li>- PHP</li>

                <li>- VB-Skript</li>

                <li>- Visual Basic</li>

            </ul>

            <img src="Allgemeines.png" width="140" height="15">

            <ul>

                <li>- <a href="index.php?Seite=Links">Links</a></li>

                <li>- <a href="index.php?Seite=Downloads">Downloads</a></li>

            </ul>

            <img src="Website.png" width="140" height="15">

            <ul>

                <li>- <a href="index.php?Seite=Historie">Historie</a></li>

                <li>- <a href="index.php?Seite=Besucher">Besucher</a></li>

                <li>- <a href="index.php?Seite=Gaestebuch">Gästebuch</a></li>

        </div>

        <div id="Inhalt">

            INHALT

        </div>

        <div id="Fuss">

            FUSSTEXT

        </div>

    </div>

    <br><font class="Status">Copyright Â©2004 by <a href="Http://www.Domain.de/index.php?Seite=Impressum">Urheber</a></font>

</body>

</html>

Style-Datei:

#Basis

{

	width: 800px;

    margin-top: 20px;

	background: #FFFFFF;

	border: 1px solid #DFDFDF;

}

#Kopf

{

	height: 70px;

	text-align: left;

	background: #85ADD6 url(Back_Oben.png) repeat;

}

#Navi1

{

    height: 18px;

    font-size: 8pt;

    text-align: left;

	background: #EBEBEB;

    vertical-align: middle;

	border-top: 1px solid #D3D3D3;

    border-top: 1px solid #D3D3D3;

	border-bottom: 1px solid #D3D3D3;

}

#Navi2

{

	float: left;

    width: 140px;

    display: block;

    font-size: 9pt;

	text-align: left;

	vertical-align: top;

	background: #FBFBFB;

	border-right: 1px solid #F3F3F3;

}

#Inhalt

{

    float: right;

    background: #FFFFFF;

}

#Fuss

{

	clear: both;

	height: 16px;

	font-size: 8pt;

	background: #F2F2F2;

	text-align: center;

	vertical-align: middle;

}


body

{

    margin: auto;

	color: #333333;

	font-size: 10pt;

    text-align: center;

	font-family: Verdana;

	background-color: #F2F2F2;

	scrollbar-face-color: #85ADD6;

	scrollbar-track-color: #F2F2F2;

	scrollbar-shadow-color: #85ADD6;

	scrollbar-arrow-color:  #FF5500;

	scrollbar-3dlight-color: #85ADD6;

	scrollbar-highlight-color: #85ADD6;

	scrollbar-darkshadow-color: #85ADD6;

}

li

{

    list-style: none;

}

Was leider noch nicht geht:

Das Layout von "#Navi2" soll so hoch sein, wie "#Inhalt".

Wobei die Höhe von "#Inhalt" variabel sein muss, aber mindestens 500 Pixel.

Kannst du das noch lösen!? :rolleyes:

6. Januar 200521 j

Es sieht nun so aus:www.Christian-Jaeckle.de

6. Januar 200521 j

Bei dir fehlt clear: none; im CSS (bei #navi2).

Wieso machst du ein modernes Layout mit CSS bzw. div-Tags um dann font-Tags zu verwenden?

Was auch noch fehlt, ist eine docType!

6. Januar 200521 j

Bei dir fehlt clear: none; im CSS (bei #navi2).]!

Okay, habe ich rein gemacht -> Keine Änderung erkannt!

Wieso machst du ein modernes Layout mit CSS bzw. div-Tags um dann font-Tags zu verwenden?).]!

Wo habe ich Font-Tags bzw. was verstehst du darunter?

Edit: Meinst du bei dem Copyright?

Was auch noch fehlt, ist eine[url=http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp]docType[/url?).]!

Okay, habe ich hinzugefügt.

6. Januar 200521 j

Lass mal den Inhaltsbereich floaten - vielleicht klappts dann (incl. clear: none; )

Mit font-Tag meine ich

<font class="Status">

usw.

Das Copyright-Zeichen solltest du auch entsprechend codieren, d.h. & copy; (ohne Leerzeichen) - siehe http://de.selfhtml.org/html/referenz/zeichen.htm

6. Januar 200521 j

Lass mal den Inhaltsbereich floaten - vielleicht klappts dann (incl. clear: none; )]

Jetzt macht er den Inhalt in eine Flucht -> Super! Danke! :e@sy

Mit font-Tag meine ich
<font class="Status">
usw.)]

Was könnte ich noch ausser <font> nehmen?

<p> oder so...??

Das Copyright-Zeichen solltest du auch entsprechend codieren, d.h. & copy; (ohne Leerzeichen) - siehe http://de.selfhtml.org/html/referenz/zeichen.htm

Die Sonderzeichen ändere ich später, wenn alles geht. Trotzdem danke!

Wenn du mir nun noch mit der Navigation hilfst, dass die bis runter geht, ohne dass ich eine Höhe vorgeben muss...

6. Januar 200521 j

ad font-Tag

Ja, z. B. mit <p> oder auch mit <span>.

ad Menü

Mach ein Bild von 1 Pixel Höhe und 140 Pixel Breite mit der Farbe "FBFBFB" vom Menü und binde es bei #Basis als Hintergrundbild ein (background:url(menuehintergrund.png) repeat-y left; ).

background: #ffffff; kannst du dann bei #Basis rausnehmen

6. Januar 200521 j

Hey, du bist verdammt gut! :e@sy :hodata

VIELEN DANK! :marine

Hilfe bei Grundlayout und CSS

Empfohlene Antworten

Archiv

Konto

Navigation

Suchen

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)