Designumsetzung mit CSS

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von Lotus, 21.12.2010.

  1. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Servus, ich wollte mal ein Design umsetzen, nach dem folgenden Schema:

    [​IMG]

    Es geht hauptsächlich um den grünen und orangen Bereich(also left und content).
    Ich würde gerne, dass der Content um den Bereich des grünen "fließt", ich weiß nicht wie ichs noch besser erklären soll, das Bild sagt eigentlich alles.

    Wenn ich es in Text wiedergeben sollte, dann müsste das ganze so aussehen:

    LEFT LEFT LEFT TEXT TEXT TEXT TEXT
    LEFT LEFT LEFT TEXT TEXT TEXT TEXT
    LEFT LEFT LEFT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT


    Aber LEFT soll wirklich ein eigener Bereich (wahrscheinlich div) sein und nicht nur ein Bild oder so..
    Geht sowas umzusetzen? Wenn ja, könnt ihr mir helfen wie?

    Ich sag schonma danke!
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. #2 Blaxxun, 21.12.2010
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Ja geht. Was hast du den bisher schon?
     
  4. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Ich weiß das das ganze mit Float sich umsetzen lassen sollte, aber ich kriegs bei nem ganz simplen code nichtmal hin, geschweige denn in meinem projekt :/

    Code:
    <html>
    <head>
    </head>
    <body>
    <div id="left" style="float:left; width:10%">
            LEFT<br>LEFT<br>LEFT
        </div>
    
        <div id="content">
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        </div>
    </body>
    </html>
    
    Dachte eigentlich das die jetzt nebeneinander sein müssten, aber die stehen untereinander, irgendwie scheinen sich die divs mit dem float nicht zu vertragen? :/
     
  5. #4 Blaxxun, 21.12.2010
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Momentan ist doch genau das erreicht was du möchtest oder hab ich dich falsch verstanden? Der Text von #content fließt um #left herum.

    Selbiges wäre allerdings noch besser zu erreichen indem du es so machst:
    HTML:
    <html>
    <head>
    </head>
    <body>
        <div id="content">
    <div id="left" style="float:left; width:10%">
            LEFT<br>LEFT<br>LEFT
        </div>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        </div>
    </body>
    </html>
    
     
  6. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    HTML:
    <html>
    <head>
    </head>
    <body>
        <div id="banner"></div>
    <div id="navi"></div>
    <div id="content">
    <div id="left" style="float:left; width:100px">
            LEFT<br>LEFT<br>LEFT
        </div>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        außerhalb<br>
        </div>
    </body>
    </html> 
    
    ACHTUNG: CSS ist nun nicht verlagert. Ich rate dir jedoch, css jeweils in eine andere Datei umzulagern.

    Von % Angaben rate ich dir persönlich ab.
     
  7. #6 Blaxxun, 21.12.2010
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Begründung?
     
  8. #7 simpson-fan, 21.12.2010
    simpson-fan

    simpson-fan Erfahrener Benutzer

    Dabei seit:
    12.04.2006
    Beiträge:
    3.581
    Zustimmungen:
    0
    Moin!

    Es kommt natürlich drauf an, was denn nun in die Box soll. Aber in den meisten Fällen ist denke ich eine fixe Breite besser. Wahrscheinlich soll der Bereich immer gleich groß sein und bei kleinen Browserfenster (Handys, Netbooks) bzw. sehr großen kann eine prozentuale Breite schnell in die Hose gehen.

    Die Designelemente würde ich auch in eigene Datei schreiben. Das geht wie folgt. Du erstellst eine Datei mit dem Namen (z.B. style.css). Du musst dann im head-Bereich der Datei auf diese Datei verknüpfen.

    Code:
    <link rel="stylesheet" type="text/css" href="style.css">
    Nun kannst du mit class="" einem Element (z.B. div) einen Klassennamen zuordnen und den dann in der CSS-Datei genau beschreiben. Das hat mehrere Vorteile. 1. übersichtlicher, 2. du sparst dir doppelte Arbeit und 3. du musst nicht im Code rumfummeln wenn du nur am Design was ändern willst. Heutzutage sollte man Design und Code einfach grundsätzlich trennen.

    Gruß simpson-fan
     
  9. #8 Blaxxun, 22.12.2010
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    @simpson-fan
    Das klang für mich nach einer Absoluten Ablehnung von prozentualen Angaben was imho total schwachsinnig ist, denn manchmal braucht man eben eine prozentuale Berechnung von Breiten oder Höhen. Das allgemein abzuschlagen halte ich für Schwachsinn, zumal sich die Breite auch auf ein Eltern-Element beziehen kann, dass ein fixe Breite hat. Demnach die Berechnung relativ zum Eltern-Element geschieht, wenn diese Breite dann dynamisch ist...
    Du siehst also wo das hinführt und die Aussage halte ich unbegründet einfach weiterhin für schwachsinnig.
     
  10. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  11. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Hey hey nur die Ruhe jungs ;) Das war ja alles lediglich zum testen, da wollte ich mir so wenig mühe wie möglich machen, darum auch kein ausgelagertes css etc ;)

    Mittlerweile funzt das ganze mit so einer einfachen Datei / Webcode...
    Allerdings wollte ich das ganze in Joomla umsetzen und das bringt/macht mir richtig feuer unterm hintern.. Mittlerweile befürchte ich, dass ich mich geschlagen geben muss :/
     
  12. #10 Blaxxun, 22.12.2010
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Joomla Templates bestehn auch nur aus HTML und CSS. Was ist den das Problem, weißt du nicht genau wie du da anfangen musst?
    Ich mag ja bekanntermaßen Joomla nicht.
    In Wordpress ist es mehr als einfach eigenes Templates zu erstellen. Ich empfehle dazu immer den Standardstyle zu nehmen, kopieren, umbennen und dann in diesem Anfang gewünschte Änderungen vorzunehmen, seien es Kleinigkeiten oder komplette Änderungen. Aber dadurch ist man sich sicher, dass man quasi nichts vergisst und vorallem nichts kaputt machen kann.
    Könnte mir bei Joomla eine ähnliche Vorgehensweise vorstellen.
    Schwieriger ist es nicht, nur mehr Arbeit ;)

    So und nachdem ich mich heute und gestern zu Tode gearbeitet habe geh ich mal ins Bett. Hab nur noch JS und PHP vor Augen...
     
Thema:

Designumsetzung mit CSS

Die Seite wird geladen...

Designumsetzung mit CSS - Ähnliche Themen

  1. CSS Auflösung inakzeptabel!

    CSS Auflösung inakzeptabel!: Hey liebe Community, ich habe vor kurzem mein BS neu aufgespielt, vorher war dort Win 8 Pro 64 Bit installiert, leider musste ich aber aufgrund...
  2. Spezielle Navigation (Html / Css)

    Spezielle Navigation (Html / Css): Wunderschönen Guten Abend. Ist es möglich das Menü von dieser Seite Musicbase.fm - Clubsection ohne JavaScript, also nur mit HTML & CSS, zu...
  3. CSS externe methode

    CSS externe methode: Hey leute ich lerne gerade CSS und bei der ecternen methode wird die style.css nicht ausgelesen was mach ich falsch? Code: <!DOCTYPE HTML PUBLIC...
  4. Css sheet

    Css sheet: Guten Tag, Ich würde gerne wissen, ob es ein schnelles und kostenloses System wie ein Software oder einen Dienst auf einer Website, die schnell...
  5. CSS Auslagern in IE

    CSS Auslagern in IE: Guten Abend, habe vor einigen Tagen diesen Code gefunden: <!--[if IE 6]><style type="text/css">@import url(/style/css/ie6.css);<![endif]-->...