[CSS] Problem mit ausrichten

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

Schlagworte:
  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
     
    + Multi-Zitat Zitieren
  4. 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?
     
    + Multi-Zitat Zitieren
  5. 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
     
    + Multi-Zitat Zitieren
  6. 22. Juni 2011
    AW: Problem mit ausrichten

    super, danke! echt geil!
    nur wie komme ich an den css-code? kannst du den hier posten?
     
    + Multi-Zitat Zitieren
  7. 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 ;-)
     
    + Multi-Zitat Zitieren
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten