Wie umsetzen?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
beschreibung
code
container
dank
demo
dokument
ende
http
jemand
mittig ausrichten
nutzen
problem
programm
streifen
text
tun
url
vorschlag
wort
-
hallo liebe Community.
ich habe mehrere Anliegen.
Die Website unserer Schülerfirma ist gerade im Aufbau. www.bagngreen.de
ich bin für die Seite verantwortlich, da ich der einzige bin der eine wenig Ahnung davon hat.
Soweit so gut konnte ich alle Vorschläge umsetzen, doch jetzt stoße ich an meine Grenzen.
Auf der Startseite soll der Werbetext in großen Lettern stehen. (siehe Website)
Jetzt möchte ich aber beide Div´s immer Mittig ausrichten (ein Div ist Be cool - be bag-ngreen, das andere die jeweilige Beschreibung: Cool, famous, fashion).
Die Änderung erreiche ich mit einer Automatischen Weiterleitung nach 4 Sekunden auf die nächste Startseite.
1. Frage: Kann man das irgendwie anders regeln, zum Beispiel duch ein kleines "Plugin" oder so?
2. Dann möchte ich die gerne mittig ausrichten, da es aber zwei divs sind, weiß ich nicht wie ich das machen soll#
3. kennt jemand eine Möglichkeit eine einfache Weiche für Mobilgeräte einzurichten?
danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo bagngreen,
verstehe ich das richtig, du änderst alle 4 Sekunden eigentlich nur das eine Wort oder? Dafür brauchst du nicht 3 verschiedene Seiten, änder doch einfach mit Javascript, bzw mit Jquery, nur eben das Wort.
-
bagngreen schrieb:
1. Frage: Kann man das irgendwie anders regeln, zum Beispiel duch ein kleines "Plugin" oder so?
Kann man.
Javascript ist schon der passende Ansatz, aber ein dickes Framework wie Jquery dafür zu nutzen, wäre dafür ein wenig übertrieben. Eine kleine JS-Function am Ende der Seite einzubauen reicht.
<script type="text/javascript"> var aktiv = window.setInterval("Text()", 4000); var text = 1; function Text () { if (text == 1) { document.getElementById("beschreibung").innerHTML = 'famous'; text = 2; } else { document.getElementById("beschreibung").innerHTML = 'cool'; text = 1; } } </script>
2. Dann möchte ich die gerne mittig ausrichten, da es aber zwei divs sind, weiß ich nicht wie ich das machen soll
Es wäre einfacher, wenn Du auf das zweite, absolut positionierte DIV verzichten würdest. Ein mit CSS gestalteter "span" innerhalb des äußeren Textes erfüllt den gleichen Zweck. (Für das JS braucht er aber die gleiche ID !)
3. kennt jemand eine Möglichkeit eine einfache Weiche für Mobilgeräte einzurichten?
Was willst Du erreichen?
Soll nur das Layout an die mobilen Geräte angepaßt werden, dann google mal nach "Media Queries".
Willst Du für mobile Geräte eine andere Seite ausliefern, brauchst Du eine Browserweiche, die den User-Agent abfragt. Beispiel: *click*
Beitrag zuletzt geändert: 28.2.2015 15:25:46 von fatfreddy -
wie binde ich denn das java-dokument ein? einfach wie auf die css verweisen oder muss ich den Quelltext anders abspeichern?
wenn ich das Bespiel so wie unten einbinde, was passiert dann? ist das "Programm" als eigenes div zu behandeln?
wie integriere ich das also in die Website?
wenn es hilft stelle ich auch gerne den Original-Quellcode hier hinein (von der CSS) .
also soll ich in das DIV Beschreibung das Programm über "span" integrieren?
Entschuldigung mir liegen nur die nötigsten Kenntnisse zu Grunde die man in der Schule lernt.
Danke für eure Hilfreichen antworten -
bagngreen schrieb:
wie binde ich denn das java-dokument ein? einfach wie auf die css verweisen oder muss ich den Quelltext anders abspeichern?
wenn ich das Bespiel so wie unten einbinde, was passiert dann? ist das "Programm" als eigenes div zu behandeln?
wie integriere ich das also in die Website?
Das Codeschnipsel gehört in den Quelltext der Seite und zwar ans Ende VOR das schließende body-Tag.
Sobald das Dokument im Browser geladen ist, fängt es an zu werkeln und tauscht den Text im Container mit der ID "beschreibung" in 4000ms-Intervallen aus.
Man könnte es auch in eine eigene Datei auslagern und, wie ein Stylesheet einbinden. Das ist aber nicht sinnvoll, da das nur einen überflüssigen Request verursacht.
Ein kleiner Hinweis noch: Hat der Benutzer Javascript deaktiviert, funktioniert es natürlich nicht. In diesem Fall bleibt der Text, der vorher im Container stand, dauerhaft sichtbar. Darum das "cool", das Du bisher im DIV stehen hast, unbedingt drin lassen, sonst würde beim User der Bereich einfach leer bleiben.
-
muss ich die datei dann umbenennen? in .java oder so?
funktioniert java auch auf mobilen endgeräten?
im Quelltext erkenne ich jetzt nur einen wechsel zwischen cool und famous, kann man noch mehr wörter intigrieren?
wenn ich jetzt das Programm einbinde, dann ändern sich die wörter im Div "beschreibung"? wie kann ich denn jetzt das andere Div mit einbinden, das es also nur ein div ist, welches ich mittig positionieren kann?
was genau muss ich mir denn da anschauen?
Beitrag zuletzt geändert: 28.2.2015 16:00:27 von bagngreen -
Umbenennen mußt Du nichts.
Damit Du das ganze einfacher verstehst habe ich dir mal ein kleines Beispiel gebaut (Inline CSS ist beabsichtigt, damit Du einfacher zuordnen kannst.. )
Demo zeigen -
weißt du wie sehr ich dir danke?!!!
ich bin mal so frech gewesen und habe dein Beispiel in die Website eingebaut, leider musste ich am Farbkonzept etwas umändern, das wird aber besser.
Jetzt habe ich nur noch ein Problem: Wie kriege ich das weiße Kästchen an den richtigen Fleck. Weder padding, noch etwas anderes Funktioniert. Ich stehe vor einem Rätsel.
Aber ich danke die trotzdem unendlich doll.
Könnte ich schon bewerten würde ich es tun!
Du hast einen Nobelpreis verdient, machst dir so viel Arbeit um mit zu helfen.
Wenn wir zusammen jetzt noch das kleine Problem lösen ist alles perfekt ;D
Edit: da war nochwas: wie füge ich mehr "Wörter" in das Programm ein? ;D
Beitrag zuletzt geändert: 28.2.2015 17:17:32 von bagngreen -
bagngreen schrieb:
Jetzt habe ich nur noch ein Problem: Wie kriege ich das weiße Kästchen an den richtigen Fleck. Weder padding, noch etwas anderes Funktioniert. Ich stehe vor einem Rätsel.
Lösen wir das Rätsel. ^^
Du hast für den Body "line-height:1.5em;" definiert. Das vererbt sich.
Wenn Du im Span das CSS um "line-height:0.8em;" erweiterst, passt es
Edit: da war nochwas: wie füge ich mehr "Wörter" in das Programm ein? ;D
Mit der Tastatur.
Spaß beiseite. Die Funktion aus der Demo ist dafür nicht gut geeignet. Ich habe mal eben eine etwas flexiblere Variante gebastelt, mit der Du beliebig viele Texte nutzen kannst. Guckst Du hier: *neue Demo* -
ich danke dir sehr, hat alles wunderbar funktioniert!
Ich möchte euch/dich zwar nicht weiter nerven, aber ein Problem bleibt mir noch vererbt.
Oben die Streifen mit dem Inhaltsverzeichnis und der weiße Streifen darunter sind zwei Divs die mit width: 100%
deklariert wurden.
Wenn man aber die Seite aufruft, insbesondere mit Mobilgeräten sieht man, das die Streifen erstens nicht gleich lang sind und auch gar nicht bis an das Ende gehen.
Bei meinen Arbeits-Laptop ist das aber der Fall, bei meinem anderen Laptop auch und auf meinen Spiele-Pc ist es ähnlich wie auf den Mobilgeräten.
Liegt das an der Auflösung? Was kann ich dagegen tun?
Danke für eure große Hilfe!!!!! -
Damit du dieses Problem nicht hast musst du die position der Elemente auf fixed setzen. Damit du allerdings auch weiterhin die NavBar sinnvoll nutzen kannst habe ich den Background dieser in ein extra div ausgelagert welches du einfach über deine aktuelle NavBar setzen kannst (setz dementsprechend bitte die position der NavBar nicht auf fixed ;)):
<div style=" width: 100%; background: #4cbf35; position: fixed; height: 73px; "></div> -
bagngreen schrieb:
Oben die Streifen mit dem Inhaltsverzeichnis und der weiße Streifen darunter sind zwei Divs die mit width: 100%
deklariert wurden.
Wenn man aber die Seite aufruft, insbesondere mit Mobilgeräten sieht man, das die Streifen erstens nicht gleich lang sind und auch gar nicht bis an das Ende gehen.
...
Liegt das an der Auflösung? Was kann ich dagegen tun?
Das liegt eher daran, daß 100% eben nicht immer 100% sind, bzw. Prozentwerte immer relativ sind. Da die Struktur des HTML nicht sauber ist und Du mit absoluten und relativen Positionierungen arbeitest, paßt das halt nicht immer.
Hier mal ein Vorschlag, wie sich der Seitenaufbau eleganter und aufgeräumter gestalten läßt (noch nicht perfekt, aber ein Anfang): *klick mch*
Der Slogan ist so formatiert, daß er abhängig von der Displaygröße skaliert. So werden Scrollbars vermieden. Für mobile Devices und kleinere Bildschirme muß noch die Navigation dynamisch gestaltet werden. Das ließe sich mit Media-Queries erledigen
Als Arbeitshilfe hier das Ganze zum Download
Beitrag zuletzt geändert: 2.3.2015 16:43:52 von fatfreddy -
Ich nehme deinen Vorschlag dankend an, lergin.
Ich werde noch ein wenig Struktur in die Dokumente reinbringen.
Höchstwahrscheinlich muss ich noch einmal auf eure Fähigkeiten zurückgreifen, wenn es um die Produktseite geht.
Danke für alle Antworten. -
bagngreen schrieb:
Ich nehme deinen Vorschlag dankend an, lergin.
Dir ist klar, daß Du damit das eigentliche Problem nicht behebst, sondern nur versteckst?
Und anstatt den überflüssigen Container "unter" zu eliminieren, wird sogar ein zusätzlicher eingebaut, um das, nur teilweise beseitigte Problem zu kaschieren. ^^
Das mag für den Moment die einfachere Lösung sein, aber spätestens hier
Höchstwahrscheinlich muss ich noch einmal auf eure Fähigkeiten zurückgreifen, wenn es um die Produktseite geht.
, oder dann, wenn die Seite auch mobiltauglich werden soll, wird es dich vermutlich wieder einholen.
Bereits jetzt ist sie nicht mal mit einer kleineren Desktop-Auflösung ordentlich zu betrachten.
-
fatfreddy deine Worte holen mich ein...
ich habe das Problem erkannt, jetzt holt es mich ein.
Mir ist aufgefallen das ich mein Menü nicht fixed anorden kann, da die relativ-positionen wichtig für den gewünschten Effekt sind.
Jetzt kann ich die Kaschierung also doch nicht nutzen.
Ich habe mich mal mit deinem Vorschlag befasst, leider stören mich noch einige Komponenten, welche ich aber selber nicht korrigieren kann.
Wenn ich das Fenster kleiner ziehe, dann ändert sich die Größe des weißen Kastens auch, aber irgendwie nicht richtig.
Er passt nur an einigen Stellen. Kannst du mir sagen was ich da beachten/korrigieren muss
Dann sieht die Seite auf Mobilgeräten ebenfalls komisch aus. Der Kasten wir überdimensional hoch dargestellt, je nach Browser unterschiedlich.
In das Menü ist hineingezoomt und wenn man rauszoomt, dann ändert sich der Hintergrund nicht mit.
Ich hoffe meine Probleme sind verständlich.
Zu sehen auf www.bagngreen.de/apple.html (nicht wundern über den namen, mir viel nichts anders ein).
Danke für eure großen Mühen!!!
Leute Lasst mich nicht im Stich!!
Beitrag zuletzt geändert: 5.3.2015 19:48:19 von bagngreen -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
