nicht angemeldet
"tabellenlayout! mit div und css
Hi!
Ich moechte ein bestimmtes Layout erstellen, bekomme es aber mit nur div und css nicht hin, bowohl ich glaube, es ist garnicht so schwer. Vielleicht kann mir ja hier jemand helfen, und einen Tipp geben.
Ich ASCII-arte mal herum um zu zeigen was ich meine
------------------------------------
|
|
Logo | Navigationselemente
|
------------------------------------
|
Weitere |
Navig. | Inhalt
Elemen- |
te |
|
|
|
Das sind dann zb 3 Div bereiche, einmal oben, dann seite-navigation und inhalt.
das bekomm ich (auch wenn ich nciht weiss ob gut) hin.
Jetzt hab ich aber ein hintergrundproblem: ich moechte einen farbverlauf in die seitliche navigation einbringen, was bis unten hin sich wiederhohlt. also das bild des farbverlaufs.
zudem soll beim inhalt eine hintergrundfarbe hinein, die auch alles ausfuellen soll bis zu den raendern, aber: wenn ich zuwenig text habe sollen keine scrollbalen dasein, das browserfenster aber ausgefuellt. wenn der inhalt aber nach unten hin aus dem bildschirm hinauslauft soll entsprechend der hitnergrund auch weiterlaufen, sowohl bei inhalt als auch bei der seitennavigation.
ich hoffe ich habe nicht zu unverstaendlich geschrieben...
Danbar fuer jede Hilfe
Nico
-
Ich moechte ein bestimmtes Layout erstellen, bekomme es aber mit nur div und css nicht hin, bowohl ich glaube, es ist garnicht so schwer. Vielleicht kann mir ja hier jemand helfen, und einen Tipp geben.
Deine Herangehensweise ist nicht gut. Du solltest dir erst überlegen, was ist möglich und dann wie kann ich das beste daraus machen.
Das grosse Geheimniss vonn CSS <-> HTML ist, dass du einfach deinen Inhalt mit HTML strukurierst, also einfach in der Reihenfolge in dein HTML Dokument einfügst, in der er dir am logischten erscheint. Also etwa so:
...
<body>Logo
Navigationselemente
Weitere Navig. Elemente
Inhalt
</body>
Oder so:
<body>
Navigationselemente
Logo
Inhalt
Weitere Navig. Elemente
</body>
und diesen Bereichen gibst du dann mit CSS ein aussehen.
Der Versuch ein Pixelgenaues oder ein HTML Tabellen Layout umzuwandeln ist fast immer zum scheitern verurteilt, bzw. führt dich dazu Dinge zu machen, die mit CSS nur umständlich umzusetzten sind und Dinge wegzulassen, die mit CSS einfach sind.
Struppi.
-
Hi Struppi!
Danke feur die erste Antwort :-)
Also es ist eine Neuentstehung, und Tabelle wollte ich in anfuehrugnsstrichen schreiben, damit man weiss was gemeint ist.
Ich habe die div's bisher auch so erstellt:
Navigatio_Oben
Darin das Logodann
Navigation_side
mit elementen
und dann main_content, also inahlt
meine Idee ist es, auch ein Prit-CSS zu machen wo dann nur das logo oben erscheint und dann der main_content, evtl dazwishcen noch "Sie sind hier" Also Position in der webseite.
das positinieren mit css ist das eigentliche problem, es geht doweit das ich den top, ach moment, ich nehme einfach mal den css krams den ich bisher gebastelt habe:
#top_nav {
position:absolute;
top:0px;
left:0px;
height:100px;
width:100%;
background-image:url(images/top_streifen_3.gif);
background-repeat:repeat-x;
background-position:bottom;
}#top_nav .logo {
bottom:0px;
width:200px;
height:100px;
border-width:1;
border-style:solid;
}#top_nav img {
position:relative;
bottom:24px;
border:0;
}#side_nav {
position:absolute;
top:100px;
left:0px;
width:199px;
min-height:bottom;
background-image:url(images/side_nav_bg.png);
background-repeat:repeat-y;
background-position:left bottom;
border-right:10px FFFFFF solid;
}#side_nav img {
border:0;
}#main_content {
position:absolute;
top:100px;
left:200px;
width:auto;
bottom:0px;
background-color:277DFF;
}Hilft das weiter, oder sind da schon fehler zu erkennen?
Das grosse Problem was ich da z zt habe ist der hitnergrund bei side_nav und main_content, da komme ich absolut nciht weiter, udn ich frage mich ob in dem design meiner div's schon etwas falsch sit bowhl der ansatz ja richtig zu sein scheint.
So nu sag mal was dazu, vielleicht ueberseh ich ja auch einfach etwas...
Gruesse
Nico
-
Hallo Nico Bille,
Das grosse Problem was ich da z zt habe ist der hitnergrund bei side_nav und main_content, da komme ich absolut nciht weiter, udn ich frage mich ob in dem design meiner div's schon etwas falsch sit bowhl der ansatz ja richtig zu sein scheint.
Du mußt aus den Boxen raus ;-) - gib dem body
a) ein Hintergrundbild (Verlauf) mit der Breite der Navi, das nach unten kachelt
b) die Hintergrundfarbe des Main-Bereiches.Ein Lesetipp: http://www.alistapart.com/articles/fauxcolumns/
Ich bin im übrigen nicht wie Struppi der Ansicht, daß man zuerst überlegt "was ist möglich und dann wie kann ich das beste daraus machen." Sondern: was will ich überhaupt machen und dann, mit welchen Mitteln setze ich das am besten um. Daß die eine oder andere Idee womöglich aus Umsetzungsgründen auf der Strecke bleibt, ist klar, aber von vornherein die (css-)Schere im Kopf? Nein. Aber das ist eine andere Diskussion ;-)
Gruß aus Köln-Ehrenfeld,
Elya
--
"Alle mal an die Nase fassen, und zwar an die eigene": http://forum.de.selfhtml.org/archiv/2003/9/57903/#m324482
_____________
Wikipedia: Die freie Enzyklopädie http://de.wikipedia.org-
Hallo Elya,
oh that's so simple blubb; Es funktioniert sogar ohne weiteres, Wahnsinns tolle sache :-))
Danke erstmal dafuer, ich habe den Link begierig gelesen, garnicht so schlecht wie simpel man das machen kann.
Ob nunmit ohne ohne CSS s
Schere, ich glaube ichhabe eine halbe im Kopf.Eines verstehe ich jetzt aber nciht nachdem das so nett funktioniert hat: bei side_nav habe ich ja border angegeben, ich bekomme jetzt aber keine Kleine weisse Linie mehr dahin, wie kommt das? Ich wollte eben so einen kleinen Trennstrich da haben.
Oder habe ich ejtzt etwas uebersehen, vielleicht ist mir ja auch etwas noch nicht ganz klar was jetzt durch background im Body veraendert wurde.
Gruesse und vielen Dank fuer die tolle Hilfe hier
Nico
-
Hallo Nico,
Eines verstehe ich jetzt aber nciht nachdem das so nett funktioniert hat: bei side_nav habe ich ja border angegeben, ich bekomme jetzt aber keine Kleine weisse Linie mehr dahin, wie kommt das? Ich wollte eben so einen kleinen Trennstrich da haben.
border-right:10px FFFFFF solid;
^^^^Bei der Farbangabe fehlt was...
Bei solchen Dingen hilft übrigens auch immer gerne: http://jigsaw.w3.org/css-validator/
Gruß aus Köln-Ehrenfeld,
Elya
--
"Alle mal an die Nase fassen, und zwar an die eigene": http://forum.de.selfhtml.org/archiv/2003/9/57903/#m324482
_____________
Wikipedia: Die freie Enzyklopädie http://de.wikipedia.org-
Hi,
boah geht das hier schnell, Wahnsinn.
Der Validator, da haette ich sogar selbst drauf kommen koennen %-P
Geht dann sogar, aber ich habs widder mit den div's und den groessen, ich glaub ich mach da einen feinen weissen streifen einfach in das Farbverlauf-hintergrundbild.
Oder?
Gruesse
-
Hallo Nico Bille,
Geht dann sogar, aber ich habs widder mit den div's und den groessen, ich glaub ich mach da einen feinen weissen streifen einfach in das Farbverlauf-hintergrundbild.
probier's aus - ich weiß nicht, was Du genau erreichen willst...
Gruß aus Köln-Ehrenfeld,
Elya
--
"Alle mal an die Nase fassen, und zwar an die eigene": http://forum.de.selfhtml.org/archiv/2003/9/57903/#m324482
_____________
Wikipedia: Die freie Enzyklopädie http://de.wikipedia.org
-
-
-
-
Ich bin im übrigen nicht wie Struppi der Ansicht, daß man zuerst überlegt "was ist möglich und dann wie kann ich das beste daraus machen." Sondern: was will ich überhaupt machen und dann, mit welchen Mitteln setze ich das am besten um. Daß die eine oder andere Idee womöglich aus Umsetzungsgründen auf der Strecke bleibt, ist klar, aber von vornherein die (css-)Schere im Kopf? Nein. Aber das ist eine andere Diskussion ;-)
Immer bereit ;-)
So ganz ist mir der Unterschied nicht klar. Ausser das du sagst, dass du es nicht problematisch findest Ideen, die sich nicht mit den vorhandenen Mitteln umsetzen lassen, zu überlegen.
Es ist letztlich nur ein Frage der Zeit die man hat, um mit Möglichkeiten rumzuspielen. Wenn man allerdings von vorneherein, die "CSS Schere" im Kopf hat, läßt sich doch wesentlich zielgerechter Arbeiten, da man sich nicht in Sackgassen verzettelt oder - auch immer frustrierend - das es in einem Browser funktioniert in anderen nicht.
Also, wenn man eine Seite mit HTML & CSS gestalten möchte, ist die sinnvollste Vorgehensweise, sich zu überlegen, was mit CSS möglich ist und damit zu arbeiten und nicht, was könnte am besten aussehen.
Ich denk' da an so Sachen, wie gewisse Elemente zentrieren oder am unteren Ende plazieren, auch Verläufe sind nicht optimal.
Alles Dinge die auf einem festen Format kein Problem sind, aber in einem HTML Dokument oft nicht funktionieren da die Maße nicht bekannt sind (so es denn überhaupt welche gibt).Struppi.
-
Hallo Struppi,
Immer bereit ;-)
Na gut, weil Freitag ist... ;)
Es ist letztlich nur ein Frage der Zeit die man hat, um mit Möglichkeiten rumzuspielen.
ACK.
Wenn man allerdings von vorneherein, die "CSS Schere" im Kopf hat, läßt sich doch wesentlich zielgerechter Arbeiten, da man sich nicht in Sackgassen verzettelt
Also, wenn man eine Seite mit HTML & CSS gestalten möchte, ist die sinnvollste Vorgehensweise, sich zu überlegen, was mit CSS möglich ist und damit zu arbeiten und nicht, was könnte am besten aussehen.Wenn ich davon ausginge, daß ich alle theoretischen und vor allem praktischen Möglichkeiten, die sich mit der Technik umsetzen lassen, kenne, beherrsche und natürlich immer im Kopf abrufbar habe, würde ich Dir evtl. zustimmen. So ist es aber doch nicht - erstens habe ich jeden Tag noch reichlich zu lernen, zweitens arbeiten viele schlaue Köpfe permanent an der Weiterentwicklung der Umsetzungsmöglichkeiten. (Siehe z.B. [pref:t=71519&m=411711])
Ich denk' da an so Sachen, [...] am unteren Ende plazieren,
Oh ja, ich hab da gerade was zum Grübeln in Arbeit ;-) Aber was wilst du machen, wenn der Kunde sagt: dieser gelbe Kasten muß auf jeden Fall immer unten links stehen? Argumentier mal mit "das geht aber nicht mit CSS, da muß ich womöglich eine Tabelle nehmen und das ist bäbä" ...
Alles Dinge die auf einem festen Format kein Problem sind, aber in einem HTML Dokument oft nicht funktionieren da die Maße nicht bekannt sind (so es denn überhaupt welche gibt).
umso größer die Herausforderung, und die lieben wir doch alle, oder?
Klar: es schadet nicht, wenn man die Umsetzungsmöglichkeiten im Hinterkopf hat, aber ich blockiere mich doch in meinen Ideen wenn ich nur noch "in den Boxen" denke! (was mir im übrigen trotz dieser meiner Meinung oft genug passiert)
Gruß aus Köln-Ehrenfeld,
Elya
--
"Alle mal an die Nase fassen, und zwar an die eigene": http://forum.de.selfhtml.org/archiv/2003/9/57903/#m324482
_____________
Wikipedia: Die freie Enzyklopädie http://de.wikipedia.org-
Hallo Elya
Hallo Struppi,
Immer bereit ;-)
Na gut, weil Freitag ist... ;)Wenn man allerdings von vorneherein, die "CSS Schere" im Kopf hat, läßt sich doch wesentlich zielgerechter Arbeiten, da man sich nicht in Sackgassen verzettelt
Also, wenn man eine Seite mit HTML & CSS gestalten möchte, ist die sinnvollste Vorgehensweise, sich zu überlegen, was mit CSS möglich ist und damit zu arbeiten und nicht, was könnte am besten aussehen.Wenn ich davon ausginge, daß ich alle theoretischen und vor allem praktischen Möglichkeiten, die sich mit der Technik umsetzen lassen, kenne, beherrsche und natürlich immer im Kopf abrufbar habe, würde ich Dir evtl. zustimmen. So ist es aber doch nicht - erstens habe ich jeden Tag noch reichlich zu lernen, zweitens arbeiten viele schlaue Köpfe permanent an der Weiterentwicklung der Umsetzungsmöglichkeiten. (Siehe z.B. [pref:t=71519&m=411711])
Genau das finde ich schlecht.
Das ist ein würgaround (vier ineinander verschachtelte DIV's) um etwas umzusetzten, was mit CSS (noch) nicht geht.Bevor ich mich daran setzte sowas zu machen, lass ich es lieber.
Aber mit dem lernen geb ich dir recht, aber in dem konkreten Falle eben in genau die umgekehrte Richtung. Ich merke immer mehr wie einfach, effektiv und flexibel es sich mit CSS/HTML gestalten läßt, je weniger man sich an eine Papiervorlage orientiert.
Ich denk' da an so Sachen, [...] am unteren Ende plazieren,
Oh ja, ich hab da gerade was zum Grübeln in Arbeit ;-) Aber was wilst du machen, wenn der Kunde sagt: dieser gelbe Kasten muß auf jeden Fall immer unten links stehen? Argumentier mal mit "das geht aber nicht mit CSS, da muß ich womöglich eine Tabelle nehmen und das ist bäbä" ...Zum Glück habe ich es nicht nötig mein Geld ausschließlich mit Webseitengestaltung zu verdienen. Insofern halten sich meine "Kundenkontake" in Grenzen.
Meinen bisher einziger Kontakt mit einer Grafikerin brach ich nach 3 Monaten ziemlich entnervt ab. (wobei ich 'ne ganze Menge gelernt habe - wann es sinnvoll ist eine Dikussion abzubrechen oder viel früher keine Kompromisse machen, da dann immer ein Rattenschwanz von anderen "Forderungen" folgen).
Das Problem ist, das bei - ich nenn es mal - "optischen Aufträgen", der Kunde halt immer viel mitreden soll/muss/kann, im gegensatz zu handwerklichen Aufträgen (in der Autowerkstatt würd ja auch keiner sagen, machen sie den Auspuff runter, klingt viel besser und 1% der Bevölkerung die sich daran stören interessieren mich nicht - Fuck for w3c - ähh TÜV), wo klaglos geschluckt wird (vor allem bei der Rechnung). Und dadurch der technischen Aspekt der Internetseitenentwicklung (leider) oft zurück gestellt werden muss.
Struppi.
-
Hallo Struppi,
Wenn ich davon ausginge, daß ich alle theoretischen und vor allem praktischen Möglichkeiten, die sich mit der Technik umsetzen lassen, kenne, beherrsche und natürlich immer im Kopf abrufbar habe, würde ich Dir evtl. zustimmen. So ist es aber doch nicht - erstens habe ich jeden Tag noch reichlich zu lernen, zweitens arbeiten viele schlaue Köpfe permanent an der Weiterentwicklung der Umsetzungsmöglichkeiten.
(Siehe z.B. [pref:t=71519&m=411711])
Genau das finde ich schlecht.
Das ist ein würgaround (vier ineinander verschachtelte DIV's) um etwas umzusetzten, was mit CSS (noch) nicht geht.zugegeben, es gibt sicher elegantere Beispiele, aber es war gerade zur Hand.
Zum Glück habe ich es nicht nötig mein Geld ausschließlich mit Webseitengestaltung zu verdienen. Insofern halten sich meine "Kundenkontake" in Grenzen.
Eben - dann hast du auch die Möglichkeit zu sagen "dann laß ich es lieber", dies ist jedoch im Alltag eher selten. Wenn ich meine private Seite baue und mir als Ziel setze, keine Tabellen zu benutzen und CSS auszureizen (darf trotzdem noch nett aussehen), kann ich in Detailfragen eben einen Kopmpromiß mit mir selbst schließen: will ich dieses oder jenes unbedingt oder laß ich es zugunsten der reinen Lehre?
Der Kompromiß mit dem Kunden sieht eher anders aus: will ich die Aufgabenstellung nach Kundenwunsch umsetzen (ich rede jetzt nicht von "jeden Schwachsinn ohne Beratung umsetzen weil der Kunde es will", ich hoffe Du verstehst mich) und dabei an einzelnen Stellen den puristischen Pfad verlassen, oder versuche ich mit dem Kunden über Dinge zu diskutieren, die er nicht versteht und die ihn (zu recht) nicht interessieren müssen.
Meinen bisher einziger Kontakt mit einer Grafikerin brach ich nach 3 Monaten ziemlich entnervt ab.
jaja die Grafiker... ;-)
Das Problem ist, das bei - ich nenn es mal - "optischen Aufträgen", der Kunde halt immer viel mitreden soll/muss/kann,
jeder ist ein Künstler... ich weiß was Du meinst (seufz)
in der Autowerkstatt würd ja auch keiner sagen, machen sie den Auspuff runter, klingt viel besser und 1% der Bevölkerung die sich daran stören interessieren mich nicht - Fuck for w3c - ähh TÜV
gutes Beispiel, nur hat der TÜV eben Autorität, und auf den Tag, wo das W3C sagt: "tut uns leid, Ihre Seite ist mit gravierenden Mängeln durch die Validatorprüfung gefallen, die können Sie so nicht online stellen." werden wir wohl noch lange warten können ;-) Naja, und kaputte Bremsleitungen haben dann wohl doch eine andere Relevanz als fehlende alt-Attribute...
Gruß aus Köln-Ehrenfeld,
Elya
--
"Alle mal an die Nase fassen, und zwar an die eigene": http://forum.de.selfhtml.org/archiv/2003/9/57903/#m324482
_____________
Wikipedia: Die freie Enzyklopädie http://de.wikipedia.org
-
-
-
-
-
das positinieren mit css ist das eigentliche problem, es geht doweit das ich den top, ach moment, ich nehme einfach mal den css krams den ich bisher gebastelt habe:
Vielleicht wäre es nicht schlecht eine Beispielseite zu basteln und zu sagen was daran dich stört oder was besser werden soll.
Weil mit deinem CSS jetzt irgendwas zu bauen ist einfach nicht möglich, da ich keine Grafik habe mit dem Namen top_streifen_3.gif und auch nicht wüßte wie diese auszusehen hat.
Struppi.
-
Hi Struppi,
ich bin ja jetzt schon ein gutes Stueck weiter, werde das mit dem Bordernoch versuchen zu loesen oder auf einen Tipp hoffen... (bis jetzt steh ich da grad auf dem Schlauch) und dann werde ich mal das was ich gemacht habe testweise Online Stellen, und dann sagen was damit ist oder nicht. Ist das in Ordnung?
Gruesse
Nico
-
-
-