Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 25

Thema: Problem beim Ausrichten mit CSS

  1. #1
    x-dast
    Gast

    Standard Problem beim Ausrichten mit CSS

    Hallo,

    ich hab ein kleines Problem beim Ausrichten mit CSS Styles.
    Auf dem Screenshot seht ihr einen kleinen Entwurf den ich aus SelfHTML habe. Er ist etwas umgeändert und ich habe rechts noch eine kleine Box drangehangen.
    Meine Frage ist jetzt, wie bekomme ich diese kleine Box an den linken Rand der großen Box? Ich bekomm das irgendwie nicht hin.
    Kann mir da einer Helfen?

    Hier der Code der CSS Datei:
    Code:
      body, p a {
        color: white; background-color: black;
        font-size: 100.01%;
        font-family: Helvetica,Arial,sans-serif;
        margin: 0; padding: 1em 0;
        text-align: center;  /* Zentrierung im Internet Explorer */
      }
    
      div#Seite {
        text-align: left;    /* Seiteninhalt wieder links ausrichten */
        margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
        width: 760px;
        padding: 0;
        background: #6699CC url(hintergrund.gif) repeat-y;
        border: 2px solid white;
      }
      html>body div#Seite {
        border-color: gray;  /* Farbangleichung an den Internet Explorer  */
      }
    
      h1 {
        font-size: 1.5em;
        margin: 0; padding: 0.3em;
        text-align: center;
        background: #669900 url(../../../src/logo.gif) no-repeat 100% 45%;
        border-bottom: 1px solid white;
      }
    
      ul#Navigation {
        font-size: 0.83em;
        float: left; width: 200px;
        margin: 0 0 1.2em; padding: 0;
    	background: #669900;
    	border-right: 1px dashed white;
    	border-bottom: 1px dashed white;
      }
      ul#Navigation li {
        list-style: none;
        margin: 0; padding: 0.1em;
      }
      ul#Navigation a {
        display: block;
        padding: 0.2em;
        font-weight: bold;
      }
      ul#Navigation a:link {
        color: white; background-color: #669900;
      }
      ul#Navigation a:visited {
        color: white; background-color: #669900;
      }
      ul#Navigation a:hover {
        color: navy; background-color: #669900;
      }
      ul#Navigation a:active {
        color: navy; background-color: #669900;
      }
    
      div#Info {
        font-size: 0.9em;
    	float: right; 
    	width: 15em;
        margin: 0; padding: 0;
        border: 1px solid white; background-color: #669900;
      }
      div#Info strong {
        font-size: 1.33em;
        margin: 0.2em 0.5em;
      }
      div#Info p {
        font-size: 1em;
        margin: 0.5em;
      }
    
      div#Inhalt {
        margin: 0 0 1em 220px;
        padding: 0 1em;
      }
      * html div#Inhalt {
        height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
        margin-bottom: 0;
      }
      div#Inhalt h2 {
        font-size: 1.2em;
        margin: 0.2em 0;
        color: navy;
      }
      div#Inhalt p {
        font-size: 1em;
        margin: 1em 0;
      }
    
      p#Fusszeile {
        clear: both;
        font-size: 0.83em;
        margin: 0; padding: 0.1em;
        text-align: center;
        background-color: #669900;
        border-top: 1px solid white;
      }
    
      p { text-align:left; margin:1em; }   /* nur fuer den 'zurueck'-Link */
    Gruß
    x-dast
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard

    Gibt es auch einen Link zu deiner Testseite?

  3. #3

  4. #4
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard

    Wo soll die Werbung nun genau hin???

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Bei div#Info und div#Seite jeweils ein
    Code:
    float:left;
    setzen.

  6. #6
    x-dast
    Gast

    Standard

    die Werbung soll genau an den rechten Rand der großen Box.
    so das der rechte Rand der großen Box und der linke Rand der kleinen Box sich berühren.

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hab jetzt verschiedene Änderungen in der CSS (Seite, Info, Fußzeile) sowie Änderungen in der Reihenfolge der HTML vorgenommen und hoffe es kommt so in etwa hin:
    CSS
    Code:
    <style type="text/css">
    
    body, p a &#123;
        color&#58; white; background-color&#58; black;
        font-size&#58; 100.01%;
        font-family&#58; Helvetica,Arial,sans-serif;
        margin&#58; 0; padding&#58; 1em 0;
        text-align&#58; center;  /* Zentrierung im Internet Explorer */
      &#125;
    
      div#Seite &#123;
        text-align&#58; left;    /* Seiteninhalt wieder links ausrichten */
        margin-left&#58;5px;      /* standardkonforme horizontale Zentrierung */
        width&#58; 760px;
        float&#58;left;
        padding&#58; 0;
        background&#58; #6699CC url&#40;hintergrund.gif&#41; repeat-y;
        border&#58; 2px solid white;
      &#125;
      html>body div#Seite &#123;
        border-color&#58; gray;  /* Farbangleichung an den Internet Explorer  */
      &#125;
    
      h1 &#123;
        font-size&#58; 1.5em;
        margin&#58; 0; padding&#58; 0.3em;
        text-align&#58; center;
        background&#58; #669900 url&#40;../../../src/logo.gif&#41; no-repeat 100% 45%;
        border-bottom&#58; 1px solid white;
      &#125;
    
      ul#Navigation &#123;
        font-size&#58; 0.83em;
        float&#58; left; width&#58; 200px;
        margin&#58; 0 0 1.2em; padding&#58; 0;
       background&#58; #669900;
       border-right&#58; 1px dashed white;
       border-bottom&#58; 1px dashed white;
      &#125;
      ul#Navigation li &#123;
        list-style&#58; none;
        margin&#58; 0; padding&#58; 0.1em;
      &#125;
      ul#Navigation a &#123;
        display&#58; block;
        padding&#58; 0.2em;
        font-weight&#58; bold;
      &#125;
      ul#Navigation a&#58;link &#123;
        color&#58; white; background-color&#58; #669900;
      &#125;
      ul#Navigation a&#58;visited &#123;
        color&#58; white; background-color&#58; #669900;
      &#125;
      ul#Navigation a&#58;hover &#123;
        color&#58; navy; background-color&#58; #669900;
      &#125;
      ul#Navigation a&#58;active &#123;
        color&#58; navy; background-color&#58; #669900;
      &#125;
    
      div#Info &#123;
        font-size&#58; 0.9em;
       float&#58; left;
       width&#58; 15em;
        margin&#58; 0; padding&#58; 0;
        border&#58; 1px solid white; background-color&#58; #669900;
      &#125;
      div#Info strong &#123;
        font-size&#58; 1.33em;
        margin&#58; 0.2em 0.5em;
      &#125;
      div#Info p &#123;
        font-size&#58; 1em;
        margin&#58; 0.5em;
      &#125;
    
      div#Inhalt &#123;
        margin&#58; 0 0 1em 220px;
        padding&#58; 0 1em;
      &#125;
      * html div#Inhalt &#123;
        height&#58; 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
        margin-bottom&#58; 0;
      &#125;
      div#Inhalt h2 &#123;
        font-size&#58; 1.2em;
        margin&#58; 0.2em 0;
        color&#58; navy;
      &#125;
      div#Inhalt p &#123;
        font-size&#58; 1em;
        margin&#58; 1em 0;
      &#125;
    
      p#Fusszeile &#123;
      clear&#58;left;
      width&#58;762px;
        float&#58;left;
        font-size&#58; 0.83em;
        margin-left&#58;5px ; padding&#58; 0.1em;    text-align&#58; center;
        background-color&#58; #669900;
        border-top&#58; 1px solid white;
      &#125;
    
      p &#123; text-align&#58;left; margin&#58;; &#125;   /* nur fuer den 'zurueck'-Link */
    </style>
    HTML
    Code:
    <div id="Seite">
      <h1>CSS-basierte Layouts</h1>
    
      <ul id="Navigation">
      	[*]<Span>Home</Span>
    [*]<h2>Über Mich</h2>[*]Bilder
    
    	[*]News
    [*]<h2>Nightlife Dresden</h2>
    [*]Spinnerei[*]Washroom[*]Blue
    [*]<h2>Kontakt</h2>[*]Kontaktformular[*]Fax
    [*]Brief[/list]
    
      <div id="Inhalt">
        <h2>2-spaltiges Layout mit Hintergrundgrafik</h2>
        
    
    In diesem Beispiel wird eine Hintergrundgrafik
           zur optischen Trennung der Spalten verwendet.</p>
        
    
    Dies erfordert leider, dass die Breite der links stehenden Navigation
           passend zur Hintergrundgrafik in 'px' angegeben wird.
           Dadurch kann sich die Breite dieser Box einer &Auml;nderung des Schriftgrades
           nicht anpassen.</p>
    
        
    
    Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
           des Inhaltsbereichs dem die Seitenelemente umschlie&szlig;enden DIV zugewiesen.
           Sowohl f&uuml;r die Navigation als auch f&uuml;r diese Inhaltsbox ist selbst
           kein Hintergrund angegeben.
    
           Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
           und ist unabh&auml;ngig von deren H&ouml;he.</p>
        
    
    Der Kopf- und der Fu&szlig;zeile wurde eine Hintergrundfarbe zugewiesen,
           damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
      </div>
    
    </div>   <div id="Info">
      Werbung
      
    
    Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
         im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren.</p>
    
      
    
    Dadurch, dass f&uuml;r den Inhaltsbereich kein float definiert ist, kann auf
         die Angabe einer Breite verzichtet werden und die Seite den ihr zur
         Verf&uuml;gung stehenden Raum ausnutzen.</p>
      
    
    Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
         Breitenangabe verzichten zu k&ouml;nnen, hat au&szlig;erdem den Vorteil, Abweichungen
         durch das falsche Box-Modell des Internet Explorers auszugleichen.</p>
    </div>    <p id="Fusszeile">letzte Aktualisierung war am&#58;
        Dienstag, 05-Sep-2006  17&#58;37
      </p>
    Noch ein Tipp: Du verwendest bei den Breitenangaben unterschiedliche Einheiten (px und em). Das vertragen manche Browser nicht.
    Am besten alles in Pixel für feste Breiten oder in % bzw em für relative Breiten.

  8. #8
    x-dast
    Gast

    Standard

    wenn ich deinen Code nehme, ist das zwar so wie ich mir das vorgestellt habe, aber es verschiebt mir ein wenig die rahmen und das menü.

    Die CSS datei habe ich mir aus dem Code von SelfHTML zusammengestellt und lediglich nur die Werte geändert, aber nicht die Einheit, also ist schon von anfang an px und em gemischt.

  9. #9
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard

    Man sollte nach Möglichkeit mehr relative Größen (also % und em) verwenden um die Barrierefreiheit zu erhöhen und um bei unterschiedlichen Bildschirmauflösungen eine besseres Ergebnis zu erzielen.

  10. #10
    x-dast
    Gast

    Standard

    ich hab grad nochmal rumprobiert, aber mit dem code bekomm ich meine rahmen nicht mehr so richtig hin.
    da werd ich wohl erstmal die kleine box weglassen müssen.
    oder hat noch jemand einen tipp?

Ähnliche Themen

  1. Problem beim Positionieren!
    Von incendium im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 08.03.2008, 20:12
  2. Problem beim Dateidownload
    Von im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 12.06.2007, 16:52
  3. Problem beim Koordinieren
    Von Biesi im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 29.12.2006, 08:30
  4. Problem mit PHP beim hochziehe.
    Von Sepp im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 05.12.2005, 20:05
  5. Problem beim Aktualisieren
    Von YoungHu$tler im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 14.02.2005, 20:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •