Hilfe bei Grundlayout und CSS

Chris-Chros · 3. Januar 2005

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>

kills · 3. Januar 2005

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

für genauere Analysen hab ich grad keine Zeit

Chris-Chros · 3. Januar 2005

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

Stimmt, aber nur hier im Forum! :WD

korea1 · 3. Januar 2005

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

Chris-Chros · 3. Januar 2005

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.

FMG · 3. Januar 2005

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>

FMG · 4. Januar 2005

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.

Chris-Chros · 5. Januar 2005

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:

Chris-Chros · 5. Januar 2005

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:

Chris-Chros · 6. Januar 2005

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

FMG · 6. Januar 2005

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!

Chris-Chros · 6. Januar 2005

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.

FMG · 6. Januar 2005

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

Chris-Chros · 6. Januar 2005

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

FMG · 6. Januar 2005

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

Chris-Chros · 6. Januar 2005

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

VIELEN DANK! :marine

Anmelden

Hilfe bei Grundlayout und CSS

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte