Brauche CSS Hilfe

Thema wurde von dusticelli, 19. Januar 2012 erstellt.

  1. dusticelli
    dusticelli Erfahrener Benutzer
    Registriert seit:
    27. April 2011
    Beiträge:
    310
    Danke erhalten:
    21
    Danke vergeben:
    27
    #1 dusticelli, 19. Januar 2012
    Zuletzt bearbeitet: 19. Januar 2012
    Hallo Leute,

    ich bin am verzweifeln. Ich kriege es einfach nicht hin. Bestimmt sieht ein Profi mit einbem Blick woran es liegt.

    Ich möchte in einem Div Container 4 weitere boxen (divs) positionieren. Egal was ich auch mache, in Dreamweaver sieht es immer ok aus, sobald ich es im Browser ansehe sind 3 der Boxen (im Beispiel die xx-preview) immer entweder ganz verschwunden, oder was mich am meisten wurmt, sie sind zwar da, aber die Angaben zur Größe und zum Hintergrund werden komplett ingnoriert.

    Ich bin mit meinem Latein am Ende.

    Hier 2 Bilder für die bessere Erklärung:

    1. Der Code und die Ansicht im Dreamweaver
    css-prob-screen1.jpg

    2. Das Ergebnis im Browser
    css-prob-screen2.jpg

    und damit der willkommene Helfer nicht (zuviel) tippen muss hier nochmal der Code:

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    
    <style type="text/css">
    #gallery-wrapper {
        background-color: #CCC;
        height: 960px;
        width: 960px;
        clear:both;
    }
    #main-picture {
        background-color: #FFC;
        height: 650px;
        width: 650px;
        float:right;
    }
    #1st-preview {
        background-color: #FCC;
        height: 150px;
        width: 150px;
    }
    #2nd-preview {
        background-color: #F9C;
        height: 150px;
        width: 150px;
    }
    #3rd-preview {
        background-color: #9CC;
        height: 150px;
        width: 150px;
    }
    </style>
    </head>
    
    <body>
    <div id="gallery-wrapper">das Gallery wrapper
    <div id="main-picture">Mein Hauptbild</div>
    <div id="1st-preview">erste Vorschau</div>
    <div id="2nd-preview">zweite Vorschau</div>
    <div id="3rd-preview">dritte Vorschau</div>
    </div>
    Bitte helft, einem armen verzweifelten Bastler ... :(


    OK, ich glaube ich habe es gefunden.

    Diese css id's

    #1st-preview
    #2nd-preview

    usw. bewirken es wohl. Ohne die Suffixe 1st, 2nd usw, darf man wohl für den Zweck nicht verwenden.

    OK, kann geschlossen werden!
     
  2. Merlyn Design
    Merlyn Design Erfahrener Benutzer
    Registriert seit:
    3. Juni 2011
    Beiträge:
    664
    Danke erhalten:
    162
    Danke vergeben:
    24
    Füge in die Div's 1st-preview, 2nd-preview 3rd-preview mal ein float: left; ein.
    Das sollte schon funktionieren.
     
  3. Moritz (Gambio)
    Moritz (Gambio) Administrator
    Registriert seit:
    26. April 2011
    Beiträge:
    5.786
    Danke erhalten:
    2.693
    Danke vergeben:
    903
    Ich glaub ein CSS-Selektor darf nicht mit einer Zahl beginnen, sondern nur mit einem Buchstaben.
     
  4. Merlyn Design
    Merlyn Design Erfahrener Benutzer
    Registriert seit:
    3. Juni 2011
    Beiträge:
    664
    Danke erhalten:
    162
    Danke vergeben:
    24
    Ah, noch was aufgefallen.

    Kannst Dir doch Arbeit sparen.

    Schreib einfach:
    Code:
    [COLOR=#000080]<div id=[COLOR=#0000FF]"gallery-wrapper"[/COLOR]>[/COLOR]das Gallery wrapper [COLOR=#000080]
    <div id=[COLOR=#0000FF]"main-picture"[/COLOR]>[/COLOR]Mein Hauptbild[COLOR=#000080]</div>[/COLOR] [COLOR=#000080]
    <div id=[COLOR=#0000FF]"1st-preview"[/COLOR]>[/COLOR]erste Vorschau[COLOR=#000080]</div>[/COLOR] 
    [COLOR=#000080]<div id=[COLOR=#0000FF]"[/COLOR][/COLOR][COLOR=#000080][COLOR=#0000FF]1st-preview[/COLOR][/COLOR] [COLOR=#000080][COLOR=#0000FF]"[/COLOR]>[/COLOR]zweite Vorschau[COLOR=#000080]</div>[/COLOR] [COLOR=#000080]
    <div id=[COLOR=#0000FF]"[/COLOR][/COLOR][COLOR=#000080][COLOR=#0000FF]1st-preview[/COLOR][/COLOR][COLOR=#000080][COLOR=#0000FF]"[/COLOR]>[/COLOR]dritte Vorschau[COLOR=#000080]</div>[/COLOR] 
    [COLOR=#000080]</div>[/COLOR]
    
    Wenn Du dreimal die gleichen Abmessungen für die Boxen verwendest reicht doch einmal definieren aus. Die Inhalte kannst Du doch dann variieren.
     
  5. dusticelli
    dusticelli Erfahrener Benutzer
    Registriert seit:
    27. April 2011
    Beiträge:
    310
    Danke erhalten:
    21
    Danke vergeben:
    27
    Super Danke Ihr beiden, für die schnelle Hilfe.

    Floats und alles hatte ich ausprobiert. Immer das gleiche Ergebnis. Es lag tatsächlich daran:

    Id's Bezeichnungen geändert und es fluppt!