|
|||
Google chrome und Firefox Probleme Footer bleibt nicht unten
Hi Forum,
habe das Problem dass im Firefox die zwei davor liegenden Boxen verdeckt werden, Auch bleibt der Footer nicht unten kleben wie er sollte. Noch was bitte der Google Button und das Facebook Feld sollten nach innen zentriert werden. Wer kann helfen bin einfach Anfänger Hier der Code: PHP-Code:
Code:
html, body { height: 100%; } .container { width:100%; } .vertical-center { height:100%; width:100%; text-align: center; /* align the inline(-block) elements horizontally */ font: 0/0 a; /* remove the gap between inline(-block) elements */ } .vertical-center:before { /* create a full-height inline block pseudo=element */ content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } .vertical-center > .container { max-width: 100%; background-color: gold; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */ } .center-row { display:table; } .center { display:table-cell; vertical-align:middle; float:none; } .center_box1 { margin-right: auto; margin-bottom: 0; margin-left: auto; min-height: 150px; text-align: center; /* align the inline(-block) elements horizontally */ } .center_box2 { font-size: 15pt; text-align: center; /* align the inline(-block) elements horizontally */ } .googlebox{ padding: 10px 0 0 350px; } .center_box4 { float: right; text-align: center; height: 40px; clear: both; } .footer { background-color: #1d94c9; width: 100%; max-height: 150px; padding: 50px 50px 0px 50px; position: relative; bottom: 0px; position: absolute; } .pikto { float: left; padding: 0 10px 0 0; } .logoherz{ position: relative; top: -125px; /* left: 900px; */ float: right; z-index: 10; margin: 0 50px 0 0; } .down { font-size: 30pt; text-transform: uppercase; } .facebookundgoogle { font-size: 13pt; color: #09F; } .btn { text-transform: uppercase; } /*#logoherz{ background-image: url(../images/made-with-live.png); background-repeat: no-repeat; background-position: right center; background-color: transparent; height: 160px; height: 160px; padding: 0 0 100px 0; background-position: right 80px; background-size: 160px 160px; z-index: 1; margin: 0 50px 0 0; position: relative; position: absolute; left: 400px; right: 80px; bottom: -130px; } */ Danke für die Hilfe Gruß an alle |
Sponsored Links |
|
|||
Hier
der Link: Download Seite für Kunden HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://apis.google.com/js/platform.js" async defer> {lang: 'de'} </script> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Download Seite für Kunden</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/mine2.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="https://apis.google.com/js/platform.js" async defer> {lang: 'de'} </script> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="center_box1"><img src="images/logo.jpg" width="329" height="197"></div> <div class="center_box2"> <p> </p> <p> </p> <?php foreach(glob('zip/*.zip') as $file) //echo $file .basename($file); //$max=max($max,substr($file,0,-4)); // your file $file = basename($file); $info = pathinfo($file); $file_name = basename($file,'.'.$info['extension']); echo "Hallo Familie ".$file_name; // outputs 'image' ?> <!-- <p>Familie Mustermann<br>--> <br> <br> <?php // Mit den folgenden Zeilen lassen sich // alle Dateien in einem Verzeichnis auslesen $handle=opendir ("zip/"); //echo "Verzeichnisinhalt:<br>"; while ($datei = readdir ($handle)) { // Höhere Verzeichnisse nicht anzeigen! if ($datei != "." && $datei != "..") { // Link erstellen // echo "<a href=\"zip/$datei\"target='_blank'>$datei</a><br>\n"; echo "<a href=\"zip/$datei\"target='_blank'class='btn btn-primary btn-lg'>$datei</a><br>\n"; } } closedir($handle); ?> <!-- echo <a href="#" class="btn btn-primary btn-lg">Download</a>*/--> <p> </p> <p class="facebookundgoogle">Folge mir auf <br> Google+ und Facebook</p> <p> </p> </div> <div class="googleface"> <div class="googlebox"> <div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/111093667533929940695" data-rel="author"></div> </div> <div class="center_box4"> <iframe src="https://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FFotografie.Konstanz%2F&width=450&height=80&layout=standard&size=large&show_faces=true&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> </div> </div> <p> </p><p> </p> </div> </div> </div> <div class="footer"> footer <div class="pikto"> <a href="https://www.facebook.com/Fotografie.Konstanz/" target="_blank"><img src="images/icon-facebook.png" width="46" height="47"></a></div> <div class="pikto"> <a href="https://plus.google.com/+ChristophLetzner" target="_blank"><img src="images/icon-google.png" width="45" height="47"></a> </div> <div class="pikto"> <a href="https://www.instagram.com/ChrisLetPhoto/" target="_blank"><img src="images/icon-instagram.png" width="46" height="47"></a> </div> <div class="pikto"> <a href="https://de.pinterest.com/ChrisLetPhoto/" target="_blank"><img src="images/icon-pinterest.png" width="46" height="47"></a> </div> <div class="logoherz"><a href="#"><img src="images/made-with-live.png"></a></div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!--<script src="js/bootstrap.min.js"></script>--> </body> </html> |
|
|||
Schaust du dir den von dir verlinkten Download überhaupt an? Da ist ein config.json, css, fonts und js Ordner drinnen aber keine html Datei. Auch ändert es nichts, wenn du den PHP code zweimal postest, was für uns interessant ist ist alleine der HTML Code.
|
|
|||
<!DOCTYPE html>
<html lang="de"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://apis.google.com/js/platform.js" async defer> {lang: 'de'} </script> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Download Seite für Kunden</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/mine2.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="https://apis.google.com/js/platform.js" async defer> {lang: 'de'} </script> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="center_box1"><img src="images/logo.jpg" width="329" height="197"></div> <div class="center_box2"> <p> </p> <p> </p> <?php foreach(glob('zip/*.zip') as $file) //echo $file .basename($file); //$max=max($max,substr($file,0,-4)); // your file $file = basename($file); $info = pathinfo($file); $file_name = basename($file,'.'.$info['extension']); echo "Hallo Familie ".$file_name; // outputs 'image' ?> <!-- <p>Familie Mustermann<br>--> <br> <br> <?php // Mit den folgenden Zeilen lassen sich // alle Dateien in einem Verzeichnis auslesen $handle=opendir ("zip/"); //echo "Verzeichnisinhalt:<br>"; while ($datei = readdir ($handle)) { // Höhere Verzeichnisse nicht anzeigen! if ($datei != "." && $datei != "..") { // Link erstellen // echo "<a href=\"zip/$datei\"target='_blank'>$datei</a><br>\n"; echo "<a href=\"zip/$datei\"target='_blank'class='btn btn-primary btn-lg'>$datei</a><br>\n"; } } closedir($handle); ?> <!-- echo <a href="#" class="btn btn-primary btn-lg">Download</a>*/--> <p> </p> <p class="facebookundgoogle">Folge mir auf <br> Google+ und Facebook</p> <p> </p> </div> <div class="googleface"> <div class="googlebox"> <div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/111093667533929940695" data-rel="author"></div> </div> <div class="center_box4"> <iframe src="https://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FF otografie.Konstanz%2F&width=450&height=80&layout=s tandard&size=large&show_faces=true&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> </div> </div> <p> </p><p> </p> </div> </div> </div> <div class="footer"> footer <div class="pikto"> <a href="https://www.facebook.com/Fotografie.Konstanz/" target="_blank"><img src="images/icon-facebook.png" width="46" height="47"></a></div> <div class="pikto"> <a href="https://plus.google.com/+ChristophLetzner" target="_blank"><img src="images/icon-google.png" width="45" height="47"></a> </div> <div class="pikto"> <a href="https://www.instagram.com/ChrisLetPhoto/" target="_blank"><img src="images/icon-instagram.png" width="46" height="47"></a> </div> <div class="pikto"> <a href="https://de.pinterest.com/ChrisLetPhoto/" target="_blank"><img src="images/icon-pinterest.png" width="46" height="47"></a> </div> <div class="logoherz"><a href="#"><img src="images/made-with-live.png"></a></div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!--<script src="js/bootstrap.min.js"></script>--> </body> </html> |
|
|||
Nein, das ist der PHP Code
Code:
<?php foreach(glob('zip/*.zip') as $file) //echo $file .basename($file); //$max=max($max,substr($file,0,-4)); // your file $file = basename($file); $info = pathinfo($file); $file_name = basename($file,'.'.$info['extension']); echo "Hallo Familie ".$file_name; // outputs 'image' ?> |
|
|||
so jetz htaml
HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://apis.google.com/js/platform.js" async defer> {lang: 'de'} </script> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Download Seite für Kunden</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/mine2.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="https://apis.google.com/js/platform.js" async defer> {lang: 'de'} </script> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="center_box1"><img src="images/logo.jpg" width="329" height="197"></div> <div class="center_box2"> <p> </p> <p> </p> <!-- <p>Familie Mustermann<br>--> <br> <br> <p> </p> <p class="facebookundgoogle">Folge mir auf <br> Google+ und Facebook</p> <p> </p> </div> <div class="googleface"> <div class="googlebox"> <div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/111093667533929940695" data-rel="author"></div> </div> <div class="center_box4"> <iframe src="https://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FFotografie.Konstanz%2F&width=450&height=80&layout=standard&size=large&show_faces=true&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> </div> </div> <p> </p><p> </p> </div> </div> </div> <div class="footer"> footer <div class="pikto"> <a href="https://www.facebook.com/Fotografie.Konstanz/" target="_blank"><img src="images/icon-facebook.png" width="46" height="47"></a></div> <div class="pikto"> <a href="https://plus.google.com/+ChristophLetzner" target="_blank"><img src="images/icon-google.png" width="45" height="47"></a> </div> <div class="pikto"> <a href="https://www.instagram.com/ChrisLetPhoto/" target="_blank"><img src="images/icon-instagram.png" width="46" height="47"></a> </div> <div class="pikto"> <a href="https://de.pinterest.com/ChrisLetPhoto/" target="_blank"><img src="images/icon-pinterest.png" width="46" height="47"></a> </div> <div class="logoherz"><a href="#"><img src="images/made-with-live.png"></a></div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!--<script src="js/bootstrap.min.js"></script>--> </body> </html> |
|
|||
Zum fixen Footer: Warum position absolute? Position absolute ist erstens nur in Ausnahmefällen notwendig, zweitens ist das kein Ausnahmefall und drittens verursacht position absolute mehr Probleme als es löst, gerade für Anfänger. display: table und table-cell hat auch seine Daseinsberechtigung aber ich weiß wirklich nicht, ob du dies brauchst.
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Chrome, Probleme mit CSS | hackt1sch | CSS | 1 | 22.10.2014 09:45 |
Sticky Footer Probleme im Internet Explorer | KatiF | CSS | 2 | 25.02.2014 15:29 |
Probleme mit height: auto in Chrome | axelf | CSS | 30 | 23.08.2013 01:58 |
Cross Browser Kompatibilität mal anders - Google Chrome | surber | CSS | 3 | 12.07.2012 14:08 |
Probleme mit Navi Firefox vs IE 7 | Wellington | CSS | 5 | 04.07.2007 11:45 |