Jump to content

Hilfe bei Grundlayout und CSS

Empfohlene Beiträge

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>

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

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?

MfG

Korea1

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

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>

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

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.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

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:

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

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:

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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?

Okay, habe ich hinzugefügt.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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...

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Nimm an der Diskussion teil

Du kannst jetzt hier posten und Dich später registrieren. Wenn Du bereits über eine Konto verfügst, melde Dich jetzt an, um mit Deinem Konto zu posten.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung jetzt entfernen

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Clear editor

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.


Fachinformatiker.de, 2019 SE Internet Services

fidelogo_small.png

if_icon-6-mail-envelope-closed_314900.pnSchicken Sie uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App


Get it on Google Play

Kontakt

Hier werben?
Oder senden Sie eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...

Wichtige Information

Fachinformatiker.de verwendet Cookies. Mehr dazu in unserer Datenschutzerklärung