내 로고가 내 웹 페이지를 깨뜨림입니다.

안녕하십니까. 최근에 내 자바 스크립트 및 jquery 과정을 마쳤습니다. 그래서 웹 사이트를 만들어 우수 사례에 활용할 수있게되었습니다. 그러나 그것은 내가 그것을 말하고있는 영역에 적합하지 않은 일부 h1 텍스트와 로고 이미지를 보유하고있는 나의 로고 div로 현재 다른 이슈들을 실행하고있는 것 같다. 내가 의미하는 바를 이해하는 데 도움이되는 몇 가지 스크린 샷이 있습니다.내 로고가 내 웹 페이지를 깨뜨림입니다.

는 코드가 같은 경우 내 CSS와 HTML을 일 첫 번째 이미지에서

을

깨진 작업.

HTML을 단순히 로고 사업부에서 주석을 제거하고 모든 부러 두 번째 스크린 샷에서

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/main.css"> 
    <script src="js/jquery-2.1.1.min.js"></script> 
    <script> 
     // This Script changed the menu to display the drop down button 
     // It also sets the menu items or anchors to hidden so that they are out of the way 
     // This allows people on mobile to browse the page easier :) 

     $(function() { 
      var pull  = $('#pull'); 
       menu  = $('nav ul'); 
       menuHeight = menu.height(); 

      $(pull).on('click', function(e) { 
       e.preventDefault(); 
       menu.slideToggle(); 
      }); 

      $(window).resize(function(){ 
       var w = $(window).width(); 
       if(w > 320 && menu.is(':hidden')) { 
        menu.removeAttr('style'); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="container"> 

    <header> 

     <nav class="clearfix"> 
      <!--<div id="logo">--> 
       <!--<img src="imgs/skullBrand.png" alt=""/>--> 
       <!--<h1>Skull&reg;--> 
        <!--</br>--> 
        <!--Alcohol--> 
       <!--</h1>--> 
      <!--</div>--> 
      <ul class="clearfix"> 
       <li><a href="#">Moonshine</a></li> 
       <li><a href="#">Recipes</a></li> 
       <li><a href="#">The Blog</a></li> 
       <li><a href="#">The Store</a></li> 
      </ul> 
      <a href="#" id="pull">Menu</a> 
     </nav> 
    </header> 

<div id="content"> 







</div> 

<footer> 
    <div class="footerContent"></div> 
    <div class="footerContent"></div> 
    <div class="footerContent"></div> 
</footer> 

</div><!--containerEnd-->

CSS

/* Clearfix */ 
.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
} 

/* Basic Styles */ 



body { 
    background-color: #333; 
} 



/* Basic Styles */ 
body { 
    background-color: #ece8e5; 
} 
nav { 
    height: 100px; 
    width: 100%; 
    background: #7d7e7d; /* Old browsers */ 
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0); /* IE6-9 */ 
    font-size: 11pt; 
    font-family: 'PT Sans', Arial, sans-serif; 
    font-weight: bold; 
    position: relative; 
    border-bottom: 2px solid #000000; 
} 
#logo { 
    margin-right: 5%; 
    padding: 0; 
    color: #ffffff; 
    border: none; 
    margin-left: 5%; 
    float: left; 
} 
nav ul { 
    padding: 0; 
    margin: 0 auto; 
    width: 600px; 
    height: 100px; 
} 
nav li { 
    display: inline; 
    float: left; 
} 
nav a { 
    color: #fff; 
    display: inline-block; 
    width: 150px; 
    text-align: center; 
    text-decoration: none; 
    line-height: 100px; 
    text-shadow: 1px 1px 0px #000000; 
} 
nav li a { 
    border-right: 1px solid #cccccc; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 
nav li:last-child a { 
    border-right: 0; 
} 
nav a:hover, nav a:active { 
    background-color: #444; 
} 
nav a#pull { 
    display: none; 
} 



#content { 
    width: 100%; 
} 

.contentBoxLeft { 
    margin-right:5%; 
} 

.contentBoxMiddle { 
    margin:auto; 
} 

.contentBoxRight { 
    margin-left:5%; 
} 



#text { 
    float: left; 
    width: 30%; 
    color: #fff; 
} 

#text>h1 { 
    font-size: 30pt; 
} 





/************ Mobile Styles **************/ 



/*Styles for screen 600px and lower*/ 
@media screen and (max-width: 600px) { 
    nav { 
     height: auto; 
    } 
    nav ul { 
     width: 100%; 
     display: block; 
     height: auto; 
    } 
    nav li { 
     width: 50%; 
     float: left; 
     position: relative; 
    } 
    nav li a { 
     border-bottom: 1px solid #cccccc; 
     border-right: 1px solid #cccccc; 
    } 
    nav a { 
     text-align: left; 
     width: 100%; 
     text-indent: 25px; 
    } 
} 

/*Styles for screen 515px and lower*/ 
@media only screen and (max-width : 480px) { 
    nav { 
     border-bottom: 0; 
    } 
    nav ul { 
     display: none; 
     height: auto; 
    } 
    nav a#pull { 
     display: block; 
     background-color: #000; 
     width: 100%; 
     position: relative; 
    } 
    nav a#pull:after { 
     content:""; 
     background: url('../imgs/nav-icon.png') no-repeat; 
     width: 30px; 
     height: 30px; 
     display: inline-block; 
     position: absolute; 
     right: 15px; 
     top: 10px; 
    } 
} 

/*Smartphone*/ 
@media only screen and (max-width : 320px) { 
    nav li { 
     display: block; 
     float: none; 
     width: 100%; 
    } 
    nav li a { 
     border-bottom: 1px solid #576979; 
    } 
}

. 누군가 나를 도와 줄 수 있다면 당신의 시간은 크게 감사 할 것입니다.

출처

2014-07-23 Anonymous

position: absolute 특성을 이미지에 추가하면 페이지의 다른 요소에 영향을주지 않습니다. 로고의 크기에 만족하지 않으면 width 속성을 추가하고 만족스러운 크기를 찾으십시오.

출처

2014-07-23 13:55:43 Pixelomo

이렇게하면 Skull Alcohol이있는 h1 태그가 여전히 탐색 영역에 없습니다. 다른 제안이 있으십니까? –

Ahh ok 나는 div의 img 태그로 그 작업을 수행했다. 감사. –

아무런 문제가 없다면 해결 방법에 만족해야 업 그레 이드 솔루션으로 내 대답을 받아 들일 수 있습니까? : D – Pixelomo

내 로고가 내 웹 페이지를 깨뜨림입니다.

답변

관련 문제