HTMLNewBee: Problem mit Webseite, Responsive, Lightbox

SELF-Forum

Problem mit Webseite, Responsive, Lightbox

HTMLNewBee
– Informationen zu den Bewertungsregeln

Hallo, ich habe eine Webseite mit HTML & CSS gebaut. Leider funktionieren leider ein paar Dinge nicht. Konnte die Fehler nicht finden bzw nicht korrigieren.

  1. Zwischen den Teaserbildern ist unten ein Schwarzer strich, falsche Verschaltelung?
  2. Das Obere Dreieck (Sprungpukt zur Navi) Ist bei bestimmten Displaygrößen ist an der gleichen stelle.
  3. Die Navigation sollte vielleicht besser auf einer bestimmten größe (Tablet/Fablet) nebeneinander stehen.

Kann sich jemand mal den Code anschauen. Würde mich freuen. ;)

<!DOCTYPE html>
<html lang="de">
 
<head>
    <!--[if lt IE 9]
   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
 
    <title>R. Portfolio - Responsive Webseite</title>
 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Eine Responsive Webseite mit Portfolio">
    <meta name="author" content="Rudolf">
    <meta name="keywords" content="Onepager, 3D, Portfolio Webdesign, Webdesign, Screendesign, Grafik, Design, OfG">
 
    <!-- Media Queries Liburary -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
    <!-- Script Navigation -->
    <script>
 
    //Wenn das Dokument geladen wurde?
    $(document).ready(function(){
 
    //nach oben scrollen
    $('a.top,.top-geen,.top-grau').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 1200);
        return false;                    
    });
 
    // Alle internen Links auswählen
    $('a[href*=#]').bind("click", function(event) {
    // Standard Verhalten unterdrücken
    event.preventDefault();
    // Linkziel in Variable schreiben
    var ziel = $(this).attr("href");
 
    //Scrollen der Seite animieren, body benötigt für Safari
    $('html,body').animate({
    //Zum Ziel scrollen (Variable)
    scrollTop: $(ziel).offset().top
    // Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
    }, 2000 , function (){location.hash = ziel;});
 
    });
    return false;
 
         
    });
 
    </script>
 
    <!-- Lightbox -->
    <script src="scripts/lightbox.min.js"></script>
    <link href="styles/lightbox.css" rel="stylesheet">
 
    <!-- Stylesheet einbinden -->
    <link rel="stylesheet" href="styles/style.css">
    <!-- Favicon einbinden -->
    <link rel="shortcut icon" href="images/68f35f2b-6ef3-4434-9e99-e522f7497802-16.ico">
     
</head>
 
<body id="oben">
 
<div class="wrapper">
 
<!-- Hauptnavigation -->
 
<header id="logo">
<a href="index.html"><img class="logo" src="images/logo.png" height="33" width="95" alt="Logo"/></a>
 
 
<nav id="navigation">
        <ul>
            <li><a href="#anker1" class="nav-link">&Uuml;ber</a></li>
            <li><a href="#anker2" class="nav-link">Portfolio</a></li>
            <li><a href="#anker3" class="nav-link">Kontakt</a></li>
        </ul>
</nav>
 
</header>
 
</div>     <!-- Ende Wrapper -->
 
 
<!-- Kopfleiste -->
<header id="anker1" class="frame">
     
        <div id="col_1">
            <h1>Webdesign & 3D</h1>
           <p>Hallo, mein Name ist Rudolf. Die Welt der Gestaltung ist mein zu Hause, HTML & CSS ist ein kleines Hobby welches mir viel Freude bereitet. Immer wieder begeistert von neuen Webtechnologien, versuche ich mir diese anzueignen.
          </p>
       </div>
   
       <!-- Nach oben scrollen güner Pfeil -->
       <div id="top-grau">
           <a class="top-grau" href="#">
           <img src="images/dreieck-grau.png" height="40" width="90" alt="Button Nach oben" />
           </a>
       </div>
 
</header>
 
<!-- Hauptinhalt -->
<section id="main">
 
 
   <article id="anker2" class="main">
       <h2>Mein Portfolio</h2>
       <p>Schaut euch hier unten ein paar meiner Werke an.</p>
   </article>
 
<!-- Bildteaser -->
<article class="teaser-3">
   
           <a class="test" href="img/demopage/bnb-bild-1-g.jpg" data-lightbox="galerie" data-title="B&auml;r Ni B&auml;r KiTa Screendesign">
                <img class="thirdteaser" src="img/demopage/bnb-bild-1.png" alt="Teaserbild-1"></img>
            </a>
         
            <a href="img/demopage/gardeco-bild2-g.jpg" data-lightbox="galerie" data-title="Gardeco Gartenbau - Moodboard">
            <img class="thirdteaser" src="img/demopage/gardeco-bild-2.png" alt="Teaserbild-2"></img>
            </a>
            <a href="img/demopage/webportfolio-bild-3-g.jpg" data-lightbox="galerie" data-title="Screendesign Portfoliowebseite">
            <img class="thirdteaser" src="img/demopage/webportfolio-bild-3.png" alt="Teaserbild-3"></img>
            </a>
     
</article>
 
<article class="teaser-3">
 
 
        <a href="img/demopage/3d-bild-1-g.jpg" data-lightbox="galerie" data-title="Wohnraum Cinema 4D 3D-Rendering">
        <img class="thirdteaser" src="img/demopage/3d-bild-1.png" alt="Teaserbild-4" />
        </a>
 
        <a href="img/demopage/3d-bild-2-g.jpg" data-lightbox="galerie" data-title="Kompass Cinema 4D 3D-Rendering">
        <img class="thirdteaser" src="img/demopage/3d-bild-2.png" alt="Teaserbild-5" />
        </a>
 
        <a href="img/demopage/3d-bild-3-g.jpg" data-lightbox="galerie" data-title="Cyberfisch Cinema 4D 3D-Rendering">
        <img class="thirdteaser" src="img/demopage/3d-bild-3.png" alt="Teaserbild-6" />
        </a>
 
</article>
 
<!-- Kontaktbutton -->
<article id="anker3" class="kontakt">
 
        <!-- Nach oben scrollen güner Pfeil -->
        <a class="top" href="#">
        <img src="images/dreieck-gruen.png" height="40" width="90" alt="Button Nach oben" />
        </a>
 
        <footer id="kontakt">        
            <h3>Schreib mir eine Nachricht!</h3>
            <p><a href="mailto:rudi-color@mailbox.org">rudi-color@mailbox.org</a></p>                
        </footer>    
     
</article>
     
 
</section>
 
        <!-- Nach oben scrollen blauer Pfeil -->
        <div id="top-green">        
            <a class="top-geen" href="#">
            <img src="images/dreieck-blau.png" height="40" width="90" alt="Button Nach oben" />
            </a>
        </div>
     
<!-- Fußleiste -->
<footer id="site-footer">    
 
</footer>
 
 
</body>
 
</html>

@charset "utf-8";
 
/* CSS-Design
* Rudolf Webportfolio
* Responsivewebseite
* /
 
/* Reset * * * * * * * * */
 
*{
    margin: 0;
    padding: 0;
    -mozbox-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;  
}
 
html{
    font-size: 100%; /* Browserstandart: 16p*/
}
 
img{
    max-width: 100%;
}
 
/* Layout * * * * * * * * * */
 
body{
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.5;
    background: #f5ffff;
    color: #333;
}
 
.wrapper, header p{
    max-width: 1200px;
    min-width: 600px;
    margin: 0 auto;
    overflow: hidden;
}
 
 
header h1{
    font-family: Tahoma;
    font-size: 45px;
    font-size: 2.813rem;
    font-weight: bold;
    background: #3cd0ac;
    width: 400px;
    margin: 0 auto;      
}
 
 
header p{
    font-family: Tahoma;
    font-size: 20px;
    font-size: 1.250rem;
    text-align: center;
    padding-top: 20px;
}
 
article h2{
    font-family: Tahoma;
    font-size: 30px;
    font-size: 1.875rem;
    font-weight: bold;
    color: #628ec6;
    padding-top: 40px;  
}
 
article p{
    font-family: Tahoma;
    font-size: 25px;
    font-size: 1.563rem;
    color: #628ec6;
    padding-bottom: 20px;
}
 
.frame{
    text-align: center;
    background: url(../images/hauptteaser.jpg);
    background-position: center;
    color: #fff;
    height: 300px;
    padding-top: 50px;
}
 
#main{
    text-align: center;
}
 
#kontakt{
    background: #3cd0ac;
    height: 250px;
    margin-top: -7px;
}
 
#kontakt h3{
    font-family: Tahoma;
    font-size: 40px;
    font-size: 2.500rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    padding-top: 45px;  
}
 
#kontakt a{  
    font-family: Tahoma;
    font-size: 30px;
    font-size: 1.875rem;
    font-weight: bold;
    padding: 10px;
    text-decoration: none;
    color: #628ec6;
    background: #fff;
}
 
#kontakt a:hover{
    background: #3cd0ac;
    border: 6px solid #628ec6;      
}
 
#site-footer{
    clear: both;
    background: #426086;
    color: #fff;
    height: 150px;
    padding: 35px 0 0 35px;
}
 
 
.logo{
    margin-top: 28px;
}
 
.thirdteaser{
    padding: 20px;      
}
 
 
p{
    text-decoration: none;
}
 
 
#col_1 a,.ofgl a{
    text-decoration: none;
    color: #EE6438;
    font-weight: bold;
}
 
 
/* Nach Oben Pfeil * * * * * * * */
#top-green{
    text-align: center;
    margin-top: -40px;
    height: 40px;        
}
 
#top-grau{
    text-align: center;
    height: 40px;
    margin-top: 10px;
}
 
 
 
/*Spalten * * * * * * * */
#col_1{
    margin: 0 auto;
    text-align: center;
    width: 680px;
}
 
 
/*Navigation * * * * * * * * */
 
nav{
 
    height: 65px;
    float: right;
    font-family: Tahoma;
    font-size: 24px;
    font-size: 1.500rem;
    font-weight: bold;
}
 
#navigation{
    margin: 28px 0 0;
}
   
#navigation ul li{
    display: inline;
}
 
#navigation a{
    color: #3cd0ac;
    text-decoration: none;
    padding: 7px 20px;
    margin: 0 10px;      
}
 
#navigation a:hover{
    color: #426086;  
}
 
/* Mediaqueries * * * * * * * */
 
@media only screen and (min-width: 980px)
and (max-width: 1279px){
   
}
 
 
@media only screen and (min-width: 760px) and (max-width: 979px){
 
.wrapper{
    width: 760px;
}
 
#main{
    width: 100%;
}
 
 
/* Media Header Navigation + Logo * * * * * * */
nav{
    float: none;
    text-align: center;
    margin: 0 auto;
    height: 130px;
}
 
 
#navigation ul li{
    display: block;
}
 
#logo{
    text-align: center;
    width: 100%;
}
 
/*Media Typo * * * * * * * * */
header h1{
    font-size: 30px;
    font-size: 1.875rem;
    width: 280px;
    margin-bottom: 20px;
}
 
header p{
    font-size: 18px;
    font-size: 1.125rem;
    width: 290px;
}
 
.frame{
    height: 290px;
}  
   
}
 
 
@media only screen and (max-width:768px){
 
.wrapper{
    width: 100%;
}
 
#main, .teaser-3{
    width: 100%;  
}
   
/* Media Header Navigation + Logo * * * * * * */
nav{
    float: none;
    text-align: center;
    margin: 0 auto;
    height: 130px;
}
 
#logo{
    text-align: center;
    width: 55%;
}
 
#navigation ul li{
    display: block;  
}
 
 
header #anker{
    height: ;  
}
 
/*Media Typo * * * * * * * * */
header h1{
    font-size: 30px;
    font-size: 1.875rem;
    width: 280px;
    margin-bottom: 20px;
}
 
header p{
    font-size: 15px;
    font-size: 0.9375rem;
    width: 290px;
    padding-top: 10px;
    padding: 0 10px;
}
 
#col_1, p{
    text-align: center;
    display: inline;  
}
 
.frame{
    height: 212px;
    padding-top: 25px;
}
 
article h2, #kontakt h3{
    font-size: 25px;
    font-size: 1.5625rem;
}
 
article p, #kontakt a{
    font-size: 18px;
    font-size: 1.125rem;
}
 
 
#kontakt h3{
    padding-top: 55px;  
}
 
 
}
 
 
@media only screen and (max-width: 480px){
 
.frame{
    height: 260px;
}
 
img, .thirdteaser{
    max-width: 85%;
}
 
#top-grau{
    margin-top: 34px;
}
   
}
 
@media only screen and (max-width: 320px){
   
.frame{
    height: 280px;
}  
 
img, .thirdteaser{
    max-width: 65%;
}
 
#col_1{
    max-width: 300px;
}
 
#site-footer{
    padding-left: 20px;
}
 
#top-grau{
    margin-top: 34px;
}
   
}
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit Webseite, Responsive, Lightbox

    Matthias Apsel
    – Informationen zu den Bewertungsregeln

    Hallo HTMLNewBee,

    Kann sich jemand mal den Code anschauen. Würde mich freuen. ;)

    Ein online-Beispiel wäre wesentlich hilfreicher. Zum Beispiel bei http://bplaced.net.

    Bis demnächst
    Matthias

    --
    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit Webseite, Responsive, Lightbox

      HTMLNewBee
      – Informationen zu den Bewertungsregeln

      Hey Mattihas, stimmt. Dann kann man sich das mit einem Debugger anschauen/ändern. Ich füge den Link noch hinzu.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem mit Webseite, Responsive, Lightbox

        HTMLNewBee
        – Informationen zu den Bewertungsregeln

        problematische Seite

        Hier der Link Problemseite

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln