Rahmen bzw. Rand um Seiteninhalt

joehanc · 4. April 2008

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.

/*
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;
}
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Vielen dank für Euere Hilfe!

Jo

telekommander · 4. April 2008

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

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
oder:

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

joehanc · 4. April 2008

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 · 4. April 2008

Klar gibts das, aber das sind Grundlagen ...

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

WPDE.org

Rahmen bzw. Rand um Seiteninhalt

joehanc Active Member

telekommander Well-Known Member

joehanc Active Member

telekommander Well-Known Member

Nützliche Suchen

Rahmen bzw. Rand um Seiteninhalt

joehanc Active Member

telekommander Well-Known Member

joehanc Active Member

telekommander Well-Known Member