HP zentrieren auf mobilen Endgeräten

fraugunkel · 12. Februar 2016

Hallo,

auf meiner, mit dem Programm Jalbum, erstellten HP habe ich folgendes Problem:
Die Bildergallery, als auch die Navigation wird auf normalen Desktop PC zentriert, wie gewünscht, dargestellt. Wenn ich diese allerdings mit einem Tablet oder Smartphone öffne, werden sowohl die Navigation als auch die Bildergallery, linksbündig dargestellt.
Zum einfacherem Verständnis einmal der Link zu meiner Seite: [URL entfernt]

Schön wäre es, wenn jemand einen Tip hätte, was ich in der css oder index-Datei verändern müsste, um wie in der Desktop Ansicht, alles mittig zu bekommen?
Über jeden Tip wäre ich sehr dankbar.

MrMurphy · 12. Februar 2016

Hallo

Firefox und Opera melden mir bei deinem Link Malware-Angriffe. Was soll das?

Gruss

MrMurphy

JR Cologne · 12. Februar 2016

Beim IE kommt aus irgendeinem Grund nichts...

Für Chrome und Firefox kann ich es aber bestätigen.

Zu deinem Problem:

Das liegt daran, dass der Content einfach nicht mehr auf die Seite passt und es somit aussieht, als wäre es linksbündig. In Wirklichkeit ist es aber zentriert.

fraugunkel · 12. Februar 2016

Hallo, das tut mir leid. Ich hatt vor einer Woche auch mal so eine Meldung. Habe dann alles gescannt und komplett neu draufgespielt. Dürfte eigentlich safe sein. Habe es auch von google checken lassen. Aber noch einmal zu meinem Problem. Wiso passt denn der content nicht mehr auf die Seite? Der header ist doch auch da. Da könnte die Navigation doch auch in die mitte rutschen. Gibt es dafür eine Lösung, die ich mal probieren könnt?

JR Cologne · 12. Februar 2016

Ach, sry. Jetzt sehe ich es auch. Könntest du mal den Code posten?

Irgendwas stimmt mit der Website übrigens wirklich nicht:

http://www.directupload.net/file/d/4262/7424qc4a_png.htm

Basi · 12. Februar 2016

Bitte überprüfe deine Seite und behebe die hier bereits beschriebenen Problemtaiken, bevor du den Link erneut einstellst. Ich werfe dir keine bösen Absichten vor, aber Backlinks auf als unsicher gekennzeichnete Seiten sind hier nicht erwünscht.

fraugunkel · 12. Februar 2016

Hallo,

vielen Dank erst einmal für eure Mühen. Warum jetzt tatsächlich wohl immernoch diese Meldungen kommen verstehe ich eigentlich überhaupt nicht mehr. Habe meinen Server komplett leer gemacht und auch den Inhalt meines PC mit malwarebytes durchsucht...

Hier mal der komplette Code meiner Seite. Vielleicht findet ja einer den Fehler? Nochmals sorry für die Meldungen bei meiner HP, aber hättet ihr sonst noch eine Lösung, was ich machen könnte, um diese Hinweise zu vermeiden?:

CSS

@charset "UTF-8";




html, body {
    color: #333333;
    background-color: #FFFFFF;
}




body {
    font: 2.1em "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    text-shadow: #333333 0px 0px 0px;
    margin: 0px auto 0px auto;
}




.menu {
    width: 660px;
    margin: 10px auto 10px auto;
    text-align: left;
}




.top_navigation {
    margin: 16px auto 0px auto;
    visibility: hidden;
}




.bottom_navigation {
    margin: 0px auto 44px auto;
    visibility: hidden;
}




#slides {
    width: 460px;
    margin: 10px auto 10px auto;
    text-align: center;
}




#album {
    width: 480px;
    margin: 0px auto 0px auto;
    text-align: center;
}




p {
    margin: 12px auto 12px auto;
}




ul {
    list-style-type: none;
}




a {
    color: #333333;
    text-decoration: none;
}




    a:hover, a:active, a:visited {
        color: #777777;
    }




img {
    border-style: none;
    position: relative;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}




.bottom {
    position: absolute;
    top: 0px;
    height: 640px;
    width: 2px;
}

Alles anzeigen

JR Cologne · 12. Februar 2016

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

fraugunkel · 12. Februar 2016

Das hatte ich auch gedacht und habe es durch center erstzt. Doch das änderte leider gar nichts. Bzw. der Text wird nur um einige Pixel nach rechts verschoben/zentriert und Vorallendingen erklärt es noch nicht, warum alles in der Desktop ansicht zentriert und korrekt dargestellt wird...

JR Cologne · 12. Februar 2016

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?

fraugunkel · 12. Februar 2016

Vielen Dank für deine Mühe. Hier kommt der html, ich gehe mal davon aus, dass du die index-datei meinst oder? Meine Programmierkenntnisse und die damit verbundene Sprache sind nicht so der " Bringer":

HTML

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




    <meta name="viewport" content="width = 480">




    <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 = 5;
        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>




    <div id="album">







        <div class="menu" style="display:none;">




        </div>




        <div class="top_navigation">




            <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">




        </div>




        <div class="bottom_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>




        <div class="bottom">&nbsp;</div>




    </div>







</body>
</html>

Alles anzeigen

JR Cologne · 12. Februar 2016

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

Eigentlich sieht man immer nur das...

HTML

<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.

wolf · 13. Februar 2016

Zu deinem Problem mit deinem server.. du solltest dringend ALLE und damit meine ich ALLE zugangsdaten ändern, FTP, SSH, Webinterface, MYSQL und was dir sonnst noch einfällt .. lieber die kiste einmal platt machen und neu aufsetzen als einen offenen Server zu haben.

fraugunkel · 13. Februar 2016

Wenn ich den viewport ändere so wie du gesagt hast, ist es zu rechtsbündig und der Header leider komplett verschwunden? Was könnte ich denn sonst noch ausprobieren?

Hier nochmal die css und darunter die index-Datei:

CSS

@charset "UTF-8";




html, body {
color: #333333;
background-color: #FFFFFF;
}




body {
font: 2.1em "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
text-shadow: #333333 0px 0px 0px;
margin: 0px auto 0px auto; 
}




.menu {
width: 660px;
margin: 10px auto 10px auto;
text-align: left;
}




.top_navigation {
margin: 16px auto 0px auto;
visibility: hidden;
}




.bottom_navigation {
margin: 0px auto 44px auto;
visibility: hidden;
}




#slides {
width: 460px;
margin: 10px auto 10px auto;
text-align: center;
}




#album {
width: 480px;
margin: 0px auto 0px auto;
text-align: center;
}




p {
margin: 12px auto 12px auto; 
}




ul {
list-style-type: none;
}




a {
color: #333333;
text-decoration: none;
}




a:hover, a:active, a:visited {
color: #777777;
}




img {
border-style: none;
position:relative;
position:relative; margin-left:auto; margin-right:auto;
}




.bottom {position: absolute; top: 0px; height: 640px; width: 2px;}

Alles anzeigen

HTML

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




<meta name = "viewport" content = "width = 480">




<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 = 5;
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>




 <div id="album">







<div class="menu" style="display:none;">




 </div>




<div class="top_navigation">




 <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">




 </div>




 <div class="bottom_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>




<div class="bottom">&nbsp;</div>




 </div>







</body>
</html>

Alles anzeigen

JR Cologne · 13. Februar 2016

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

HTML

<!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>

Alles anzeigen

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.

fraugunkel · 14. Februar 2016

Hallo Cologne,
Wirklich vielen herzlichen Dank für die ganze Mühe, die du Dir mit dem analysieren meines Codes gegeben hast. Leider kann ich viele deiner Verbessserungsvorschläge nicht umsetzten, da mir einfach die Programmierkenntnisse komplett fehlen. Der Code, bzw. Die HP wurde von einem Programm (jalbum) generiert, welches auch schon etwas veraltet ist. Gäbes es ggf. Die Möglichkeit, dass du noch letztmalig dich meines Problems annimmst und einfach mal in meinen Codes veränderst, was du glaubst nötig ist, und ich dann mal bei mir hochlade und ausprobiere? Denn wenn ich jetzt probiere Veränderungen vorzunehmen und beispielsweise nur ein leerzeichen oder Anführungssriche zuviel setze, wird das doch alles Murks. Vielen Dank auch schon einmal bis hierher.

wolf · 14. Februar 2016

Ziel dieses Forums ist es, hilfe zur selbsthilfe zu geben, nicht anderen die Arbeit zu machen.
Wenn du jemanden suchst der Programmieren kann und deine Probleme behebt solltest du dich an eine Web-Agentur deiner Wahl wenden und Geld investieren.
Zumal du meine Empfehlungen offensichtlich noch nicht umgesetzt hast, Firefox schlägt immernoch Alarm, deine Website wird auch von Google als Schädlich eingestuft.
html-seminar.de/woltlab/attachment/900/

fraugunkel · 14. Februar 2016

Hallo Wolf,
Doch habe ich gemacht. Alles neu und Passwörter verändert auf meinem Server. Keine Ahnung warum diese Meldung immernoch kommt? Gibt es Tools, um den Server mal zu scannen, ähnlich wie Festplatte mit malwarebytes?
Bezüglich meines Zentrierungsproblems wäre ich selbstverständlich auch bereit eine gewisse Summe für die Lösung meines Problems zu zahlen. Wollte nur erst einmal hier fragen, ob es nicht eine simple Lösung gibt. Ist ja doch irgendwie komisch, dass die HP auf dem Desktop zentriert erscheint und auf meinem Tablet nicht...?

Basi · 14. Februar 2016

Wenn wir da wirklich etwas zu sagen sollen, müsstest du jetzt mal ein bisschen was über deinen Server verraten. Betriebssystem, (evtl.) Anbieter, wie du (detailliert) vorgegangen bist, um das Problem zu beheben, etc.

Ansonsten raten wir übernächstes Jahr noch.

JR Cologne · 27. Februar 2016

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.

HP zentrieren auf mobilen Endgeräten

Jetzt mitmachen!

Teilen