College Block Design

[Daaron]

Media Queries sind dein Freund.
Wenn Display kleiner als X, dann leg den Füller unten horizontal auf den Block & kleb die Post-Its unter den Block. Ansonsten: klebe Post-Its irgendwo daneben und leg den Füller auch irgendwo an den Rand.

Geht alles, man muss sich nur der Möglichkeiten und Unmöglichkeiten von CSS bewusst sein.

 

[nissl]

Siehst wieder was neues
Leider auch hier wieder eine komische sache. Ich füge also @media screen(min-width:1280px) ein und will das wenn das zutrifft die beiden element zum body hinzugefügt werden. Leider klappt das wieder einmal nicht. Syntaktisch falsch oder logisch, kA habe mir einige Beispiele angesehn und so übernommen somit sollte der ausdruck richtig sein. Kann es sein dass es auf body ausnahmsweise nicht geht. Oder generell nur auf klassen?
Ziel wäre alle bildschirme kleiner als 1280 bekommen nur den holzhintergrund. Alle größer gleich bekommen noch den füller und die Büroklammern.

 

[Daaron]

Wahlweise ein Schreib- oder ein Logikfehler. Auch bei Media Queries gelten die üblichen Vererbungs- und Vorrang-Regeln. Du kannst z.B. div.class{} nicht durch @media only screen and (min-width: 500px ) {.class{}} überschreiben, außer durch den nicht ratsamen Einsatz von !important. Vergiss !important am besten gleich wieder.

 

[nissl]

Also ich wollt das so machen.

CSS
body   	{background-color: #070707; 
		background:url(style/wood.png) center top repeat ; 
		line-height: normal; text-align:left; font-size: 16px; }
@media screen(min-width: 1280px){
body        {		background:  url(fueller.png) 40px 140px no-repeat,  
		                url(clips.png) 800px 20px no-repeat;  }
}

So wie ich das verstehe wird eine CSS Datei von oben nach unten ausgelesen und vererbt. Also wird dieser @media bereich gelesen und wenn es 'Wahr' ist auch so angezeigt. Aber es wird eben auf dem Rechner mit der entsprechenden Bildschirmgrösse nichts angezeigt.
Das ist doch echt strange.

Ich habs auch schon mit @media (min-width: 1280px){ versucht. aber hilft auch nichts.

 

[Daaron]

Schreibfehler, sag ich doch... Lies mal genau, was ich in Kursiv geschrieben habe und vergleich mit deiner Variante. Meine funktioniert, ist aus nem aktuellen Projekt...

 

[nissl]

man das gibts doch nicht.. =(
ich habe das aus online Dokumentationen. Da gab es '@media screen(width)' als ausdruck... das ist echt furchtbar.

Aber jetzt habe ich das hinbekommen. Das ist super. Das Designgrundgerüst ist dann eigentlich fertig.
Ich danke dir vielmals für deine Hilfreichen Tips bisher.

Hast du mir einen Surftip, eine Referenz oder sowas, damit ich nicht mehr so oft über diese ausdruckfehler stopere wenn ich via Google die erstbesten Treffer nehme? =)
Sowas wie mit dem Media ist echt ärgerlich, wenn mich die anwendung einer relativ einfachen Funktion stunden kostet nur weil die Dokumentationen unlogisch sind.

Ergänzung (6. Mai 2014)

Doch noch eine Kleinigkeit.

Ich hab mein @Media tag jetzt soweit erweitert und ich bin richtig glücklich damit.
In einem Element innerhalb des @Media habe ich Text in einem div,
Wenn der bildschirm zu klein ist erscheint der Text eifnach irgendwo auf der Seite, wie kann ich das unterdrücken?

EDIT: Ah ging ne weile bis ichs geschnallt hab:
@media not screen and(min-width: 1280px){

 

[nissl]

Morgen, ich bin es mal wieder.

Nachdem das Design jetzt steht wollte ich mich an das Füllen mit Content machen.

Jedoch zuvor gibt es noch die Hürde mit dem Scrollbalken.
Vorab habe ich mich doch für den MooTool Skin entschieden, da dieser ziemlich gut zu dem College block passt.

Allerdings habe ich natürlich wieder diverse Probleme:

</head>
<link rel="stylesheet" href="includes/mooscroll.css" type="text/css" media="all" />
<link rel="stylesheet" href="includes/style.css" type="text/css" media="all" />
</head>

CSS 

#textfield { margin-top: 16px; margin-left: 50px; width: 90%; height: 95%; overflow: scroll;}

Ganz unten wird dann noch gemäss der Doku folgendes eingebunden:

<script src="http://www.google.com/jsapi"></script><script>google.load("mootools", "1.2.1");</script>
<script src="js/mootools-1.2-more(slider-drag-scroll)yuic.js" type="text/javascript" charset="utf-8"></script>

<!-- Load the MooScroll Class -->
<script src="js/MooScroll_0.59.js" type="text/javascript" charset="utf-8"></script>

Die pfade stimmen jeweils. nur die Scroll-Class aus dem CSS habe ich nicht übernommen, dafür gebe ich dem 'textfield' ja den overflow: scoll mit.
Ich hab keinen schimmer woran das jetzt wieder scheitert. Irgendwie ist die Dokumentation auch nicht plausibel genug für mich. Die Examples lassen auch keinen logischen Rückschluss für mich zu was da schief läuft.

Steh wieder mal auf dem Schlauch. xD

<div id="textfield" > <!-- Textfield Start -->
<?php
// Content einlesen
if (file_exists('content/'.$pfad1.'.php') == 'right') {include($pfad1.'.php');} else {include('error404.php');}
?>

</div>  <!-- Textfield Ende -->

Dieser div ist jetzt zwar scollbar, allerdings wird der standard design nicht mit dem mooscroll ersetzt...

 

[Daaron]

Das Kernproblem an Mooscroll ist: Es ist steinalt. Die zugehörige Mootools-Version stammt noch (mindestens) aus IE8 - Zeiten. Davon ist einfach abzuraten.

 

[nissl]

Schade. ich hab noch keine alternative gefunden.
Aber noch ein anderes Problem, ich dachte das ist einfacher mittels a:active oder so zu lösen, jetzt stehe ich vor dem Problem mit dem Aktiven link.
Da wollte ich ja dass dieses Lesezeichen ein bisschen heraus steht. Keine Ahnung wie ich das jetzt wieder hinbekommen soll.

 

[Daaron]

PHP... gib dem aktiven Navigationspunkt ne Klasse mit.

 

[nissl]

Jau, an dieser stelle bin ich erstmal ein bisschen stolz das ich von allein zumindest mal die richtige Richtung gewählt hab.

Vermutlich nur wieder ein schönheitsfehler den ich allein nicht zu finden vermag, drum sei so nett und geb mir mal dein Feedback zu den folgenden Codeschnipseln.

Linkausgabe:
PHP
<a href="<?php echo $pfadcorrection ?>"><li <?php if($pfad1 == "home"){echo "class='active'";} ?>id='home'>Home</li></a>
<a href="<?php echo $pfadcorrection ?>System"><li <?php if($pfad1 == "System"){echo "class='active'";} ?>id='system' >System</li></a>
<a href="<?php echo $pfadcorrection ?>Server"><li <?php if($pfad1 == "Server"){echo "class='active'";} ?>id='server';>Server</li></a>
<a href="<?php echo $pfadcorrection ?>Impressum"><li id="impressum">Impressum</li></a>

CSS 

#home:hover    , #impressum:hover  , #server:hover , #system:hover
{color: #7F99FF; text-decoration: none; width: 140px;}
.active {color: #650008; text-decoration: none; width: 140px;}

Soeviel dazu, der Hover effekt funktioniert noch wie gewollt. Im Quellcode funktioniert auch die if bedingung, also ich sehe an der aktiven seite auch die klasse.
Nur sie stylt das nicht. Da der hover effekt funktioniert und sich auch die schriftfarbe des aktiven elements ändert habe ich das eigentlich schon geschafft. aber die breite ändert sich nicht, nur beim hover.
kann ich mir garnicht erklären.