Beiträge von JR Cologne

Nicht zwingend. Du kannst das auch mit anderen serverseitigen Scriptsprachen umsetzen. Außerdem gibt es auch noch iframes, was einer Lösung über HTML entsprechen würde, allerdings ist es eher empfehlenswert mit PHP zu arbeiten, da dies definitiv am meisten verbreitet ist.

Ich bin mir nicht ganz sicher, ob ich dich richtig verstanden habe, aber eigentlich musst du dem Element mit dem Background-Image nur eine Breite in Prozent geben, wie z.B. 100%. Dann ist das Bild immer so breit, wie der Viewport.

Notizen kannst du in den meisten Fällen einfach ignorieren. Dies bedeutet einfach, dass deine Variable noch nicht definiert wurde.

Das ist ja auch logisch, schließlich muss man die Daten erst mal eingeben und absenden, damit die Variable gefüllt ist.

Ach, ok. Verstehe. Vielen Dank für die Erklärung.

Wie? Dann habe ich da was falsch verstanden. Ich dachte, das besondere an SVG ist, dass es sich eben ohne Probleme skalieren lässt.
Das wäre dann ja nicht mehr der Fall, wenn es immer eine bestimmte Größe, wie z.B. 40x40px, hätte.

Das mit der Höhe und den Prozentwerten ist mir klar, nur hätte es ja auch eine andere Lösung geben können.

Zu em: Die Browserabhängigkeit von em ist mir ebenfalls bekannt, aber ich denke nicht, dass jeder Browser da groß einen anderen Standard hat. Wenn handelt es sich um wenige Pixel. Die meisten haben wohl 16px als Standard.
Wobei man sagen muss, ob man jetzt px oder em einsetzt, macht jetzt auch keinen großen Unterschied. Von daher nehme ich dann meinetwegen auch Pixel, falls es wirklich keine Lösung gibt.

Ja, klar. Das könnte ich machen, aber ich hätte es halt gerne in Prozent.

Normalerweise klappt das ja auch ganz gut, nur jetzt eben nicht.

Gibt es also eine Möglichkeit das mit Prozentwerten zu machen oder nicht?

Wenn nicht, mach ich es mit em.

Ich habe schon versucht die Höhe zu beeinflussen, aber das funktioniert nur bei Pixeln. Prozentwerte haben nichts geändert.

Aber ich kann's natürlich noch mal ausprobieren...

Hallo zusammen,

wie schon aus dem Titel hervorgeht, habe ich Probleme mit einem SVG Menu-Button. Diesen habe ich direkt im HTML-Code eingefügt.

<div id="navbar">
        <a href="#navMenu_open" class="menu-button show-navMenu"><svg xmlns="http://www.w3.org/2000/svg"><g style="fill:none;stroke-width:1;stroke:none"><path d="M1.5 6C1.2 6 1 6.2 1 6.5L1 7.5C1 7.8 1.2 8 1.5 8L22.5 8C22.8 8 23 7.8 23 7.5L23 6.5C23 6.2 22.8 6 22.5 6L1.5 6ZM1.5 11C1.2 11 1 11.2 1 11.5L1 12.5C1 12.8 1.2 13 1.5 13L22.5 13C22.8 13 23 12.8 23 12.5L23 11.5C23 11.2 22.8 11 22.5 11L1.5 11ZM1.5 16C1.2 16 1 16.2 1 16.5L1 17.5C1 17.8 1.2 18 1.5 18L22.5 18C22.8 18 23 17.8 23 17.5L23 16.5C23 16.2 22.8 16 22.5 16L1.5 16Z" fill="#000"/></g></svg></a>
        <a href="#navMenu_close" class="menu-button hide-navMenu"><svg xmlns="http://www.w3.org/2000/svg"><g style="fill:none;stroke-width:1;stroke:none"><path d="M1.5 6C1.2 6 1 6.2 1 6.5L1 7.5C1 7.8 1.2 8 1.5 8L22.5 8C22.8 8 23 7.8 23 7.5L23 6.5C23 6.2 22.8 6 22.5 6L1.5 6ZM1.5 11C1.2 11 1 11.2 1 11.5L1 12.5C1 12.8 1.2 13 1.5 13L22.5 13C22.8 13 23 12.8 23 12.5L23 11.5C23 11.2 22.8 11 22.5 11L1.5 11ZM1.5 16C1.2 16 1 16.2 1 16.5L1 17.5C1 17.8 1.2 18 1.5 18L22.5 18C22.8 18 23 17.8 23 17.5L23 16.5C23 16.2 22.8 16 22.5 16L1.5 16Z" fill="#000"/></g></svg></a>
    </div>

Erst mal funktioniert alles. Der Button ist zu sehen und auch die Farbe konnte ich per CSS ändern.

Eine Sache bekomme ich jedoch nicht gelöst. Und zwar scheint die SVG irgendwie die Größe der Navbar bzw. der Menu-Buttons zu beeinflussen.

Hier mal der vermutlich relevante CSS-Code:

nav#nav_main #navbar .menu-button {
        display: block;
        color: white;
        text-decoration: none;
        cursor: pointer;
        font-size: 1.4em;
        padding: 1% 0 1% 5%;
    }
    nav#nav_main #navbar .menu-button svg path  {
      fill: white;
    }

Und ein Screenshot:

[Blockierte Grafik: http://fs5.directupload.net/images/160313/vxemwr8g.png]

Falls ihr noch mehr Code braucht, gebt mir Bescheid oder schaut hier vorbei. Der Code dort sollte auch noch halbwegs aktuell sein, da nur die Teile, die ich hier gepostet habe, verändert sind.

Wenn nötig, kann ich den aktuellen Stand auch auf meine Website hochladen.

So, schon mal vielen Dank im Voraus.

Gruß
JR Cologne

Ok, warum packst du deine Daten in eine Tabelle, wenn du diese letztendlich aber in einem Div-Container haben willst?

Kann aber auch sein, dass ich das Problem dabei einfach nicht sehe, weil ich mich mit MySQL und Datenbanken noch nicht auskenne und dir deswegen vielleicht auch nicht wirklich helfen kann...

Sorry, dass ich ein bisschen schwer von Begriff bin...

Welche PHP-Abfrage?
Bisher sehe ich noch kein PHP-Code innerhalb deines geposteten Code. Oder habe ich da was übersehen?

Was möchtest du denn jetzt eigentlich genau erreichen? Irgendwie ist mir das noch nicht ganz klar...

Achso, sry.

Das machst du ganz normal mit CSS per float, margin usw...

Du machst das eigentlich ganz normal, wie du HTML auch immer stylst, da PHP sozusagen zu HTML wird.

Beispiel:

<div>Ich bin eine rote Div-Box</div>

div {
   background-color: red;
}

... liefert das gleiche Ergebnis wie ...

echo '<div>Ich bin eine rote Div-Box</div>';

div {
   background-color: red;
}

Zitat von samuelzeh

Okay? Kannst Du mir ein kurzes Beispiel geben?

Ok, von mir aus...

index.php

<!DOCTYPE html>
<html>




<head>
    <title>PHP Include</title>




    <meta charset="UTF-8">




    <link href="style.css" type="text/css" rel="stylesheet">
</head>




<body>




    <p>Diese Seite f&uuml;llt sich per PHP Include...</p>




    <?php include('article.html'); ?>




</body>
</html>

article.html

<article>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam
ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum
rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut
libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget
eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales,
augue velit cursus nunc,</article>

style.css

article {
    background: #dadada;
}

Der Article sollte mit einer grauen Hintergrundfarbe angezeigt werden, wenn du die index.html aufrufst.

Ne, ne. Das geht. Du kannst den HTML-Code, den du per PHP einbindet, ganz einfach mit CSS stylen. Dafür brauchst du kein extra Stylesheet. Versuch's einfach mal.

Das Ganze machst du am besten mit PHP und include().

Du packst dann also alle Stellen, die sich wiederholen, in extra Dateien und bindest diese über include() innerhalb des HTML-Codes ein.

Sry für meine späte Antwort. Hatte in den letzten Tagen kein Internet.

Ich könnte dir das theoretisch machen, aber erwarte bitte nicht, dass es z.B. in einer Woche fertig ist.

Ich würde mich dann einfach mal dransetzen, wenn ich Lust und Zeit habe. Das kann morgen sein, aber vielleicht ist das auch erst in einem Monat oder sogar später.

Am besten schreibst du mir einfach mal ne PN, falls von deiner Seite wirklich Interesse daran besteht, dass ich das mache. Dann können wir das in Ruhe klären.

Ok, ich habe mir mal alles über die Entwicklertools angeschaut und ein bisschen im Code kommentiert...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />




<meta name = "viewport" content = "width = 480">  <!-- würde ich, wie gesagt, ändern... -->




<title>-</title>
<link rel="stylesheet" href="album.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="album.js"></script>




<script language="javascript" type="text/javascript">




var per_view = 20;
if(gup( 'album' )) {
var album_xml = gup( 'album' ).replace("//","../../");
var slides_path = album_xml.replace("album.xml","");
	$(function(){
		ALBUM.init({
			xmlPath : album_xml,
			slidesPath : slides_path
		});
	});
} else {
	$(function(){
		MENU.init({
			xmlPath : "../../menu.xml",
		});
	});	
}







</script>




<!-- BananAlbum mobile viewer -->
<!-- Rudin Swagerman -->
<!-- BananAlbum.com -->
<!-- 2010 -->




</head>
<body>
<p align="center"><a href="http://www.lineup-shots.com/res/m/index.html"><img src="header.jpg" width="1012" height="200"></a></p>
<!-- 1. Was macht da das p-Element? p markiert ein Absatz und keinen Header, zu empfehlen ist hier: <header>, 2. Teilweise über HTML zu stylen (align="center") ist extrem veraltet, bitte mit CSS machen, 3. Das img sollte eher über CSS eingebunden werden, da es zum Design und nicht zum Content gehört -->
<div id="album">
                                <!-- zwei divs mit der id "album", warum? Falls das einen tieferen Sinn haben sollte, wäre es gut, wenn du die wenigstens unterschiedlich benennst. Eine id wird nämlich jeweils nur einmal vergeben. -->
	<div id="album">







		<div class="menu" style="display:none;">   <!-- Wenn das JS-Script gelaufen ist, ändert sich das display zu "inline". Hier könnte ein Fehler liegen, da die, durch CSS deklarierte Breite, und die Zentrierung durch margin: 0 auto; eigentlich bei einem inline-Element nicht wirken. Außerdem wäre hier auch wieder statt dem div ein <nav>-Element vorzuziehen. -->




		</div>

		<div class="top_navigation">   <!-- soweit ich das sehen kann, ist alles in der top_navigation nur für den JS-Teil und ist auch nicht auf dem Bildschirm zu sehen, richtig? -->




   		<span><a class="navigate_previous" href="#">&lt;</a></span>
   		<span class="status_top">&nbsp;</span>
        <span><a class="navigate_next" href="#">&gt;</a></span>




		</div>





        
		<div class="slides">   <!-- Von diesem Teil habe ich den Sinn noch gar nicht durchblickt, da es auch nach der Ausführung des JS-Skriptes leer ist. -->




		</div>




		<div class="bottom_navigation"> <!-- hier gilt vermutlich dasselbe, wie bei der top_navigation? -->




   		<span><a class="navigate_bottom_previous" href="#">&lt;</a></span>
   		<span class="status_bottom">&nbsp;</span>
        <span><a class="navigate_bottom_next" href="#">&gt;</a></span>




		</div>
<a href="http://www.lineup-shots.com/res/m/index.html"><img src="home.png" width="100" height="100"></a></p>  <!-- Ein geschlossener p-Tag, der nicht geöffnet wurde -->
<div class="bottom">&nbsp;</div>  <!-- und noch eine komische div-box... -->




	</div>







</body>
</html>

So, wie vermutlich klar geworden ist, solltest du deinen Code nochmal ein bisschen überarbeiten. Außerdem würde ich aus der nav ein Block-Level-Element machen und dann nochmal alles testen.

Generell kann ich aber nur auf richtiges responsive Design verweisen, falls das angesprochene, nicht helfen sollte. Denn nur so schaffst du es, deine Seite wirklich gut auf mobilen Endgeräten darzustellen.

Ok, erstmal habe ich noch nie gesehen, dass jemand bei dem Viewport eine feste Breite deklariert.

Eigentlich sieht man immer nur das...

<meta name="viewport" content="width=device-width,initial-scale=1.0">

... und das macht auch am meisten Sinn, da man ja möchte, dass sich möglichst alles automatisch anpasst.

So, jetzt zum eigentlichen Problem zurück:

Folgendes verwirrt mich: Du öffnest das Menu, setzt es auf display: none; und schließt es sofort wieder. Wo ist da der Sinn?

Das gleiche gilt für "slides".

Füllst du die irgendwie durch das JavaScript oben? Habe leider keine Ahnung von JS, deswegen frage ich...

Vermutlich kann ich dir dann auch nicht weiterhelfen, außer du kannst den Code posten, der durch das JS dann entstanden ist.

Hm, aus irgendeinem Grund wirkt, dass margin: 0 auto; wohl nicht. Oder bin ich wieder zu blöd, um den Fehler zu finden?!

Kannst du dein HTML auch mal posten?

Ich würde jetzt einfach mal darauf tippen, dass es am text-align: left; bei der Klasse .menu liegt...