시작, 끝, 나누기가 다른 CSS 메뉴 만들기

안녕 얘들 아, 나를 도와 줄 수 있었으면 좋겠다.시작, 끝, 나누기가 다른 CSS 메뉴 만들기

1 시간 이상 내게 미쳐 버렸습니다.

기본적으로 나는 CSS에 관해서는 큰 초보자이지만 배우고있다. 순간 나는이처럼 보이는 메뉴를 복제하는 것을 시도하고있다 :

지금까지 이런 식으로 뭔가 (내가 다른하지만 문제가 글꼴을 알고) 보이는 것을

actual menu

: enter image description here

을 보시다시피, ive는 백그라운드를 얻었지만 각 탭 사이에 시작, 끝 및 나누기 (검은 선 부분)를 만드는 방법을 파악할 수 없습니다.

기본적으로 시작, 중단, 끝내기 .jpg 이미지가 있습니다. 이것을하기 위해 html5 또는 css3 커브 등을 찾고 있지 않습니다. 그냥 간단하게 유지하고 싶어 :).

이것은 내가 지금까지 얻은 것입니다. 내가 남은 것을 어떻게 만들 수 있는지에 대한 조언을 해줄 수 있다면 좋을 것입니다. 그리고 ive가 그렇게 좋지 않은 접근법을 사용한다면, 더 나은 접근법을 제안하십시오.

html로 :

<div id="header"> 

      <ul id="header-list"> 
       <li class="header-list-item"> 
        <span class= "header-list-item-span" >Home</span> 

       </li> 

       <li class="header-list-item"> 
        <span class= "header-list-item-span" >About Us</span> 

       </li> 
       <li class="header-list-item"> 
        <span class= "header-list-item-span" >Services</span> 

       </li> 
      </ul> 

    </div><!--END OF HEADER -->

는 CSS :

#header-list{ 
    display: table; 

position: relative; 
left: -3em; 

    table-layout: fixed; 
    margin-bottom: 0PX; 
    margin-top: 0; 
    margin-left: auto; 

} 

.header-list-item-span{ 
    background-image: url("img/menubody.jpg"); 
    color: white; 
    display: inline-block; 
    width: 5em; 
    font-size: large; 
    text-align: center; 
    padding: .2em; 
} 

.header-list-item{ 
    display: table-cell; 

height: 4.2em; 
    vertical-align: bottom; 

}

출처

2012-07-11 Ahmed-Anas

검은 색은 경계처럼 보입니다. 상단과 하단을 밀기 위해 'border-left'및/또는 'border-right'와 'margin'을 가지고 놀아라. –

HTML5 또는 HTML4가 필요합니까? – boyd

나는 그것을 시도했지만 문제는 국경이 모두 아래로 내려 갔다는 것입니다. 그러나 이것은 위쪽과 아래 사이에 약간의 간격이 있습니다. –

랩 다른 사업부의 UL 및 왼쪽 안쪽에 패딩을 추가하고 배경으로하여 시작 이미지를 배치 할 수 있습니다. 그런 다음 오른쪽 이미지를 ul의 배경으로 만들고 오른쪽에 패딩을 추가하십시오.

랩 div에서 ul :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
    <title></title> 
    <style> 
     div,li,ul,span { margin: 0;padding: 0;} 

     body { width: 700px; margin: 0 auto; } 

     #header 
     { 
      background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat; 
      padding-top: 50px; 
      position: relative; 
     } 

     #header .nav 
     { 
      background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat; 
      float: right; 
      width: 413px; 
      padding-left: 26px; 
      margin-right: 20px; 
     } 

     #header .nav .nav-wrapper 
     { 
      background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red; 
      padding-right: 26px; 
     } 

     #header ul 
     { 
      position: relative; 
      list-style: none; 
     } 
     #header ul li 
     { 
      background: red; 
      width: 120px; 
      float: left; 
      text-align: center; 
     } 
     #header ul li span 
     { 
      color: white; 
      padding: 8px 0px; 
     } 
     .clear { clear: both;} 
    </style> 
</head> 
<body> 


    <div id="header"> 
     <div class="nav"> 
      <div class="nav-wrapper"> 
       <ul> 
        <li><span>Home</span></li> 
        <li><span>About Us</span></li> 
        <li><span>Services</span></li> 
       </ul> 
       <div class="clear"></div> 
      </div> 
     </div> 
     <div class="clear"></div> 
    </div> 


</body>

출처

2012-07-11 14:54:39 amsprich

시도했지만 시작 이미지가 왼쪽 상단으로 이동합니다. ul이 display이기 때문에 아래쪽에 메뉴를 수직으로 정렬 할 수있었습니다 : table and li is display : table-cell –

try background : url ("img/img.jpg ") left-bottom no-repeat; – amsprich

몇 분만 기다려주세요. 예를 해결하려고 노력할 것입니다. :) – amsprich

는 여기에 생각이다. 첫 번째 jpg를 해당 div의 배경 이미지로 설정하고 padding-left을 추가하여 이미지를 볼 수있게합니다. 마지막 jpg를 ul의 배경 이미지로 설정하고 padding-right을 추가하여 이미지를 볼 수도 있습니다.

제 생각에는 CSS 선택기를보다 효과적으로 활용하여 HTML을 단순화해야합니다.

헤더 목록은 div#header > ul으로 선택할 수 있습니다. header-list-item 클래스로 선택하는 항목은 div#header > ul > li으로 선택할 수 있습니다. 스팬이 실제로 필요하다고 생각하지 않습니다. 스타일을 li 요소에 직접 적용 할 수 있습니다.

출처

2012-07-11 14:56:11 alf

시작, 끝, 나누기가 다른 CSS 메뉴 만들기

답변

관련 문제