• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

html Anfänger braucht Hilfe beim Aufbau einer responsiven Website

Status
Für weitere Antworten geschlossen.
wie wäre es mit dem ganzen projekt??? :D

download:
https://drive.google.com/folderview?id=0B9aqKbonFBvFMWlRV0NPbTNncEk&usp=sharing

habe inzwischen ein neues problem. Diese "social media bar" also die verschiedenen icons habe ich wohl derartig falsch angelegt dass ihre "div bereiche" über den gesammten bildschirm ragen. das problem ist dass diese sich über die beiden anderen großen buttons "download here" & "Team" erstrecken. wenn ich dem "Team button" jetzt eine verlinkung gebe, kann ich den gesammten mittelteil des buttons nicht "klicken". habt ihr eine idee wie man das ordentlich macht?

Social Media Bar.jpg
 
Zuletzt bearbeitet von einem Moderator:
Wenn Du schon nicht imstande bist, einfach die Seite auf Deinem angepriesenen Webspace hochzuladen, sondern sie als Download bereitzustellen, dann zumindest bei diesem (Bilder-)Umfang bitte als komplettes RAR-/ZIP-Archiv! :rolleyes:
 
@Spicelab wenn du's bei google drive runterlädst dann wird es automatisch vorher gepackt... ...normalerweise. :)

01.jpg 02.jpg

>alles makieren >rechtsklicken >herunterladen

dann sollte der das packen!

update:
jap, gerade getestet. er packt es automatisch. ;)
 
Zuletzt bearbeitet von einem Moderator:
HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>

  

    <video autoplay loop poster="img/site-components/Altar_Room.png" id="bgvid">
        <source src="Video/trailer_header_webm.webm">
        <source src="Video/trailer_header_mp4.mp4">
    </video>
  
    <div id="replaced_logo">
        <img src="img/branding/replaced_logo.png" width="146" height="332" alt=""/>
    </div>
  
  
  
  
    <div class="navigation">
    <img class="button_left" src="img/buttons/button_left_01.png" width="424" height="124" alt=""/>
    </div>
  
    <div class="navigation">
           <img class="dwld_button" src="img/buttons/dwld_button_01.png" width="572" height="124" alt=""/>
      </div>
  
    <div class="navigation">
        <img class="button_right" src="img/buttons/button_right_01.png" width="424" height="124" alt=""/>
        <div style="clear:both;"></div>
    </div>
  
    <div style="clear:both;"></div>
  
  
  
    <div class="social_media_wrapper">
    <div class="social_media_bar">
           <img class="facebook" src="img/social media icons/facebook_01.png" width="48" height="48" alt=""/>
      </div>
  
    <div class="social_media_bar">
        <img class="indiedb" src="img/social media icons/indiedb_01.png" width="48" height="48" alt=""/>
    </div>
  
    <div class="social_media_bar">
        <img class="instagram" src="img/social media icons/instagram_01.png" width="48" height="48" alt=""/>
    </div>
  
    <div class="social_media_bar">
        <img class="steam" src="img/social media icons/steam_01.png" width="48" height="48" alt=""/>
    </div>
  
    <div class="social_media_bar">
        <img class="twitter" src="img/social media icons/twitter_01.png" width="48" height="48" alt=""/>
    </div>
  
    <div class="social_media_bar">
        <img class="youtube" src="img/social media icons/youtube_01.png" width="48" height="48" alt=""/>
        <div style="clear:both;"></div>
    </div>
  
    <div style="clear:both;"></div>
    </div>
  
  
  
  
    <div id="replaced_font">
        <img src="img/branding/replaced_font.png" width="1481" height="147" alt=""/>
    </div>
  
  
  
  
  
  
  
  
<div id="panel">
        <img src="img/site-components/panel.png" width="1920" height="422" alt=""/>
     </div>
  
  
</body>
</html>


css:
Code: 
@charset "utf-8";
/* CSS Document */

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    }

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
    }

#replaced_logo {
    margin-top: 100px;
    text-align: center;
    }
  
.social_media_bar {
    float: left;
    width: 3%;
    }
  
.social_media_bar img {
    display: block;
    }

.social_media_wrapper {
    position: relative;
    bottom: 84px;
    margin-left: 23px;
    z-index: 20;
    }
  
.navigation {
    position: relative;
    float: left;
    width: 33%;
    margin-top: 62px;
    z-index: 10;
    }
  
.navigation img {
    display: block;
    }
  
.dwld_button {
    margin: auto;
    }

.button_right {
    float: right;
    }
  
#replaced_font {
    text-align: center;
    margin-top: 90px;
    }
  
#panel {
    position: fixed;
    top: 57%;
    left: 0%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -10;
    }

ja ich weiß, der code ist eine beleidigung und wenn ihr könntet würdet ihr mich verprügeln... :D
 
ja, das habe ich schon verstanden aber ich weiß nicht wie (und wo) ich das in meinen code übertragen muss.
 
Lerne endlich die Grundlagen! Es kann doch nicht sein, dass man dir jeden Kleinsch... vorkauen muss!
 
du meinst sicher dass ich 33% bei jedem button eingeben soll. das funktioniert aber ebenfalls nicht.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben