Rahmen bzw. Rand um Seiteninhalt

joehanc

Hey there,

ich bin auf der Suche nach dem Css-Stylesheet code für einen Rahmen um meinen kompletten "Blog". Nein, ich hab schon gesucht und nur ein Topic gefunden wo der Rahmen bis ans Browserfenster geht.

Der Rahmen sollte nur um den mittig angelegten Inhalt gehen. Am besten 5px breit (ringsrum) und in grau.

Zwischen Inhalt und sidebar hätte ich noch gerne eine trennline, die sehr fein (also 1px) sein sollte und am besten gestrichelt.

Zitat

/*
Theme Name: Atmosphere
Theme URI: http://www.dagondesign.com
Description: A custom theme by <a href="http://www.dagondesign.com">Dagon Design</a>.
Version: 1.0
Author: Dagon Design
Author URI: http://www.dagondesign.com
*/

body {
padding: 20px 0 1px 0;
margin: 0;
background-image: url(45ers › Anmelden
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000;
}

#container {
margin: 0 auto 0 auto;
width: 780px;
background: #ffffff;
text-align: left;
}

a img {
border: none;
}
a {
color: #888888;
text-decoration: none;
}
a:hover {
color: #ff0000;
text-decoration: none;
}

ul, ol {
margin: 4px 0 15px 35px;
padding: 0;
}
ul ul, ol ol {
margin: 4px 0 0 15px;
padding: 0;
}
li {
margin: 0 0 4px 0;
padding: 0;
}

#header {
position: relative;
}

#search-box {
position: absolute;
top: 142px;
right: 2px;
}
#search-box form {
margin: 0;
padding: 0;
}
#search-box input {
margin: 0;
padding: 0;
width: 160px;
color: #888888;
}

#top-nav {
background: #dadada;
color: #888888;
width: 100%;
font-size: 1,2em;
}
#top-nav ul {
margin: 0;
padding: 5px 22px 5px 22px;
list-style: none;
}
#top-nav li {
display: inline;
margin: 0 23px 0 0;
padding: 0;
}
#top-nav a {
color: #777777;
text-decoration: none;
}
#top-nav a:hover {
color: #ff0000;
text-decoration: none;
}

#content {
width: 550px;
float: right;
display: inline;
margin: 20px 20px 20px 0;
}

.post {
margin: 0 0 20px 0;
}
#content h1 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin: 0 0 2px 0;
font-size: 1.3em;
color: #888888;
}
#content h1 a {
text-decoration: none;
}
#content h1 a:hover {
text-decoration: none;
}
#content h1.pagetitle {
font-size: 1.1em;
color: #888888;
margin-bottom: 6px;
}

#content h2 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin: 0 0 2px 0;
font-size: 1.25em;
color: #888888;
}
#content h3 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin: 0 0 2px 0;
font-size: 1.1em;
color: #404040;
}
#content h4 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin: 0 0 2px 0;
font-size: 1.05em;
color: #888888;
}

#content .post-date {
color: #888888;
font-size: 0.8em;
margin: 0 0 3px 0;
}
#content p {
margin: 0 0 12px 0;
line-height: 140%;
}
#content .post-info {
color: #888888;
font-size: 0.8em;
background: #F4F4F4;
padding: 4px 8px 4px 8px;
}
#content .post-info a {
text-decoration: none;
}
#content .post-info a:hover {
text-decoration: underline;
}
#content .single-date {
text-align: right;
font-size: 0.9em;
color: #707070;
margin-bottom: 3px;
}

#content .attachment-image {
text-align: center;
padding: 10px 0 10px 0;
}

code {
font: 0.9em 'Courier New', Courier, Fixed;
color: #456FA2;
}
blockquote {
background: #F4F4F4;
padding: 4px 8px 4px 8px;
margin: 5px 0 15px 0;
font-size: 0.9em;
}

acronym, abbr, span.caps {
font-size: 0.9em;
cursor: help;
}
acronym, abbr {
border-bottom: 1px dashed #808080;
}

.navigation {
display: block;
}

#wp-calendar caption {
text-decoration: none;
}
#wp-calendar #prev a, #wp-calendar #next a {
font-size: 0.9em;
}
#wp-calendar a {
text-decoration: none;
}
#wp-calendar caption {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin: 0 0 2px 0;
font-size: 1.1em;
color: #888888;
text-align: left;
}
#wp-calendar th {
font-style: normal;
text-transform: capitalize;
text-align: center;
}

#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}
#wp-calendar a {
display: block;
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar td {
padding: 3px 0;
text-align: center;
}
#wp-calendar td a {
color: #ff0000;
font-weight: bold;
}
#wp-calendar td.pad:hover {
background-color: #FFFFFF;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 4px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 4px 2px 0;
display: inline;
}

.alignright {
float: right;
}
.alignleft {
float: left
}
.center {
text-align: center;
}

#sidebar {
width: 170px;
float: left;
display: inline;
margin: 20px 0 20px 20px;
}
#sidebar h2 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 1.1em;
letter-spacing: 1px;
color: #888888;
margin: 0 0 2px 0;
padding: 0 0 3px 0;
border-bottom: 3px solid #666666;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul ul {
margin: 6px 0 15px 8px;
padding: 0;
}
#sidebar ul ul ul {
margin-bottom: 6px;
}
#sidebar li {
margin: 0 0 5px 0;
padding: 0;
font-size: 0.95em;
}
#sidebar a {
color: #505050;
text-decoration: none;
}
#sidebar a:hover {
color: #ff0000;
text-decoration: none;
}

h3#comments, h3#respond {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin: 0 0 6px 0;
font-size: 1.1em;
background: #888888;
color: #FFFFFF;
padding: 3px 10px 3px 10px;
}
ol.commentlist {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9em;
}
ol.commentlist li {
margin: 0;
padding: 0;
border-top: 8px solid #F4F4F4;
padding: 3px 0 5px 0;
}
ol.commentlist li.alt {
border-top: 8px solid #888888;
}
ol.commentlist .comment-date {
width: 35%;
float: right;
text-align: right;
font-size: 0.9em;
display: inline;
}
ol.commentlist .comment-author {
width: 55%;
float: left;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin: 0 0 3px 0;
font-size: 1.2em;
color: #888888;
display: inline;
}
ol.commentlist .comment-date a, ol.commentlist .comment-author a {
text-decoration: none;
}
ol.commentlist .comment-date a:hover, ol.commentlist .comment-author a:hover {
text-decoration: underline;
}
ol.commentlist .comment-text {
clear: both;
}

form#commentform textarea {
width: 100%;
}
form#commentform label {
font-size: 0.9em;
}

#footer {
clear: both;
border-top: 5px solid #999999;
padding: 8px 22px 25px 22px;
color: #404040;
font-size: 0.85em;
text-align: center;
}
#footer a {
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}

Alles anzeigen

Vielen dank für Euere Hilfe!

Jo

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

telekommander

Ohne Link zu deiner Seite gibts nur Vermutungen.
Das Stylesheet ist nicht mehr Original ?

Code

#container {
[COLOR="Red"]border: 5px solid #666;[/COLOR]
margin: 0 auto 0 auto;
width: 780px;
background: #ffffff;
text-align: left;
}

Code

#sidebar {
[COLOR="Red"]border-right: 1px dotted #666;[/COLOR]
width: 170px;
float: left;
display: inline;
margin: 20px 0 20px 20px;
}

oder:

Code

#content {
[COLOR="Red"]border-left: 1px dotted #666;[/COLOR]
width: 550px;
float: right;
display: inline;
margin: 20px 20px 20px 0;
}

joehanc

Hey thx,

habs vorhin mal in eigenregie versucht und auch geschafft!

sieht ähnlich aus wie du es beschrieben hast.

gibts noch irgendeinen Befehl um den Rahmen mit ein bisschen mehr Abstand zum Content zu setzten?

Der Rahmen zwischen sidebar und content liegt direkt am content an :-(

den Befehl hab ich an den content gebastelt, sprich: border-left: 1px dashed #777777

ich hätte gerne noch 5-10px abstand...

THX

Jo

telekommander

Klar gibts das, aber das sind Grundlagen ...

Code

#content {
border-left: 1px dashed #777;
[COLOR="Red"]padding-left: 8px;[/COLOR]
width: 550px;
float: right;
display: inline;
margin: 20px 20px 20px 0;
}

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Rahmen bzw. Rand um Seiteninhalt

Jetzt mitmachen!