헤더 태그의 로고 옆에 탐색 및 배너 그림을 표시하려면 어떻게해야합니까?

-1

여기에 jsfiddle은 내가하려는 일의 대략적인 초안입니다.헤더 태그의 로고 옆에 탐색 및 배너 그림을 표시하려면 어떻게해야합니까?

나는 로고 이미지 왼쪽 배너의 전체 height 및 바로에 header의 width의 나머지 부분에 걸쳐 이미지의 상단에 nav을 가지고 싶습니다.

jsfiddle에는 스패닝 이미지가 없지만 결국에는 그 이미지를 원합니다.

모든 통찰력은 환상적 일 것입니다.

바이올린 : Fiddle

그냥 이미지 width100%에 변경 :

.bannerImage { 
    width: 100% 
}

을 그리고 추가

<div class="site"> 
    <header id="header"> 
     <img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/c/c1/American-Eskimo-dog.jpg" /> 
     <nav> 
      <ul> 
       <li><a href="#">PAGE1</a> 
       </li> 
       <li><a href="#">PAGE2</a> 
       </li> 
       <li><a href="#">PAGE3</a> 
       </li> 
       <li><a href="#">PAGE4</a> 
       </li> 
       <li><a href="#">PAGE4</a> 
       </li> 
       <li><a href="#">PAGE4</a> 
       </li> 
       <li><a href="#">PAGE4</a> 
       </li> 
       <li><a href="#">PAGE4</a> 
       </li> 
      </ul> 
     </nav> 
    </header> 
</div> 

header .logo { 
    padding: 25px; 
    width: 142px; 
    height: 200; 
    background-color: rgba(0, 169, 199, 1.0); 
    border: 4px solid rgba(150, 13, 117, 1.0); 
    display: inline; 
} 
header nav { 
    display: inline; 
    line-height: 25px; 
    border-bottom: 5px rgba(150, 13, 117, 1.0) solid; 
    height: 200px; 
} 
header nav ul li { 
    display: inline; 
    margin-left: 0; 
    padding: 0 6px; 
    font-size: 25px; 
    font-family: Bebas-Neue; 
    list-style-type: none; 
    top: 0px; 
    -webkit-transition: top .3s ease-in-out; 
    border-radius: 5px; 
} 
header nav ul li a { 
    text-decoration: none; 
    color: rgba(0, 169, 199, 1.0); 
    text-shadow: -.3px .1px rgb(25, 128, 175); 
} 
.site { 
    width: 1000px; 
} 
}

출처

2014-02-23 Sam Jacobs

얘들 아, 나는 당신의 좌절을 이해할 수 있지만, 코드의 덩어리가 작은하고는 바이올린보다 유래에 읽을 훨씬 더 어렵다. 즉,이 질문은 시각화 없이는 대답 할 수 없습니다. –

@SamJacobs 질문의 코드 지점은 유사한 질문에 대한 도움을 얻고 자하는 미래의 사용자에게이 질문을 참조로 사용할 수 있도록하기위한 것입니다. JSFiddle이 다운되거나 그 바이올린을 잃어 버렸다면,이 질문은 아무에게도 쓸모가 없을 것입니다. – Anonymous

http://jsfiddle.net/seNzp/1/ –

나는이 당신을 위해 무엇을 찾고있는 생각(210) 전체 탐색 블록을 둘러싼 :

#navbox { 
    display: inline-block; 
    width: calc(100% - 204px); 
}

출처

2014-02-23 16:23:25 Anonymous

감사합니다. –

헤더 태그의 로고 옆에 탐색 및 배너 그림을 표시하려면 어떻게해야합니까?

답변

관련 문제