| Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
| Autor |
Nachricht |
sYpro
Newcomer
Angemeldet: 06.11.2004
Beiträge: 10
|
 Verfasst am: 18.09.2007, 10:41 Titel:
Fließender Content überhaupt möglich? |
 |
|
|
|
Huhu,
Ich muss direkt zugeben das ich eine lange Zeit nichts mehr in diese Richtung gemacht habe und deswegen ein wenig eingestaubt bin.
Ich habe gestern mal wieder ein Design gemacht und wollte dieses auch mit HTML umsetzen.
Zuerst habe ich das mit den Tabellen die man nachdem man mit ImageReady gesliced hat bekommt gemacht, was nicht unbedingt sehr optimal ist.
Gestern habe ich mich dann noch ein wenig belesen und versucht das Ganze in CSS umzusetzen, was auch ganz gut geklappt hat.
Jetzt meine Frage: Dadurch das der Content einen Grau - Schwarzstufenverlauf nach unten hat habe ich es bischer nicht hinbekommen einen "fließenden" Content zu kreieren, also der sich automatisch vertikal erweitert , wenn mehr Inhalt reinkommt als das eigentliche Hintergrundbild groß ist.
Gibt es überhaupt eine Möglichkeit diesen "fließend" zu machen MIT dem Verlauf in dem Hintergrundbild, oder muss ich mein Design umgestalten?
Hier das Design mit CSS bearbeitet (vielleicht nicht sehr optimal gelöst, aber ich denke zur Veranschaulichung reichts):
http://www.anorya.net/projects/css-test.html
Danke schonmal fuer jede Hilfe!
byby |
|
| Nach oben |
|
 |
Impi
Mitglied
Angemeldet: 06.05.2006
Beiträge: 530
|
| Verfasst am: 18.09.2007, 13:03 Titel:
|
|
|
|
|
| Klaro! |
|
| Nach oben |
|
|
deLiTe.
Mitglied
Angemeldet: 16.09.2006
Beiträge: 504
Wohnort: Freiburg
Interessen: Eye-Candy
|
| Verfasst am: 18.09.2007, 13:54 Titel:
|
|
|
|
|
| Impi hat folgendes geschrieben: | | Klaro! |
Das hilft ihm sehr viel weiter.
Mach von dem Grauverlauf nen 1px breiten Durchschnitt und hau das in den Hintergrund
| Code: | #content {
background: #181819 url(Hintergrund.png) repeat-x left top;
} |
Die Grafik wiederholt sich dann in horizontaler Richtung, am oberen Rand der Box. Die Hintergrundfarbe entspricht dem untersten Pixel deines 1px breiten Durchschnitts so dass kein Übergang zwischen Hintergrundfarbe und -Bild zu sehen ist. |
|
| Nach oben |
|
|
nanos
Mitglied
Angemeldet: 04.06.2004
Beiträge: 1752
|
| Verfasst am: 18.09.2007, 14:32 Titel:
|
|
|
|
|
Mal nebenbei: Hat mal schnell jemand einen Link wie man sein Layout in CSS realisieren kann? Ist nämlich absolutes Neuland für mich... ich habs bislang auch immer nur mühevoll mit Tabellen zusammengeschustert  |
|
| Nach oben |
|
|
sYpro
Newcomer
Angemeldet: 06.11.2004
Beiträge: 10
|
| Verfasst am: 18.09.2007, 14:33 Titel:
|
|
|
|
|
Dankeschön.
Hat schonmal soweit gut funktioniert.
Folgendes weiteres Problem:
Im IE siehts gut aus. Er verschiebt den footer nach unten und wiederholt brav den Hintergrund.
Im Firefox kapiert er aber scheinbar nicht das er den footer weiter runter schieben soll. Der Text im Content wird einfach drüber geschoben über den footer.
Liegt das am Firefox , oder muss ich noch Browserspezifische Einstellungen vornehmen?
Vielen Dank schonmal
EDIT:
@nanos:
http://www.andreas-kalt.de/webdesign/tutorials/css-layout-erstellen |
|
| Nach oben |
|
|
Impi
Mitglied
Angemeldet: 06.05.2006
Beiträge: 530
|
| Verfasst am: 18.09.2007, 14:42 Titel:
|
|
|
|
|
| deLiTe hat folgendes geschrieben: | | Impi hat folgendes geschrieben: | | Klaro! |
Das hilft ihm sehr viel weiter.
Mach von dem Grauverlauf nen 1px breiten Durchschnitt und hau das in den Hintergrund
| Code: | #content {
background: #181819 url(Hintergrund.png) repeat-x left top;
} |
Die Grafik wiederholt sich dann in horizontaler Richtung, am oberen Rand der Box. Die Hintergrundfarbe entspricht dem untersten Pixel deines 1px breiten Durchschnitts so dass kein Übergang zwischen Hintergrundfarbe und -Bild zu sehen ist. |
Dein Lösungsansatz ist schon gut, aber es geht noch besser |
|
| Nach oben |
|
|
ShortY
Mitglied
Angemeldet: 04.06.2004
Beiträge: 556
Wohnort: Herdorf
Interessen: Glaube, MTB, klettern, Musik(hören und machen), Computer
|
| Verfasst am: 18.09.2007, 14:52 Titel:
|
|
|
|
|
da stellt sich mir nur noch eine Frage: "Was sucht der Thread hier im Grafik-Support  |
|
| Nach oben |
|
|
AEQUITAS
Mitglied
Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
| Verfasst am: 18.09.2007, 15:03 Titel:
|
|
|
|
|
| sYpro hat folgendes geschrieben: | Im IE siehts gut aus. Er verschiebt den footer nach unten und wiederholt brav den Hintergrund.
Im Firefox kapiert er aber scheinbar nicht das er den footer weiter runter schieben soll. Der Text im Content wird einfach drüber geschoben über den footer.
Liegt das am Firefox , oder muss ich noch Browserspezifische Einstellungen vornehmen? |
du musst dafür ein clear:left; einbauen, geht einfach mit <br />
also im prinzip einfach so ... <div id="menumitte">text blabla<br style="clear:left;" /></div> ist eine sichere methode, kannst aber auch mal versuchen, dass clear:left; in den footer einzubauen, da bin ich mir aber nicht so sicher, ob das so klappt.
ok ich seh grad, du hast die alle gefloatet, dann einfach das <br style="clear:left;" /> mal vor <div id="footer"> schreiben |
|
| Nach oben |
|
|
sYpro
Newcomer
Angemeldet: 06.11.2004
Beiträge: 10
|
| Verfasst am: 18.09.2007, 15:42 Titel:
|
|
|
|
|
Habe beides versucht. Leider frisst das Firefox nicht. Macht zwar den <br/> rein, aber schiebt den Text trotzdem über den footer.
Noch eine Idee?
| Code: |
<div id="menulinks" style="float:left; width:176px;"><img src="Bilder/index_12.gif"/><img src="Bilder/index_13.gif"/></div>
<div id="menumitte">
<p>awd </p><br style="clear:left;" /> </div>
<div id="menurechts" style="float:left; width:166px;"><img src="Bilder/index_15.gif"/></div>
<div id="footer"></div> |
|
|
| Nach oben |
|
|
AEQUITAS
Mitglied
Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
| Verfasst am: 18.09.2007, 16:04 Titel:
|
|
|
|
|
ja eine ganz simple.
mach einen <div> um die divs menulinks, mitte, rechts und dann zum schluss <br style="clear:left;" /></div>
so sollte es funktionieren! |
|
| Nach oben |
|
|
sYpro
Newcomer
Angemeldet: 06.11.2004
Beiträge: 10
|
| Verfasst am: 19.09.2007, 10:05 Titel:
|
|
|
|
|
Geht leider immer noch nicht  (
| Code: | <div id="container" align="left">
<div id="header"></div>
<div id="mainnav" style="float:left; width:1024px;"><img src="Bilder/index_02.gif" /><img src="Bilder/index_03.gif" /><img src="Bilder/index_04.gif" /><img src="Bilder/index_05.gif" /><img src="Bilder/index_06.gif" /><img src="Bilder/index_07.gif" /><img src="Bilder/index_08.gif" /><img src="Bilder/index_09.gif" /><img src="Bilder/index_10.gif" /></div>
<div id="contents"></div>
<div><div id="menulinks" style="float:left; width:176px;"><img src="Bilder/index_12.gif"/><img src="Bilder/index_13.gif"/></div><div id="menumitte">
<p>awd </p>
</div>
<div id="menurechts" style="float:left; width:166px;"><img src="Bilder/index_15.gif"/></div><br style="clear:left;" /></div>
<div id="footer"></div>
</div> <!-- /container --> |
|
|
| Nach oben |
|
|
AEQUITAS
Mitglied
Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
| Verfasst am: 19.09.2007, 14:11 Titel:
|
|
|
|
|
| Dann zeig mal bitte die Seite und ich schau mir das noch mal ganz genau an, also einen link am besten! |
|
| Nach oben |
|
|
Helmchen
Mitglied
Angemeldet: 01.04.2006
Beiträge: 65
|
| Verfasst am: 19.09.2007, 15:18 Titel:
|
|
|
|
|
Du solltest unter allen Umständen deinen Quelltext einrücken, denn das, was du uns präsentierst, ist ziemlich unleserlich.
Ich schließe mich dann auch Aequitas an und bitte Impi, doch mal seinen Vorschlag zum Thema Hintergrund zu beschreiben, weil er mich mit seinen Kommentaren doch ziemlich neugierig gemacht hat. |
|
| Nach oben |
|
|
sYpro
Newcomer
Angemeldet: 06.11.2004
Beiträge: 10
|
| Verfasst am: 19.09.2007, 16:13 Titel:
|
|
|
|
|
Ich hoffe der Code ist jetzt übersichtlicher.
| Code: | <div id="container" align="left">
<div id="header"></div>
<div id="mainnav" style="float:left; width:1024px;">
<img src="Bilder/index_02.gif" /><img src="Bilder/index_03.gif" /><img src="Bilder/index_04.gif" /><img src="Bilder/index_05.gif" /><img src="Bilder/index_06.gif" /><img src="Bilder/index_07.gif" /><img src="Bilder/index_08.gif" /><img src="Bilder/index_09.gif" /><img src="Bilder/index_10.gif" /></div>
<div id="contents"></div>
<div>
<div id="menulinks" style="float:left; width:176px;">
<img src="Bilder/index_12.gif"/>
<img src="Bilder/index_13.gif"/>
</div>
<div id="menumitte">
<p>TEXTEXTETXTETXTEXTETXTXTX</p>
</div>
<div id="menurechts" style="float:left; width:166px;">
<img src="Bilder/index_15.gif"/>
</div>
<br style="clear:left;" />
</div>
<div id="footer"></div>
</div> |
Hier der Link zur Seite auf einem Webspace
(Ein paar Zeilen mit Text sind noch hinzugefügt zur Veranschaulichung):
http://www.anorya.net/projects/css-test.html |
|
| Nach oben |
|
|
Helmchen
Mitglied
Angemeldet: 01.04.2006
Beiträge: 65
|
| Verfasst am: 19.09.2007, 16:22 Titel:
|
|
|
|
|
| Du hast #menumitte eine feste Höhenangabe angefügt, wie soll sich das ganze dann strecken können? Du musst die Höhenangabe weglassen, der Rest ist dann eigtl Sache des Slices. |
|
| Nach oben |
|
|
|
FAQ
Suchen
Mitgliederliste
Benutzergruppen
Registrieren
Profil
Einloggen, um private Nachrichten zu lesen
Login
