Also wenn ich richtig sehe, ist es auf http://test.klang-des-windes.de/index.php alles so wie du es wolltest.
/e mach es sonst erstmal mit <br>'s, mir fällt gerade nichts zu ein.
Beiträge von Bazs
-
-
Hast du es mal mit position:fixed versucht? Wäre auch schön wenn du es irgendwo mal hochlädst bzw. den Link hier postest.
-
-
Habe jetzt ein anderes Problem im Mobilen Bereich, Siehe 1. Beitrag.
-
oh sorry habe eig den HTML code eingefügt xD anscheint falsch, hier der Link : DANKE
-
Nun habe ich ein anderes Problem und zwar, wenn ich über Handy rauf gehe, sieht es folgendermaßen aus:Horizontal Vertikal
Im Vertikalen Bild sieht man, wie der HG richtig aussieht, aber im Horizontalen nicht.Dazu kommt auch, das im Horizontalen Bild der Text eine große Lücke ist, obwohl ich es richtig angepasst habe und im Vertikalen ist der Text weit oben, zu weit.Was ist das Problem? Hier der HTML und CSS Code:HTML
Code$(document).ready(function () { $('body').bgStretcher({ images: ['images/slide-1.jpg', 'images/slide-2.jpg'], imageWidth: 1600, imageHeight: 964, resizeProportionally: true, slideDirection: 'N', slideShowSpeed: 2000, transitionEffect: 'fade', sequenceMode: 'normal', pagination: '#nav' });CSS :
CSS@import"reset.css";@import"grid.css";@import url(http://fonts.googleapis.com/css?family=Noto+Sans);body { font:12px/19px Arial, Helvetica, sans-serif; color:#848383; position:relative; min-width:1036px; background:#000}html, body { height:100%;}html { min-width:100%}/* Global Structure---------------------------------------- */.main { margin:0 auto; width:940px; position:relative;}.container_12 { position:relative;}/*----- txt,links,lines,titles -----*/ .box-1{ border-radius:13px; -moz-border-radius:13px; -webkit-border-radius:13px; position:relative; padding-bottom:12px } .box-1 img{ width:100%; border-radius:13px 13px 0 0; -moz-border-radius:13px 13px 0 0; -webkit-border-radius:13px 13px 0 0; } .box-1 figcaption{ background:#cd96c9; position:absolute; display:block; bottom:0; left:0; right:0; font-size:20px; line-height:22px; color:#fff; padding:12px 70px; text-align:center; border-radius:0 0 13px 13px; -moz-border-radius:0 0 13px 13px; -webkit-border-radius:0 0 13px 13px; }.box-1 figcaption a{background:url(../images/marker-1.png) no-repeat 0 0;width:31px;height:31px;display:block;position:absolute;top:8px;right:39px}.box-1 figcaption a:hover{background-position:0 bottom} h1, h2, h3, h4, h5, h6 { color:#fff; position:relative; line-height:1em; font-weight:normal}h1 { font-size:32px; line-height:34px;}h2 { font-size:30px; line-height:32px; padding-bottom:28px}h3 { font-size:36px; font-family: 'Noto Sans', sans-serif; text-decoration:underline; padding-bottom:46px}h4 { font-size:20px; line-height:24px; color:#ef97cc; font-family:Georgia, "Times New Roman", Times, serif; padding:14px 0 10px; }h4 a{color:#ef97cc;}h5 { font-size:20px; line-height:22px; color:#7c7c7c; padding-bottom:30px}h6 { font-size:16px; line-height:18px;}a { text-decoration:none; cursor:pointer}a:focus { outline:none;}a:hover { text-decoration:underline}.clear { clear:both; line-height:0; font-size:0; overflow:hidden; height:0; width:100%; margin:0; padding:0; display:block;}.wrapper { width:100%; overflow:hidden; position:relative;}.extra-wrap { overflow:hidden; display:block;}p {color:#fff; padding-bottom:19px;}.fleft { float:left}.fright { float:right}.alignright { text-align:right}.aligncenter { text-align:center}.overflow { overflow:hidden}.relative { position:relative;}.img-indent { float:left; margin:8px 20px 0 0;}.block {position:relative;z-index:100}.extra-block,.extra-block1 { ;min-height:36%; margin: 0 auto -38px; position:relative; }.extra-block{background:url(../images/tail-bg-cont.png) repeat-x 0 bottom}.extra-block1{ margin: 0 auto -5%;}/**********row-top*************/.row-top{overflow:hidden;background:url(../images/tail-bg-top.png);padding:28px 0 17px;position:relative;z-index:10}.list-soc{float:right;margin-right:6px}.list-soc li{float:left;margin-left:8px;}.list-soc li a{display:block; opacity: 1; filter: alpha(opacity=100);}.list-soc li a:hover{opacity: 0.7; filter: alpha(opacity=70);}/**********bgstretcher*************/.bgstretcher { background: black; overflow: hidden; width: 100%; height:100%; position: fixed !important; z-index: 1; top: 0; left: 0;}.bgstretcher UL,.bgstretcher UL LI { position: absolute; top: 0; left: 0; z-index:1;}.bgstretcher UL,.bgstretcher UL LI { margin: 0; padding: 0; list-style: none;}.bgstretcher-area,.bgstretcher-page{height:100%}.nav-buttons{text-align:center;padding-bottom:17px;}#nav{overflow:hidden;display:inline-block}#nav li{float:left;overflow:hidden;margin:0 10px}#nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;width:19px;height:19px;line-height:0;font-size:0;}#nav li a:hover,#nav li.showPage a{background-position: 0 bottom}/*********************************header*************************************/header { position:relative; z-index:20;}header h1 { z-index:10; display:block; float:left; padding:0}.row-nav { background:url(../images/tail-bg-nav.png); padding:6px 0 11px}nav{float:right;padding:12px 0 0 0}.menu { font-size:0; line-height:0; padding:0; z-index:99; position:relative; margin-right:21px;}.menu > li { position:relative; float:left; margin-left:11px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background:url(../images/point.png)}.menu li a{ color:#b3adad; font-size:18px; line-height:20px; display:block; position:relative; text-decoration:none !important; padding:7px 12px 9px; font-family: 'Noto Sans', sans-serif; } .menu li.current,.menu li:hover {background:#cd97c9;}.menu li.current a,.menu li:hover a{color:#fff}/********************** Content style ************************/section#content { position:relative; z-index:10; padding:92px 0; }.border-vert{background:url(../images/border-vert.png) repeat-y 477px 0}.img-rounded img{ border-radius:13px; -moz-border-radius:13px; -webkit-border-radius:13px;}.img-rounded1 img{ border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;}.img-indent{margin:39px 0 35px}.row-1{background:url(../images/tail-bg-top.png);padding:21px 0 23px}.main-block{width:1036px;margin:0 auto;background:url(../images/tail-cont.png); padding:38px 0; border-radius:13px; -moz-border-radius:13px; -webkit-border-radius:13px; min-height: 565px;}/********************** links & buttons ************************/.link-1 { display:inline-block; color:#f4bfdf;}.button { display:inline-block; font-family: 'Noto Sans', sans-serif; color:#fff; font-size:17px; line-height:1.2em; background:#ae81aa; padding:6px 12px 7px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; margin-top:2px}.button:hover { background:#000; text-decoration:none;}/* Lists */.list-services{}.list-services > li{padding-top:6px}.list-services > li:first-child{padding:0;}/* Lists */.list { padding:0 0 27px}.list li { margin-bottom:2px; line-height:16px;}.list li a { color:#fff; font-size:14px; background:url(../images/marker-2.png) no-repeat 1px 5px; padding:0 0 0 18px; }/*----- es-carousel -----*/.es-carousel-wrapper { position: relative; z-index: 99;}.es-carousel { overflow: hidden;}.es-carousel ul { display: none; overflow:hidden}.es-carousel ul li { height: 100%; float: left; display: block; width:300px}.es-carousel ul li figure{margin-bottom:26px}.es-nav { right: 0; bottom: -30px; position: absolute;}.es-nav span { display: block; line-height: 0; font-size: 0; width: 32px; height: 33px; text-indent: -5000px; z-index: 99; cursor: pointer; display:inline-block !important; }.es-nav span.es-nav-next { background: url(../images/next.png) no-repeat 50% 50% #a97ca5; border-radius:0 6px 6px 0; -moz-border-radius:0 6px 6px 0; -webkit-border-radius:0 6px 6px 0; border-left:1px solid #cbadc8}.es-nav span.es-nav-prev { background: url(../images/prev.png) no-repeat 50% 50% #a97ca5; border-radius:6px 0 0 6px ; -moz-border-radius:6px 0 0 6px ; -webkit-border-radius:6px 0 0 6px ; border-right:1px solid #735470 }.es-nav span:hover {background-color:#92538d}/* Lightbox image */.magnifier { position:relative; overflow:hidden; display:inline-block;}.magnifier img { position:relative; z-index:2; opacity: 1; filter: alpha(opacity=100); }.magnifier span { display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/fancybox/magnify.png) center center no-repeat; z-index:1;}/*----- map -----*/.map { margin:0 0 31px; }.map iframe { height:259px; overflow: hidden; width:100%; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;}/*----- address -----*/.mail-1 { color:#fff; display:inline-block; text-decoration:underline;}.mail-1:hover { text-decoration:none}dl.address dt{padding-bottom:18px}dl.address dt span { display:block;}dl.address dt,dl.address dd { font-size:14px; line-height:18px; color:#848383;}dl.address dd span { display:inline-block; width:100px;}/***** contact form *****/#contact-form { position: relative; vertical-align: top; z-index: 1; margin: -2px 0 0;}#contact-form div { overflow: hidden;}#contact-form fieldset { border: none; padding: 0; width: 100%; overflow: hidden; position: relative; z-index: 10;}#contact-form label { display: block; min-height: 45px; position: relative; margin: 0; padding: 0; float: left; width: 100%;}#contact-form .message { min-height: 313px; display: block !important; width: 100%;}#contact-form input,#contact-form textarea { font-family:Arial, Helvetica, sans-serif; font-weight:normal; border: 1px solid #49413d; background: url(../images/tail-input.png); padding: 5px 15px; margin: 0; font-size: 16px; line-height: 20px !important; color: #b0adac; outline: none; width: 220px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; float: left; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}#contact-form input { height: 30px;}#contact-form input:focus,#contact-form textarea:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}#contact-form .area .error { float: none;}#contact-form textarea { width: 100%; height: 273px; resize: none; overflow: auto;}#contact-form .success { border: 1px solid #49413d; background: #000; display: none; position: absolute; left: 0; font-family:Arial, Helvetica, sans-serif; top: 0; color: #fff; font-size: 18px; line-height: 22px; text-align: center; text-transform: none; width: 100%; z-index: 20; padding: 12px 0;}#contact-form .success span { display: block; text-align: center; padding: 26px 10px;}#contact-form .success strong { font-weight: normal; display: block; color: #807c79;}#contact-form .error,#contact-form .empty { color: #f00; font-size: 11px; line-height: 1.27em; display: none; overflow: hidden; padding: 2px 4px 0px 0; text-transform: none; position: absolute; bottom: 28px; left: 223px;}#contact-form .message .error,#contact-form .message .empty { bottom: 22px; left:0;}.buttons-wrapper { position: relative;}.buttons-wrapper a { margin-right: 48px; cursor: pointer;}/******************** Footer ******************/footer { padding:9px 0; background:#000}.privacy { color:#fcf9f9; font-size:12px; line-height:20px; }.privacy span{color:#747373;margin:0 4px}.privacy strong{color:#747373;font-weight:normal;}.privacy strong a{color:#747373}.privacy a { font-size:12px; color:#fcf9f9; display:inline-block;}Danke schonmal für eure Hilfe.
-
Da sieht man, das die
Social Buttons nicht unten rechts sind, dies will ich so haben, das es immer automatisch unten rechts steht.
Das gleiche mit den copyright unten links im footer
-
Kann mir jemand helfen?
-
Hallo, ich habe mir gedacht, ich füge meiner Seite paar Social Buttons hinzu wie FB, TW, YT, alles schön und gut, die Bilder sind auch drin und auf der rechten Seite, aber im mobilen Zustand sind die bilder/Buttons nicht so wie ich will, unten rechts sondern unten Mitte, ich habe die Bilder mit <br oder <p zu ihre Position gebracht, meine Frage ist nun, gibt es eine Möglichkeit, diese automatisch unten rechts anzeigen zu lassen und nicht mit br oder p zu versehen?
-
/e2: Hintergrund habe ich hinbekommen
/e:
habe nun auch das Problem, will Ab Impressum alles nach rechts verschoben haben, habe einiges ausprobiert, aber alles schlug fehl, was genau soll ich machen, bin wirklich ein mieser einsteiger in HTML xD
/e3: habe auch dies hinbekommen, bin doch nicht so dumm wie ich dachte
-
http://www.teccistopia.de/demo das ist die Seite.
Habe nur bei den Code von djhecke das Problem, das kein Hintergrund da ist.
-
Also der Schnee ist gewollt, das Problem ist, ich habe alles richtig geordnet beim Menü aber dieser ballert mir die einzelnen Seiten falsch ein, so wie es beim screen steht, steht es nur weil ich von hinten anfing das Menü einzufügen, nachher poste ich mal die stylesheet.
Das gleiche Problem habe ich aber auch beim copyright, das ist viel zu hochgezogen obwohl das angepasst sein müsste, ich kann auch keine Leerzeichen beim Menü einfügen, egal ob <p> oder <br>, es steht untereinander was es halt nicht soll, möchte es ja getrennt haben wie beim screen
-
Guten Abend Community,ich versuche die ganze Zeit meine Seite wie auf den folgenden Screen anzupassen aber bei mir sieht es nicht so aus wie ichs wollte, hier erstmal die screens:So soll es aussehen:[Blockierte Grafik: https://u-labs.de/attachments/html-99/8470d1420722988-wie-passe-ich-meine-seite-cjhdh.jpg][/SPOILER]So sieht es aber aus:[Blockierte Grafik: https://u-labs.de/attachments/html-99/8471d1420723015-wie-passe-ich-meine-seite-my_technobase_1920x108v743.jpg]Der HTML Code (den hat mein Kollege so erstellt) sieht folgendermaßen aus:
PHP
Alles anzeigen<?php$page = $_GET['page']; if ($page == "") { echo $page = "";} ?> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Teccistopia</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <script src="js/snow.js" type="text/javascript"></script> </head> <body> <div> <div id="menu"> <a href="index.php?page=home" class="logo"><img src="https://u-labs.de/images/banner.png" alt=""></a> </div> <a style="color:#FF5D00; float:right; font-size:22px;" href="/forum/"> Projekte</a> <a style="color:#FF5D00; float:right; font-size:22px;" href="#">|</a> <a style="color:#FF5D00; float:right; font-size:22px;" href="#"> Finanzierung </a> <a style="color:#FF5D00; float:right; font-size:22px;" href="#">|</a> <a style="color:#FF5D00; float:right; font-size:22px;" href="#"> Team </a> <a style="color:#FF5D00; float:right; font-size:22px;" href="#">|</a> <a style="color:#FF5D00; float:right; font-size:22px;" href="#"> Server </a> <a style="color:#FF5D00; float:right; font-size:22px;" href="#">|</a> <a style="color:#FF5D00; float:right; font-size:22px;" href="#">Startseite </a> </div> <div id="includearea" style="margin: 0 auto;"> <?php ?> </div> <div style="position:absolute; bottom:10px; background-color:#0094FF; opacity:0.5; filter:alpha(opacity=30); width:100%; id=footer"> <p>Copyright (C) 2014-2015 Domenik Landgraf. All rights reserved.</p> </div> </body> </html>Hoffentlich könnt ihr mir helfen :xDie Orange farbigen Punkte sollen Social Icons sein sprich Facebook, Twitter und Google.
