Anzeige

Problem mit positionierung

Problem mit positionierung | PSD-Tutorials.de

Erstellt von ackermaennchen, 12.02.2011.

  1. ackermaennchen

    ackermaennchen Normalo

    20349
    Dabei seit:
    30.03.2005
    Beiträge:
    5.240
    Geschlecht:
    männlich
    Ort:
    Lofer (Austria)
    Software:
    Photoshop Cc15/Lightroom CC/ Dreamweaver
    Kameratyp:
    Nikon D610
    Problem mit positionierung
    Hi Folks, bin schon wieder am verzweifeln am Projekt Header.

    Folgende Sache ich hab im Header über jquery ne slideshow laufen. klappt auch wunderbar, positionierung passt. Jetzt hab ich vor darüber noch das Logo zu platzieren. Ist abgespeichert als .png und hat einen transperenten Hintergund.

    Jetzt kireg ich das blöde ding aber nicht positioniert. entweder er verschiebt allen anderen Inhalt nach unten, oder legt sich hinter die slideshow. Mach ich das div ausserhalb des headers und versuche ihn zu positionieren ebenso.

    Kommen wir zum Code:

    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4. <title>Untitled Document</title>
    5. <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
    6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    7.  
    8. <!-- include Cycle plugin -->
    9. <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
    10.  
    11. <!--  initialize the slideshow when the DOM is ready -->
    12. <script type="text/javascript">
    13. $(document).ready(function() {
    14.      $('.slideshow').cycle({
    15.  
    16.           fx: 'fade',
    17.           speed:  4500,
    18.           timeout: 3000,
    19.      });
    20. });
    21. </head>
    22.  
    23. <script type="text/javascript" src="http://sc.lofer.at/stat/track.php?mode=js"></script>
    24. <noscript><img src="http://sc.lofer.at/stat/track_noscript.php" border="0" alt="" width="1" height="1"/></noscript>
    25.  
    26. <!--- Beginn Header Container /--->
    27. <div id="HeaderContainer">
    28.  
    29.     <!--- Beginn Header /--->
    30.     <div id="Header">
    31.  
    32.       <div class="slideshow">
    33.         <img src="http://www.psd-tutorials.de/forum/images/slide_1.png"/>
    34.         <img src="http://www.psd-tutorials.de/forum/images/slide_2.png"/>      
    35.         <img src="http://www.psd-tutorials.de/forum/images/slide_3.png"/>
    36.         <img src="http://www.psd-tutorials.de/forum/images/slide_4.png"/>
    37.  
    38.           </div>
    39.         <!-- End Slideschow /-->
    40.    
    41. </div>
    42.     <!---End Header /--->
    43.  
    44. </div><!--- End Header Container /--->
    45.  
    46. </body>
    47. </html>
    48.  
    und die css:

    HTML:
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4.  
    5.    
    6. *{
    7.     margin: 0;
    8.     padding:0;
    9.     border: 0;
    10.     }
    11.    
    12. .body{
    13.     background: #faf9f9;
    14.     font:62,5%/1.8em "Trebuchet MS", Arial, Helvetica, sans-serif;
    15.     color:#807f7f;}
    16.    
    17. .noBorder {
    18.     border:0!important;
    19.     }
    20. .noMargin {
    21.   margin: 0!important;
    22.   }  
    23. .notetxt {
    24.     text-indent: -9999px;
    25.     font-size:1px;
    26.     overflow:hidden;
    27.     color:#CCC
    28.     top: 40px;
    29.     }
    30. .clear {
    31.     float:none;
    32.     clear:both;
    33.     }  
    34.    
    35.     h1 a {
    36.     position: absolute;
    37.     height: 76px;
    38.     width: 355px;
    39.     top: 180px;
    40.     left: 40px;}
    41. /*----- Header ---*/
    42.  
    43.  
    44. div#HeaderContainer {
    45.     width: 100%;
    46.     margin: 0 0 0 0;
    47.     }
    48.    
    49. div#HeaderContainer div#Header {
    50.    
    51.     width: 960px;
    52.     height: 255px;
    53.     background-image:url(../images/header_bg.jpg);
    54.     margin: auto ;
    55.   position:absoulute;
    56. }
    57.  
    58.  div#HeaderContainer div#Header  .logo {
    59.      position:absolute;
    60.      background-image:url(../images/logo.png) no-repeat;
    61. width: 355px;
    62. height:76px;
    63. margin-top: -40px;}
    64.  
    65. div#HeaderContainer div#Header .slideshow img{
    66.     border:none;
    67.     width: 946px;
    68.     height: 218px;
    69.     padding: 0 0 0 7px;
    70.     }
    71.    
    dieser Tag muss jetzt darein:

    Code (Text):
    1. <div class="logo">
    2. <h1><a href="http://sc.lofer.at" title="sc.lofer.at" class="notetxt">www.sc.lofer.at</a></h1></div>
     
    Zuletzt bearbeitet: 13.02.2011
    #1      
  2. HansHansa

    HansHansa [Mod] Foto

    31
    Dabei seit:
    08.02.2008
    Beiträge:
    3.744
    Geschlecht:
    männlich
    Ort:
    Stutensee
    Software:
    GIMP | Hugin
    Kameratyp:
    EOS 60D, 500D, Fz28
    Problem mit positionierung
    AW: Problem mit positionierung

    Code (Text):
    1. h1 a {
    2.     position: absolute;
    3.     height: 76px;
    4.     width: 355px;
    5.     top: 180px;
    6.     left: 40px;}
    Die Anweisung zum positionieren ist aber auch doppelt drin.

    Code (Text):
    1. [COLOR=#000080]</div>[/COLOR]
    2.     [I][COLOR=#000080]<!---End Header /--->[/COLOR][/I]
    3. [COLOR=Red]<div id="logo">
    4. <h1><a href="http://sc.lofer.at" title="sc.lofer.at" class="notetxt">www.sc.lofer.at</a></h1></div>
    5. </div>[/COLOR]
    6. [COLOR=#000080]</div>[/COLOR][I][COLOR=#000080]<!--- End Header Container /--->[/COLOR][/I]
    7.  
    So das er immer noch im Seitencontainer ist.

    Code (Text):
    1. div#logo {
    2.      position:absolute;
    3. width: 355px;
    4. height:76px;
    5. background:url(logo.png) no-repeat;
    6.     top:20px;
    7.     right:-5px;
    8.     z-index:99;
    9.     position:fixed;
    10.     left: 10%;
    11.     margin-left: 150px;}
    Und positionieren tue ich immer so.

    Ich probiere es zu Hause nochmal.
     
    #2      
  3. ackermaennchen

    ackermaennchen Normalo

    20349
    Dabei seit:
    30.03.2005
    Beiträge:
    5.240
    Geschlecht:
    männlich
    Ort:
    Lofer (Austria)
    Software:
    Photoshop Cc15/Lightroom CC/ Dreamweaver
    Kameratyp:
    Nikon D610
    Problem mit positionierung
    AW: Problem mit positionierung

    Hab jetzt erstmal die H1 weggelassen.

    Positionierung vom Logo haut jetzt hin. Musste aber dafür die Bezeichnung divHeaderContainer div#Header vor div#logo wegnehmen.

    Danke für den Hinweiss mit z-Index, auf das wär ich nie gekommen.

    Bea:

    ok Positionierung hat nich ganz hin, nur wenn das Browserfenster minimiert ist.
    Da sich das Div jetzt nicht mehr nach dem Header bzw Headercontainer ausrichtet sondern nach dem Browserrand.
     
    Zuletzt bearbeitet: 13.02.2011
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Problem mit positionierung
    AW: Problem mit positionierung

    wenn es sich am headerContainer orientieren sollt, dann braucht #headerContainer ein position: relative;.
     
    #4      
  5. magicsepp

    magicsepp Aktives Mitglied

    12
    Dabei seit:
    27.08.2009
    Beiträge:
    1.878
    Geschlecht:
    männlich
    Problem mit positionierung
    AW: Problem mit positionierung

    setzt ein position relative beim#Header dann bezieht sich
    position:absolute auf #Header und nicht auf die Seite .....

    edith Sokie war schneller ;-)
     
    Zuletzt bearbeitet: 13.02.2011
    #5      
  6. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    978
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape/ Lightroom
    Kameratyp:
    Nikon D700, D750 Spiegelreflex :D
    Problem mit positionierung
    AW: Problem mit positionierung

    Hallo Ackermaenchen,

    anbei mal ein Link, der Dir die Sache mit der Positionierung vielleicht so erklärt, dass Du es für künftige Projekte verinnerlichen kannst. Wenn man es nämlich erst mal kapiert hat ist es so einfach wie Fahrradfahren.

    CSS Positionieren • Absolute und relative Positionierung

    B.G. und Euch allen einen schönen Sonntag
    Solla
     
    Zuletzt bearbeitet: 13.02.2011
    #6      
  7. ackermaennchen

    ackermaennchen Normalo

    20349
    Dabei seit:
    30.03.2005
    Beiträge:
    5.240
    Geschlecht:
    männlich
    Ort:
    Lofer (Austria)
    Software:
    Photoshop Cc15/Lightroom CC/ Dreamweaver
    Kameratyp:
    Nikon D610
    Problem mit positionierung
    AW: Problem mit positionierung

    Fehler gefunden, ich hatte Headercontainer 100% Breite gegeben statt einem fixen wert.
    Hab ihn jetzt auf die 960px breite gesetzt und es funktioniert ^^

    Grundsätzlich hab ich es ja kapiert, aber manchmal sieht man eben den Wald vor lauter Bäumen nicht mehr.
     
    #7      
  8. Solla

    Solla Aktives Mitglied

    Dabei seit:
    18.02.2009
    Beiträge:
    978
    Geschlecht:
    weiblich
    Software:
    Photoshop/ Flash /Illustrator/ Dreamweaver/ Inkscape/ Lightroom
    Kameratyp:
    Nikon D700, D750 Spiegelreflex :D
    Problem mit positionierung
    AW: Problem mit positionierung

    Ach so na dann, vielleicht nutzt der Link ja noch anderen!

    Ja, ja das mit dem Wald und den Bäumen kenn ich auch. Hab mal 5 Tage an der Beseitigung von Validitätsproblemen zugebracht, um dann festzustellen, dass ich nur ein schließendes </li> vergessen hatte, was aber dann 55 Fehler nach sich zog, die eigentlich keine waren! Soviel also dazu...

    B.G.
    Solla
     
    Zuletzt bearbeitet: 13.02.2011
    #8      
x
×
×