Ergebnis 1 bis 8 von 8

Thema: Ausrichten über CSS am Elternbereich

  1. #1
    Gast

    Standard Ausrichten über CSS am Elternbereich

    Ich möchte folgendes über CSS erreichen:

    Ich habe einen Gesamtbereich B1 an diesem Gesamtbereich befindet sich am oberen Rand ein Bereich, der jeweils zum Elternbereich 100px Abstand haben soll. Hierzu habe ich in HTML folgendes geschrieben:

    Code:
    <div class="B1"> 
      <div class="B11"></div>
      <div class="B12"></div>
    </div>
    und in CSS
    Code:
    .B1 &#123;
      position&#58; absolute;
      left&#58;     20px;
      right&#58;    20px;
      width&#58;    100%;
    &#125;
    
    .B11 &#123;
      width&#58;   100px;
      height&#58;  100px;
      postion&#58; relative;
      left&#58;    0px;
      top&#58;     0px;  
      background-image&#58; url&#40;file&#58;..\test.jpg&#41;;
    &#125;
    
    .B12 &#123;
      position&#58;          absolute;
      left&#58;              0px;
      top&#58;               0px;
      display&#58;           block;
      width&#58;             100%;
      height&#58;            16px;
      padding-left&#58;      100px;
      padding-right&#58;     100px;
      background-color&#58;  #FF0000;
    &#125;
    Der Bereich wir auch am oberen Elternbereich plaziert, nur die Grösse erstreckt sich nicht über den gesamten des Elternfensters, sondern hat nur eine Gesamtlänge von 200px (Padding-left + Padding-right).

    Wie kann ich es aber hinbekommen, dass B12 an der Breite von B1 mit jeweils einem Rand von 100px ausgerichtet wird.
    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 !!!!!

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

    Standard

    Nimm mal bei B1 und B12 das "position:absolute;" raus, dann sollte es gehen.
    Zum Rand: Da hast du padding-left/right (innerer Abstand) mit 100px angegeben. Wenn das so passt ist's gut. Ansonsten für den äußeren Rand margin-left/right mit 100px angeben.

  3. #3
    Gast

    Standard

    Sorry, aber weist du wovon du redest?
    Wenn ich abosulte rausnehmen würde, dann würde es unter E1 positioniert werden. Es soll aber am oberen Rand und mit der Breite - linker Rand - rechter Rand von E1 positioniert werden.

  4. #4
    Gast

    Standard

    Sorry habe mich vertippt hier nochmal der korrekte Text:

    Wenn ich abosulte rausnehmen würde, dann würde es unter B11 positioniert werden. Es soll aber am oberen Rand und mit der Breite - linker Rand - rechter Rand von B1 positioniert werden.

  5. #5
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

    Wenn du mehrere Elemente absolut positionierst, dann werden die wie Layer übereinander gelegt (was ja der Sinn der absoluten Positionierung ist).

    In deinem Fall empfielt sich, das ganze mit (unsichtbaren) Tabellen zu lösen, schließlich wurden die -entgegen der Behauptung einiger User- extra dafür ins HTML aufgenommen.

    Ansonsten mußt du versuchen es mit relativer Positionierung hinzubasteln.

    G.a.d.M.

    Ronald

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

    Standard

    @Gast:
    meinst du so?

    CSS
    Code:
    .B1 &#123;
      position&#58; absolute;
      margin-left&#58;     20px;
      margin-right&#58;    20px;
      width&#58;    100%;
      background-color&#58;#999999;
    &#125;
    
    .B11 &#123;
      width&#58;   100px;
      height&#58;  100px;
      postion&#58; relative;
      left&#58;    0px;
      top&#58;     0px;
      background-color&#58;green;
    &#125;
    
    .B12 &#123;
      position&#58;          ;
      margin-left&#58;       100px;
      margin-right&#58;	    100px;
      top&#58;               0px;
      display&#58;           block;
      width&#58;             100%;
      height&#58;            16px;
      padding-left&#58;      100px;
      padding-right&#58;     100px;
      background-color&#58;  #FF0000;
    &#125;
    HTML
    Code:
    <div class="B1">
     <div class="B12">B12</div>
      <div class="B11">B11</div>
    </div>

  7. #7
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wie wäre es mit "position:relative" ?

  8. #8
    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

    Zitat Zitat von Anonymous
    Sorry, aber weist du wovon du redest?
    Ich finde es immer wieder klasse wie dankbar einige Menschen sind, wenn man versucht ihnen zu helfen.....

Ähnliche Themen

  1. Textabsätze ausrichten
    Von Guest im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 12.10.2006, 14:38
  2. Tabelle ausrichten
    Von Nemesis im Forum HTML & CSS Forum
    Antworten: 15
    Letzter Beitrag: 07.12.2005, 11:44
  3. iframe ausrichten
    Von FR0SCH im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 24.04.2005, 22:01
  4. Antworten: 2
    Letzter Beitrag: 24.02.2005, 01:35
  5. Bilder ausrichten
    Von Don P im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 06.04.2004, 00:03

Stichworte

Berechtigungen

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