Sie sind nicht angemeldet.

    • [Hilfe: (x)HTML/CSS] Content mit Verlauf dynamisch coden?

    • hobbeLe

      Aufsteiger

      • »hobbeLe« ist der Autor dieses Themas

    • Beiträge: 129

      Aktivitätspunkte: 740

      Registrierungsdatum: 29. September 2009

      Wohnort: BaWü

      Beruf: Informationselektroniker

      Danksagungen: 0 / 6

      • Nachricht senden

    1

    Montag, 23. August 2010, 23:03

    Content mit Verlauf dynamisch coden?

    Hey Leute ich passe grad ein Design an Wordpress an!

    Jetzt hab ich nur das problem das mein Designer den Content Hintergrund mit nem schönen verlauf designed hat o_0

    Jetzt meine Frage wie würdet ihr das am besten umsetzen das dieser nachher schön dynamisch ist und sich ganz brav nach unten repeatet!?!?!

    Der Verlauf muss nur am anfang sein! also nach unten kann alles weiß bleiben nur oben sollte der verlauf drinne bleiben! ;)

    Bitte helft mir ich bin shcon am verzweifeln :(

    mfg hobbeLe

    //EDIT:

    Ja und das ist der hintergrund des Content's ;)

    2

    Dienstag, 24. August 2010, 01:25

    Peace!

    Teil das Bild in 2 Stücke:

    1. Bild ist das mit dem Verlauf, verlänger es auf 4-5000 Pixel, weil es nur weiß ist wird die Dateigröße sich kaum ändern.
    2. Bild ist ein span Container mit der Rundung drin

    Quellcode

    		 
    1
2
3
4
5
6

    <div id="c_wrapper">
	<div id="content" style="background:url('bild/pfad') no-repeat;">
	Inhalt
	</div>
<span style="background:url('bild/pfad') no-repeat;"></span>
</div>


    Am CSS musst du halt noch mit Breite, Float, Display und Clear spielen... ansonsten sollte die Grundstruktur schon genug verraten.

    Viel Erfolg!
    • hobbeLe

      Aufsteiger

      • »hobbeLe« ist der Autor dieses Themas

    • Beiträge: 129

      Aktivitätspunkte: 740

      Registrierungsdatum: 29. September 2009

      Wohnort: BaWü

      Beruf: Informationselektroniker

      Danksagungen: 0 / 6

      • Nachricht senden

    3

    Dienstag, 24. August 2010, 02:48

    heyho vielen vielen dank hat geklappt!

    auf die idee wäre ich glaube ich nie gekommen ^^

    Danke dir mfg hobbeLe
    • 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, 24. August 2010, 08:45

    Eigentlich brauchst du es nicht auf 4-5000px verlängern, wenn du der Bild einfach eine feste Höhe gibst und dann noch eine Hintergrundfarbe vergibst, dann stört das passt das genau.

    Die grafik kannste dann auch 1px breit machen und nach links-rechts auf repeat setzen. Dann sparste dir eine menge an daten ein.

    5

    Dienstag, 24. August 2010, 14:25

    Du könntest das ganze auch mit CSS3 machen.
    Das würde in etwas so aussehen.

    Quellcode

    		 
    1
2
3
4
5

      height: 100px;
  background-color: #1a82f7;
  background: url(images/linear_bg_2.png);
  background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

    Das müsstest du jetzt nur noch ein wenig anpassen. :)

    MfG Grievous
    currently: Visual C#

    next tutorials: JOIN Operations, CREATE Procedure

    skills: (x)HTML, CSS(3), PHP, SQL, Java, Haskell, Prolog

    JSnake: 95%

    JMinesweeper: 30%
    • 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, 24. August 2010, 14:50

    Zitat von »Grievous«

    Du könntest das ganze auch mit CSS3 machen.
    Das würde in etwas so aussehen.

    Quellcode

    		 
    1
2
3
4
5

      height: 100px;
  background-color: #1a82f7;
  background: url(images/linear_bg_2.png);
  background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

    Das müsstest du jetzt nur noch ein wenig anpassen. :)

    MfG Grievous

    Problem dabei ist halt nur wenn es kompatible zu anderen browsern wie der ie6 sein soll. ist ebend die Frage der zielgruppe usw.

    7

    Dienstag, 24. August 2010, 15:27

    Für den IE gibt es immernoch einen Filter. Ich weiß aber nicht genau ab welcher Version des IEs dieser kompatibel ist.

    Quellcode

    		 
    1

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
    currently: Visual C#

    next tutorials: JOIN Operations, CREATE Procedure

    skills: (x)HTML, CSS(3), PHP, SQL, Java, Haskell, Prolog

    JSnake: 95%

    JMinesweeper: 30%
    • 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

    8

    Dienstag, 24. August 2010, 15:34

    Zitat von »Grievous«

    progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

    hm, also ich würde dann doch ehr zur alten variante greifen mit 1xX grafik und einer hintergrundfarbe. Das sollte auch der ie6 verstehen.

    9

    Dienstag, 24. August 2010, 15:41

    Ich selber würde sowas wie den IE6 sowieso verbieten. Also so mache ich es jedenfalls. Und eine Grafik sollte man sowieso immer dabei haben, als Fallbackimage.

    Aber für hobbeLe ist es vielleicht am einfachstens wenn er wie du gesagt hast eine Grafik benutzt.
    currently: Visual C#

    next tutorials: JOIN Operations, CREATE Procedure

    skills: (x)HTML, CSS(3), PHP, SQL, Java, Haskell, Prolog

    JSnake: 95%

    JMinesweeper: 30%
    • hobbeLe

      Aufsteiger

      • »hobbeLe« ist der Autor dieses Themas

    • Beiträge: 129

      Aktivitätspunkte: 740

      Registrierungsdatum: 29. September 2009

      Wohnort: BaWü

      Beruf: Informationselektroniker

      Danksagungen: 0 / 6

      • Nachricht senden

    10

    Mittwoch, 25. August 2010, 14:46

    Naja das mit dem 1en pixel ist nicht soo leicht!
    Ich hab nen VERLAUF !!! ;)

    Und die methode von Grievous find ich zwar nice nur gibts halt probleme mit den browsern und natürlich auch mit der Validierung

    Ich will doch ein Valides CSS :P

    Da ist die Methode von Baem schon die beste! ich hab meinen verlauf drinne und die datei ist trotz 5000px höhe "nur" 20kb groß!

    mfg hobbeLe
    • 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

    11

    Mittwoch, 25. August 2010, 15:58

    Zitat von »hobbeLe«

    Naja das mit dem 1en pixel ist nicht soo leicht!
    Ich hab nen VERLAUF !!! ;)

    Und die methode von Grievous find ich zwar nice nur gibts halt probleme mit den browsern und natürlich auch mit der Validierung

    Ich will doch ein Valides CSS :P

    Da ist die Methode von Baem schon die beste! ich hab meinen verlauf drinne und die datei ist trotz 5000px höhe "nur" 20kb groß!

    mfg hobbeLe

    Wo ist der Problem mit 1px?
    du sollst doch einfach nur 1px breite und höhe, naja so wie dein verlauf ist. Dann sparste dir die 20kb und die RIESEN datei.
    Ein Problem wirst du vorallen bekommen wenn die Seite länger als 5000px ist, dann darfste die Datei neu machen und das kostet Zeit und ist unnötig.
    5000px erreicht man auch locker mal wenn man z.B. einen Blog betreibt und sehr lange news hat und dann auchnoch 10 davon auf einer Seite oder so.
    • hobbeLe

      Aufsteiger

      • »hobbeLe« ist der Autor dieses Themas

    • Beiträge: 129

      Aktivitätspunkte: 740

      Registrierungsdatum: 29. September 2009

      Wohnort: BaWü

      Beruf: Informationselektroniker

      Danksagungen: 0 / 6

      • Nachricht senden

    12

    Mittwoch, 25. August 2010, 16:09

    Ja aber wie willst du mit nur 1px einen 150px hohen verlauf hinbekommen der sich dann weiß nach unten wiederholt?
    Ich müsste ja so 2 Bilder nehmen 1x Verlauf und 1x das 1px bild aber dann ist im verlauf ja gar kein inhalt sondern erst bei dem 1px Bild ;)

    Also entweder bin ich jetzt total verwirrt oder du verstehst mich nich ^^
    aber ich lasse mich gerne eines besseren belehren ;)

    mfg hobbeLe
    • 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

    13

    Mittwoch, 25. August 2010, 16:45

    Du definierst deine Hintergrundgrafik, beispiel 1px x 150px. Die lässt du auf der x-achse wiederholen und dann definierst du für alles was nach den 150px kommen soll eine farbe, in deinem fall weiss. Die farbe definierst du einfach als hintergrundfarbe.
    fertig ist das ganze, weiss net so ganz wo das problem dabei ist.
    • hobbeLe

      Aufsteiger

      • »hobbeLe« ist der Autor dieses Themas

    • Beiträge: 129

      Aktivitätspunkte: 740

      Registrierungsdatum: 29. September 2009

      Wohnort: BaWü

      Beruf: Informationselektroniker

      Danksagungen: 0 / 6

      • Nachricht senden

    14

    Mittwoch, 25. August 2010, 16:49

    Zitat von »F3rk3S«

    weiss net so ganz wo das problem dabei ist.


    Der Inhalt!

    Wie sag ich jetzt meinem inhalt hey du startest im verlauf und gehst dann auf das nächste div und wiederholst das div soweit du es brauchst ^^

    das ist das problem ;)

    oder hast mir da noch ne gute lösung? Ich will ja das der Text (Inhalt / Content) im verlauf anfängt und dann immer weiter und weiter geht!

    mfg hobbeLe
    • 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

    15

    Mittwoch, 25. August 2010, 17:11

    Ja und dem Div wo der Text drin ist gibste das hintergrund bild und die hintergrundfarbe, fertig.
    musst dann nur deinem div sagen das er sich nach dem Inhalt des Textes richten soll, aber das haste ja schon denke ich.
    • hobbeLe

      Aufsteiger

      • »hobbeLe« ist der Autor dieses Themas

    • Beiträge: 129

      Aktivitätspunkte: 740

      Registrierungsdatum: 29. September 2009

      Wohnort: BaWü

      Beruf: Informationselektroniker

      Danksagungen: 0 / 6

      • Nachricht senden

    16

    Mittwoch, 25. August 2010, 17:26

    joa aber ich hab ja 2 divs

    und ich kann den text ja nicht durch 2 divs laufen lassen

    naja ist ja jetzt auch egal ;)
    es läuft soo wie ich es jetzt hab ^^

    mfg hobbeLe

    Ähnliche Themen

    Verwendete Tags

    Coding, CSS, verlauf, Wordpress, xhtml

    • 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