Umrandung im Layout fehlt unten

tobi94

Hallo, ich benutze das Donovan-Template als Grundlage und habe nun folgendes Problem: Ich möchte die Box in welcher der Inhalt ist mit einer Doppellinie umranden. Soweit hab ich das auch hinbekommen, jedoch wird in der Desktop-Version, bei verschiedenen Browsern getestet, der untere Rand nicht angezeigt.
Bei der mobilen Version funktioniert es ohne Probleme.
Woran könnte das liegen?

Siehe Bilder im Anhang.

Grüße Tobi

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

Henk1060

hy,

Ohnen einen Link zur seite wird es schwer...

tobi94

Hi, ein link kann ich euch nicht geben, da ich es lokal aufem PC histe aktuell, und erst online stelle wenn alles fertig ist.

Kann aber mit allen html, css etc dateien dienen, falls das irgendwie hilft.

Henk1060

nö hilft nicht.... dann musst du warten bis die seite online ist.

tobi94

Hi,

https://umrandung.000webhostapp.com

hab es mal hier ohne Inhalt hochgeladen. Hoffe das reicht.

Wie man sieht, ist auch die Sidebar davon betroffen.
Grüße

SEpp55

Versuche mal das in die Zusätzlichen CSS einzufügen:

Code

.site-main > article, .infinite-scroll  {
    border: 12px red double;
}

Auf der Demoseite klappt es.

tobi94

Wo genau muss ich das da einfügen?

Azrael_0815

Customizer -> Zusätzliches CSS.

tobi94

Hallo,

leider hat das nichts gebracht.

So hab ich den Rand in der Style.css angegeben:

Bei den Widgets (Sidebar)

Code

/*--------------------------------------------------------------
# - Widgets
--------------------------------------------------------------*/
.widget {
    margin: 0;
    padding: 1rem;
    max-width: 100%;
    word-wrap: break-word;
    background: #fff;
    border-style: double;
    border-width: 15px;
    border-color: #b71e00;
  }


.widget-title {
    margin: 0 0 1rem;
    padding: 0;
    color: #000000;
    color: var(--widget-title-color);
    font-size: 18px;
    font-size: 1.125rem;
    font-family: Quicksand, Tahoma, Arial;
    font-family: var(--widget-title-font);
    font-weight: bold;
    line-height: 1.4;
}


.widget a:link,
.widget a:visited {
    text-decoration: none;
}


.widget a:hover,
.widget a:active {
    text-decoration: underline;
}


.widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.widget ul li,
.widget ol li {
    padding: 0.2em 0;
}


.widget ul > li:last-child {
    padding-bottom: 0;
}


.widget ul .children,
.widget ul .sub-menu {
    margin: 0.5em 0 0.5em 1em;
    padding: 0;
}


/* Make sure select elements fit in widgets. */
.widget select {
    max-width: 100%;
}

Alles anzeigen

Bei den Beiträgen:

Code

/*--------------------------------------------------------------
# - Posts and pages
--------------------------------------------------------------*/
.site-main > article,
.post-wrapper > article,
.type-post,
.type-page,
.type-attachment {
    margin: 0;
    padding: 1.5rem;
    max-width: 100%;
    box-sizing: border-box;
    background: #fff;
    border-style: double;
    border-width: 15px;
    border-color: #b71e00;
    min-width: 0;
    word-wrap: break-word;
}


.entry-title {
    margin-top: 0;
    margin-bottom: 0.2em;
    padding: 0;
    color: #000000;
    color: var(--title-color);
    font-size: 20px;
    font-size: 1.25rem;
    font-family: Quicksand, Tahoma, Arial;
    font-family: var(--title-font);
    font-weight: bold;
    line-height: 1.4;
}


.entry-title a:link,
.entry-title a:visited {
    color: #000000;
    color: var(--title-color);
    text-decoration: none;
}


.entry-title a:hover,
.entry-title a:active {
    text-decoration: underline;
}


.wp-post-image {
    margin: 0 0 1em;
    vertical-align: top;
}


.entry-content p:last-child {
    margin-bottom: 0;
}


.site-main .sticky {
    border: 10px solid rgba(0, 0, 0, 0.2);
}


/* Read More Button */
.more-link {
    display: inline-block;
    margin: 0;
    padding: 0.5em 1em;
    color: #fff;
    color: var(--button-text-color);
    background: #ee1133;
    background: var(--button-color);
    font-size: 15px;
    font-size: 0.9375rem;
}


.more-link:link,
.more-link:visited {
    color: #fff;
    color: var(--button-text-color);
    text-decoration: none;
}


.more-link:hover,
.more-link:active {
    color: #fff;
    color: var(--button-hover-text-color);
    background: #D5001A;
    background: var(--button-hover-color);
    text-decoration: none;
}


/* Page Links | wp_link_pages() */
.page-links {
    clear: both;
    margin: 0 0 2em;
    word-spacing: 0.5em;
    font-weight: bold;
    font-size: 16px;
    font-size: 1rem;
}


/* Styling for all post details */
.entry-meta,
.entry-footer {
    color: var(--footer-link-color);
    font-size: 15px;
    font-size: 0.9375rem;
}


.entry-meta a:link,
.entry-meta a:visited,
.entry-footer a:link,
.entry-footer a:visited {
    color: var(--footer-link-color);
}


.entry-meta a:hover,
.entry-meta a:active,
.entry-footer a:hover,
.entry-footer a:active {
    color: #000000;
}


/* Entry Meta */
.entry-meta {
    margin: 0.5em 0;
}


.entry-meta a:link,
.entry-meta a:visited {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
}


.entry-meta a:hover,
.entry-meta a:active {
    text-decoration: none;
}


.entry-meta .updated:not(.published) {
    display: none;
}


/* Entry Footer */
.entry-footer {
    margin: 1.5rem 0 0;
    padding: 1rem 0 0;
    border-top: 2px solid rgba(0, 0, 0, 0.05);
}


.entry-footer div .icon {
    margin: 0.2em 0.5em 0 0;
    width: 20px;
    height: 20px;
    vertical-align: top;
    fill: rgba(0, 0, 0, 0.3);
}


.entry-footer .entry-comments .icon {
    margin-top: 0.3em;
}


/* Hide post meta if they are deactivated in settings */
body.date-hidden .type-post .entry-meta .meta-date,
body.author-hidden .type-post .entry-meta .meta-author,
body.categories-hidden .type-post .entry-footer .entry-categories,
body.tags-hidden .type-post .entry-footer .entry-tags {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
}


body.date-hidden.author-hidden .content-area .entry-meta {
    display: none;
}


body.single-post.categories-hidden.tags-hidden .type-post .entry-footer {
    display: none;
}


body.categories-hidden .post-wrapper .type-post.comments-off .entry-footer {
    display: none;
}


/* Post Navigation */
.post-navigation {
    margin: 0;
    padding: 0;
}


.post-navigation .nav-links .nav-previous,
.post-navigation .nav-links .nav-next {
    margin: 0;
    padding: 1.5em;
    max-width: 100%;
    word-wrap: break-word;
    background: #fff;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f5f5;
}


.post-navigation .nav-links .nav-next {
    text-align: right;
}


/* Post Navigation Link Styling */
.post-navigation .nav-links a:link,
.post-navigation .nav-links a:visited {
    text-decoration: none;
}


.post-navigation .nav-links .entry-title {
    font-size: 18px;
    font-size: 1.125rem;
}


.post-navigation .nav-links a:hover .entry-title,
.post-navigation .nav-links a:active .entry-title {
    text-decoration: underline;
}


.post-navigation .nav-links .nav-link-text {
    display: block;
    color: rgba(0, 0, 0, 0.5);
}


.post-navigation .nav-links .nav-previous .nav-link-text:before {
    margin-right: 5px;
    content: "\2190";
}


.post-navigation .nav-links .nav-next .nav-link-text:after {
    margin-left: 5px;
    content: "\2192";
}


/* Theme Pagination */
.pagination {
    margin-bottom: 0;
    padding: 1.5rem;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


.pagination .page-numbers,
.pagination .current {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    margin-right: 3px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    color: var(--button-text-color);
    background: #202020;
    background: var(--button-color);
}


.pagination .page-numbers.dots {
    padding: 0 0.5rem;
}


.pagination .current,
.pagination a:hover,
.pagination a:active {
    color: #fff;
    color: var(--button-hover-text-color);
    background: #fff;
    background: var(--button-hover-color);
}


.pagination .current {
    font-weight: bold;
}


/* Infinite Scroll Pagination */
.infinite-scroll .pagination {
    display: none;
}


.infinite-scroll #infinite-handle,
.infinite-scroll .infinite-loader {
    width: 100%;
    text-align: center;
    padding: 1.5rem;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


.infinite-scroll .infinite-loader .spinner {
    left: auto;
    margin: 0 auto;
}


.infinite-scroll #infinite-handle span {
    display: inline-block;
    margin: 0;
    padding: 0.5em 1em;
    color: #fff;
    color: var(--button-text-color);
    background: #202020;
    background: var(--button-color);
    font-size: 15px;
    font-size: 0.9375rem;
}


.infinite-scroll #infinite-handle span:hover {
    color: #fff;
    color: var(--button-hover-text-color);
    background: #fff;
    background: var(--button-hover-color);
    text-decoration: none;
}


.blog-grid-layout.infinite-scroll .content-archive .post-wrapper #infinite-handle,
.blog-grid-layout.infinite-scroll .content-archive .post-wrapper .infinite-loader {
    grid-column: 1 / span 2;
}


/* Archives and Search Heading */
.archive-header {
    margin: 0 0 1rem;
    padding: 1.5rem;
    max-width: 100%;
    word-wrap: break-word;
    background: #fff;
}


.archive-title {
    margin: 0;
    padding: 0;
    color: #00000;
    color: var(--widget-title-color);
    font-size: 18px;
    font-size: 1.125rem;
    font-family: Quicksand, Tahoma, Arial;
    font-family: var(--widget-title-font);
    font-weight: normal;
    line-height: 1.4;
}


.blog-description,
.archive-description,
.archive-description p {
    margin: 0.25em 0 0;
}


.archive-header .search-form {
    margin: 1.25rem 0 0;
}

Alles anzeigen

hätte gern die ganze style.css eingefügt, doch dann kommt leider der Fehler "Nachricht zu lange"

Grüße

SirEctor

Zitat von SEpp55

Code

.site-main > article, .infinite-scroll  {
    border: 12px red double;
}

Ich würde behaupten, dass der Code nicht funktionieren kann. Vielleicht hat sich auch was auf der Seite geändert.

Versuch mal folgendes:

HTML

.post-wrapper > article, .widget  {
    border: 15px #b71e00 double !important;
}

b3317133

Zitat von tobi94

[plain].. https://umrandung.000webhostapp.com ...[/plain]

Dass in der "Desktop-Version" der untere Rand fehlt, liegt an [FONT=Courier New]border-bottom: none;[/FONT] hier

Code

.site-header, .widget, .page-header, .site-main > article, .post-wrapper > article, .type-post, .type-page, .type-attachment, .comment, .comments-title, .comment-navigation, .comment-respond, .post-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-next, .pagination, .infinite-scroll #infinite-handle span {
    margin-bottom: 1rem;
    border-bottom: none;
}

tobi94

DANKE @b3317133 !

Habe das border-bottom: none; gelöscht und jetzt wird es angezeigt!

Vielen Dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Umrandung im Layout fehlt unten

Jetzt mitmachen!