e7o.de » // blog

Über dieses Blog...

»Wenn ich einmal alt bin, werde ich nur nörgeln — das wird ein Spaß!«

Tipps und Tricks, aber auch Kritik - breit gefächert von Technik bis hin zum Design, manchmal (oder immer öfter) auch Politik.

Momentaner Fokus: Android/Java, CalDAV

Feeds

Interessant gefunden? Mitlesen? Vollständige Beiträge per Feed.

RSS 2, Atom

Zur Weiterverarbeitung oder zum Einbauen für Ihre Homepage: CSV, JavaScript

Durchsuchen

Tipp: AND & && OR | || XOR - ! NOT ( )

Kategorien

Archiv

Einträge im September 2010

Mo	Di	Mi	Do	Fr	Sa	So
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Beiträge im Archiv zeigen

CSS: Feste Spaltenbreite für Navigation

Von e7 am 07.02.2010, 19:52 in der Kategorie Code-Snippets mit den Tags float sauber trennung design layout css html. Kompletten Eintrag zeigen

Aus der Kategorie „zu wenig Befehle in CSS und vor allem doofer IE“.

Stark vereinfachtes HTML:

<html> <body> <div id="content"> Lorem Ipsum und lauter so Zeugs… </div> <ul id="navigation"> <li><a href="1.htm">Link 1</a></li> <li><a href="2.htm">Zweiter</a></li> <li><a href="3.htm">Am Schluss</a></li> </ul> <div id="footer">Copyright oder so</div> </body> </html>

Problemstellung: Die Navigation soll links neben dem Inhalt stehen, der Footer drunter — egal, was länger ist: der Inhalt oder eben die Navigation. Weitere Bedingung ist, dass der Inhalt keine Breitenangabe bekommt, also weder 75% oder 300px oder sonst was. right und andere CSS-Angaben sind tabu, es soll ja zumindest ansatzweise im IE > 6 dargestellt werden. Und natürlich kein überflüssiger HTML-Code in Form von <div> um die Sache klatschen, die Navigation soll im HTML auf jeden Fall nach dem Inhalt bleiben etc.

Auf der Suche nach einer Lösung bin ich auch mal wieder über YAML gestolpert — ich nutz das Zeugs nicht, ich bastel normalerweise selbst. Dann weiß ich wenigstens, was ich wo hab und weiß auch, dass nicht viel überflüssiges dabei ist. Aber zum Anregungen holen… warum nicht?

Dummerweise hat Yaml zwar was in die Richtung, aber man muss — damit die Lösung funktioniert — immer eine Breite für den Inhalt angeben. Also entweder 75% — was die Navigation zu 25% verdonnert — oder ein Pixelwert, was für den Inhalt gerade überhaupt nicht geht. Aber Navigation mit festem Pixelwert, daneben den Inhalt von festen Pixelwert bis zum rechten Rand geht nicht. position:absolute klappt nicht, wenn die Navigation (oder der Inhalt, je nach Optimierung) kürzer ist — auch keine Lösung also.

Gut, dass ich im Hinterkopf noch die Wikipedia habe, die genau so ein Design umsetzt, das ich mir vorstelle. Aus den vielen CSS-Dateien und HTML-Code mal abstrahiert, was die denn da so machen:

<div style="width: 100%; float: right; margin-left: -150px;"> <div style="margin-left: 200px;"> Mitte </div> </div> <div style="width: 150px;"> links</div> <div id="footer“ style="clear: both;">unten</div>

Klappt eigentlich wie's sollte — allerdings ist da oben nun wieder ein unschönes, aus HTML-Sicht betrachtet überflüssiges <div>, was ich eigentlich vermeiden wollte.

Sieht fast so aus, als gäbe es da keine wirklich gute Lösung, oder?

UPDATE Der Fall anders herum ist auch gerade aufgetreten: Ich benötige rechts eine Sidebar, die eine feste Breite hat, links soll sich der Inhalt auf dem restlichen Platz verteilen. Dabei soll die Sidebar nach dem Inhalt im HTML-Code auftauchen; leider lässt sich auch hier ein Extra-Element nicht vermeiden:

<div style="margin-right: 230px;"> <div style="float: left; width: 100%;"> Links: Inhalt, beliebig groß </div> <div style="float: right; margin-right: -220px; width: 200px;"> Rechts: Sidebar, feste Breite </div> </div>

Auch das funktioniert erstaunlicherweise wieder mit dem IE7 ohne spezielle Anpassungen.

Zusammengefasst...

Von e7 am 07.10.2008, 19:12 in der Kategorie Zwischendurch... mit den Tags spiele schäuble politik fun tipp blog design zusammengefasst. Kompletten Eintrag zeigen

Blog-Tipp
Was das BILDblog für die Bild-Zeitung ist, ist NachDenkSeiten.de (insbesondere die Kategorie Manipulation des Monats ist interessant) auf allgemeiner Basis. Wer regelmäßig über die „Unabhängigkeit“ der Öffentlich-Rechtlichen staunen will oder einfach nur gerne liest, was verschiedene große deutsche Tages- und Wochenzeitungen fabrizieren, sollte sich dort mal umsehen. Dummerweise ist man dort allerdings nicht in der Lage, einen vernünftigen RSS-Feed anzubieten, so dass deren Blog leider nicht im Feedreader landet. Beim BILDblog hat man es inzwischen geschafft, komplette Einträge auszuliefern — nur mal so nebenbei (was allerdings die [del.icio.us]-Einträge von 2007 da dran machen, kann ich mir nicht erklären).

Design-Spielerei
Auf webleeddesign.com/ gibt es eine interessante Spielerei mit dem Hintergrund zu beobachten. Einfach mal aufrufen und entweder langsam nach unten scrollen oder besser oben auf „Shop“ klicken, wer es gerne etwas schneller mag. Die Kombination aus Grafiken mit Alphakanal und dem Hintergrund ist erstens kreativ und zweitens interessant. Unbedingter Tipp für alle Bastler, die gerne selbst irgendwelche Websites gestalten. Was so in der Designer-Welt allgemein abgeht, findet man beispielsweise auf de zeen (nennt sich selbst „design magazine“). Werd ich mir bei Gelegenheit noch mal näher ansehen. Unter byroglyphics.com findet man teils sehr interessante Grafiken und nicht allträgliche Portraits. Und zum Schluss noch fubiz, das zwar stellenweise einen merkwürdigen Satzbau aufweist, aber auch designtechnisch frische Inhalte liefert.

Fun
Wer schon immer mal einen genialen Trick sehen wollte, um seine Mitschüler oder Kollegen zu veräppeln, sieht sich am besten das Video How to confuse an idiot an — unbedingt empfehlenswert. Ob die Illuminaten was damit zu tun haben?

Politiker: Schäuble
Ein lesenswerter Artikel bei Telepolis: Wie der Bundesinnenminister mit fingierten Zusammenhängen Propaganda macht. Im Artikel sind auch interessante andere Artikel verlinkt, wie u. a. Wer nichts zu verbergen hat… oder Teil 1 zum vorliegenden Artikel.

Wissen
Na, wer weiß es? Eine Wer wird Millionär-Frage, die einen doch mal kurz nachdenken lässt…

Spiele
Weil der Downloadzähler dort erst auf 42 steht und ich daher vermute, dass es wohl noch keiner entdeckt hat, hier mal der Hinweis auf Baphomets Fluch 2.5. Kenne es selbst nicht (die Jugend von heute), wollte mir es aber noch ansehen. Genauso wie Portal Prelude, klingt auch interessant. Nur mal so am Rande bemerkt, Zeit dafür finde ich leider kaum :(

Notebook-Klassen und Präsentationen

Von e7 am 19.08.2008, 18:33 in der Kategorie Intelligente Entscheidungen mit den Tags referat unfall design präsentation powerpoint moderne welt notebooks news. Kompletten Eintrag zeigen

Wie Heise berichtet, werden in Würselen (nie gehört) Notebook-Klassen eingerichtet.

Softwareseitig kommt Windows Vista, MS Office sowie das auf weiteren Microsoft-Produkten basierende Lernportal IQ:on Professional 2008 von Conciety zum Einsatz.

Vista? Richtig. Woher die Kompetenz kommt, kann man leicht nachvollziehen, es gibt ja netterweise eine Projekt-Homepage:

Die aktuelle Ausstattung des Notebooks sehen Sie in der 34. Kalenderwoche wie gewohnt unter dem Butten „zur Bestellung",

Auch sonst ist die Rechtschreibung nicht das Gelbe vom Ei. Interessant ist ebenfalls das .CMS am Ende der URL, und ein Blick in den Quelltext verrät den Rest:

<META http-equiv="Page-Enter“ content="blendTrans(Duration=0.2)">

Passt auf jeden Fall zu meinem Fazit, zu dem ich gleich kommen werde. Denn: man liest dort auch so interessante Dinge, die es einem eiskalt den Rücken herunterlaufen lassen:

… Schüler arbeiten mit modernen, zeitgemäßen Werkzeugen und erlernen den Umgang mit Notebook, Internet und Softwareprogrammen.

… Schüler gestalten den Unterricht aktiv mit durch Präsentationen, die zuvor meist in der Gruppe erarbeitet wurden.

… mittels Recherche nach Informationen … suchen und dieses zu einer Präsentation weiterverarbeiten.

… wenn es darum geht, sich gegenseitig im Umgang mit dem Notebook und den Programmen zu unterstützen.

Warum nur erinnern mich die Sätze nur so an PowerPoint? Ach ja, ich erinnere mich: Zu meiner Schulzeit wurde einem nahe gelegt (dieses fast schon verpflichtende), sich den Schulbeamer und Schullaptop auszuleihen, um seine Referate zeitgerecht zu präsentieren. Verbunden mit dem tollen Informatik-Unterricht, in dem man neben dem größten Lernerfolg „viele Leute auf Server zugreife == Absturz“ (DOS-Attacke) die hoffnungslos veraltete Infrastruktur bemerkte und anschließend zumindest Animationen in PowerPoint und Autotext in Word beherrschte, gab das immer die unbeschreiblichsten Referate. Ich denke, jeder kennt die Zusammenstellungen sämtlicher von Windows mitgebrachten Schriftarten in sämtlichen farblichen Varianten.

Freuen wir uns, dass eine neue Generation geschmacksverblendeter Schüler heranwächst. Studienplätze für BWL gibt's ja genug…

Design-Evolution

Von e7 am 18.08.2008, 19:19 in der Kategorie e7o.de mit den Tags layout flexibel redesign design e7o.de. Kompletten Eintrag zeigen

Ich hab jetzt mal ein flexibleres und übersichtlicheres Design reingesetzt; allerdings weiß ich im Moment nicht so wirklich, wohin mit der Navigation, wohin mit dem Logo an sich… den Wasser-Style und die Navigationskästchen wollte ich auf jeden Fall behalten. Mal schauen, ich werd mich noch weiter auf Ideensuche begeben (und wer Lust hat, darf ruhig kommentieren und Vorschläge machen).

Alle Nachrichten finden Sie im Archiv.