Sidebar in Pool verschoben

Sir Ram

Hey!
Ich bin gerade dabei das Theme "Pool" für ein eigenes Design umzuschreiben. Header, Content & Footer hat auch alles geklappt. Bis auf die Sidebar. Die ist nämlich nicht da wo sie sein sollte:

Bild1: pix . nofrag . com

Hier kann man es am besten sehen. So jetzt habe ich in der CSS bisschen was ausprobiert. Mein Content hat eine Breite von 600px. Mache ich diesen auch nur ein paar Pixel breiter sieht das ganze so aus
Bild2: pix . nofrag . com

Ich hoffe mal das man diesen "Fehler" irgendwie beheben kann. Ich poste zusätzlich noch mal die CSS. Vielleicht geht das auch mit einer Padding Angabe. Ich hab's jedoch noch nicht hinbekommen.

Code

* Beitraege */
#noticias {
        float: left;
        margin: 0;
        padding: 0px 0 20px 170px;
        width: 600px;
        }


#sidebar {
        float: right;
        font-size: 12px;
        line-height: 1.5em;
        margin: 0px;
        padding: 0px 0px 0px 0px
        width: 200px;

Alles anzeigen

z.Z. läuft das ganze noch bei mir Zuhause. Werde es nachher mal hochladen, damit man es "Live" sehen kann

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

Astrid

Anhand des kleinen CSS-Schnipsels kann man leider nur raten. Was ich nicht tun würde, ist die doppelte Angabe von float. Das bringt immer Probleme mit sich, auch wenn es erlaubt ist, ist aber im Grunde nicht notwendig.

Besser wäre nur das Element (ich kennen den Quelltext nicht) mit float zu definieren, welches zuerst im Quelltext steht.

Steht jetzt angenommen also #sidebar vor #noticias, sollte #sidebar das float bekommen oder umgekehrt. Im Gegenzug, und das ist ganz wichtig, sollte das 2. Element (ich vermute das wäre dann #noticias) den Abstand zum gefloateten Element bekommen. In dem Falle also zum Beispiel:

Code

#noticias {
        margin-right: 200px;
        padding: 0px 0 20px 170px;
        width: ausrechnen - minus Paddingwerte;
        }

Das ist nicht so ganz einfach, weil noch andere Faktoren eine Rolle spielen könnten. Lässt sich aber ganz bestimmt lösen, wenn die Seite online ist oder Du experimentierst erstmal damit.

Monika

Hi Sir

es ist nichts komplizierter als ein Design absolut pixelgenau zu machen,

padding margin Werte berechnet jeder Browser anders,
d.h. pixelgenau bedeutet auch für einige Browser eigenes style.css Angaben.

wenn Du nicht sehr gut in css bist, verzichte auf ganz pixelgenau und sei ein wenig großzügiger, Du verzweifelst sonst.

lg

Sir Ram

So, hier jetzt erstmal der Link: Sir Ram’s Blog : Ja, ich bin’s

Okay, wenn es Pixel genau zuschwer wird, dann will ich zu mindestens versuchen, dass die Sidebar etwas passt und nicht die ganze Seite verschießt.

Ich werde Astrid Tip mal versuchen - hier auch nochmal die gesamte CSS

CSS

body {
        background: url(images/-);
        background-position:top left;
        background-attachment:scroll;
        background-repeat:no-repeat;
        border-width:0px;
        color: #000;
        font-family: "Trebuchet MS", "Bitstream Vera Serif", Utopia, "Timedanns New Roman", times, serif;
        margin: 0;
        padding: 5px 0;
        }


/* Structure Divs */
#content {
        background: #fff;
        border: 0px solid #9C9C9C;
        margin: 0 auto;
        padding: 5px;
        width: 1008px;
        }


#header {
        background: #fff url(images/header.jpg) no-repeat;
        height: 148px;
        margin: 0;
        padding: 0;
        }


#linkleiste {
        background: #fff;
        font-size: 12px;
        margin: 0;
        padding: -40px 0px 0px 0px;
        }


#pages {
        background: #fff;
        font-size: 12px;
        margin: 0;
        padding: 15px 0 6px 20px;
        }


#search {
        float: right;
        margin: 0;
        padding: 0;
        position: relative;
        right: 180px;
        top: -40px;
}
/* Beitraege */
#noticias {
        float: left;
        margin: 0;
        padding: 0px 0 20px 170px;
        width: 610px;
        }


#sidebar {
        font-size: 12px;
        line-height: 1.5em;
        margin: 0px;
        padding: 0px 0px 0px 0px
        width: 200px;
        }


#credits {
        background: #fff;
        font-family: Small Fonts, VT100, Arial, Helvetica;
        font-size: 9px;
        margin: 0;
        padding: 5px 20px;
        text-align: center;
        text-transform: uppercase;
        }




/* Config Structure Divs */


        /* Header */
        #header h1 {
                font-size: 30px;
                letter-spacing: 0.1em;
                margin: 0;
                padding: 20px 0 20px 30px;
                width: 300px;
                }


        #header a, #header a:hover {
                background: transparent;
                color: #fff;
                text-decoration: none;
                }


        /* Pages */
        #pages li {
                display: inline;
                list-style-type: none;
                }


        #pages ul, ol {
                margin: 0;
                padding: 0;
                }


        #pages a {
                background: #fff;
                color: #1E4C62;
                font-weight: bold;
                margin: 0 3px 0 0;
                padding: 6px 10px;
                }


        #pages a:hover {
                background: #8EBAFD;
                color: #fff;
                }


        .current_page_item a, .current_page_item a:hover {
                background: #8EBAFD !important;
                color: #fff !important;
                }


        /* Search */
        #search input {
                border: 1px solid #66A8CC;
                font-size: 12px;
                padding: 2px;
                width: 160px;
                }


        /* Noticias */
        #noticias p, #noticias ul, #noticias ol {
                font-size: 13px;
                line-height: 1.6em;
                }


        #noticias ul {
                list-style-type: circle;
                margin: 0 0 0 30px;
                padding: 0;
                }


        #noticias li {
                margin: 0;
                padding: 0;
                }


        #noticias h2, #noticias h2 a {
                color: #0090DA;
                font-size: 18px;
                font-weight: normal;
                margin: 50px 0 0 0;
                padding: 0;
                text-decoration: none;
                }


        #noticias h2 a:hover {
                background: transparent;
                color: #6EB9E0;
                }


        #noticias h3 {
                color: #016CA3;
                font-size: 15px;
                font-weight: normal;
                margin: 0;
                padding: 20px 0 5px 0;
                }


        #noticias h4 {
                color: #000000;
                font-size: 10px;
                font-weight: normal;
                margin: 0;
                padding: 20px 0 5px 0;
                }


        #noticias small {
                font-family: Arial, Helvetica, Sans-Serif;
                font-size: 11px;
                }


        .feedback {
                color: #898A8A;
                font-size: 12px;
                margin: 0;
                padding: 0 20px;
                text-align: center;
                width: 500px;
                }


        /* Entrada */
        .entrada {
                margin: 0;
                padding: 0;
                }


        /* Comments */
        #commentlist {
                list-style-type: none;
                margin: 0;
                padding: 0;
                }


        #commentlist li {
                margin: 10px 0;
                padding: 5px 10px;
                }


        #commentlist p {
                margin: 0;
                padding: 0;
                }


        #commentlist small {
                font-size: 11px;
                }


        .class_comment1 { background: #E9E9EA; border: 1px solid #E0DEDE; }
        .class_comment2 { background: #F4F3F3; border: 1px solid #E0DEDE; }


        #comments, #postcomment {
                color: #0090DA;
                width: 500px;
                font-size: 14px !important;
                font-weight: normal;
                margin: 40px 0 10px 10px;
                text-transform: uppercase;
                }


        #commentform {
                background: #D3E4FF;
                border: 1px solid #D8D8D8;
                padding: 5px 20px;
                }


        #commentform input, #commentform textarea {
                background: #F9FBFF;
                border: 1px solid #B8D4FF;
                font-size: 12px;
                padding: 1px;
                }
/* Sidebar */
        #sidebar h3 {
                background: url(images/dot.gif) repeat-x bottom;
                color: #174B65;
                font-size: 11px;
                font-weight: normal;
                letter-spacing: 0.2em;
                margin: 0;
                padding: 0;
                text-transform: uppercase;
                }




        #sidebar ul, #sidebar ol {
                list-style: none;
                margin: 0;
                padding: 5px;
                }


        #sidebar li, #sidebar li:hover {
                margin: 0;
                padding: 0;
                }


        #sidebar a {
                color: #ffffff;
                }


        #sidebar a:hover {
                background: url(images/dot.gif) repeat-x bottom;
                color: #61D6F4;
                }


        #sidebar div {
                margin: 20px 0;
                padding: 0;
                }


        /*        Credits */
        #credits a {
                color: #3E708A;
                }


        #credits a:hover {
                background: transparent;
                color: #0090DA;
                }


        #credits p {
                margin: 0;
                padding: 0;
                }


/* General */
a {
        color: #0B76AE;
        text-decoration: none;
        }


a:hover {
        background: #0090DA;
        color: #fff;
        }


acronym, abbr, span.caps {
        cursor: help;
        border-bottom: 1px dotted #000;
        }


blockquote {
        background: #E3F5FE url(images/blockquote.png) no-repeat bottom left;
        padding: 5px 20px 30px 20px;
        margin: 1em;
        } /* Idea from ShadedGrey of http://wpthemes.info/ */


cite {
        text-decoration: none;
        }


code {
        font-family: 'Courier New', Courier, Fixed, sans-serif;
        font-size: 1.1em;
        }


img {
        border: 0;
        }


h4 {
        color: #858585;
        }


/* Float and Clear */
div.floatleft {
        float: left;
        }


div.floatright {
        float: right;
        }


div.both {
        clear: both;
        }


/* Images align */
img.border {
        border: 1px solid #C6C6C6;
        padding: 4px;
        margin: 0;
        }


img.border:hover {
        background: #E3F5FE;
        }


img.center {
        display: block;
        margin: auto;
        }


img.alignright {
        float: right;
        padding: 4px;
        margin: 0 0 2px 7px;
        display: inline;
        }


img.alignleft {
        float: left;
        padding: 4px;
        margin: 0 7px 2px 0;
        display: inline;
        }


/* Text align */
.center {
        text-align: center;
        }


.alignright {
        text-align: right;
        }


.alignleft {
        text-align: left;
        }

Alles anzeigen

Astrid

Deine Seite ist nicht valid. Der W3C-Validator zeigt aktuell 158 Fehler an. Solange die da sind, kann auch das beste CSS nicht weiter helfen. Also bitte erst ausbügeln ;-)

Sir Ram

[size=12]This Page Is Valid XHTML 1.0 Transitional![/SIZE]

Lag wohl an einem Plugin - habe es erstmal bis auf weiteres deaktiviert.:?
Dafür sind jetzt keine im Fehler mehr im HTML-Code drin - die Sidebar ist aber immer noch nicht da wo sie hinsollte^^

Astrid

Also ehrlich gesagt ist mir das ganze Theme zu verknispelt. Im Quelltext selbst befinden sich diverse Style-direkt-Definitionen, welche sich in überflüssigen DIV-Containern befinden. Kein geringer Aufwand, um das sauber auszubügeln. Vielleicht hast Du ja Lust, den ganzen Ballast einmal zu löschen und anschließend die Formatierungen über die style.css vorzunehmen.

Mein Vorschlag wäre:

Definiere im Quelltext die sidebar zuerst. Float: rigth und die Breite angeben. Entferne den DIV-Wahnsinn. Danach den Content einfügen. Ein margin-right muss im Content angegeben werden. Dieser Wert ergibt sich aus der Breite der Sidebar + aller padding-left und padding-right Werte. Du benutzt eine fixe Breite. Deshalb sollte das recht leicht lösbar sein.

Abnehmen kann ich Dir die ganze Arbeit nicht.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sidebar in Pool verschoben

Jetzt mitmachen!