[CSS] Problem mit ausrichten

Dieses Thema im Forum "Webdesign" wurde erstellt von juppwatis, 21. Juni 2011 .

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 21. Juni 2011
    Problem mit ausrichten

    Hallo zusammen,

    ich habe folgenden css-code:
    Code:
    /* =========================================================
    Stylesheet für Übungsseiten "Little Boxes, Teil 1"
    Stand: Ende Kap. 08 - nach der Sortierung
    Datei: ebay.css
    Datum: 11. April 2011
    Autor: David Asal
    Aufbau: 
    1. Kalibrierung und Restauration
    2. Allgemeine Styles
    3. Styles für Layoutbereiche
    4. Sonstige Styles
    ========================================================== */
    
    /* =======================================
    1. Kalibrierung und Restauration
    ======================================= */
    * { padding: 0; margin: 0; } /* Abstände auf 0 setzen in jedem Browser */
    
    /* html { height: 101%; } erzwingt Scrollbar im Firefox */
    
    /* =======================================
    2. Allgemeine Styles
     1. die Elemente html und body
     2. Block-Elemente wie Überschriften, Absätze, Listen, Zitate etc.
     3. Inline-Elemente: Hyperlinks, Bilder und Elemente wie strong und em
     4. allgemeine Klassen und IDs wie .infobox oder img#logo
    ======================================= */
    h1 ,
    h3{ 
     font-size: 170%;
     color: #9d373c;
     font-variant: small-caps;
     }
    h2 { 
     font-size: 130%; 
     color: #e52529;
    }
    .indent{
     /* padding: 0 0 0 40px */
     text-align: right;
    }
    h3{
     font-size: 120%;
    }
    /* =======================================
    3. Styles für die Layoutbereiche
     Reihenfolge entspricht dabei der des Auftretens im HTML-Quelltext
    ======================================= */
    a {
     text-decoration: none;
     outline: none;
    }
    a:link { 
     color: blue;
     font-weight: bold;
    }
    a:visited { 
     color: blue;
     font-weight: bold;
    }
    a:hover,
    a:focus {
     background-color: #d90000;
     color: white;
     font-weight: bold;
    }
    a:active {
     color: white;
     background-color: #d90000;
    }
    #logo{
     margin: auto;
     width: 600px; 
    }
    #wrapper{
     background-color: #bebebe;
     border: 1px solid red;
     font-family: Times, Verdana, Helvetica, sans-serif;
     margin: 10px auto;
     -moz-border-radius: 8px;
     width: 600px;
    }
    #header{ 
     border-bottom: 1px solid red;
     color: #ffffff;
     font-family: "Hobo Std", Times, Helvetica sans-serif;
     -moz-border-radius-topleft: 7px;
     -moz-border-radius-topright: 7px;
     padding: 8px;
    }
    #einfuehrung{
     background-color: white;
     border-bottom: 1px solid red;
     margin-bottom: 5px;
     -moz-border-radius-bottomleft: 7px;
     -moz-border-radius-bottomright: 7px; 
     padding: 8px;
    }
    #einfuehrung p span{
     color: blue;
     font-family: "Hobo Std", Times, Helvetica sans-serif;
     font-size: 80%;
    }
    #picture{
     position: center;
     background-color: white;
     border-bottom: 1px solid red;
     border-right: 1px solid red;
     border-top: 1px solid red;
     float: left;
     height: 271px;
     margin-bottom: 5px;
     -moz-border-radius-bottomright: 7px;
     -moz-border-radius-topright: 7px;
     padding: 8px;
     width: 275px;
    }
    #product{
     background-color: white;
     border-bottom: 1px solid red;
     border-left: 1px solid red;
     border-top: 1px solid red;
     float: right;
     -moz-border-radius-bottomleft: 7px;
     -moz-border-radius-topleft: 7px;
     padding: 8px;
     width: 282px;
    }
    #product p span,
    #lieferung p span{
     color: blue;
     font-family: "Hobo Std", Times, Helvetica sans-serif;
     font-size: 80%
    }
    #lieferung{
     background-color: white;
     border-bottom: 1px solid red;
     border-left: 1px solid red;
     border-top: 1px solid red;
     float: right;
     margin-bottom: 5px;
     margin-top: 5px;
     -moz-border-radius-bottomleft: 7px;
     -moz-border-radius-topleft: 7px;
     padding: 8px;
     width: 282px; 
    }
    #zahlung{
     background-color: white;
     border-top: 1px solid red;
     border-bottom: 1px solid red;
     clear: left;
     margin-top: 5px;
     -moz-border-radius-topleft: 7px;
     -moz-border-radius-topright: 7px;
     -moz-border-radius-bottomleft: 7px;
     -moz-border-radius-bottomright: 7px; 
     padding: 8px;
    }
    #versand{
     background-color: white;
     border-top: 1px solid red;
     border-bottom: 1px solid red;
     margin-top: 5px;
     -moz-border-radius-topleft: 7px;
     -moz-border-radius-topright: 7px;
     -moz-border-radius-bottomleft: 7px;
     -moz-border-radius-bottomright: 7px; 
     padding: 8px;
    }
    #weiteres{
     background-color: white;
     border-top: 1px solid red;
     border-bottom: 1px solid red;
     margin-top: 5px;
     -moz-border-radius-topleft: 7px;
     -moz-border-radius-topright: 7px;
     -moz-border-radius-bottomleft: 7px;
     -moz-border-radius-bottomright: 7px; 
     padding: 8px;
    }
    #footer{ 
     font-size: 160%; 
     font-weight: bold;
     font-variant: small-caps;
     color: #9d373c;
     margin-top: 5px;
     -moz-border-radius-topleft: 7px;
     -moz-border-radius-topright: 7px;
     -moz-border-radius-bottomleft: 7px;
     -moz-border-radius-bottomright: 7px; 
     padding: 8px;
     text-align: center;
    }
    /* =======================================
    4. Sonstige Styles
    ======================================= */
    und folgenden html-code:
    Code:
    <link href="http://www.drinkinggames.de/ebay/ebay_blue.css" rel="stylesheet" type="text/css" media="screen">
    <div id="logo">
    <a href="http://www.drinkinggames.de" target="_blank"><img src="http://www.drinkinggames.de/pictures/Logo1.jpg" title="Beer Pong Stuff and more" height="79" width="130"></a>
    <div id="wrapper">
    <div id="header">
    <h1>Text Text Text</h1>
    <h2 class="indent">Text Text Text</h2>
    </div> <!-- Ende header -->
    <div id="einfuehrung">
    <p>Text Text Text</p>
    <p>Text Text Text<span>Text Text Text</span> Text Text Text</p><br>
    <p>Text Text Text</p><br>
    <p>Text Text Text.</p>
    </div> <!-- Ende einfuehrung -->
    <div id="picture">
    <h3>Produktbild</h3>
    <img src="http://www.drinkinggames.de/components/com_virtuemart/shop_image/product/Party_Cups__blau_4d0723757cab5.jpg" id="productPic" alt="Solo Red Cups" height="250" width="250">
    </div> <!-- Ende picture -->
    <div id="product">
    <h3>Produktinformationen</h3>
    <p>&gt; Text Text Text</p>
    <p>&gt; Text Text Text: <span>Text Text Text</span></p>
    <p>&gt; Text Text Text: Text Text Text(474ml)</p>
    <p>&gt; Text Text Textoben: Text Text Text</p>
    <p>&gt; Text Text Textunten: 6Text Text Text5cm</p>
    <p>&gt; Text Text Text: Text Text Text</p>
    <p>&gt; Text Text Text: Text Text Text(PS)</p>
    <p>&gt; Verpackungseinheit: 4 Stangen à 50 Becher</p>
    </div> <!-- Ende product -->
    <div id="lieferung">
    <h3>Lieferumfang</h3>
    <p>&gt; <span>Text Text Text</span></p>
    <p>&gt; 1x Rechnung (mit ausgewiesener MwSt.)</p>
    </div> <!-- Ende lieferung -->
    <div id="zahlung">
    <h3>Text Text Text</h3>
    <p>&gt; Text Text Text</p>
    <p>&gt; Text Text Text</p>
    </div><!-- Ende zahlung -->
    <div id="versand">
    <h3>Versand</h3>
    <p>&gt; Text Text Text</p>
    <p>&gt; Text Text Text</p>
    <p>&gt; Text Text Text</p>
    </div><!-- Ende versand -->
    <div id="weiteres">
    <h3>Weitere Informationen</h3>
    <p>&gt; Text Text Text</p>
    <p>&gt; Text Text Text</p>
    <p>&gt; Text Text Text</p>
    </div><!-- Ende weiteres -->
    <div id="footer">
    <p>Text Text Text</p>
    </div><!-- Ende footer -->
    </div> <!-- Ende wrapper -->
    <a href="http://www.facebook.com/drinkinggamesde"><img src=http://www.drinkinggames.de/ebay/pictures/facebook.png title="Find us on Facebook" heigth="50" width="50"></a>
    </div> <!-- Ende logo -->
    jetzt das problem was ich einfach nicht hinbekomme:

    ich will das logo oben bündig rechts haben über der überschrift und das facbook-logo unten mittig unter dem letzten grauen kasten.
    kann mir da jemand helfen? ich bekomme es nicht hin :/ habe den code mal gemacht und mich seit da nicht mehr mit css beschäftigt...daher klappts jetzt auch nicht mehr
     

  2. Anzeige
    Heute: Deals & Sale mit stark reduzierten Angeboten finden.
  3. #2 21. Juni 2011
  4. #3 22. Juni 2011
    AW: Problem mit ausrichten

    JAAAA! genau so :) wie hast du das gemacht? WIe ist der CSS und HTML-Code also der abgeänderte? :) Ober geil!! 1000 dank!
    kann man das beim facebook logo noch so machen, dass der hover-link nicht rot unterlegt wird?
     
  5. #4 22. Juni 2011
    AW: Problem mit ausrichten

    rote hinterlegung ist weg ...

    sourcecode kannst du ja auf meinem link anschauehn --> rechtsklick --> seitenquelltext anzeigen ;-)

    edit: ich habe jetzt nicht auf ordentlichen code geachtet etc... du solltest das nochmals überarbeiten und bennenen wie du es brauchst/willst ... soll dir ja nur zeigen wie du dein problem löst/lösen kannst
     
  6. #5 22. Juni 2011
    AW: Problem mit ausrichten

    super, danke! echt geil!
    nur wie komme ich an den css-code? kannst du den hier posten?
     
  7. #6 22. Juni 2011
    AW: Problem mit ausrichten

    kannst auch im sourcecode sehen ... einfach ganz oben wo du die css datei einbindest auf style.css klicken ;-)
     

  8. Videos zum Thema
Die Seite wird geladen...
Similar Threads - CSS Problem ausrichten
  1. CSS Positionierungsproblem

    leex , 6. April 2014 , im Forum: Webentwicklung
    Antworten:
    14
    Aufrufe:
    1.493
  2. Antworten:
    1
    Aufrufe:
    1.326
  3. Antworten:
    18
    Aufrufe:
    2.158
  4. Antworten:
    2
    Aufrufe:
    1.308
  5. Antworten:
    0
    Aufrufe:
    717