Beiträge von Azr

Azr

Oha danke werde das addon direkt mal laden.

Azr

Habe nun das Problem lösen können.
Dennoch gleich das nächste bekommen. Es sollte alles in einer Linie untereinander liegen, somit sollten die Next, Prev Buttons in die Mitte gecentert werden.
Wobei es hier aber keinen Html Code für die Buttons gibt. Sie werden nur per Css festgelegt. Jemand eine Idee?

http://sogar2.de/3/Sitrion.html

Azr

Guten Tag liebe Community,

Ich stehe mal wieder auf dem Schlauch Un zwar lässt mir folgendes Problem keine ruhe :

Ich habe mir den Jquery Imageslider "Nivo Slider" heruntergeladen und halbwegs auf meine Bedürfnisse angepasst.
Nun benötige Ich diesen eigentlich mit einer "width:100%;" dies ist aber laut Aussage des Supports nicht möglich.
Somit habe Ich dem width einfach die Breite 1920px gegeben.

Wenn Ich die Seite auf einem kleinerem Monitor nun betrachte, kann Ich nun aber die Seite nach Rechts scrollen und das Bild endet ebenfalls dort erst bei 1920px.

Bleibt mir eine weitere Möglichkeit dies zu ändern und es Desktop bedingt anzuzeigen?

Azr

Guten Tag liebe Community,

Ich habe mir eine Multi Level Dropline Navigation auf : http://www.cssplay.co.uk/menus/ angesehen.
Wurde dort ebenfalls fündig. Dennoch war diese Dropline Navigation dort nicht in das Center gesetzt.

Nun habe Ich Sie soweit auf meine Bedürfnisse Angepasst :

- 100% Breite Hinzugefügt.
- Background Ebenen editiert.
- Die Schritte zur dritten Navigation entfernt.

Dennoch stehe Ich vor einem Problem. Un zwar soll die Untere Navigations Ebene ( Dropline ) erst angezeigt werden, wenn über den ersten Navigationspunkt Gehovert wird.
Dies tut es auch dank folgenden Css Einstellungen :

Code

#Mainnavigation li ul{    position:absolute; 
    top:42px; 
    left:-9999px;  
}




#Mainnavigation :hover ul{
    left:0; 
    width:100%;
    height:31px;
    background:#b9babc;
    opacity:0.72;
    z-index:6;
}

Alles anzeigen

Nun kommt dennoch das Problem auf, dass mein Code bezüglich des Befehles :

Code

.Centered{    
    width:1000px;
    margin:0 auto;
}

nicht funktionieren will. Die Obere Navigation setzt er ins Center.
Die untere dennoch nicht! Sobald Ich versuche nun unten nochmals den .Centered Befehl einzubringen, stellt sich der Code dank Mainnavigation :hover ul schräg und erstellt 2 Subnavigationen.
Was natürlich ebenfalls nicht mein Ziel ist. Soweil Ich dies mit <li></li> versuche funktioniert es nicht.

Hier das Live Beispiel :

http://my-alina.de/anpassung/1/Sitrion.html

Hier nochmals der Code der Navigation :

Html Code :

Code

<ul id="Navigation">
    [COLOR=#ff0000]<ul class="Centered">[/COLOR]
        <ul id="Mainnavigation">
            <li><a class="Mainnavigation-Punkte" href="#">What we do</a>
                <ul class="Subnavigation">
                    [COLOR=#0000ff]<ul class="Centered">[/COLOR]
                         <li><a href="#" class="Subnavigation-Punkte">Why us?</a></li>
                    [COLOR=#0000ff]</ul>[/COLOR]
                </ul>
            </li>
        </ul>
   [COLOR=#ff0000] </ul>[/COLOR]
</ul>

Alles anzeigen

Centered Rot markiert, zweite Centered blau markiert.

Css Code :

Code

.Centered{
    width:1000px;
    margin:0 auto;
}


ul{
    margin:0px;
    padding:0px;
    list-style:none;
}




li{
    float:left; 
    height:42px;
}


#Navigation{
    width:100%;
    height:42px;
    background:#d0d2d4;
    position:relative;
}




#Mainnavigation{
    width:1000px;
    float:left; 
    display:block;  
    line-height:42px; 
    margin-left:219px;
}




.Mainnavigation-Punkte{
    padding:0 15px 0 15px; 
    font-family:arial; 
    font-size:14px; 
    color:#4e5059; 
    height:42px;
    text-decoration:none;
}




.Mainnavigation-Punkte:hover{
    color:#79844f;
}




.Subnavigation{
    float:left; 
    display:block; 
    line-height:31px;  
    padding-left:227px;
}




.Subnavigation-Punkte{
    font-family:arial; 
    font-size:12px; 
    color:#4e5059; 
    float:left;
    text-decoration:none;
    padding:0 10px 0 10px;
}




.Subnavigation-Punkte:hover{
    font-weight:bold;
    position:absolute;
}




#Mainnavigation li ul{
    position:absolute; 
    top:42px; 
    left:-9999px;  
}




#Mainnavigation :hover ul{
    left:0; 
    width:100%;
    height:31px;
    background:#b9babc;
    opacity:0.72;
    z-index:6;
}

Alles anzeigen

Hoffe Ihr könnt mir hierbei helfen.

Freundliche Grüße
Azr

Azr

Beziehungsweise Frage ich mich nun, wieso er die Sub-Navigation nicht Centert!

Code

<div id="Navigation">
	[COLOR=#ff0000][B]<div class="Centered">[/B][/COLOR]
		<div id="Mainnavigation">
			<ul>
				<li><a class="Mainnavigation-Punkte" href="#">What we do</a>
					<ul class="Subnavigation">
						<li><a class="Subnavigation-Punkte" href="#">Why us?</a></li>
						<li><a class="Subnavigation-Punkte" href="#">Whats in it for you?</a></li>
						<li><a class="Subnavigation-Punkte" href="#">How our products help?</a></li>
					</ul>
				</li>
			</ul>
		[COLOR=#ff0000][B]</div>[/B][/COLOR]
	</div>
</div>

Alles anzeigen

Code

.Centered{
	width:1000px;
	margin:0 auto;
}

Den Rest dennoch schon, siehe http://my-alina.de/anpassung/1/Sitrion.html

Azr

Also es ist folgendes :

Struktur :

-Navigation ( Background + width:100% )
-Centered ( 100% auf 1000px mittig platzieren )
-Mainnavigation ( genannten 1000px )
-Navigation Auswahlpunkt 1 (Schrift)

-SubNavigation ( Background + width:100% )
-Centered ( 100% auf 1000px mittig platzieren )
-SubNavigation Punkt 1 (Schrift)
-SubNavigation Punkt 2 (Schrift)
-SubNavigation Punkt 3 (Schrift)

Nun würde dies ja folgender Maßen aussehen :

Einzelnt aufgereit!
<div><div><div><ul><li><ul><li><li><li><li><li></li></li></li></li></li></ul></li></ul></div></div></div>

Zitat

Liste eine weitere Liste haben willst

<div><div><div><ul><li><ul><li><li><li><li><li></li></li></li></li></li></ul></li></ul></div></div></div>

Oder sehe ich das falsch?

Azr

Guten Tag liebe Community,
Ich habe ein Problem :

Code

<div id="Navigation">
    <div class="Centered">
        <div id="Mainnavigation">
            <ul>
                <li><a class="Mainnavigation-Punkte" href="#">What we do</a>
                    <ul>
                        [COLOR=#ff0000]<li[/COLOR] id="Centered" class="Subnavigation">
                            <li><a class="Subnavigation-Punkte" href="#">Why us?</a></li>
                            <li><a class="Subnavigation-Punkte" href="#">Whats in it for you?</a></li>
                            <li><a class="Subnavigation-Punkte" href="#">How our products help?</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

Alles anzeigen

Soll laut dem W3c Validator richtig sein, wobei Ich das Rot markierte <li> Tag nicht wieder geschlossen habe!

________________________________________________________________________________________________________________________

Wenn Ich es schließe :

Code

<div id="Navigation">
    <div class="Centered">
        <div id="Mainnavigation">
            <ul>
                <li><a class="Mainnavigation-Punkte" href="#">What we do</a>
                    <ul>
                        [COLOR=#ff0000]<li[/COLOR] id="Centered" class="Subnavigation">
                            <li><a class="Subnavigation-Punkte" href="#">Why us?</a></li>
                            <li><a class="Subnavigation-Punkte" href="#">Whats in it for you?</a></li>
                            <li><a class="Subnavigation-Punkte" href="#">How our products help?</a></li>
                        [COLOR=#ff0000]</li>[/COLOR]
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

Alles anzeigen

Wie es in diesem Code zu sehen ist, sagt mit der Validator das ein Fehler vorhanden ist!

Zitat

Line 61, Column 11

: No li element in scope but a li end tag seen.

</li>

Woran liegt das? schließt sich das zweite <li> Tag vielleicht durch das erste, was davor liegt?

Freundliche Grüße Azr!

Azr

Okay, danke nochmals für die netten Antworten.

Nun also, Ich dürfte somit z.B diesen Aufbau verwenden :

Zitat

<div id="Beispiel1"> <div class="Beispiel2">
<div id="Beispiel3">
<ul id="Beispiel4">
<li id="Beispiel5"></li>
<li id="Beispiel6"></li>
<li id="Beispiel7"></li>
<li id="Beispiel8"></li>
</ul>
</div>
</div>
</div>

Alles anzeigen

Aber darf es z.B nicht so tuen?

Zitat

<div>
<ul>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ul>
</div>

Alles anzeigen

Azr

Danke dir vielmals! Dies wird dann wohl mein Problem beheben Danke nochmals.

Azr

Guten Morgen liebe "Forum-Hilfe" Community,

als Ich meinen Quellcode durch die Internetseite : http://validator.w3.org gejagt habe,
spuckte er eine Fehlermeldung raus :

Zitat

Line 51, Column 23

: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

<div class="Centered">

Contexts in which element div may be used:Where flow content is expected.Content model for element ul:Zero or more li elements.

Dies bedeutet doch dass Ich keine <div></div> Elemente in einem übergeordnetem <ul></ul< Element einbringen darf oder?

Azr

http://jsfiddle.net/

Azr

Haha also habe letztens eine Seite gesehen, wo man 4 Fenster hatte.
-1 x Html Code.
-1 x Css Code.
-1 x Live Preview.
-1 x fällt mir nicht ein.

Dort konnte man seine Codes posten, weiterversenden, online editieren.

Azr

Wie heißt die Seite, wo man 4 Fenster hatt und seine Html / Css Codes Posten kann?

Azr

Nunja, dann tut es mir leid, sagtest aber ja auch das das Javascript-Topic nicht um sonst da ist.
Ist ja nun auch zu spät, also bitte nicht weiter über den Fehler des neu eröffnen´s schreiben.
Wäre sehr dankbar wenn jemand etwas über meinen Fehler weiß.

Azr

Wieso mit diesem Thema, in den anderen Treaths ging es ausschließlich um:

-Html 5 Doctype,
-Logo an fester stelle positionieren, dank z-index erfolgreich gelöst,
-Um die suche nach einer Subnavigation.Ebenfalls gelöst.
-Imageslider ( noch nicht gelöst).

Nun frage Ich nach einem Problem was neu ist und Ich nicht gelöst habe, da Ich keine große Ahnung von Javascripts bisher habe.

Azr

Sry dank z-index gelöst!

Azr

Guten Tag liebe Community,

Ich habe eine "Div Navigation" erstellt, diese ebenfalls in "Css" angepasst.
Beim Hovern der "Main-Navigation" soll sich eine "Sub-Navigation" ausfahren.
Diese liegt über dem "Slider" aber unter der "Main-Navigation".

Mein Problem ist folgendes :

Wenn Ich nun den ersten "Main-Navigationspunkt" Hovere fährt sich die "Sub-Navigation" aus, aber sobald Ich die "Main-Navigation" mit der Maus verlasse und versuche die "Sub-Navigation" auszuwählen verschwindet diese wieder.
Sie soll aber nur verschwinden wenn Ich nicht mit der Maus den "Main-Navigationspunkt" oder die jeweilige "Sub-Navigation" berühre.

Javascript Code : http://pastebin.com/qfHhSiXc

Link zum Problem (In Bearbeitung die Seite) : http://my-alina.de/anpassung/1/Sitrion.html

Über eine Antwort würde Ich mich sehr freuen,

Freundliche Grüße
Azr

Azr

Also bin jetzt auf ein Tutorial gestoßen wo ich dies selbst erstellen kann

Nur leider Slidet er die Bilder nicht, tuen tut er aber was schaut selbst :

http://www.my-alina.de/anpassung/1/Sitrion.html

Habe auch 2 Beispiel Bilder eingefügt, erkennt dort jemand auf Anhieb einen Fehler meinerseits?

Azr

Hmmh kennt den vielleicht sonst wer einen Slider bei dem die Funktion "width:100%;" funktioniert ?
Beziehungsweise einen guten Slider?

Azr

Guten Tag liebe Community,

Mein Problem ist folgendes :

Ich habe mir den "Jquery Nivo Slider" heruntergeladen und alles nach dieser Anleitung befolgt.
Es funktioniert auch alle soweit, nur soll der "Nivo Slider" über die gesamte Breite gehen also width:100%;
Ebenfalls ist dort noch ein Fehler vorhanden da die 2 Beispielbilder sich komisch überlappen.

Aber seht am besten selbst :

http://www.my-alina.de/anpassung/1/Sitrion.html

Hier nochmals die Codes :

Head:

Code

<link rel="stylesheet" type="text/css" href="Sitrion.css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />

Body :

HTML

<div id="Headerslider">	<div id="slider" class="nivoSlider">		<img src="images/Sitrio-Beispiel1.png" alt="" />		<img src="images/Sitrio-Beispiel2.png" alt="" />	</div>		<script type="text/javascript">	$(window).load(function() {    $('#slider').nivoSlider({        effect: 'fade', // 'random' oder Übergangseffekte auflisten z.B: 'fold,fade,sliceDown'        animSpeed: 500, // Geschwindigkeit des Übergangseffektes        pauseTime: 5000, // Zeit wie lange jedes Bild angezeigt wird    });});</script></div>

Css :

CSS

/* * jQuery Nivo Slider v2.7.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */




.nivoSlider {
	position:relative;
	width:100%;
	height:287px;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	display:none;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:8;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:9;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

Alles anzeigen

Beiträge von Azr

Nivo Slider Problem.

Nivo Slider Problem.

Nivo Slider Problem.

Wieso übernimmt der Code die .Centered Angabe nicht?

<li> Tag schließen.

<li> Tag schließen.

<li> Tag schließen.

<div></div> in <ul></ul> ?

<div></div> in <ul></ul> ?

<div></div> in <ul></ul> ?

Frage zu Seite

Frage zu Seite

Frage zu Seite

Navigation Problem beim Hovern - Javascript

Navigation Problem beim Hovern - Javascript

Logo an fester Stelle über 2 Bars positionieren.

Navigation Problem beim Hovern - Javascript

Imageslider Problem.

Imageslider Problem.

Imageslider Problem.