Designumsetzung mit CSS

Diskutiere Designumsetzung mit CSS im Webmaster Hilfe / Programmierer Forum Forum im Bereich Computerprobleme; 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...

  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. Anzeige

    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. 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 :/
     
  11. #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...
     
  12. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    Es gibt nur gewisse/vereinzelte Situationen, wo Prozente angebracht sind. Aber allgemein sollte man besser mit Fixen werten arbeiten, da man sonst eine Homepage auf x auflösungen konfigurieren muss. Nimmt man z.B. einen Prozentwert, setzt ein Bild in diese Div, fixiert dies auf eine Fixe grösse, sieht das ziemlich "schlecht" aus.

    Wie gesagt, es kann in vereinzelten Situationen nütlich sein. (z.B. bei der höhe, aber in der Breite sicherlich nicht.)
     
  13. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    @blaxxun
    vllt kannst du mir ja helfen, aber ich hab einfach keine idee wie ich das gefloatet kriegen soll, mir scheint fast, als sei die komponente (die die gefloatet werden sollte, immer als ganzes stück integriert!!!, laesst sich also nicht floaten), hier mal ein ausschnitt:

    Das Problem ist jetzt, es gibt hier ein div "content" auf diesem liegt das component, und der inhalt der gefloatet werden soll liegt auch in component, wiederum soll dieser um left floaten ~.~ ich hab einfach keine ahnung wo ich nun was hinschieben müsste (hierarchie) bzw welcher div die eigenschaft float braeuchte!
     
  14. #13 Blaxxun, 22.12.2010
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Da kann ich dir auch nicht helfen, wie gesagt ich hasse Joomla und hab mich auch schon seit 2-3 Jahren nicht mehr damit beschäftigt.
    Aber ich empfehle dir das FF-Plugin Firebug, für andere Browser heißt es anders. Damit kannst du relativ leicht sehen welcher Div gefloatet werden muss. Einfach die Seite im Browser aufrufen und Firebug aufklappen, dann das 2. Icon von rechts nutzen. Ein Viereck mit dem Mauszeiger drin, alles weitere ergibt sich.

    @dilser, gut wnen man damit nicht umgehen kann sollte man es natürlich lassen...
     
  15. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Oh also erstmal vielen dank für den Tipp!! Das ist ja Gold wert :)

    Ich habe durch das Tool rausgefunden, dass es sich um den Inhalt, den ich gerne floaten würde um eine Table handelt, ich weiß nicht, aber ich glaube Tables kann man nicht floaten oder?

    Hier mal ein Beispiel Textauszug:
    PHP:
    <div id="component"><div class="componentheading">
        
    Kurse und Workshops</div>
    <
    table class="blog" cellpadding="0" cellspacing="0">
    <
    tr>
        <
    td valign="top">
                        <
    div>
            
    <
    table class="contentpaneopen">
    <
    tr>
            <
    td class="contentheading" width="100%">
                        
    Videofreunde            </td>
        
            <
    td align="right" width="100%" class="buttonheading">
        <
    a href="/index.php?view=article&amp;catid=34%3Aaktiv-und-kreativ&amp;id=48%3Avideofreunde&amp;format=pdf&amp;option=com_content&amp;Itemid=63" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/images/M_images/pdf_button.png" alt="PDF"  /></a>    </td>
        
            <
    td align="right" width="100%" class="buttonheading">
        <
    a href="/index.php?view=article&amp;catid=34%3Aaktiv-und-kreativ&amp;id=48%3Avideofreunde&amp;tmpl=component&amp;print=1&amp;layout=default&amp;page=&amp;option=com_content&amp;Itemid=63" title="Drucken" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/images/M_images/printButton.png" alt="Drucken"  /></a>    </td>
        
            <
    td align="right" width="100%" class="buttonheading">
        <
    a href="/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovL2xvY2FsaG9zdC9pbmRleC5waHA/b3B0aW9uPWNvbV9jb250ZW50JnZpZXc9YXJ0aWNsZSZpZD00ODp2aWRlb2ZyZXVuZGUmY2F0aWQ9MzQ6YWt0aXYtdW5kLWtyZWF0aXYmSXRlbWlkPTYz" title="E-Mail" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/images/M_images/emailButton.png" alt="E-Mail"  /></a>    </td>
               </
    tr>
    </
    table>
    <
    table class="contentpaneopen">
     
  16. #15 Blaxxun, 23.12.2010
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    <table class="contentpaneopen">

    Diese Tabelle? Dann sprech sie doch einfach über CSS an.

    .contentpaneopen { ... }

    Eine Tabelle ist nämlich auch erstmal in seiner Gesamtheit als BlockElement zubetrachten, die kann man bekanntlich alle Float. Zur Not machst dus dir einfach zu einem BlockElement mittels display: block;

    Du kannst übrigens mit Firebug auch den Quelltext und CSS bearbeiten, damit kannsts du ziemlich schnell viel rumprobieren ohne ewiges speichern und F5 drücken.
     
  17. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Man kann das direkt bearbeiten? Wie denn das? Was ist wenn ich was falsches mache? Hat er das dann gleich gespeichert, oder ist das nur zum ausprobieren und muss ich das später dann selber manuell an die entsprechende Stelle schreiben und speichern?
     
  18. #17 Blaxxun, 23.12.2010
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Ja man kann ;)

    Rechts hast du ja die CSS Angaben des Elements, dass du grade ausgewählt hast, die kannst du verändern, löschen oder neue hinzufügen. Selbiges gilt für den HTML Code.

    Selbstverständlich wird das nicht gespeichert, es ist eine temporäre Veränderung, die beim nächsten Laden der Seite wieder verschwunden ist. Speichern musst du es dann selbst in den entsprechenden Dokumenten, du umgehst nur ständiges Speichern durch Ausprobieren.
     
  19. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Hey vielen dank, das ist ja cool.. mal sehn ob ich das Problem dann heute doch nochmal in den Griff bekomme ~.~
     
  20. Anzeige

    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.
  21. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Seufz, dass ist zum verzweifeln..
    Im Endeffekt probier ich einfach nur aus "alles" auf Float zu setzen..
    Das ist halt das Problem wenn man nicht weiß was man machen muss, sinnloses ausprobieren hilft eher in seltenen Fällen ^^'
     
  22. #20 Blaxxun, 23.12.2010
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Eine weitere coole Sachen ist z.B. die Webdeveloper Toolbar (leider nicht für FF4 verfügbar)
     
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]-->...