Sie sind nicht angemeldet.

    • [Hilfe: (x)HTML/CSS] Linien in Design

    1

    Dienstag, 21. Juni 2011, 09:59

    Linien in Design

    Hallo, ich habe ein design erstellt und möchte dies nun coden...
    meine frage ist, wie setze ich diese linien im design am besten um? ich habe eine solche aufteilung schon mal http://www.ea-gmbh.de/ gesehen, aber weiss nciht, wie die das umsetzen.

    mfg basteln

    Meine Webseite: Perspektive-S.de
    Jetzt in neuem Design und neu Kommentiert, innovativ und einfacher! schaut doch mal vorbei und lasst komments da =) gerne auch "banner"-tausch =)
    • F3rk3S

      Tutorial-Team-Leiter

    • Beiträge: 494

      Aktivitätspunkte: 2 560

      Registrierungsdatum: 7. Februar 2010

      Wohnort: Berlin

      Beruf: Mediengestalter in Digital- und Printmedien

      Danksagungen: 150 / 8

      • Nachricht senden

    2

    Dienstag, 21. Juni 2011, 10:15

    Also den Header kannst du in 2 divs anlegen. Dem div mit dem Logo kannst du dann einfach einen border-right geben. Die Linie darunter kannst du entweder mit einer hr lösen oder in dem du beiden divs einen border-bottom gibst. Allerdings weiß ich nicht ob die dann perfekt zusammen laufen.

    Das selbe kannst du für die Linke Navigation machen. dort musst du die Box dann nur in der Höhe weiter nach unten laufen lassen, oder du nutzt einfach einen weiteren div darunter.

    Die Linien unter den Überschriften sind dann wieder nur divs die du auf eine breite setzt und dafür einen border-bottom vergibst.

    So würde ich das ganze warscheinlich lösen, gibt aber noch andere Möglichkeiten die die anderen bestimmt noch posten werden.

    Ausserdem lässt es sich auch in Tabellen lösen, auch wenn es nicht gerne gesehen wird aber ich weiß natürlich nicht wie deine aktuellen Möglichkeiten sind.

    3

    Dienstag, 21. Juni 2011, 11:48

    okay, ich glaube ich werde es nochmal umdesignen, da ich nur probleme vermute :D
    tabellen kommen mir nicht in ein design, solange sie nciht wirklich als tabelle verwendet werden.

    danke für deine vorschläge =)
    mfg basteln

    Meine Webseite: Perspektive-S.de
    Jetzt in neuem Design und neu Kommentiert, innovativ und einfacher! schaut doch mal vorbei und lasst komments da =) gerne auch "banner"-tausch =)
    • F3rk3S

      Tutorial-Team-Leiter

    • Beiträge: 494

      Aktivitätspunkte: 2 560

      Registrierungsdatum: 7. Februar 2010

      Wohnort: Berlin

      Beruf: Mediengestalter in Digital- und Printmedien

      Danksagungen: 150 / 8

      • Nachricht senden

    4

    Dienstag, 21. Juni 2011, 12:00

    Wieso umdesignen? Ist doch leicht das zu programmieren, selbst für mich der nun nicht tagtäglich am Programmieren ist würde das machbar sein.

    Allerdings würde ich es aus grafischer sicht umdesignen ja :)

    5

    Dienstag, 21. Juni 2011, 12:07

    ja, ich habe soetwas schoneinmal versucht und da hatte ich dann das problem, dass sich linien etc verschoben haben und noch andere sachen, egal, was sagst du denn zum design, ich überlege gerade, wie ich es ändenr kann =)

    ps: kann den threat bitte jmd. in WIP verschieben?
    mfg basteln

    Meine Webseite: Perspektive-S.de
    Jetzt in neuem Design und neu Kommentiert, innovativ und einfacher! schaut doch mal vorbei und lasst komments da =) gerne auch "banner"-tausch =)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »basteln« (21. Juni 2011, 17:53)

    • F3rk3S

      Tutorial-Team-Leiter

    • Beiträge: 494

      Aktivitätspunkte: 2 560

      Registrierungsdatum: 7. Februar 2010

      Wohnort: Berlin

      Beruf: Mediengestalter in Digital- und Printmedien

      Danksagungen: 150 / 8

      • Nachricht senden

    6

    Dienstag, 21. Juni 2011, 17:33

    Naja das Design wirkt noch sehr flach. Es fehlen einfach die Details. Es wirkt mehr wie eine Grobskizze, wobei es sogar da welche gibst die interessanter wirken.
    Es wirkt einfach flach, langweilig und nicht ansprechend.

    Ist nicht böse gemeint sondern nur als Hinweis.

    7

    Dienstag, 21. Juni 2011, 17:45

    okay danke =)
    find ich gut, dass du klartext schreibst, nur so kann cih ja was ändern ^^
    ich sitze gerade ncoheinmal darüber, aber mir fehlen gerade ein paar ideen, wenn ich einen fortschritt erzielt habe, poste ich es ncoheinmal (:
    mfg basteln

    Meine Webseite: Perspektive-S.de
    Jetzt in neuem Design und neu Kommentiert, innovativ und einfacher! schaut doch mal vorbei und lasst komments da =) gerne auch "banner"-tausch =)

    8

    Dienstag, 21. Juni 2011, 20:13

    Divs sind Block Elemente und verursachen dadurch einen Absatz der die Linien verschieben würden, mit hr undn bisschen CSS dürfte das Funktionieren.
    • F3rk3S

      Tutorial-Team-Leiter

    • Beiträge: 494

      Aktivitätspunkte: 2 560

      Registrierungsdatum: 7. Februar 2010

      Wohnort: Berlin

      Beruf: Mediengestalter in Digital- und Printmedien

      Danksagungen: 150 / 8

      • Nachricht senden

    9

    Dienstag, 21. Juni 2011, 23:14

    Zitat von »BloodyInsane«

    Divs sind Block Elemente und verursachen dadurch einen Absatz der die Linien verschieben würden, mit hr undn bisschen CSS dürfte das Funktionieren.


    Also sollte die vertikale Linie ruhig als border-right drin sein eines divs und darunter eine hr?
    Würde der Border dann genau auf die hr laufen oder würde es da zu verschiebungen kommen? gibt es denn eine vr?

    10

    Dienstag, 21. Juni 2011, 23:37

    Ich hab mir jetzt nicht alles durchgelesen, wo ist das Problem?
    Das "Design", wobei hier Design eher relativ ist, ist in weniger als einer Stunde umgesetzt.

    Hier im Forum gibt es ein Tut mit "Simple Layout" Umsetzung in HTML und CSS, alles was du für diese Seite brauchst, wird in diesem Tutorial erklärt.

    http://www.grufix-board.de/board23-servi…-simple-layout/

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Mirschegal« (21. Juni 2011, 23:37)

    • wit

      You got served!

    • Beiträge: 251

      Aktivitätspunkte: 1 470

      Registrierungsdatum: 21. Juni 2011

      Wohnort: London

      Beruf: IT Consultant

      Danksagungen: 108 / 2

      • Nachricht senden

    11

    Mittwoch, 22. Juni 2011, 07:31

    Also von der Benutztung von dem hr-Tag rate ich ab! Wir reden hier von Stil und nicht von Layoutzwecken - daher ist HTML absolut ein No-No.

    In CSS gibt es das Attribut border.

    Quellcode

    		 
    1

    border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:1px solid #ddd;border-bottom:1px solid #ddd;


    Desweiteren sollte man sich das Box-Modell anschaun und ordentlich mit Floats, Margins, und Paddings arbeiten, dann ist es absolut kein Problem. Desweiteren sind diese Attribute seit anbeginn von CSS Standard und es sollte kein Problem sein, dass alle Browser und auch der IE verstehen was passieren soll :)
    Alles Gute,
    WIT :angel:


    PHP Nachschlagewerk: http://www.php.net
    Warum W3Schools *doof* ist : http://w3fools.com/
    Alles andere: http://www.google.com
    Wie man Fragen stellt: http://www.catb.org/~esr/faqs/smart-questions.html
    SMART GOALS: http://www.topachievement.com/smart.html

    Ähnliche Themen

    • Grufix-Board.de - GFX Webdesign Foto & Coding Community

    Grafik-Tutorials | Coding-Tutorials | Ressourcen | SEO | Webdesign | HTML5
    W3C Validator

    Forensoftware: Burning Board® 3.1.6, entwickelt von WoltLab® GmbH