XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit 3 Spalten Layout (http://xhtmlforum.de/showthread.php?t=63251)

reflecta 15.12.2010 00:44

Problem mit 3 Spalten Layout
 
Hallo liebe xhtml Forum-Mitglieder,

folgendes Problem habe ich mit einem 3 Spalten Layout. Ich möchte gern in der CSS-Datei definieren das die Länge der beiden äußeren Container mit dem erstellen Inhalt des mittleren Containers automatisch erweitern.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>


<head>
 
  <title>Campus Tuning</title>
  <link rel="stylesheet" type="text/css" href="index.css">

</head>


<body>

<div id="seite">
 
 <ul id="Navigation">
    <li><a href="...">Projekt</a></li>
    <li><a href="...">Team</a></li>
    <li><a href="...">Konzepte</a></li>
    <li><a href="...">Umfragen</a></li>
    <li><a href="...">Ergebnisse</a></li>
    <li><a href="...">Kontakt</a></li>
  </ul>


  <div id="Info">
          <p>Infobox-Container</p>
 
  </div>

 
 <div id="Inhalt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget

dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur

ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla

consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,

arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu

pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean

vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,

enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra

nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel

augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,

tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed

ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et

ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.

Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet

nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit

cursus nunc.Nam eget dui. Etiam rhoncus. Maecenas tempus. tellus eget condimentum rhoncus,

sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel,

luctus pulvinar.</p>
<div id="deco">
</div>
  </div>

 
 

</div>

</body>

</html>

HTML-Code:

body {
    color: black; background-color: white;
    font-family: Helvetica,Arial,sans-serif;
    padding:0 10%;
    background-color:black;
    min-width: 41em; /* verhindert Anzeigefehler in modernen Browsern */
  }

#seite {
    background-color: white;
    border-color: #48A7C5;
    height: 100%;
    margin: auto;
    padding: 5px 0;
    width: 1024px;
  }
 
ul#Navigation {
    width: 674px; height:36px;
    background-image:url(images/banner.jpg);
    padding-left: 350px; padding-top:23px;
    font-size: 13px;
  }

ul#Navigation li { 
    list-style: none;
    display: inline;
    padding: 27px;
  }

ul#Navigation a {
    display: inline;
    text-decoration:none;
  }
  ul#Navigation a:link {
    color: white;
  }
  ul#Navigation a:hover {
    color: red;
  }
  ul#Navigation a:active {
    color: red;
  }
  ul#Navigation a:visit {
    color: white;
  }

 

div#Info {
    position:relative; left:15px;
    width: 300px;
    height: 100%;
    padding: 5px 0;
    background-image:url(images/karo.jpg);
    border:2px solid red;
  }

div#Info p {
    font-size: 12px;
    padding: 20px;
  }


div#Inhalt {
    position:relative; top:-93px; left:335px;
    width: 530px;
    border:2px solid red;
  }

div#Inhalt p {
    font-size: 12px;
    padding: 10px;
  }
 

div#deco {
    float: left;
    position:relative; top:-316px; left:547px;
    width: 119px;
    height: 100%;
    padding: 5px 0;
    background-image:url(images/karo.jpg);
    border:2px solid red;
   
  }

 

h1 {
    font-size: 1.5em;
    margin: 0 0 0.7em; padding: 0.3em;
    text-align: center;
    background-color: #fed;
    border: 2px ridge silver;
  }

Ich hoffe ihr könnt mir weiterhelfen. Vielen Dank.

MeckiDerIgel 15.12.2010 01:35

Das Problem, das du hast ist kein neues. Da musst du ein bisschen tricksen. Google mal nach "css faux columns".

reflecta 15.12.2010 05:19

Danke der Trick an funktioniert.

Ich ah noch eine andere Frage, wie kann ich bei dem Hover-Effekt in der Navigation für jeden Punkt eine andere Farbe definieren?

nevermind 15.12.2010 08:31

Weise jedem li oder a eine class oder id zu und spreche sie darüber an.

reflecta 15.12.2010 16:42

Super danke das passt nun auch. Jetzt habe ich in der CSS Datei überschriften definiert:
HTML-Code:

.red {   
    color: red;
    font-size: 1.3em;
  }

.aqua {   
    color: aqua;
    font-size: 1.3em;
  }

und in die HTML Datei eingebaut. Alle Browser zeigen es korrekt an nur der IE nicht. Warum???

HTML-Code:

<div id="Inhalt">
<h class="aqua">Überschrift</h> ...


fricca 15.12.2010 16:43

Überschriften heißen h1 - h6.

Muamicus 15.12.2010 17:18

color:aqua; ?

Ist das überhaupt regelkonform?

Nicht das du mit dieser Darstellung → Schreibweise erhebliche Farbschwankungen von Browser zu Browser Monitor zu Monitor provozierst.

Manfred62 15.12.2010 17:22

Zitat:

Zitat von nils_1309 (Beitrag 483066)
Ist das überhaupt regelkonform?

Ist erlaubt --> HTML Color Names
Allerdings ist der hexcode sicherer, wie o.g.

Manfred

reflecta 15.12.2010 17:39

Oh ja mein Fehler. Aber trotzdem vielen dank.
Die Farben sind erstmal provisorisch angelegt, später kommen dann noch die richtigen HEX-werte.

Jetzt hab ich aber noch ein Problem mit den Links in der Liste. Irgendwie will die Farbe nicht per focus-Befehl aktiviert bleiben solange die entsprechende Seite auf ist.

HTML-Code:

...

.farbe6:link {
    color: white;
  }
 .farbe6:visited {
    color: white;
  }
  .farbe4:focus {
    color: red;
  }
 .farbe6:hover {
    color: red;
  }
  .farbe6:active {
    color: red;
  }
...

HTML-Code:

...
<ul id="Navigation">
    <li id="Navigation">
    <li><a href="index.html" class="farbe1">Projekt</a></li>
    <li><a href="inhalte/team.html" class="farbe2">Team</a></li>
    <li><a href="inhalte/konzepte.html" class="farbe3">Konzepte</a></li>
    <li><a href="inhalte/umfragen.html" class="farbe4">Umfragen</a></li>
    <li><a href="inhalte/ergebnisse.html" class="farbe5">Ergebnisse</a></li>
    <li><a href="inhalte/kontakt.html" class="farbe6">Kontakt</a></li>
  </ul>
...


Muamicus 15.12.2010 17:41

focus ist auch nur der "Klickzustand". Nicht der aktiv Zustand.


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:18 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023