Problem mit position:fixed und Frage nach zwei Hintergründen

Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon Benito » 13.12.2010, 21:14

Hallo liebes Forum

Hallo liebes Forum.

Ich habe zwei, für mich sehr spezielle Fragen:
Erstens möchte ich ein Bild auf meiner Seite "festtackern" mit einem fixed div. Das ist hier auch schon geschehen: www.methodos-ev.de/7enanos/wordpress
Nun habe ich aber das Problem, dass ich das der festgesteckte Mehlberg auch zum Mehlstrahl aus der Mühle passen muss. Da ich aber, da ich es nicht besser zu machen wusste, das Bild einfach ganz unten und ganz links an der Ecke festgetackert habe. Nun verschiebt es sich jetzt natürlich bei veränderter Bildschirmauflösung oder auch nur wenn man die Seite im Fenster betrachtet. Lässt es sich irgendwie einstellen, dass das Bild in der Mitte fixiert wird und man angeben kann wie weit von der Mitte entfernt es erscheinen soll? Oder lässt sich das Problem anders umgehen?

Hier mein entsprechender Abschnitt in der css datei:



Code: Alles auswählen
#getreide {
background-image: url(wp-content/themes/fauna/images/getreide.png) ;
POSITION: fixed;
Bottom: 0px; LEFT: 0px;


Zweite Frage ist: Ich habe ja nun einen Mehlstrahl links im Hintergrundbild. Nun geht mein Hintergrund aber nur bis zu einer bestimmten Stelle. Danach würde ich gerne einen anderen Hintergrund darunterlegen, nämlich mit einem sich immer wiederholenden Teil des Strahls. Geht das? Kann man zwei Hintergründe definieren?
Oder geht das vielleicht mit einem sich wiederholenden div oder ner tabelle oder gar nicht?

Vielen Dank für eure Mühe

Benjamin
Benito
neu hier
 
Beiträge: 7
Registriert: 13.12.2010, 20:33

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon sejuma » 14.12.2010, 07:32

Hab jetzt keine Zeit, mich in die Problematik einzudenken.
Möglicherweise hilft dir das weiter:

Für die Footergrafik:
http://www.ohne-css.gehts-gar.net/0044.php

Für zwei Hintergrundgrafiken:
http://www.ohne-css.gehts-gar.net/0049.php
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon benm » 14.12.2010, 11:40

Du kannst die Position deiner div-box die du "fixed" hast verändern (z. B.):

position:fixed;
top:230px;
left:120px;

Das ist doch was du suchst, oder?
benm
neu hier
 
Beiträge: 6
Registriert: 13.12.2010, 14:54

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon Benito » 14.12.2010, 22:08

Hallo

Vielen Dank schonmal fuer eure Antworten.

Das was ich suche ist leider kein footer sondern folgendes:

Ich moechte bei mir unten in der Seite das Bild eines Mehlhaufens festtackern, so dass es mitscrollt.
Dies geht ja wunderbar mit position fixed. Nun habe ich aber das Problem, dass ich dem Bild bishher nur die Anweisung geben kann, dass es sich ganz unten und ganz links am Browserfenster festklebt. Dies moechte ich aber nicht, da sonst der Mehlhaufen bei veraenderter Aufloesung keinen Sinn mehr macht, bzw auch nur bei veraenderter Fenstergroese. Dass was ich moechte ist also, dass der Mehlhaufen zwar immer brav mitscrollt, andererseits aber auch dortbleibt wo die Mehlspur hinfaellt, auch wenn ich die Fenstergroesse veraendere oder aber eine andere Aufloesung habe.

Ich weiss nicht ob das Moeglich ist. Wie es zum Beispiel theoretisch meoglich waere, ist wenn man dem Bild sagen koennte, dass es sich nicht zu den Raendern des Fensters hin ausrichtet sonder zur Mitte hin. Geht dass? Oder man muesste dem Bild irgendwie sagen koennen, dass es sich zur Seite ausrichtet und nicht zum Browserfenster.

Hoffe jetzt ist es verstaendlicher geworden.

Dass mit den zwei Hintergruenden verstehe ich leider nicht ganz: Was sind elemente? Ich kann euch ja mal meine beiden css dateien zeigen, weiss leider auch nicht den Unterschied, bzw warum es in diesem Wordpresstheme zwei css gibt (gibt sogar drei, noch eine fuer den IE):

Code: Alles auswählen
html {    /* Force vertical scrollbar */
   overflow-y: scroll;
   height: 100%;
   margin-bottom: .0001em;
}
* {      /* Reset margins and paddings */
   margin: 0;
   padding: 0;
}

/*

   Positioning
   
*/
body {
   padding-bottom: 4em;    /* Add some extra scroll space */
}
#wrapper {
   margin: 0 auto;
   position: relative;
}
#body {
   margin: 0 auto 0 auto;
}
#sidebar ul, #sidebar li {
   list-style: none;
}
#main {
   margin: 0 0 .8em 0;
}
#footer {
   padding-bottom: 1em;
   clear: both;
   text-align: center;
}
#footer a {
   text-decoration: none;
}
.entry-meta {
   font-size: 90%;
   clear: both;
   display: block;
}
#header {
   margin: 0 0 .8em;
}

/*

   Sidebar
   
*/
#sidebar ul.inner {
   margin: 0;
}
#sidebar ul.inner ul {
   margin: .4em .8em 1.6em .8em !important;
}
#sidebar ul.inner ul li {
   padding-bottom: 0 !important;
}
#sidebar ul.inner ul ul.children {
   margin: 0 1.6em !important;
}
#sidebar ul.inner ul ul.children li {
   margin: .4em 0 0 0;
}

/*

   Content Box
   
*/
.box, .box-blank, #sidebar ul.inner li, .notice {
   position: relative;
   text-align: left;
   padding: .8em ;
   margin: 0 0 0 0;
}
.box-blank {
   background: none;
}
.box::after, .box-blank::after {    /* Auto clearing float */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*

   Header
   
*/
h1 {
   text-align: left;
   margin: .8em 0 0 1.5em;
}
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
   text-decoration: none;
}
#menu {
   margin: 1em 0 .6em 1.5em;
   float: left;
}
#searchbox {
   vertical-align: top;
   margin: 1em 11em 3em 1em;
   float: right;
   text-align: right;
   padding: 2px 0;
   top: -2px;
   position: relative;

}
#nav::after {    /* Auto clearing float */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#header {
   clear: both;
}
#menu, #searchbox {
   text-transform: lowercase;
}
#menu {
   max-width:800px;
}
#menu ul, #menu ul li {
   list-style: none;
   display:inline;
}
#menu a {
   float: left;
   display: block;
   text-decoration: none;
   padding: 0 .6em;
}
#searchbox fieldset {
   border: 0;
   background-color: #dfd9c0;
   padding: 0;

}
#searchbox legend {
   display: none;
}
#searchbox form, #searchbox input {
   display: inline;

width:150px;
}

/*

   Text, Headings & Formatting
   
*/
h2 {
   padding: .4em 0;
}
h2 a {
   text-decoration: none !important;
   padding: .4em 0;
}
h2 a:hover, h2 a:focus {
   text-decoration: underline !important;
}
h3, h4 {
   margin: 0 0 .6em 0;
   font-weight: bold;
   font-size: 100%;
}
#main h3 {
   margin: 1.6em 0 .8em 0;
}
.noteworthy {
   display: block;
   float: left;
   margin: .4em;
}
.noteworthy a {
   padding: .4em;
   text-decoration: none !important;
}
.clear {
   clear: both;
}
.prev {
   float: left;
}
.next {
   float: right;
}

/*

   Various

*/
img {
   border: 0;
}
#main p a img {
   padding-bottom: 2px;
}
#main p a img:hover {
   padding-bottom: 2px;
}
hr { /* Shown only to CSS disabled browsers, making it slightly tidier */
   display: none;
}
acronym, abbr {
   font-size: 100%;
}
acronym, abbr, span.caps {
   cursor: help;
}
small {
   font-size: 85%;
   line-height: 200%;
}
cite {
   font-size: 90%;
   font-style: normal;
}
strike, del {
   text-decoration: line-through;
}
ins {
   text-decoration: none;
}
label {
   cursor: pointer;
}
ul {
   margin: .8em;
}
#sidebar ul.inner ul {
   margin: .4em .8em;
}
#sidebar ul.inner ul li {
   margin: .4em 0;
   padding: .2em 0;
}
dl {
   margin: 0 .8em;
}
dt {
   font-weight: bold;
}
dd {
   margin: 0 1.6em;
}
p, pre, kbd, blockquote {
   margin: 1.6em 0;
}
#sidebar p {
   margin: 0 0 1.6em 0;
}
pre, blockquote {
   padding: 0 1.6em;
   margin-left: 3%;
}
pre {
   overflow: auto;
   padding-bottom: 1em;
}
blockquote[cite]:after {
   content: "\00BB \0020 Source: " attr(cite);
   display: block;
   margin-top: .8em;
   font-size: 90%;
}
fieldset {
   padding: 0 .8em .4em .8em;
}
legend {
   font-weight: bold;
   padding: 0 .4em;
}

/*

   Icons
   
*/
.feedicon img, #categorylist img {
   width: 12px;
   height: 12px;
}
.feeds a {
   padding: 1px 0 2px 0;
}
.feeds img {
   vertical-align: middle;
   margin-top: -3px;
}
#categorylist img {
   vertical-align: middle;
   margin: 0 .25em;
}
#sidebar .feedicon img {
   position: relative;
   float: right;
   top: -2.0em;
}
span.edit a:focus, a.quote {
   -moz-outline-style: none;
}
span.edit a:hover {
   cursor: pointer;
}
.edit a {
   position: absolute;
   z-index: 1;
   right: .75em;
   top: 1em;

   text-decoration: none !important;
   display: block;
   width: 26px;
   height: 26px;
   border: 0 !important;
   text-indent: -9999px;
   background: url(images/icon_edit.gif) no-repeat right top !important;
}
#trackbacklist li .edit a {
   width: 26px;
   height: 12px;
}
.edit a:hover {
   background: url(images/icon_edit_hover.gif) no-repeat right top !important;
}
.sidenote {
   position: relative;
}
.sidenote .edit a {
   top: 0;
   right: 0;
}
span.tags {
   background: url(images/icon_tag.gif) no-repeat left center;
   padding-left: 16px;
   margin-left: 1em;
}
ul.wp-tag-cloud li {
   display: inline;
   margin-right: 1em !important;
}

/*

   Alignments (Use in Posts)

*/
.align-left {
   padding-right: .8em;
   float: left;
}
.align-right {
   padding-left: .8em;
   float: right;
}
.align-center {
   margin: 0 auto;
   display: block;
}
.column-left {
   float: left;
   width: 50%;
}
.column-right {
   float: right;
   width: 50%;
}
ul.column-right, ul.column-left {
   margin: 0;
   padding: 0;
}

/*

   List Items
   
*/
html>body #main ul {
   list-style: none;
   text-indent: -1em;
}
#main ul {
   margin-left: 0;
   padding-left: 1em;
}
#main ul li {
   margin-left: 1em;
   margin-bottom: 1.6em;
}
#main ul li::before, #sidebar ul li.page_item::before {   /* Show right angle quotes to cool browsers */
   content: "\00BB \0020";
}
ol {
   margin: 0 0 .8em 1em;
   padding-left: 2em;
}
#main ol li {
   margin-bottom: 1.6em;
}

/*

   Forms
   
*/
input, select, textarea {
   font-size: 100%;
   line-height: 100%;
}
.inputbox, #commentform textarea, .searchbox {
   padding: 1px 2px;
}
#commentform {
   display: inline;
}
#commentform textarea {
   padding: 2px;
   
   -moz-box-sizing:border-box; /* Mozilla: Change Box Model Behaviour */
   width: 100%; /* Moz Only */
}
.inputbox {
   width: 160px;
}
.pushbutton, .pushbutton-wide {
   cursor: pointer;
}
.pushbutton-wide {
   padding: .6em 2em;
}
.checkbox {
   cursor: pointer;
}

/*

   Search Page

*/
.searchbox {
   width: 80%;
}
.search-results {
   position: relative;
}


/*

   Posts

*/
p.commentlink {
   width: 120px;
   float: right;
   margin: 0 0 10px 10px;
   padding: 0 0 0 10px !important;
}
p.commentlink span {
   display: block;
   padding: .4em 0;
}
p.commentlink a {
   border-bottom: 0;
   display: block;
   text-decoration: none;
   padding: .4em 0;
}
p.commentlink a:hover {
   text-decoration: underline;
}

/*

   Asides

*/
.asides .aside {
   padding: 0;
   margin: .5em 0 2em 0.5em !important;
}
.asides h2 {
   padding: .4em 0;
}
.asides h2 a {
   text-decoration: none;
   margin: .4em 0;
}
.asides p {
   padding: 0 1.6em;
}
.asides p, .asides pre, .asides blockquote {
   margin-top: 0;
   margin-bottom: .8em;
}
.asides pre, .asides kbd, .asides blockquote {
   margin: 1.6em 7%;
}
.asides h3 {
   margin: 1.6em 0 .8em 0;
}
.asides ul {
   margin: .8em 1.3em;
}
.asides ol {
   margin: .8em 2em;
}
.aside {
   position: relative;
}
.aside .edit a {
   top: 0;
   right: 0;
}

/*

   Sidenotes
   
*/
.sidenote {
   padding: 0;
   margin: .5em 0 1em 0;
}
.sidenote h2 {
   margin: 0 0 .6em 0;
}
.sidenote h2 a {
   display: inline;
   margin-right: .5em;
}
.sidenote p {
   padding: 0 0 0 .8em;
}
.sidenote p, .sidenote pre, .sidenote blockquote {
   margin-top: 0;
   margin-bottom: .8em;
}

/*

   Comments
   
*/
ol#commentlist, ol#trackbacklist {
   margin-bottom: 3.2em;
}
.commentbox {
   padding-top: 2em;
   width: 280px;
   float:left;
   text-align:left;
}
#comment-author p {
   margin: 0 0 1.6em 0;
}
.formatting {
   float: left;
   height: 3em;
   padding-top: 2em;
}
#tags-allowed {
   clear: both;
}
#tags-allowed li {
   margin: .6em;
}
#tags-allowed blockquote {
   display: inline;
}
#tags-allowed .column-left, #tags-allowed .column-right {
   width: 45%;
}
#tags-allowed .close {
   float: right;
}
#tags-allowed::after, #comment-author::after {    /* Auto clearing float */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.comment-header {
   margin-bottom: .8em;
}
.notice, #tags-allowed { /* Moderation Message */
   font-size: 100%;
   padding: 0 0 0 0;

}
.notice p, .notice h4, #tags-allowed p, #tags-allowed h4 {
   margin: 0 0;
}
#commentlist .notice {
   margin: .6em 0;
}
#commentlist {
   margin: 0;
   padding: 0;
}
#commentlist li  {
   min-height: 90px;
   position: relative;
   display: block;
   list-style: none;
   margin: .8em 0 !important;
   padding: .8em;
}
#commentlist li small {
   position: absolute;
   z-index: 3;
   right: 95px;
   width: 45px;
}
#commentlist li small span.edit {
   position: relative;
   top: -.5em;
   float: right;
}
#commentlist li small a.quote {
   float: left;
   margin: .5em 0 0 0;
   display: block;
   width: 12px;
   height: 12px;
   border: 0;
   text-indent: -9999px;
   background: url(images/icon_quote.gif) no-repeat;
}
#commentlist li small a.quote:hover {
   background: url(images/icon_quote_hover.gif) no-repeat;
}

/*

   Trackbacks
   
*/
#trackbacklist {
   margin-left: 0;
   padding-left: 0;
}
#trackbacklist li {
   position: relative;
   margin-left: 0;
   padding: 0;
   margin-top: .8em;
   list-style: none;
}
#trackbacklist li a {
   padding: .4em;
   display: block;
   text-decoration: none;
}
#trackbacklist li p {
   padding: 0 .4em;
}
#trackbacklist li a span {
   text-decoration: underline;
}

/*

   Calendar
   
*/
#wp-calendar {
   empty-cells: show;
   width: 100%;
}
#wp-calendar #next a {
   padding-right: 1em;
   text-align: right;
}
#wp-calendar #prev a {
   padding-left: 1em;
   text-align: left;
}
#wp-calendar a {
   display: block;
   font-weight: bold;
}
#wp-calendar a:hover {
   text-decoration: none !important;
}
#wp-calendar caption {
   text-align: left;
   width: 100%;
}
#wp-calendar td {
   padding: .3em 0;
   text-align: center;
}

/*

   Plugins
   
*/
/* Recent Activity */
ul#recent-activity {
   margin: 0 !important;
   padding: 0 !important;
   list-style: none;
}
ul#recent-activity li {
   font-size: 100%;
   margin: 0 !important;
   padding: 0 !important;
}
ul#recent-activity small {
   font-size: 85%;
   padding-left: .8em;
}

/* Comment/Trackback Favatars & Gravatars */
a.comment-favatar {
   border: 0 !important;
   margin-right: .4em;
}
.eg-image {
   position: absolute;
   right: 1em;
   top: 1em;
   float: right;
   text-align: center;
   padding: 2px;
   line-height: 0;
   margin: 0;
   border: 1px solid #A5A5A3;
   display: block;
   filter: alpha(opacity=50);
   -moz-opacity: .5;
   opacity: .5;
   background: #fff url(images/gravatar.jpg) no-repeat center center;
}
#commentlist li::after {    /* Auto clearing float */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

a.comment-favatar img, .trackback-favatar {
   width: 16px;
   height: 16px;
}
.eg-image:hover, a.comment-favatar:hover img {
   filter:alpha(opacity=100);
   -moz-opacity: 1;
   opacity: 1;
}
.trackback-favatar {
   background: center center;
   width: 16px;
   height: 16px;
   float: left;
   margin: 2px 6px 0 2px;
   cursor: pointer;
}


/* Extended Live Archives */
#af-ela {
   margin: 0 0 2em 0;
}
#af-ela::after {    /* Auto clearing float */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#af-ela ul, #af-ela ul li {
   border: none;
}
#af-ela ul li a {
   padding: .5em 0;
}
#af-ela ul li::before {
   content: "";
}
ul#af-ela-menu {
   text-align: center;
   margin: 1em auto 2em auto;
}
ul#af-ela-menu li {
   font: normal 135% Arial, Helvetica, sans-serif;
   padding: 0 !important;
   margin: 0 1em;
}
ul#af-ela-tag li {
   padding: 0 !important;
}
ul#af-ela-menu li:hover, ul#af-ela-menu li.selected, ul#af-ela-tag li:hover, ul#af-ela-tag li.selected {
   color: #ec6e07 !important;
   border-bottom: 1px dotted #000 !important;
   background: none !important;
   padding: 0;
}
ul#af-ela-category, ul#af-ela-year, ul#af-ela-month, ul#af-ela-tag, ul#af-ela-post-chrono {
   padding: 1em 0;
   text-align: center;
   margin: 0 0 2em 0;
   float: none !important;
   width: 100%;
}
ul#af-ela-tag {
   font: normal 60% Arial, Helvetica, sans-serif;
}
ul#af-ela-post-tags li, ul#af-ela-post-tags li:hover, ul#af-ela-category li, ul#af-ela-post-cats li, ul#af-ela-post-cats li:hover, #af-ela-post-chrono li, ul#af-ela-post-chrono li:hover {
   font-weight: normal;
   padding: 0 !important;
   margin: 1em 4em !important;
   border: none !important;
   background: none !important;
   
}
ul#af-ela-post-tags li::before, ul#af-ela-post-cats li::before, ul#af-ela-post-chrono li::before {   /* Show right angle quotes to cool browsers */
   content: "\00BB \0020";
}
ul#af-ela-category li, ul#af-ela-year li, ul#af-ela-month li {
   font-weight: normal;
   padding: 0 !important;
   margin: 1em 4em !important;
   border: none !important;
   background: none !important;
   margin: 0 1em !important;
   display: inline !important;
}
ul#af-ela-category li:hover, ul#af-ela-year li:hover, ul#af-ela-month li:hover, ul#af-ela-category li.selected, ul#af-ela-year li.selected, ul#af-ela-month li.selected  {
   color: #ec6e07 !important;
   border: none !important;
   background: none !important;
   border-bottom: 1px dotted #000 !important;
}
ul#af-ela-category li.selected {
   color: #ec6e07 !important;
   margin: 0 1em !important;
   background: none !important;
   border: none !important;
   border-bottom: 1px dotted #000 !important;
}   

#a1 { position:absolute; top:100px; left:50px; width:150px; height:100px;
      z-index:1; background-image: url('wp-content/themes/fauna/images/bg2.jpg'); }



#sidebaru {
background-image: url(wp-content/themes/fauna/images/sidebaru.jpg);
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#getreide  { 
background-image: url(wp-content/themes/fauna/images/getreide.png) ;
POSITION: fixed; 
Bottom: 0px;
Left: 0px;

}

#flashContent { width:100%; height:100%; }


Und hier die default.css

Code: Alles auswählen
Fauna Default Style

   Nearly all aspects of Fauna can be customized with this file alone.
   
   If you want to override an existing style listed in style.css, simply copy and
   paste it here, and add !important to the end of it.
   
   For example:

      .box, .box-blank {
         text-align: justify !important;
      }

   will make sure all text is justified, instead of left-aligned.
   
   If you want to make your custom Fauna style and want to keep the core files "clean",
   copy "styles/default" folder to "styles/mystyle" and type in the URL in the options page,
   for instance "styles/mystyle/mystyle.css".
   
   
*/

/*

   Widths
   
*/
#wrapper {
   min-width: 780px;
   width: 780px;          /* Entire blog width */
}
#body {
   padding: 0 1.5em;
}
#sidebar {
float:right;
width:31%;
}
#main {
   width: 69%;            /* Main column width */
   float: left;
}
#sidebar ul.inner {
   padding: 0 0 0 .8em;
}
#header {
   height: 230px !important;
}
.left #sidebar {
   float: left;
}
.left #sidebar ul.inner {
   padding: 0 .8em 0 0;
}
.left #main {
   float: right;
}

/*

   Background
   
*/
.bg {
   background: #dbd0b2 url('bg.jpg') no-repeat center top  !important;
}
#header {
   background-image: url('../../images/masthead-fauna.jpg');
   background-repeat: repeat-x !important;
   background-position: center top;
}

/*

   Colors

*/
body {
   color: #565654;            /* Text color */
}
.box, #sidebar ul.inner li {
   background-color: #fff;      /* Box background color */
}
#sidebar, #secondary, #copyright {
   color: #A5A5A3;            /* Sidebar text color */
}

/*

   Link Colors
   
*/
a:link, a:active { text-decoration: underline; color: #ec6e07; }
a:visited { text-decoration: underline; color: #f4a361; }
a:hover, a:focus { text-decoration: underline; color: #a45a1e; }

#sidebar a:link, #sidebar a:active { text-decoration: none; color: #ec6e07; }
#sidebar a:visited { text-decoration: none; color: #578; }
#sidebar a:hover { text-decoration: underline; color: #79A; }

h2 a:link, h2 a:active, h2 a:visited {
   color: #035;
}
h2 a:hover, h2 a:focus {
   color: #39C;
}
p.commentlink, .entry-meta {
   color: #989D3C !important;
}
p.commentlink a {
   color: #989D3C !important;
}
p.commentlink a:hover, .entry-meta a:hover {
   color: #D3D764 !important;
}
.entry-meta a {
   color: #545621 !important;
}
#main p a img {
   border-bottom: 1px solid #ec6e07;
}
#main p a img:hover {
   border-bottom: 1px solid #6BD;
}
#menu a:link, #menu a:visited { color: #ec6e07; }
#menu a:active, #menu a:hover { color: #000; }
body#index li#current-index a, body#index #current-index a:visited,
#menu .current_page_item a, #menu .current_page_item a:visited
{
   color: #000 !important;
}
#sidebar li.current_page_item>a, #sidebar li.current_page_item>a:visited {   /* Only works in modern browsers */
   color: #A5A5A3;
   font-weight: bold;
}
h1 a:link, h1 a:visited {   /* Logo */
   color: #ec6e07;
}
h1 a:hover, h1 a:active {
   color: #A6A6A4;
}

/*

   Fonts
   
*/
h1 {
   font: bold 240%/100% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
body {
   font: 70%/190% Verdana, Arial, Helvetica, sans-serif;
}
cite, input, textarea, select, .inputbox, #commentform textarea, .searchbox, .pushbutton, .pushbutton-wide {
   font: 100% Verdana, Arial, Helvetica, sans-serif;
}
h2 {
   font: normal 140% Arial, Helvetica, sans-serif;
}
#main h3 {
   font: normal 135% Arial, Helvetica, sans-serif;
}
.noteworthy {
   font: 135% "Lucida Sans Unicode", Arial, sans-serif;
}
/* Opera can't render ♥ symbol with Lucida, so set generic font */
@media all and (min-width: 0px){
.noteworthy {
   font: 135% serif;
}
}
.noteworthy a {
   color:#FF7953 !important;
}
.noteworthy a:hover {
   color:#FF8F6F !important;
}
code, pre, kbd, samp {
   font: 95% "Bitstream Vera Sans Mono", 'Courier New', Courier, Fixed, monospace;
}
p.commentlink {
   border-left: 1px dotted #C2C76D;
}
p.commentlink {
   font: normal 136% Arial, Helvetica, sans-serif;
}
.aside p.commentlink {
   font: normal 100% Verdana, Arial, Helvetica, sans-serif;
}
.asides h2, .asides h3, .sidenote h2, .sidenote h3 {
   font: normal 100% Verdana, Arial, Helvetica, sans-serif;
}

/*

   Various
   
*/
acronym, abbr {
   border-bottom: 1px dashed #C63;
}
strike, del {
   color: #B6B6B4;
}
ins {
   color: #989D3C;
}
label:hover {
   color: #000;
}
fieldset {
   border: 1px solid #F4F8FB;
   background-color: #F4F8FB;
}
legend {
   background-color: #fff;
}
.notice {    /* Moderation Message */
   border-top: 0px solid #FFF200;
   border-bottom: 0px solid #FFF200;
   background-color: #FFFFF4;
}
blockquote, pre {
   border-left: 1px solid #D9D9D9;
}
#tags-allowed {
   border-top: 1px solid #D6E1ED;
   border-bottom: 1px solid #D6E1ED;
   background-color: #F8FAFC;
}

/*

   Comments & Trackbacks
   
*/
.comment-even {
   background-color: #F8FAFC;
}
.comment-odd {
   background-color: #F8FAFC;       /* Change this colour to add "Flip flopping" backgrounds */
}
.comment-author {                /* Author background color */
   background-color: #EEF4F9;
}
a.comment-permalink {
   color: #565654 !important;            /* Text color */
   text-decoration: none !important;
   border-bottom: 1px dotted #565654;
}
#trackbacklist li a {
   background-color: #FBFCFD;
}
#trackbacklist li {
   border: 1px solid #FBFCFD;
   background-color: #FEFEFE;
}
#trackbacklist li small {
   color: #565654;
}
#trackbacklist li a:hover {
   background-color:#F4F8FB;
   color: #035;
}
#trackbacklist li a:active {
   background-color:#FBFCFD;
   color: #035;
}

/*

   Search
   
*/
.search-results small {
   font-size: 100%;
}
.search-results small a {
   color: #989D3C !important;
   text-decoration: none !important;
}


/*

   Calendar
   
*/
#wp-calendar caption {
   color: #989D3C;
}
#wp-calendar a {
   color: #39C;
   background-color: #F8FAFC;
}
#wp-calendar a:hover {
   color: #035 !important;
   background-color: #EEF4F9 !important;
}
#wp-calendar td.pad:hover { /* Doesn't work in IE */
   background-color: #F8FAFC;
}

/*

   Plugins

*/   
/* Brian's Latest Comments */
#recent-activity small a:link, #recent-activity small a:visited, .secondary small a:link, .secondary small a:visited {
   color: #ACC;
}
/* Ultimate Tag Warrior */
.technoratitags {
   color: #989D3C !important;
}
.technoratitags a {
   color: #989D3C !important;
   border-bottom: 1px dotted #989D3C;
   text-decoration: none;
}
.technoratitags a:hover {
   color: #D3D764 !important;
   border-bottom: 1px dotted #D3D764;
   text-decoration: none;
}
.longtailvert a {
   padding: 0 .5em;
   text-decoration: none;
   color: #fff;
}
.longtailvert a:hover {
   background: #17A;
}

/* Textile */
.caps {   
   font: 100% Verdana, Arial, Helvetica, sans-serif;
}

/* Google Hilite */
.hilite {
   background-color: #DEEBF3;
   color: #000;
}
Benito
neu hier
 
Beiträge: 7
Registriert: 13.12.2010, 20:33

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon Azra » 15.12.2010, 08:48

Nun..
man könnte den #wrapper breiter machen (damit der Footer auf mit rein passt) und durch padding Werte den Inhaltsbereich regeln.
Somit hast du die Möglichkeit den #footer mit hinein zu packen und es würde sich beim skalieren des Browserfensters nichts mehr verschieben.
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon Benito » 16.12.2010, 23:19

Hallo

Ich weiß leider noch nicht was ein wrapper ist. Deswegen verstehe ich leider deine Antwort nicht.
Aber ist der Footer nicht völlig irrelevant für ein Bild was die Position fixed hat???
Benito
neu hier
 
Beiträge: 7
Registriert: 13.12.2010, 20:33

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon djheke » 17.12.2010, 09:17

Hallo,
ein wrapper dient dazu alles irgendwie im rahmen zu halten. giwissermaßen dein bilderrahmen.
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon djheke » 17.12.2010, 11:19

ich bins nochmal,

dir wird wohl nicht anders übrig bleiben als deine grafik zu zerschneiden.
damit du ungefähr weißt wie das geht habe ich mal etwas angefangen und deine mehlhaufenproblematik zu lösen.
hier mal die änderungen. diese kannst du ruhig in deiner indexdatei einfügen und offline testen.
allerdings musst du deine hintergrundgrafik erst zerschneiden . ich habe alle bilder auf mein desktop gelegt inkl. indexdatei (daher die relativen pfadangaben).


Code: Alles auswählen
<style type="text/css">
...
....


/* Testbereich +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

html {
background:url(mehlstrahl.jpg) repeat-y -60px 0 transparent;  /*höhe ca 30px wird gekachelt*/
}

body {

background:url(headertop.jpg) no-repeat -60px 0 transparent; /* höhe 500px kann aber geänder werden*/
}

#top span {
margin:0;
}

#getreide {
height:150px;
width:700px;
background:#a33;
background:url(getreide.png) no-repeat bottom left transparent ;
Bottom: 0px; LEFT: -50px;
z-index:-1;
}

#header {
background:#aaa;
margin-bottom:0;
}

#body {
background:#a33;
overflow:auto;
}

/* Ende Testbereich +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
</style>


ich habe die relevanten container mal eine hintergrundfarbe gegeben damit du weißt wo die einzelnen bildelemente hinkommen.
viel spaß beim fertigstellen deiner seite.

mfg
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon djheke » 17.12.2010, 12:15

ich nochmal, bevor du anfängst kannst du http://www.gipspferd.de/css/forum/test3.htm schauen
ob es so richtig ist.
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon Benito » 13.04.2011, 06:18

:coffey: Hallo

Vielen vielen Dank :)

Ist super so.
Allerdings habe ich jetzt noch ein kleines Problem, versuche schon wieder seit stunden es zu Lösen weil ichs schon einmal geschafft habe aber nicht mehr weiß wie.

Und zwar sieht man dort jetzt wenn man den IE 8 nutzt oben ein Stück von der zweiten hintergrundgrafik (also die wo der Mehlstrahl drauf ist).
Dies ist nicht sichtbar wenn man de Kompatibilitätsmodus des IE 8 einschaltet, ebensowenig bei IE 7.
Wie kann ich diesen Abstand wegbekommen? :fecht:
Benito
neu hier
 
Beiträge: 7
Registriert: 13.12.2010, 20:33

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon Benito » 13.04.2011, 20:49

Hier natürlich nochmal die url für alle die neu hereinschneien.

www.methodos-ev.de/7enanos/wordpress

PS:
Hab keine Edit funktion gefunden :hammer:
Benito
neu hier
 
Beiträge: 7
Registriert: 13.12.2010, 20:33

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon djheke » 15.04.2011, 17:11

wenn ich es richtig gesehen habe bindest du die getreidegrafik als img ein.
versuch mal für diesen container das getreide als hintergrundgrafik einzubinden

background:url(deinbild) no-repeat bottom center;

könnte klappen, aber nur wenn die grafik genauso breit ist wie dein jetziges bg
mfg
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon Benito » 16.04.2011, 15:39

Vielen Dank djheke

Leider verstehe die von dir gegebene Antwort nicht so ganz, ich glaube aber auch dass du meine Frage missverstanden hast.
Ich habe im Moment vor allem ein Problem damit, dass mein erster (oberer) Hintergrund nach oben einen Abstand hat (oder besser: hatte).

Nun hab ich (nicht in böser Absicht) auch im xhtml Forum (was ich bis dato noch nicht kannte) auch ein gleichen Thread erstellt um möglichst schnell diese Webseite hinter mich bringen zu können. Dort wurde ich dann aber auch über die moralische Fragwürdigkeit dieses Handelns aufgeklärt.

Hier deshalb der Link zum xhtml Forum:
http://xhtmlforum.de/64350-problem-mit- ... post491954

Ich danke dir trotzdem vielmals für deine Hilfe.
Benito
neu hier
 
Beiträge: 7
Registriert: 13.12.2010, 20:33

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon Benito » 16.04.2011, 16:21

Das Problem hat sich jetzt bereits erledigt. Vielen Dank :D :hammer: :drink:
Benito
neu hier
 
Beiträge: 7
Registriert: 13.12.2010, 20:33

Re: Problem mit position:fixed und Frage nach zwei Hintergründen

Beitragvon djheke » 17.04.2011, 07:56

Sorry, wer lesen kann ist klar im Vorteil. keine Ahnung was ich da gelesen habe.
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Problem mit position:fixed und Frage nach zwei Hintergründen"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast