zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Schatten links und rechts vom Hauptdiv

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.01.2010, 00:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2006
Beiträge: 80
Xethon befindet sich auf einem aufstrebenden Ast
Standard Schatten links und rechts vom Hauptdiv

Hi,

ich möchte gerne links und rechts von meinem Hauptdiv #box einen Schatten einfügen.Grafiken habe ich auch schon ersdtellt, nur weiß ich nicht,wie ich die einfüge. Hier mal mein Code:

Code:
body {
      background-color: #808080;
     }

#box     {
          width: 900px;
          text-align: left;
          background-color: #ffffc6;
          position: absolute;
          top: 0px;
          left: 50%;
          margin-left: -450px;
          right: 50%;
          margin-right: -450px;
         }
         
#banner
        {
        width: 900px;
        height: 111px;
        background: url('images/header.gif');        
        }
        
#navi
      {
      width: 882px;
      height: 12px;
      background-color: #77c3f0;
      padding: 9px;
      font-family: Verdana;
      font-size: 11px;
      font-weight: bold;
      color: white;
      }
      
#content
        {
        width: 882px;
        background-color: white;
        padding: 20px 9px;
        }
        
#footer
        {
        width: 900px;
        height: 30px;
        background-color: #77c3f0;
        }
        
#schattenlinks
              {
              background: url('images/shadow-left.gif') repeat-y;
              width: 10px;
              float: left;             
              }
              
#schattenrechts
              {
              background: url('images/shadow-right.gif') repeat-y;
              width: 10px;
              float: right;             
              }


/* Formatierung der Links  */
        
a:link
      {
      color: white;
      }

a:visited
          {
          color: white;
          }

a:hover
        {
        color: #168fd7;
        }

a:active
        {
        color: white;
        }
        
a
  {
  text-decoration: none;
  }


/* Formatierung der Überschriften */

h1
  {
   font-size: 20px;
  } 

h2
  {
  font-size: 18px;
  }
  
h3
  {
  font-size: 16px;
  }
  
h4
  {
  font-size: 14px;
  }
Code:
<html>
  <head>                     
    <title>Maxskin.de</title>
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

      <div id="box">
      
      <div id="banner"></div>
      <div id="schattenlinks"></div>
      <div id="schattenrechts"></div>
      <div id="navi"><a href="test.html">Home</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="test.html">Produkte</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="test.html">Kontakt</a></div>
      <div id="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                        magna aliquyam erat, sed diam voluptua. At vero eos et 
                        accusam et justo duo dolores et ea rebum. Stet clita kasd 
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor 
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                        dolore magna aliquyam erat, sed diam voluptua. At vero 
                        eos et accusam et justo duo dolores et ea rebum. Stet 
                        clita kasd gubergren, no sea takimata sanctus est Lorem 
                        ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
                        consetetur sadipscing elitr, sed diam nonumy eirmod 
                        tempor invidunt ut labore et dolore magna aliquyam erat, 
                        sed diam voluptua. At vero eos et accusam et justo duo 
                        dolores et ea rebum. Stet clita kasd gubergren, no sea 
                        takimata sanctus est Lorem ipsum dolor sit amet.   
                        Duis autem vel eum iriure dolor in hendrerit in 
                        vulputate velit esse molestie consequat, vel illum 
                        dolore eu feugiat nulla facilisis at vero eros et 
                        accumsan et iusto odio dignissim qui blandit praesent 
                        luptatum zzril delenit augue duis dolore te feugait 
                        nulla facilisi. Lorem ipsum dolor sit amet,
      </div>      
      <div id="footer"></div>
      </div>

  
  </body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.01.2010, 10:39
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo

Einfacher wäre es, wenn du nur eine Grafik nimmst. Deine #box und #content haben ja eine feste Breite.
Also eine 900px breite Grafik in #box kacheln sollte gehen.

Gruß Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.01.2010, 13:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2006
Beiträge: 80
Xethon befindet sich auf einem aufstrebenden Ast
Standard

Was meinst du mit kacheln?
Mit Zitat antworten
  #4 (permalink)  
Alt 23.01.2010, 13:50
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

Zitat:
Zitat von Xethon Beitrag anzeigen
Was meinst du mit kacheln?
Du bastelst eine Grafik - Größe 900 x 1 px - und lässt sie per repeat-y nach unten wiederholen.
Mit Zitat antworten
  #5 (permalink)  
Alt 24.01.2010, 15:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2006
Beiträge: 80
Xethon befindet sich auf einem aufstrebenden Ast
Standard

Ok, hat geklappt, danke.
Habe jetzt ein neues Problem. Ich will, dass egal wieviel Inhalt im Content ist, der Content mit dem Footer bis zum Seitenende geht. Habe deshalb folgendes gemacht:

#box {
width: 900px;
text-align: left;
background-color: #ffffc6;
position: absolute;
top: 0px;
left: 50%;
margin-left: -450px;
right: 50%;
margin-right: -450px;
height: 100%;
}

#footer
{
width: 900px;
height: 30px;
background-color: #77c3f0;
position: absolute;
bottom: 0;

}

Ist auch alles schön und gut soweit. Wenn jetzt jedoch soviel Inhalt im Content ist, dass rechts ein Scrollbalken erscheint,dann bleibt der Footer am Seitenende und der Content geht unter dem Footer weiter.Wie löse ich das,damit der Footer immer unter dem Content am Seitenende sitzt?
Mit Zitat antworten
  #6 (permalink)  
Alt 24.01.2010, 16:29
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo

Stichwort: sticky footer

http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html
Punkt 7

oder
Get down! How to keep footers at the bottom of the page
Funktioniert auch sehr gut.

Gruß Manfred
Mit Zitat antworten
  #7 (permalink)  
Alt 24.01.2010, 21:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2006
Beiträge: 80
Xethon befindet sich auf einem aufstrebenden Ast
Standard

Habs so gemacht wie in der FAQ aber es funktioniert nicht. Was mache ich falsch?
Der Content läuft unterm Footer weiter und ich habe jetzt nen Abstand vom Header zum oberen Rand.

Code:
body {
      background-color: #282828;
     }

#box     {
          width: 900px;
          text-align: left;
          background-color: #ffffc6;
          position: relative;
          top: 0px;
          left: 50%;
          margin-left: -450px;
          right: 50%;
          margin-right: -450px;
          min-height: 100%;
          height: 100%;
         }
         
#banner
        {
        width: 900px;
        height: 111px;
        background: url('images/header.gif');        
        }
        
#navi
      {
      width: 882px;
      height: 12px;
      background-color: #77c3f0;
      padding: 9px;
      font-family: Verdana;
      font-size: 11px;
      font-weight: bold;
      color: white;
      }
      
#content
        {
        width: 882px;
        background-color: white;
        padding: 20px 9px;
        font-family: Verdana;
        font-size: 12px;
        padding-bottom: 30px;
        }
        
#footer
        {
        font-family: Verdana;
        font-size: 10px;
        text-align: center;
        width: 900px;
        height: 30px;
        background-color: #77c3f0;
        position: relative;
        margin-top: 0;
        left: 50%;
        margin-left: -450px;
        right: 50%;
        margin-right: -450px;
        margin-top: -30px;
        }

/* Formatierung der Links  */
        
a:link
      {
      color: white;
      }

a:visited
          {
          color: white;
          }

a:hover
        {
        color: #168fd7;
        }

a:active
        {
        color: white;
        }
        
a
  {
  text-decoration: none;
  }


/* Formatierung der Überschriften */

h1
  {
   font-size: 20px;
  } 

h2
  {
  font-size: 18px;
  }
  
h3
  {
  font-size: 16px;
  }
  
h4
  {
  font-size: 14px;
  }
Code:
<html>
  <head>                     
    <title>Maxskin.de</title>
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

      <div id="box">
      
      <div id="banner"></div>
      <div id="navi"><a href="test.html">Home</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="test.html">Produkte</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="test.html">Kontakt</a></div>
      <div id="content"> <h1>Lorem ipsum</h1>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                        magna aliquyam erat, sed diam voluptua. At vero eos et 
                        accusam et justo duo dolores et ea rebum. Stet clita kasd 
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor 
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                        dolore magna aliquyam erat, sed diam voluptua. At vero 
                        eos et accusam et justo duo dolores et ea rebum. Stet 
                        clita kasd gubergren, no sea takimata sanctus est Lorem 
                        ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
                        consetetur sadipscing elitr, sed diam nonumy eirmod 
                        tempor invidunt ut labore et dolore magna aliquyam erat, 
                        sed diam voluptua. At vero eos et accusam et justo duo 
                        dolores et ea rebum. Stet clita kasd gubergren, no sea 
                        takimata sanctus est Lorem ipsum dolor sit amet.   
                        Duis autem vel eum iriure dolor in hendrerit in 
                        vulputate velit esse molestie consequat, vel illum 
                        dolore eu feugiat nulla facilisis at vero eros et 
                        accumsan et iusto odio dignissim qui blandit praesent 
                        luptatum zzril delenit augue duis dolore te feugait 
                        nulla facilisi. Lorem ipsum dolor sit amet,
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                        magna aliquyam erat, sed diam voluptua. At vero eos et 
                        accusam et justo duo dolores et ea rebum. Stet clita kasd 
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor 
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                        dolore magna aliquyam erat, sed diam voluptua. At vero 
                        eos et accusam et justo duo dolores et ea rebum. Stet 
                        clita kasd gubergren, no sea takimata sanctus est Lorem 
                        ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
                        consetetur sadipscing elitr, sed diam nonumy eirmod 
                        tempor invidunt ut labore et dolore magna aliquyam erat, 
                        sed diam voluptua. At vero eos et accusam et justo duo 
                        dolores et ea rebum. Stet clita kasd gubergren, no sea 
                        takimata sanctus est Lorem ipsum dolor sit amet.   
                        Duis autem vel eum iriure dolor in hendrerit in 
                        vulputate velit esse molestie consequat, vel illum 
                        dolore eu feugiat nulla facilisis at vero eros et 
                        accumsan et iusto odio dignissim qui blandit praesent 
                        luptatum zzril delenit augue duis dolore te feugait 
                        nulla facilisi. Lorem ipsum dolor sit amet,
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                        magna aliquyam erat, sed diam voluptua. At vero eos et 
                        accusam et justo duo dolores et ea rebum. Stet clita kasd 
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor 
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                        dolore magna aliquyam erat, sed diam voluptua. At vero 
                        eos et accusam et justo duo dolores et ea rebum. Stet 
                        clita kasd gubergren, no sea takimata sanctus est Lorem 
                        ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
                        consetetur sadipscing elitr, sed diam nonumy eirmod
                        Duis autem vel eum iriure dolor in hendrerit in 
                        vulputate velit esse molestie consequat, vel illum 
                        dolore eu feugiat nulla facilisis at vero eros et 
                        accumsan et iusto odio dignissim qui blandit praesent 
                        luptatum zzril delenit augue duis dolore te feugait 
                        nulla facilisi. Lorem ipsum dolor sit amet,
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                        magna aliquyam erat, sed diam voluptua. At vero eos et 
                        accusam et justo duo dolores et ea rebum. Stet clita kasd 
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor 
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                        dolore magna aliquyam erat, sed diam voluptua. At vero 
                        eos et accusam et justo duo dolores et ea rebum. Stet 
                        clita kasd gubergren, no sea takimata sanctus est Lorem 
                        ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
                        consetetur sadipscing elitr, sed diam nonumy eirmod 
                        Duis autem vel eum iriure dolor in hendrerit in 
                        vulputate velit esse molestie consequat, vel illum 
                        dolore eu feugiat nulla facilisis at vero eros et 
                        accumsan et iusto odio dignissim qui blandit praesent 
                        luptatum zzril delenit augue duis dolore te feugait 
                        nulla facilisi. Lorem ipsum dolor sit amet,
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                        magna aliquyam erat, sed diam voluptua. At vero eos et 
                        accusam et justo duo dolores et ea rebum. Stet clita kasd 
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor 
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                        dolore magna aliquyam erat, sed diam voluptua. At vero 
                        eos et accusam et justo duo dolores et ea rebum. Stet 
                        clita kasd gubergren, no sea takimata sanctus est Lorem 
                        ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
                        consetetur sadipscing elitr, sed diam nonumy eirmod 
                        Duis autem vel eum iriure dolor in hendrerit in 
                        vulputate velit esse molestie consequat, vel illum 
                        dolore eu feugiat nulla facilisis at vero eros et 
                        accumsan et iusto odio dignissim qui blandit praesent 
                        luptatum zzril delenit augue duis dolore te feugait 
                        nulla facilisi. Lorem ipsum dolor sit amet,
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                        magna aliquyam erat, sed diam voluptua. At vero eos et 
                        accusam et justo duo dolores et ea rebum. Stet clita kasd 
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor 
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                        dolore magna aliquyam erat, sed diam voluptua. At vero 
                        eos et accusam et justo duo dolores et ea rebum. Stet 
                        clita kasd gubergren, no sea takimata sanctus est Lorem 
                        ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
                        consetetur sadipscing elitr, sed diam nonumy eirmod 
                        Duis autem vel eum iriure dolor in hendrerit in 
                        vulputate velit esse molestie consequat, vel illum 
                        dolore eu feugiat nulla facilisis at vero eros et 
                        accumsan et iusto odio dignissim qui blandit praesent 
                        luptatum zzril delenit augue duis dolore te feugait 
                        nulla facilisi. Lorem ipsum dolor sit amet,
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                        magna aliquyam erat, sed diam voluptua. At vero eos et 
                        accusam et justo duo dolores et ea rebum. Stet clita kasd 
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor 
                        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                        dolore magna aliquyam erat, sed diam voluptua. At vero 
                        eos et accusam et justo duo dolores et ea rebum. Stet 
                        clita kasd gubergren, no sea takimata sanctus est Lorem 
                        ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
                        consetetur sadipscing elitr, sed diam nonumy eirmod  
      </div>      
      </div>
      <div id="footer">Impressum</div>

  
  </body>
</html>

Geändert von Xethon (24.01.2010 um 21:07 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 24.01.2010, 21:23
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

Füge das zu deinem CSS hinzu:

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

html, body {
  height: 100%;
}

Geändert von Cocoon (24.01.2010 um 21:26 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 24.01.2010, 21:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2006
Beiträge: 80
Xethon befindet sich auf einem aufstrebenden Ast
Standard

Der Abstand ist nun weg, aber der Footer ist leider nicht am Ende der Seite. Wie löse ich das?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.01.2010, 21:30
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

Zitat:
Zitat von Xethon Beitrag anzeigen
Der Abstand ist nun weg, aber der Footer ist leider nicht am Ende der Seite. Wie löse ich das?
Ah, jetzt verstehe ich das Hauptproblem.

Das ist zuviel:

Code:
#box {
  height: 100%;
}
Lösche das und der Footer bleibt unten kleben.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild bewegt sich von links nach rechts xmimox CSS 8 03.07.2011 22:35
Wie bekomm ich das von links auch nach rechts? AmyD CSS 4 12.05.2011 23:08
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird. Picasso CSS 36 03.01.2011 20:41
Div-Container mit Schatten rechts und unten? jenny79 CSS 26 06.11.2007 16:30
grafik links und rechts unten ohne zwischenraum einbinden ? Kurt CSS 2 08.06.2004 16:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:39 Uhr.