mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 17:18 Benutzername: Passwort: Auto-Login

Thema: CSS / im wrapper liegendes BG Bild, auf bottom platzieren? vom 16.01.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS / im wrapper liegendes BG Bild, auf bottom platzieren?
Autor Nachricht
nickdesign
Threadersteller

Dabei seit: 28.02.2007
Ort: South London
Alter: 43
Geschlecht: Männlich
Verfasst So 16.01.2011 16:34
Titel

CSS / im wrapper liegendes BG Bild, auf bottom platzieren?

Antworten mit Zitat Zum Seitenanfang

Irgendwie steh ich gerade auf der Leitung...

ich bekomme das BG Bild nicht auf den bottom gelegt, das problem is, ich möchte das der Content bei mehr Text später größer wird, demnach soll das Bild links (Indian Head Massage), auch immer unten stehen - seitlich - .
Code noch nicht fertig, mir geht es jetzt erstmal nur um das Bild links, daher ist auch noch kein footer zu sehen.

Hier der Link für die Vorschau

http://jsfiddle.net/WD7mD/3/

Code HTML

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>-</title>
<head>


</head>
<body>

    <div id="distance"></div>
    <div id="wrapper">
        <div id="logo">
         <a href="" alt="">
         <img src="images/logo/logo.png" alt="#"/></a>
         </div>
        <div id="navigation">
            <ul>
                <li><a href="#" class="nav" title="#" alt="">START</a></li>
                <li><a href="#" class="nav" title="#" alt="">WHAT WE DO</a></li>
                <li><a href="#" class="nav" title="#" alt="">WOMAN</a></li>
                <li><a href="#" class="nav" title="#" alt="">MEN</a></li>
                <li><a href="#" class="nav" title="#" alt="">CONTACT</a></li>
            </ul>

        </div>
            <div id="start_boxes">
              <div class="box_left"></div>
              <div class="box_middle"></div>
              <div class="box_right"></div>
             </div>
</div>

</body>
</html>


CODE CSS (Gekürzt)

Code:
   
   
   * {
      margin:0;
      padding:0;
      }
      

   html, body {
      height:100%;
      }

   body {
      background-image:url(images/bg/bg.png);
      background-repeat:repeat;
      color:#630;
      font:100.01%/1.4 sans-serif;
      text-align:center; /* horizontal centering for IE Win quirks */
      }

   #distance {
      width:1px;
      height:50%;
      background-color:#fc6;
      margin-bottom:-13.75em; /* half of container's height */
      float:left;
      }

   #wrapper {
      background-image:url(images/bg/text-bg.png);
      background-repeat:no-repeat;
      margin:0 auto;
      position:relative; /* puts container in front of distance */
      text-align:left;
      height:auto;
      width:870px;
      padding:0 20px 20px 20px;
      clear:left;
      }

   #wrapper h1 {
      font-size:18px;
      padding: 22px 22px 0px 60px; //*  Oben -> Rechts -> Unten -> Links *//
      }
          ....
         
   #wrapper p {
      padding: 22px 22px 20px 60px; //*  Oben -> Rechts -> Unten -> Links *//
      }

   #logo {
      text-align:center;
      height:280px;
      width:auto;
      
         }
   #navigation {
      margin-top:30px;
      height:26px;
      border-bottom:1px solid #000;
      margin-left:60px;
      width:750px;
   
   }
   
   .nav {color:#999999; }
   .nav:hover {color:#993399; }
   
   
   
   /* STARTSEITE BOXEN */
   
   #start_boxes {
   margin-top:25px;
   }   
   
   .box_left {
   background-image:url(images/startpage/start_left.png);
   margin-left:25px;
   float:left; 
   height:465px;
   width:280px;
   background-repeat: no-repeat;
   }
   
   .box_middle {
   background-image:url(images/startpage/start_middle.png);
   float:left; 
   height:465px;
   width:280px;
   background-repeat: no-repeat;
   }
   
   
   .box_right {
   background-image:url(images/startpage/start_right.png);
   margin-left:-10px;
   float:left; 
   height:465px;
   width:280px;
   background-repeat: no-repeat;



...


Zuletzt bearbeitet von nickdesign am So 16.01.2011 16:45, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
trashmaster

Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst So 16.01.2011 17:12
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn du dem #wrapper noch background-position:left bottom; gibst und das Floating der DIVs in #start_boxes aufhebst, sollte es schon klappen. (Dafür z.B. overflow:hidden; oder die Clearfix-Klasse verwenden, oder hinter die drei DIVs noch ein DIV mit clear:left; packen)

Die Background-Eigenschaften könnte man auch alle direkt in eine Zeile schreiben:
Code:
background:url(http://www.patrick-krisch.de/kunden/lawes/images/bg/text-bg.png) bottom left no-repeat;


Zuletzt bearbeitet von trashmaster am So 16.01.2011 17:13, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
nickdesign
Threadersteller

Dabei seit: 28.02.2007
Ort: South London
Alter: 43
Geschlecht: Männlich
Verfasst So 16.01.2011 17:23
Titel

Antworten mit Zitat Zum Seitenanfang

Danke dir Lächel

hat alles geklappt, wünsche dir noch n schönes rest Wochenende Lächel * Applaus, Applaus * * Applaus, Applaus *
  View user's profile Private Nachricht senden
 
Ähnliche Themen hinter wrapper schatten / bild
Wrapper soll sich 100% der Höhe des Contents anpassen...
illustrator 10 >> darunter liegendes objekt aufteilen ...
OnClick ein neues drunter liegendes Text-, Bildfeld
[CSS] Div bottom anordnen
div am am seiten-bottom feststehend !
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.