徽标和社交媒体图标卡在标题后面

时间：2015-10-20 02:46:50

标签： html css header

我已经用我的网站完成了三页清洁代码（已选中）但是，最重要的页面，第一页正在通过振铃器，因为我似乎无法将我的徽标留在左侧角落（固定）并出现在我的标题和我的社交媒体图标前面，出现在我的标题前面并出现在右侧角落。我的第一个是唯一一个代码有点古怪的页面。这是我的第一个网站。我尝试过使用z-index以及float和display：hidden。现在我被困住了.HELP！请！我正在研究这个问题。 z-index将我的标题发送到前面的后面标志。我如此接近完成。我被困4周了。 

html,
body{
    margin:0px;
    padding: 0px;
    padding-bottom:25px;
    background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat
center center fixed;

   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
      color:#ffffff;

    }
  
  
#wrapper {
background: #107CBD;
min-height:%;
position:relative;
width:960px;
margin:0 auto;
margin-bottom:-60px; /* Negitive Height of Footer */
}


#header {
  width: 100%;
background:#107CBD;
padding:19px;
position:absolute;
left:0;
top:0;
background-color: #107CBD;

}

  #header h1{
  font-family:Noto sans, sans serif;
  font-weight: 200;
  color: white;
  font-size: 2em;
  margin-right: %;

  }

#header h2{
  font-family:Courgette,cursive;
  font-weight: 100;
  color: white;
  font-size: 2em;
  margin-right:%;
}

h1+h2{margin-top:-20px;
}
  #body {
padding: 10px;
padding-bottom:60px; /* Height of Footer and some change */
background:#FFF; /* Wrapper BG COLOR */
}
#logo{
  text-indent: -999999{
   z-index:1; 
   
   }

  #social-media-icons{float:right;}
  #social-media-icons ul li{display:inline;}
  #social-media-icon ul li{padding-top: 10px;}
}
#social{
    float: right;
    }
#socail ul{
    margin-top-right: 10px;
    #socail li{
     dispaly.inline;
   }

    .social-sidebar-buttons{
      width:  15px;
      margin-left: 15px;
    }


.wrapper{
  width:960px;
  }
  .icon{
    float:left;
  }

  .text{
    float:left;
    padding-left:25px;
    padding-top:40px;
    font-family: Noto sans,sans serif;
        }
    
    
   .software ul {
     position: relative;
     width:80%;
     padding:1em 1.5em;
     margin: 2em auto;
     color:#fff;
     background:#107CBD;
   overflow: hidden;
   font-family:'Noto Sans', sans-serif;
   }

   .software ul:before{
     content: "";
     position: absolute;
     top:0;
     right: 0;
     border-width: 0 16px 16px 0;
     border-style: solid;
     border-color:  #fff #fff #107CBD #107CBD;
     background: #107CBD;
      -web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0.0.2);
    /* Firefox 3.0 damage limitation*/
    display: block; width: 0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3),1px 1px 1px rgba(0,0,0,0.2);
    display: block width 0px;
  }

  .software ul.rounded{
   -moz-border-radius: 5px 0 5px 5px;
    border-radius: 5px 0 5px 5px;
  }

  .software ul.rounded:before{
    border-width:8px;
    border-color: #fff #fff transparent transparent;
    -moz-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
  }

   .social{
     float:right;
     margin-right:200px;
     margin-top:20px;
  
   }




font-family:'Noto Sans';
}




.content{
    width: 1000%;
  margin: 0 auto;
}

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #505050;
}
#cssmenu > ul > li {
float:left;
-webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  left: 36%
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #505050;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: #107CBD;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #107cbd;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #107cbd;
  background: #1d1d1d;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #505050;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #107cbd;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #505050;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #107cbd;
  border-bottom: 2px solid #107cbd;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #107cbd;
}


  div nav ul li{
    text-align: left;
    display: inline;
    width: %;
    float:left;
    margin-right: .8em;
    font-family: 'Noto Sans';
  
}

li.changeBackground {
        background-color: #505050;
    }

li.changeBackground:hover {
        background-color: #777777;
      }

li.changeBackground:active {
        background-color: #107CBD;
    }



   .homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}

p{
   position:relative;
   width: 30%;
   padding:1em 1.5em;
   margin:2em auto;
   color: #fff;
   background:#107CBD;
   overflow: hidden;
   font-family:'Noto Sans';
     }


  p:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #505050 #505050;
    background: #505050;
    -web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px; rgba(0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px;rgba(0,0,0.2);
      box-shadow:0 1px 1px rgba(0,0,0,0,0.3), -1px 1px 1px  rgba(0,0,0 0.2);
    /* Firefox 3.0 damage limitation*/
    display: block; width: 0;
  }

  p.rounded{
    -moz-border-radius: 5px 0 5px 5px;
    border-radius: 5px 0 5px 5px;
  }

  .p.rounded:before{
    border-width: 9px;
    border-color: #fff #fff transparent transparent;
    -moz-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
  }
     h3{

     font-family:'Noto-Sans', sans-serif;
}


#footer{
  position: fixed;
  bottom:0px;

}




#footer{

      margin: 1px;
      height:100px;
      width: 100%;
      border-top: 3px solid #107CBD;
      clear: both;
      color: #fff;
      line-height:20px;
      background-color: #505050;
      text-align:center;
      position:fixed;
      font-size:12px;
      bottom:0px;
    
      }




  #footer ul li a{
      text-decoration: none;
    font-family: Noto-sans,sans serif;
     padding:2em 1em;
     color: #fff;
   
  }


   #footer ul li a: hover{
     color: #000;
     background-color:#777777;
   }
!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="path to icon/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<title>Dawn's website</title>
</head><
<div id="wrapper">
<header id="logo">
<ahref="index.html"<img src="images/onebugforwebdt.jpg"
alt= "One Bug Design" width="60" height="64">
</header>
</div>
<div class="social">
<ul>
<li><ahref="https://twitter.com/fraggleart/target="_blank"><img src="images/Twitter-2-icon.png"></a></li>
<li><ahref="https://linkedin.com/in/dawncthomas/target="_blank"><img src="images/Linkedin-icon.png"></a></li>
<li><ahref="https://pinterest.com/rasberry14/target="_blank"><img src="images/pinterest-icon.png"></a></li>
</ul>
</div>
<body id="home"
<div id="wrapper">
<header id="logo">
<h1 class="logo">one bug logo</h1>
<div id="header">
<h1 align="center">One Bug Design</h1><h2 align="center">Designed To Create</h2>
<h1 class="closer"></h1>
<h2 class="closer"></h2>

</div>
</div>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'>Home</a></li>
   <li><a href='#'>Portfolio</a></li>
   <li><a href='#'>Finds</a></li>
   <li><a href='Contact.html'>Contact</a></li>
</ul>
</div>

    <div id="content"
      </div>
       </nav>
       <main class="content">


           <div class="wrap">
           </div>
           </div>

<p>


  Dawn here, your friendly graphic designer. Do you need someone to make your brand sparkle with desire? Someone to show your logo some love. Do you need someone who truly enjoys the overall creative process and has an eye for great design? Someone who is fluent in the ways of the Adobe CC Master. Someone who will listen and fulfill your visual communication needs. Someone who is determined and who has Ideation? Well click no further! You have arrived at your destination. ........<strong>Welcome!</strong></p>


<section>
<h3>Software skills</h3>
<div class="wrapper">
            <div class="icon"><img alt="Illustrator icon" src=
            "images/Adobe-Ai-icon.png" width="50px">
            <img alt="Indesign icon" src="images/Adobe-Id-icon.png" width="50px">
             <img alt="Photoshop icon" src="images/Adobe-PS-icon.png" width="50px">
            <img alt="Bridge icon" src="images/bridge-icon.png" width="50px">
            <img alt="Camera icon" src="images/Camera-Nikon-Coolpix-L820-02-icon.png" width="50px">
            <img alt="HTML icon" src="images/HTML-5-icon.png" width="50px">
            <img alt="CSS icon" src="images/css-icon.png" width="50px">
            <img alt="Microsoft Office" src="images/Office-icon.png" width="50px"></div>
<div class="text">
        Illustrator |
        Indesign |
        Photoshop |
        Bridge |
        DSLR|
        HTML5 |
        CSS |
        Microsoft Office |
    </div>
    </div>
</section>

<div id="social">
<ul>
<li><ahref="https://twitter.com/fraggleart/target="_blank"><img src="images/Twitter-2-icon.png"></a></li>
<li><ahref="https://linkedin.com/in/dawncthomas/target="_blank"><img src="images/Linkedin-icon.png"></a></li>
<li><ahref="https://pinterest.com/rasberry14/target="_blank"><img src="images/pinterest-icon.png"></a></li>
</ul>
</div>
<div id="footer">
    <div id="nav">
  <nav class="sitemenu">
   <div class="navwrapper">
        <ul>
       <li class="changeBackground"><ahref="index.html">Home</a></li>
       <li class="changeBackground"><ahref="Portfolio.html">Portfolio</a></li>
       <li class="changeBackground"><ahref="Finds.html">Finds</a></li>
       <li class="changeBackground"><ahref="Contact.html">Contact</a></li>
       <li>&copy;2015-2016 One Bug Design All Rights Reserved</li>
      </ul>
  </div>
</nav>
</ul>
<br>
<p class="footer-text">
<div class="social">
   <h3 align="right">Stay connected</h3>
   <a class= "social twitter" ahref="https://twitter.com/fraggleart">img src="images/Twitter-2-icon.png"</a>
   <a class="social pinterest" ahref="https://pinterest.com/rasberry14">img src="images/Pinterest-icon.png"</a>
   <a class="social linkedin"ahref="https://linkedin.com/in/dawncthomas">img src="images/Linkedin-icon.png"</a>
  </div>                                                                           </div>
  </footer>
</body>
</html>

2 个答案:

答案 0 :(得分：2)

将这些属性添加到container.appendChild(renderer.domElement); camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 0, 100); scene.add(camera); controls = new THREE.OrbitControls( camera ); controls.target.copy( new THREE.Vector3( 0, 0,475) ); controls.minDistance = 50; controls.maxDistance = 200; controls.autoRotate = true; controls.autoRotateSpeed = .2; // 30 seconds per round when fps is 60 controls.minPolarAngle = Math.PI/4; // radians controls.maxPolarAngle = Math.PI/2; // radians controls.enableDamping = true; controls.dampingFactor = 0.25; clock = new THREE.Clock(); cloudGeometry = new THREE.Geometry(); var texture = THREE.ImageUtils.loadTexture('img/cloud10.png', null, animate); texture.magFilter = THREE.LinearMipMapLinearFilter; texture.minFilter = THREE.LinearMipMapLinearFilter; var fog = new THREE.Fog(0x4584b4, -100, 3000); cloudMaterial = new THREE.ShaderMaterial({ uniforms: { "map": { type: "t", value: texture }, "fogColor": { type: "c", value: fog.color }, "fogNear": { type: "f", value: fog.near }, "fogFar": { type: "f", value: fog.far }, }, vertexShader: document.getElementById('vs').textContent, fragmentShader: document.getElementById('fs').textContent, depthWrite: false, depthTest: false, transparent: true }); var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64)); for (var i = 0; i < 8000; i++) { plane.position.x = Math.random() * 1000 - 500; plane.position.y = -Math.random() * Math.random() * 200 - 15; plane.position.z = i; plane.rotation.z = Math.random() * Math.PI; plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5; plane.updateMatrix(); cloudGeometry.merge(plane.geometry, plane.matrix); } cloud = new THREE.Mesh(cloudGeometry, cloudMaterial); scene.add(cloud); cloud = new THREE.Mesh(cloudGeometry, cloudMaterial); cloud.position.z = -8000; scene.add(cloud); var radius = 100; var xSegments = 50; var ySegments = 50; var geo = new THREE.SphereGeometry(radius, xSegments, ySegments); var mat = new THREE.ShaderMaterial({ uniforms: { lightPosition: { type: 'v3', value: light.position }, textureMap: { type: 't', value: THREE.ImageUtils.loadTexture("img/maps/moon.jpg") }, normalMap: { type: 't', value: THREE.ImageUtils.loadTexture("img/maps/normal.jpg") }, uvScale: { type: 'v2', value: new THREE.Vector2(1.0, 1.0) } }, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent }); mesh = new THREE.Mesh(geo, mat); mesh.geometry.computeTangents(); mesh.position.set(0, 50, 0); mesh.rotation.set(0, 180, 0); scene.add(mesh); } function onWindowResize() { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); } function animate() { requestAnimationFrame(animate); light.orbit(mesh.position, clock.getElapsedTime()); cloud.lookAt( camera ); controls.update(camera); renderer.render(scene, camera); } animate(); window.addEventListener('resize', onWindowResize, false); 类，如下所示。

social

答案 1 :(得分：1)

你提交的非常可怕的错误是声明.wrapper div 

</head><
<div id="wrapper">
在<head>标记结束后的标记之外

。它显示了格式很差的HTML5标记。我已经写了一个标准正确的html5标记供你作为指南，以及一些显示左侧标志的CSS样式和社交链接（在我的情况下，它只是列表项，你应该用图像链接正确地改变它们）到右侧和也在标题前面（你面临的问题）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
<!--        <link rel="stylesheet" href="stackof.css">-->
    </head>
    <body>
       <style>
           html, body {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat
        center center fixed;
}

.wrapper {
    max-height: 100%;
}

header {
    max-width: 100%;
}
header .left-col {
    max-width: 35%;
    float: left;
    margin-left: 5%;
    margin-top: 5%;
}

.right-col {
    width: 70%;
    float: right;
}

.right-col ul {
    width: 100%;
}

.right-col ul li {
    list-style: none;
    float: left;
    display: block;
    padding-top: 5%;
    margin-left: 5%;
}

.right-col li a {
    text-decoration: none;
    color: aliceblue;
}
        </style>
        <div id="wrapper">
            <header id="logo">
                <div class="left-col">
                    <a href="#">
                        <img src="pro/images/logo.png" alt="">
                    </a>

                </div>
                <div class="right-col social-links">
                    <ul>
                        <li><a href="#">Lorem.</a></li>
                        <li><a href="#">Minus.</a></li>
                        <li><a href="#">Nulla.</a></li>
                        <li><a href="#">Cum.</a></li>
                        <li><a href="#">Ratione!</a></li>
                    </ul>
                </div>
            </header>
            <main>
                <!--write your sections here-->
                <section class="setion-1"></section>
                <section class="section-2"></section>
                <aside></aside>
            </main>
            <footer>
                <!--your footer goes here-->
            </footer>
        </div>
    </body>
</html>

您应该将样式数据剪切/粘贴到您使用.css格式命名的任何文件中，即在我的情况下使用stackof.css使其看起来更漂亮并取消注释链接标记。

相关问题
最新问题