zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit 3 Spalten Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.12.2010, 23:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2008
Beiträge: 10
reflecta befindet sich auf einem aufstrebenden Ast
Idee 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.12.2010, 00:35
Neuer Benutzer
neuer user
 
Registriert seit: 15.12.2010
Beiträge: 2
MeckiDerIgel befindet sich auf einem aufstrebenden Ast
Standard

Das Problem, das du hast ist kein neues. Da musst du ein bisschen tricksen. Google mal nach "css faux columns".
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.12.2010, 04:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2008
Beiträge: 10
reflecta befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 15.12.2010, 07:31
Benutzerbild von nevermind
Trollflüsterer
XHTMLforum-Kenner
 
Registriert seit: 29.08.2005
Ort: Bietigheim-Bissingen
Beiträge: 2.215
nevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblick
Standard

Weise jedem li oder a eine class oder id zu und spreche sie darüber an.
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau
Mit Zitat antworten
  #5 (permalink)  
Alt 15.12.2010, 15:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2008
Beiträge: 10
reflecta befindet sich auf einem aufstrebenden Ast
Standard

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> ...
Mit Zitat antworten
  #6 (permalink)  
Alt 15.12.2010, 15:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Überschriften heißen h1 - h6.
Mit Zitat antworten
  #7 (permalink)  
Alt 15.12.2010, 16:18
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

color:aqua; ?

Ist das überhaupt regelkonform?

Nicht das du mit dieser Darstellung → Schreibweise erhebliche Farbschwankungen von Browser zu Browser Monitor zu Monitor provozierst.
Mit Zitat antworten
  #8 (permalink)  
Alt 15.12.2010, 16:22
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von nils_1309 Beitrag anzeigen
Ist das überhaupt regelkonform?
Ist erlaubt --> HTML Color Names
Allerdings ist der hexcode sicherer, wie o.g.

Manfred
Mit Zitat antworten
  #9 (permalink)  
Alt 15.12.2010, 16:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2008
Beiträge: 10
reflecta befindet sich auf einem aufstrebenden Ast
Standard

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> 
...
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.12.2010, 16:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

focus ist auch nur der "Klickzustand". Nicht der aktiv Zustand.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ein Layout Problem Snorfes CSS 2 10.06.2009 15:27
layout problem IE6 Opera omex CSS 0 15.08.2007 22:34
3 Spalten Layout, mal anders Sushimeister CSS 2 05.03.2007 11:15
problem mit ie5 / boxmodell beim 3 spalten layout musmus CSS 10 15.02.2007 15:15
Problem mit einem CSS Layout nARC CSS 20 21.05.2005 06:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:06 Uhr.