Beiträge von sejuma

  • kleines CSS Problem

    Wenn sich die Textfarbe auf den Text in der Tabelle bezieht ist es richtig so. Für die ganze HP definiere es im body.
    Du hast eine weiße Schrift definiert. Auf weißem Hintergrund wirst du die dann nicht sehen. Also gehört zur weißen Textfarbe noch ein Kontrast-Hintergrund. Den definierst du mit "background-color: #000099;" sofern er wie hier blau sein sollte.

  • Problem mit Div, Layout, ...???

    Sorry für die Verspätung, aber ich musste zwischendurch mal das Bad tapezieren :roll:
    Overflow kann der IE.
    Ich habe jetzt alle absoluten Positionierungen rausgeschmissen, da die fast immer irgendwelche Probleme verursachen.
    Die folgende Seite ist getestet im FF 1.5 und IE6, sollte also jetzt funktionieren.

  • starre Tabellen/divs möglich?

    Versuch's mal so:
    Definiere das Bild nicht mit width:"500" sondern mit width:"100%"
    Als height-Wert nimmst du ebenfalls einen Prozentwert, abhängig in Relation zum Pixelwert.
    Bei der Skalierung musst du dann allerdings Qualitätsverluste in Kauf nehmen.

  • Problem mit Div, Layout, ...???

    Ok, das erleichtert alles ungemein.

    Dann gehen wir wieder einen Schritt zurück: Im HTML-Teil die Kontaktdaten aus dem Navi-Container nehmen und wieder wie vorher darunter setzen, also zwischen Navi und content:

    Mit folgender CSS sollte es dann funktionieren, wobei ich die Bereiche zur Verdeutlichung mal eingefärbt habe. Die Höhenwerte kannst du ja noch anpassen.

    Code
    #content {background-color:magenta; left: 220px; bottom: 0; right: 0; top: 100px; position: absolute; height:700px; overflow:auto; } 
#header { height: 100px; left: 0; top: 0; position: absolute; width: 100%; visibility: visible; } 
#kontaktdaten {background-color:yellow; clear:left; height: 100px; width: 220px;}
#logolinks { width: 189px; left: 0; top: 0; position: absolute; height: 100px; visibility: visible; } 
#logorechts { height: 100px; width: 189px; top: 0; position: absolute; right: 0; visibility: visible; } 
#navlinksbg {background-color:red; width: 220px;float:left; margin-top:100px;height:600px; }

    Viel Erfolg!

  • Problem mit Div, Layout, ...???

    Dieses Problem habe ich gestern bereits kommen sehen. Da ich aber nicht wusste dass du eine flexible Höhe möchtest, war ich mal lieber ruhig :lol:

    Eine einfache Lösung, die allerdings nicht ganz deinen Vorstellungen entspricht:
    Das Überlappen der Kontaktdaten mit der Navi resultiert aus der absoluten Positionierung. Bezugspunkt ist bottom:0 womit bei kleinerem Fenster der Block automatisch nach oben rutscht.
    Um dies zu verhindern definiere Kontaktdaten so:

    Code
    #kontaktdaten { height: 100px; width: 220px;}


    Außerdem integriere diesesn div in diesen:

    Code
    <div id="navlinksbg">

    indem du den div #kontaktdaten vor den schließenden div von navlinksbg setzt:

    Als Ergebnis müssten die Kontaktdaten jetzt immer unterhalb der Navi sein, jedoch noch nicht auf unterer Linie mit dem Content-Text.
    Einen Abstand zur Navi kannst du noch mit einem margin-top-Wert in Kontaktdaten herstellen.
    Im Prinzip halte ich diese Lösung für besser, da der Benutzer dann gleich die Kontaktdaten sieht, ohne im Textbereich scrollen zu müssen.

    Falls du aber darauf bestehst, die Kontaktdaten unten anzuzeigen könntest du sie z.B. als "Footer" unter den Textbereich setzen indem du den Kontaktdaten-div vor den schließenden Tag des Contents setzt.

    Willst du's unbedingt links unten haben, muss man etwas tricksen. Dafür brauch ich etwas mehr Zeit. Dann müsste ich auch wissen, ob du bei einem einheitlichen Hintergrund bleibst (wäre etwas einfacher), oder z.B. für Linksbereich und Content unterschiedliche Farben verwenden willst.

  • Html,Css Frage (wiedereinmal von mir)

    So, aber das funktioniert nur dann, wenn du für alle drei Bereiche einen einheitlichen Hintergrund hast, der im div #all definiert ist.

  • Text in der Mitte anzeigen lassen

    Kannst so lassen, müsste hinhauen. Das visibility ist unnötig, da es im Standard so eingestellt ist.
    Mit float sähe bei mir der Head-Bereich dann so aus:

    Code
    #header { height:100px;} 
#logolinks { float:left; width: 189px;} 
#logorechts {float:right; width: 189px;} 
h1 {text-align:center; color: black; font-size: 2em;margin-bottom:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }

    Es gibt mit CSS immer mehrere Möglichkeiten, um ans Ziel zu kommen. Solange der Code valide ist und die Wirkung erzielt, die du gern hättest, ist es egal, welche Lösung du nimmst. Ich arbeite auch gerne mit prozentualen Angaben indem ich die Breite mit Prozent- statt Pixelwerten angebe. Das hat den Vorteil, dass sich die Größen der Container an verschiedene Bildschirmauflösungen anpassen können.
    Hier mal noch ein paar Float-Beispiele:
    http://www.stichpunkt.de/css/bereiche.html

  • Text in der Mitte anzeigen lassen

    Ist vermutlich mal wieder der IE6. Im 7er klappt das.
    Du kannst auch mal folgendes versuchen: Binde mal die beiden logogif's in den header-div ein. Also header-div öffnen und den HTML-code für die Logos und den Firmennamen einfügen, dann header schließen.

  • Text in der Mitte anzeigen lassen

    Die beiden Logos werden gefloatet statt absolut positioniert. Die Wirkung ist in diesem Fall die gleiche, aber absolute Positionierungen sollte man nur gezielt einsetzen, z.B. wenn sich div's bewusst überlappen sollen. Ansonsten finde ich die float-Methode sinnvoller.
    Den header hattest du absolut positioniert: entweder 189 px von links oder 189px von rechts. Das widerspricht sich eigentlich. Positionierungen nimmt mann normalerweise entweder von top und left oder von top und right vor.
    Wenn du bei deinem Code die Positionierungsangaben für den header weglässt, dann schiebt er sich automatisch zwischen die beiden Logos und nimmt die verbleibende Breite ein.
    Das wäre dann in deinem Sinn.
    Wenn du also bei deinem code den header so definierst

    Code
    #header { height: 100px;}

    müsste die zentrierung ebenfalls klappen.

    Indem ich den header mit den ursprünglich absoluten Positionsangaben vollständig weggelassen habe, wurde der gleiche Effekt erzielt.

    Container oder id's (#xxx) werden dann verwendet, wenn sie nur einmal pro Seite vorkommen (Eindeutigkeit). Mit ihnen verbindet mann insbesondere die Positionierung von Elementen und deren Formatierung.
    Klassen (.xxx) könen dagegen mehrmals pro Seite vorkommen.
    In deinem Fall hättest du statt ".firmenname" auch eine Überschrift, z.B. "h1" definieren können.

  • Text in der Mitte anzeigen lassen

    Probier's mal so:
    CSS

    Code
    body { background-color: #ffc; background-image: url(../images/bg_nav_links.gif); background-repeat: repeat-y; margin: 0px 0px 0px 0px; }
div.firmenname {text-align:center; color: black; font-size: 2em; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
html {    min-height: 100.05%; }
#content { left: 220px; bottom: 0; right: 0; top: 100px; position: absolute; visibility: visible; }
#kontaktdaten { height: 100px; width: 220px; left: 0; position: absolute; bottom: 0; visibility: visible; }
#logolinks {width: 189px; float:left; height: 100px; visibility: visible; }
#logorechts {height: 100px; width: 189px; float:right; visibility: visible; }
#navlinksbg { width: 220px; left: 0; bottom: 100px; top: 100px; position: absolute; visibility: visible; }


    HTML

  • Html,Css Frage (wiedereinmal von mir)

    Da musst du dich entscheinden, "welchen Tod du sterben willst" :wink:
    Entweder willst du eine fixe Höhe, dann musst du die in den div's entsprechend definieren. Wenn du noch "overflow:auto;" hinzufügst, bewirkt dies, dass man scrollen kann, wenn der Text länger ist als der Container.

    Sollen die kleineren Spalten immer "mitwachsen" und sich der Länge der jeweils größten Spalte anpassen, dann brauchst du ein flexibles Layout, z.B. nach folgendem Schema:

  • Mausverfolgung mit Bildern

    Das

    Code
    <font face="Times new Roamen" size="7" color="blue"><p align="center">[b]Willkommen auf freegamesload.funpic.de[/b]</p> 
<p align="center">[i]Der Freewarespielesammlungsseite![/i]</p></font>

    hat im head auch nichts zu suchen und gehört in den body.

  • Mausverfolgung mit Bildern

    Das

    Code
    <div id="mvb0" style="visibility: hidden; width: 12px; position: absolute; height: 12px"></div> 
<div id="mvb1" style="position: absolute">[img]http://freegamesload.fr.funpic.de/Bilder/006.gif[/img]</div> 
<div id="mvb2" style="position: absolute">[img]http://freegamesload.fr.funpic.de/Bilder/006.gif[/img]</div> 
<div id="mvb3" style="position: absolute">[img]http://freegamesload.fr.funpic.de/Bilder/006.gif[/img]</div>

    muss in den body-Bereich.