Delphi-PRAXiS
Seite 1 von 2  1 2      
40 Beiträge dieses Themas auf einer Seite anzeigen

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen (https://www.delphipraxis.net/157737-%5Bcss%5D-fusszeile-linke-spalte-oder-den-hauptteil-anpassen.html)

RWarnecke 23. Jan 2011 11:39
[CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Hallo zusammen,

ich versuche mich gerade in CSS. Ich habe bis jetzt immer nur fertige Stylesheets angepasst (z.B. Farben, oder Abstände). Nun will ich mir ein eigenes Stylesheet aufbauen, womit ich künftig meine Webseiten mit gestalten will. Dieses soll 3 spaltig oder 2 spaltig sein, entsprechend der Anforderung. Ich versuche mich gerade an einem zweispaltigen Layout mit Kopf- und Fußzeile. Das ganze sieht auch schon recht annehmbar aus. Ich habe aber zwei Probleme :
  1. Beim IE8 unter Windows 7 wird die linke Spalte etwas versetzt nach unten angezeigt. Was habe ich falsch gemacht, da in allen anderen Browsern es richtig angezeigt wird ?
  2. Ich würde gerne die Fusszeile über beide Spalten haben und diese soll ich immer der längsten Spalte anpassen. Wie kann ich das realisieren ?

Hier dazu mein Quelltext :
Code:
body {
   font-family: serif;
   font-size: 15px;
   background-color: #fff;
   color: #000;
   padding: 10px 0 0;
   margin: 0;
   }
HTML>body {
   padding: 0;
   max-width: 1400px;
   }

#header {
   background-color: #d5fcf4;
   padding: 0;
   border: 1px solid #0c9;
   margin: 10px;
   height: 100px;
   }

#main {
   background-color: #d5eeff;
   padding: 0;
   border: 1px solid #09f;
   margin: 10px 10px 10px 247px;
   }

#footer {
   background-color: #eed5ff;
   padding: 0;
   border: 1px solid #90f;
   margin: 10px 10px 10px 10px;
   }

#left {
   background: #ffd5ee;
   padding: 0;
   border: 1px solid #f09;
   margin: 10px;
   width: 225px;
   position: absolute;
   top: 112px;
   left: 0;
   }
Noch meine Index.html:
Code:
<link rel="stylesheet" href="layout.css" type="text/css" />
<body>

<div id="header">
   ...
</div>

<div id="left">
   ...<br>
   ...<br>
   ...
</div>

<div id="main">
   ...<br>
   ...
</div>

<div id="footer">
   ...
</div>

</body>

patti 23. Jan 2011 12:35
AW: [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Hi,

ich hab hier gerade mal was getippt, das funktionieren sollte. Hab den left-Container und den main-Container noch in einen zusätzlichen Container gepackt und mit dem Attribut "flot:left;" gearbeitet. Ich würde statt dem id-Tag für die DIV-Container lieber das class-Attribut verwenden.

Code:
<!DOCTYPE HTML>
<html>
<head>
   <link rel="stylesheet" href="layout.css" type="text/css">
</head>
<body>
   <div class="header">
      Header
   </div>
   
   <div class="container">
      <div class="navigation">
         Navigation<br>
         Zeile 2<br>
         Zeile 3<br>
         Zeile 4<br>
         Zeile 5<br>
      </div>
      
      <div class="content">
         Content<br>
         Neue Zeile<br>
         Neue Zeile<br>
         Neue Zeile<br>
         Neue Zeile<br>
         Neue Zeile<br>
      </div>
   </div>
   
   <div class="footer">
      Footer
   </div>
</body>
</html>
Code:
body {
   background-color: white;
   padding:10px;
   margin:0px;
}

.header {
   padding:4px;
   height:64px;
   background-color: #CDEBF3;
   border: 1px solid #30A7C5;
}

.footer {
   padding:4px;
   background-color: #F8FD95;
   border: 1px solid #E4F004;
}

.navigation {
   width:250px;
   float:left;
   padding:4px;
   background-color:#FFC1C2;
   border:1px solid #FB0006;
   margin:0px;
}

.content {
   padding:4px;
   background-color:#B3FFB7;
   border:1px solid #20FF2C;
   margin:0px 0px 0px 268px;
}

.container {
   margin:12px 0px;
   overflow:hidden;
}
Bei Bedarf kann ich alles noch etwas näher erläutern ;-)

mfg,
Patrick

Edit: Hab das ganze gerade mal auf meinen Web-Server hochgeladen: http://www.patti-k.de/test/layout_dp/. Habs mit Opera 11 und IE 8 getestet, bei beiden schauts korrekt aus. Wie es in den anderen Browsern dargestellt wird, weiß ich nicht.

RWarnecke 23. Jan 2011 12:46
AW: [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Hallo Patrick,

danke für Dein Beispiel. Jetzt wird es bei mir auch richtig angezeigt. Das mit dem Container habe ich soweit verstanden und die damit verbundene Fußzeile. Nur eines verstehe ich noch nicht ganz, mit der Navigation links, warum die jetzt bei Dir richtig angezeigt wird und bei mir nicht. Liegt es vielleicht an dem position Parameter ?

patti 23. Jan 2011 13:01
AW: [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Du meinst, dass der linke Container bei dir um ein paar Pixel nach unten versetzt war?
Du kannst mal probieren, was passiert, wenn du den Doctype für deine HTML-Datei angibst (erste Zeile aus meiner HTML-Datei). Der IE interpretiert manche Angaben abhängig vom gesetzten Doctype unterschiedlich, evtl. würde das sogar dein Problem beheben...

RWarnecke 23. Jan 2011 13:11
AW: [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von patti (Beitrag 1076658)
Du meinst, dass der linke Container bei dir um ein paar Pixel nach unten versetzt war?
Ja, das meinte ich.
Zitat:
Zitat von patti (Beitrag 1076658)
Du kannst mal probieren, was passiert, wenn du den Doctype für deine HTML-Datei angibst (erste Zeile aus meiner HTML-Datei). Der IE interpretiert manche Angaben abhängig vom gesetzten Doctype unterschiedlich, evtl. würde das sogar dein Problem beheben...
Wenn ich den DOCTYPE zum Beispiel aus Deiner HTML-Datei entferne, gehen die Einstellungen von Container flöten im IE8 (siehe Anhang). In den anderen Browser Chrome, Firefox, Safari und Opera nicht.

patti 23. Jan 2011 13:25
AW: [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Zitat:
Zitat von RWarnecke (Beitrag 1076659)
Wenn ich den DOCTYPE zum Beispiel aus Deiner HTML-Datei entferne, gehen die Einstellungen von Container flöten im IE8 (siehe Anhang). In den anderen Browser Chrome, Firefox, Safari und Opera nicht.
Und was passiert, wenn du in deiner ursprünglichen Datei mal mit den Doctypes spielst, beispielsweise ein

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
benutzt?

Bei SelfHTML gibt es interessante Informationen zu dem Thema. Dort steht auch, warum der IE anders reagiert als andere Browser.

RWarnecke 27. Jan 2011 06:55
AW: [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Hallo Patrick,

ich habe das ganze eben nochmals mit dem DOCTYPE getestet. Wenn ich den DOCTYPE angebe, wird der linke Kasten im IE8 richtig angezeigt. Wird Doctype weggelassen, wird der linke Kasten etwas versetzt nach unten angezeigt. Dann ist mir gerade beim Testen aufgefallen, Du hast Punkte für die einzelnen Sektionen in der CSS-Datei genommen und ich das Symbol #. Worin besteht der Unterschied, wenn ich eine Sektion in einer CSS-Datei mit # oder mit einem Punkt anfange ?

patti 27. Jan 2011 07:45
AW: [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Zitat:
Zitat von RWarnecke (Beitrag 1077557)
Dann ist mir gerade beim Testen aufgefallen, Du hast Punkte für die einzelnen Sektionen in der CSS-Datei genommen und ich das Symbol #. Worin besteht der Unterschied, wenn ich eine Sektion in einer CSS-Datei mit # oder mit einem Punkt anfange ?
Selektoren in CSS, die mit # anfangen, beziehen sich immer auf ein Element im HTML-Dokument mit einer bestimmten ID. Selektoren, die dagegen mit einem Punkt beginnen, definieren sog. Klassen ("class").

Eine ID vergibt man folgendermaßen:

Code:
<div id="meineid"></div>
Und den Style dann eben über das #-Symbol:

Code:
#meineid { }
Bei einer Class schauts so aus:

Code:
<div class="meineclass"></div>
Code:
.meineclass { }

Der wichtigste Unterschied, den man unbedingt beachten muss, um HTML- und CSS-konform zu arbeiten, ist, dass innerhalb eines HTML-Dokuments jeweils nur ein Element "pro ID" exisitieren darf, d.h. eine ID muss eindeutig sein. Dagegen können beliebig viele Elemente einer Class zugewiesen werden.
Ich habe vor ein paar Tagen auf Grund von diesem Thread per PN mit Matze "diskutiert", welche Möglichkeit vorzuziehen ist. Ich werde meine Aussagen mal zusammenfassen und hier präsentieren ;-)

mfg

joachimd 27. Jan 2011 08:33
AW: [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Zitat:
Zitat von patti (Beitrag 1076650)
Hab das ganze gerade mal auf meinen Web-Server hochgeladen: http://www.patti-k.de/test/layout_dp/. Habs mit Opera 11 und IE 8 getestet, bei beiden schauts korrekt aus. Wie es in den anderen Browsern dargestellt wird, weiß ich nicht.
nicht als Antwort auf das Thema - nur als Tipp: Schau dir mal http://meineipadresse.de/netrenderer/index.php an. Nette Seite, um mal kurz das Layout für die versch. Browser zu testen. Da siehst du zB, dass das Layout erst mit IE7 wirklich funzt.

RWarnecke 27. Jan 2011 09:03
AW: [CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen
 
Zitat:
Zitat von joachimd (Beitrag 1077565)
nicht als Antwort auf das Thema - nur als Tipp: Schau dir mal http://meineipadresse.de/netrenderer/index.php an. Nette Seite, um mal kurz das Layout für die versch. Browser zu testen. Da siehst du zB, dass das Layout erst mit IE7 wirklich funzt.
Hallo Joachim, danke für den Link. Ist ja sehr interessant, was man unter dem Link sieht.

@patti:
Hallo Patrick,

danke für Deine ausführliche Erklärung. Mich beschäftigen dazu aber noch zwei weitere Fragen. Kann ich Klassen mit ID's kombinieren und wenn ja wie ? Wie könnte ich einen Text links und einen Text rechts in der gleichen Zeile im Footer anzeigen. Ich habe es heute morgen mit dem div-Tag und dem span-Tag probiert. Jeweils mit Klasse und ID. Nur leider hat es nicht funktioniert. Entweder hat er mir es in zwei Zeilen, linksbündig untereinander oder komplett hintereinander linksbündig geschrieben. Wäre nett, wenn Du mir es an Deinem Beispiel erklären könntest, wie ich soetwas realisiere.


Alle Zeitangaben in WEZ +1. Es ist jetzt 14:08 Uhr.
Seite 1 von 2  1 2      
40 Beiträge dieses Themas auf einer Seite anzeigen

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz