Elemente von einander 'trennen'

[Light]

Im Grunde möchte ich mit dem Proggie 'TopStyle', durch das ich mich erst
noch wuseln muß, 2 Elemente trennen. Noch hängen sie so zusammen das es
wie eine Zeile aussieht. Bitte hilf mir:



In welcher Zeile der CSS-Datei kann ich den kompletten Bereich (1) einige
Pixel von Bereich (2) wegrücken? Die Stelle im Kreis zeigt wie eng es dort
wird. merci und Grüße

Code: Alles auswählen

/**************************************************

   Style      Blue
   Version   1.0
   Author   Servous <servous>
   Created   2005-03-12
   Edited   2005-03-29

**************************************************/

/* ########## BODY ########## */

body {
   font-family: Verdana, Helvetica, Arial, Sans-Serif;
   font-size: 11px;
   background-color: #999;
   background-image: url('Blue/bg.png');
}

#sblog_root {
   background-image: url('Blue/bg_div.png');
   background-position: center center;
   background-repeat: repeat-y;
   width: 900px;
   margin: auto;
}

#sblog_head {
   background-image: url('Blue/moviedsheader.png');
   background-position: top center;
   background-repeat: no-repeat;
   padding: 20px 0px 0px 0px;
   width: 900px;
   height: 184px;
}

#sblog_body {
   margin: 0px;
   padding: 10px 20px 0px 20px;
   overflow: hidden;
}

#sblog_foot {
   background-image: url('Blue/bg_div_b.png');
   background-position: bottom center;
   background-repeat: no-repeat;
   width: 900px;
   height: 30px;
   clear: both;
}

#sblog_copy {
   color: #999;
   text-align: center;
   padding: 20px 0px 4px 0px;
   clear: both;
}

#sblog_page_title {
   text-align: center;
}

#sblog_page_title a {
   font-size: 2.4em;
   font-weight: bold;
   color: #369;
}

#sblog_page_title a:hover {
   text-decoration: none;
}

#sblog_page_description {
   text-align: center;
}

#sblog_page_description  h2 {
   font-weight: normal;
   font-style: italic;
   color: #999;
}

#sblog_main {
   margin: 0px 0px 0px 150px;
   width: 600px;
}

/* ########## LINKS ########### */

a {
   color: #69C;
   text-decoration: none;
}

a:hover {
   color: #369;
   text-decoration: underline;
}

a.sblog_post_options_link_comments, a.sblog_post_options_link_perma, a.sblog_post_options_link_trackback, a.sblog_post_options_link_delete, a.sblog_post_options_link_edit, a.sblog_comment_options_link {
   padding-right: 4px;
}

a.sblog_post_options_link_perma {
   background-image: url('Blue/ico_permalink.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_perma:hover {
   background-image: url('Blue/ico_permalink_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.sblog_post_options_link_comments {
   background-image: url('Blue/ico_comments.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_comments:hover {
   background-image: url('Blue/ico_comments_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.sblog_post_options_link_trackback {
   background-image: url('Blue/ico_trackback.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_trackback:hover {
   background-image: url('Blue/ico_trackback_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.sblog_post_options_link_delete {
   background-image: url('Blue/ico_delete.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_delete:hover {
   background-image: url('Blue/ico_delete_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.sblog_post_options_link_edit {
   background-image: url('Blue/ico_edit.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_edit:hover {
   background-image: url('Blue/ico_edit_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.help {
   cursor: help;
   font-weight: bold;
   color: #090;
}

#sblog_menu a {
   padding: 0px 2px 0px 2px;
}

#sblog_menu a:hover {
   text-decoration: underline;
}

#sblog_copy a {
   color: #999;
   text-decoration: underline;
}

#sblog_copy a:hover {
   color: #000;
}

a.sblog_external {
   background-image: url('Blue/external.png');
   background-position: center right;
   background-repeat: no-repeat;
   padding: 0px 14px 0px 0px;
}

/* ########## MENU ########## */

#sblog_menu {
   text-align: center;
   padding: 4px 0px 4px 0px;
}

/* ########## POST ########## */

.sblog_post {
   padding: 0px 0px 10px 0px;
}

.sblog_post_topic {
   border-bottom: 1px #69C solid;
   padding: 4px 0px 0px 0px;
}

.sblog_post_topic h1 {
   color: #369;
   font-size: 1.2em;
   font-weight: bold;
}

.sblog_post_text {
   background-image: url('Blue/bg_block.png');
   background-repeat: repeat-x;
   padding: 4px;
}

.sblog_post_options {
   margin: 10px 0px 20px 0px;
}

.sblog_post_edit {
   color: #CCC;
   font-family: Arial, Helvetica, Verdana, sans-serif;
   font-size: 1em;
}

/* ########## COMMENTS ########## */

.sblog_comment {
   background-color: #FFF;
   margin: 0px 0px 10px 0px;
}

.sblog_comment_topic {
   background-image: url('Blue/bg_sblog_post_topic.png');
   background-position: bottom left;
   background-repeat: no-repeat;
   color: #369;
   font-size: 10px;
   font-weight: bold;
   padding: 4px 0px 1px 0px;
}

.sblog_comment_text {
   color: #999;
   padding: 4px;
}

.sblog_comment_options {
   margin: 10px 0px 20px 0px;
}

.sblog_comment_edit {
   color: #CCC;
   font-family: Arial, Helvetica, Verdana, sans-serif;
   font-size: 9px;
}

/* ########## BLOCK ########## */

#sblog_block_body {
   float: left;
   width: 160px;
}

.sblog_block {
   margin: 0px 0px 10px 0px;
}

.sblog_block_topic {
   border-bottom: 1px #69C solid;
   padding: 4px 0px 0px 0px;
}

.sblog_block_topic h2 {
   font-size: 1.2em;
   font-weight: bold;
   color: #369;
}

.sblog_block_text {
   padding: 4px;
   background-image: url('Blue/bg_block.png');
   background-position: top center;
   background-repeat: repeat-x;
   padding: 4px 0px 10px 4px;
}

/* ########## PAGES ########## */

.sblog_pages {
   background-image: url('Blue/bg_pages.png');
   background-position: top center;
   background-repeat: repeat-x;
   border-top: 1px #CCC solid;
   padding: 4px;
}

.sblog_pages_prev {
   float: left;
   width: 140px;
   text-align: left;
}

.sblog_pages_current {
   width: 50px;
   text-align: center;
   margin: auto;
}

.sblog_pages_next {
   float: right;
   width: 140px;
   text-align: right;
}

/* ########## LIST ########## */

#sblog_block_body ul {
   list-style-image: none;
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

ul {
   list-style-image: url('Blue/ul.png');
   padding-left: 20px;
}

/* ########## CALENDAR ########## */

table.sblog_cal {
   background-image: url('Blue/bg_block.png');
   background-position: top center;
   background-repeat: repeat-x;
   width: 100%;
   margin: 0px 0px 10px 0px;
   color: #CCC;
}

td.sblog_cal_header {
   text-align: center;
}

td.sblog_cal {
   text-align: center;
   color: #369;
}

td.sblog_cal_empty {
}

td.sblog_cal_day {
   text-align: center;
   font-size: 1em;
   height: 20px;
}

td.sblog_cal_today {
   color: #000;
   background-color: #FFF;
   background-image: url('Blue/cal_today.png');
   background-position: top left;
   background-repeat: no-repeat;
   text-align: center;
}

td.sblog_cal_active {
   background-color: #FFF;
   background-image: url('Blue/cal_active.png');
   background-position: top left;
   background-repeat: no-repeat;
   text-align: center;
   font-size: 1em;
}

/* ########## FORMS ########## */

form {
   margin: 0px;
}

/* special case to keep ie's original fieldset */
*>fieldset {
   border: 1px #CCC solid;
}

legend {
   color: #369;
   font-weight: bold;
}

label.sblog_label_col {
   width: 200px;
   float: left;
}

input, textarea, select {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
}

input.sblog_input {
   margin: 2px;
   border: 1px #CCC solid;
   padding: 2px;
}

input.sblog_search {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #999;
   width: 130px;
   border: 1px #CCC solid;
}

textarea.sblog_text {
   width: 420px;
   height: 400px;
   border: 1px #CCC solid;
}

textarea.sblog_comment {
   width: 300px;
   height: 100px;
   border: 1px #CCC solid;
   margin: 2px;
   padding: 2px;
}

.sblog_button {
   color: #369;
   font-weight: bold;
}

.sblog_var {
   float: left;
   width: 120px;
   padding: 4px;
}

.sblog_val {
   background-color: #F0F0F0;
   margin: 0px 0px 2px 120px;
   padding: 4px;
}

/* ########## IMAGES ########## */

img {
   border-width: 0px;
   margin: 0px;
}

.sblog_image {
   background-color: #F0F0F0;
   border: 1px #CCC solid;
   margin: 0px 0px 10px 0px;
   padding: 4px;
   width: 440px;
   overflow: hidden;
}

.sblog_image_info {
   margin: 0px 0px 0px 130px;
}

.sblog_image_tn {
   float: left;
}

/* ########## MISC ########## */

span.hilite {
   background-color: #FCC;
}

.sblog_category {
   color: #69C;
   font-size: 1em;
}

.sblog_quote {
   border: 1px #CCC dashed;
   padding: 4px;
}

.sblog_line {
   border-bottom: 1px #CCC dotted;
}

.sblog_code {
   border-style: solid;
   border-width: 1px;
   border-color: #CCC #FFF #FFF #CCC;
   padding: 10px;
   background-color: #F0F0F0;
   color: #000;
}

h1, h2 {
   margin: 0px;
   font-size: 1em;
   font-weight: normal;
}

span.sblog_censor {
   border-bottom-style: dotted;
   border-bottom-width: 1px;
   border-bottom-color: #F00;

[Laus]

Hallo

Trennen oder ihnen einen größeren Abstand geben kannst du Elemente mit margin oder padding.

Das jetzt aber so einfach zu sagen wie du dir das jetzt vorstellst wenn du fragst

In welcher Zeile der CSS-Datei kann ich den kompletten Bereich (1) einige
Pixel von Bereich (2) wegrücken? Die Stelle im Kreis zeigt wie eng es dort
wird.

ist das leider nicht, denn woher sollen wir wissen wie du in deinem Quelltext welche Elemente bezeichnet hast. Also etwas mehr Infos oder ein Link zur Seite wären schon nicht schlecht.

[Light]

Solch eine Geheimniskrämerei ist natürlich nicht sinnig. Da gebe ich
dir recht Laus *g*. Ich habe nun mein Profil geändert und die URL zu
meinem jungfräulichen Blog als Homepage eingetragen. Ich hoffe nun
wird es klarer. Allerdings habe ich nun die Ursprungs-CSS wieder
hergestellt und die Lücke wäre nun so OK. Wenn ich aber wieder die
Pixelbreite von Bereich (2) vergrößern würde tritt das gleiche Problem
wieder auf. Evtl ist es nun leicher zu helfen.

LG Light

€dit: Habe die entsprechenden Stellen nun durchs margin verschoben.