Durchgehende Linie

derlagerist

Hallo,

derzeit mache ich mich an einem eigenem Template für WP.
Die 4 Bereiche möchte ich mit einer Linie abgrenzen, also Header, Footer udn die Sidebar.
Bei der Sidebar geht die Linie leider nicht komplett runter und finde auch keine Lösung.
Hier das momentane Problem; https://s1.debian-freunde.de:8080/index.php

hier meine css;

Code

body        {color: #333; background: #e5e5e5;} 
#wrapper    {width: 850px; margin: auto; text-align: left; background: #fff;}
#header        {height: 160px; padding: 20px; border-bottom: 1px dashed #ccc;}
#main       {width: 519px; padding: 20px; float: left;}
#sidebar    { width: 270px; padding: 10px; padding-top: 20px; float: left; border-left: 1px dashed #f00;}
#footer        {clear: both; height: 29px; padding: 20px; border-top: 1px dashed #ccc; }

Jemand nen Rat für mich ?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

gericoach

[COLOR=#ff0000]VORSICHT! Der link wird von FF als kompromittierend gesperrt.[/COLOR]

Nevery

Zitat von gericoach

[COLOR=#ff0000]VORSICHT! Der link wird von FF als kompromittierend gesperrt.[/COLOR]

Sitzt eh nen ganz anderer Link hinter als angegeben - in solchen Fällen klicke ich garnicht erst drauf, aber danke für die Warnung :D

derlagerist

ach mist .. der hat auf mein server gelinkt -.- sorry, die Meldung erscheint weil ich nen eigenes ssl zertifikat nutze .. hier die richtige url; http://www.der-fachlagerist.de

gericoach

was passiert, wenn Du #main ein border-right: 1px dashed red; gibst?

Melewo

Das war das Schöne beim Tabellen-Layout, dass da alle Spalten eine Höhe hatten, mit DIVs nur über Umwegen möglich, wobei ich nicht alle Möglichkeiten kenne.

Die Lösung von gricoach dürfte in diesem Fall gut sein, ich bevorzuge oft die nachfolgende.

Ungetestet, nur aus dem Stegreif, zum Test in der footer.php einfügen.

Code

<script type="text/javascript">
"use strict";
if (window.addEventListener) {
    window.addEventListener("load", pruefeHoehe, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", pruefeHoehe);
}
function pruefeHoehe() {


    var die_hoehe = document.getElementById("main").offsetHeight;
    document.getElementById("sidebar").style.height = die_hoehe +"px";


    window.setTimeout("pruefeHoehe()", 500);
}
</script>

Alles anzeigen

Die Zeile mit setTimeout könnte entfernt werden, nur würde sich dann die Höhe nur noch beim ersten Aufruf einer Seite anpassen, jedoch nicht mehr, falls zwischendurch das Browserfenster verkleinert wird.

derlagerist

Danke, ja seine Antwort hat mich auch auf die richtige Fährte gebracht. Nun habe ich aber noch mal eine andere Frage, wenn wir schon bei Linien sind.

Möchte gerne das um jeden Beitrag ein Rahmen ist, halt zum abgrenzen bzw. das es übersichtlicher ist. in der Index.php habe ich mein loop wie folgt stehen;

Zitat

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
erstellt am: <?php the_date('d.m.Y'); ?> |
von: <?php the_author(); ?> |
Kategorie(n): <?php the_category(', '); ?>
<div class="entry">
<?php the_content(); ?>
</div>
<?php endwhile; ?>

Alles anzeigen

Dies ist im div = Main. Reicht es wenn ich wenn ich die CSS bearbeite und in der #main die Box angaben mache ??

Melewo

Zitat von derlagerist

Danke, ja seine Antwort hat mich auch auf die richtige Fährte gebracht.

Beide Varianten berücksichtigen nicht den Fall, dass der Inhalt von der Sidebar länger ist als der Artikel, was aber nach einigen Monaten durchaus passieren könnte, wenn die Zahl der Archiv-Links zunimmt usw.

Dazu müsste "main" und "sidebar" von der Höhe erfasst werden, um einen Höhenvergleich machen zu können und der Gewinner von beiden bekommt dann mit JS den Border zugeordnet.

Ob es nebenher noch CSS-Lösungen gibt, ist mir nicht wirklich bekannt. Eine sah ich mal, die verstand ich aber nicht gleich und probierte die deshalb nicht aus.

Nun sehe erst einmal zu, dass Du ein Problem richtig gelöst bekommst. Wie Du um den Inhalt einen Rahmen legen kannst, darauf findest Du auch allein eine Antwort. Genauso wie um jeden anderen Bereich kannst Du auch den Inhalt formatieren.

Nevery

Zitat von Melewo

Ob es nebenher noch CSS-Lösungen gibt, ist mir nicht wirklich bekannt. Eine sah ich mal, die verstand ich aber nicht gleich und probierte die deshalb nicht aus.

Ja, gibt es - dazu muss man aber mit position:absolute und entsprechender margin arbeiten, für Anfänger wird das eher kompliziert sein. Vor ~2 Jahren bin ich an solchen Sachen auch noch halb verzweifelt *g*

Melewo

So verhält sich das wohl, wie Nevery schrieb. Habe auch noch einmal Ausschau gehalten, ohne JavaScript, nur mit CSS ist es hier in der zweiten Hälfte gut beschrieben, liest sich zumindest so, unter:

Zitat

Höhensteuerung gekoppelter DIVs zur Laufzeit...

http://linux-blog.anracom.com/2012/06/01/geg…erung-von-divs/

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Durchgehende Linie

Jetzt mitmachen!