이전
목록
다음
인

li 가로정렬

航海
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-04-13 (금) 17:54:36 · 4531 · 3
 
 
메뉴 수정하고있는데요..
 
전체 넓이를 900px; 으로 주니까 메뉴들이 수직 정렬이 되어버리네요..
 
원본은 메뉴개별로 넓이가 설정되어있어서. 홈피에적용하긴무리고..
 
l ul { list-style-type:none; }li { display:inline; } 주면 넓이때문에 안되구..
 
플롯으로도 안되네요..
 
html body ul#nav ul
,html body ul#nav ul li {
width:200px;
}
html body ul#nav ul ul {
margin:0 0 0 200px;
}
/* Theming the menu */
ul#nav {
float:left;
font-size:90%;
}
ul#nav ul {
background:#222;
}
ul#nav li a {
float:left;
width:900px;
padding:20px 30px;
font-family:"Lucida Sans","Century Gothic","Franklin Gothic Book","Franklin Gothic",helvetica,arial,verdana,sans;
text-decoration:none;
background:#222;
color:#fff;
}
ul#nav ul li a {
padding:10px 15px;
float:left;
}
ul#nav li a:hover
,ul#nav li a:focus {
color:#aeff5e;
}
 html body ul.sf-menu ul
,html body ul.sf-menu ul li {
width:180px;
}
html body ul.sf-menu ul ul {
margin:0 0 0 180px;
}
/* Framework for proper showing/hiding/positioning */
/* DO NOT EDIT FROM HERE */
ul.sf-menu
,ul.sf-menu * {
margin:0;
padding:0;
}
ul.sf-menu {
display:block;
position:relative;
}
ul.sf-menu li {
display:block;
list-style:none;
float:left;
position:relative;
}
ul.sf-menu li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
ul.sf-menu a {
display:block;
position:relative;
}
ul.sf-menu ul {
position:absolute;
left:0;
width:150px;
top:auto;
left:-999999px;
}
ul.sf-menu ul a {
zoom:1; /* IE6/7 fix */
}
ul.sf-menu ul li {
float:left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width:150px;
}
ul.sf-menu ul ul {
top:0;
margin:0 0 0 150px
}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul { /*first level*/
left:auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul {
left:-999999px;
}
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul {/*second level*/
left:auto;
}
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul {
left:-999999px;
}
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul {/*third level*/
left:auto;
}
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul {
left:-999999px;
}
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {/*fourth level*/
left:auto;
}
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left:-999999px;
}
 
맨위에 감싸서 넓이를줘도 꿈쩍도안해서..여기저기넣다가 늘어나긴 늘어났는데..
 
메뉴가 링크보시듯이.. 수직정렬되어있는데..
 
고칠 방법 없을까요..?
 
 
 
 
#퍼블리셔팁 #퍼블리셔 #팁자료실 #html
|

댓글 3개

전진
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-04-14 (토) 06:31:58
a 의 width를 900으로 주셨네요. ^^;
음.. 원래 코드 http://geeksnowdigital.com/sites/all/modules/SooperFish02/example-advanced.html 에서 검은 부분을 화면 끝까지 채우고 싶으신건가요?

그렇다면, 위 원래 코드에서
ul.nav 의 border 와 border-width를 빼시고,

width: 100%; background-color: #222;

를 넣으시면 될것 같습니다. ^^
航海
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-04-14 (토) 08:08:58
감사합니다.. 생각지도못한 ..
아이아라
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-05-28 (월) 05:31:17
음
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-07-14 조회 5,462
13-07-14 조회 5,423
13-07-14 조회 4,717
13-07-14 조회 4,322
13-07-14 조회 4,188
13-07-14 조회 4,240
13-07-14 조회 4,969
13-07-14 조회 4,649
13-07-14 조회 4,398
13-07-14 조회 5,432
13-07-14 조회 5,333
13-07-14 조회 5,097
13-07-14 조회 4,823
13-07-14 조회 5,510
13-07-13 조회 3,770
13-07-01 조회 5,775
13-07-01 조회 5,860
13-07-01 조회 3,959
13-07-01 조회 5,453
13-05-27 조회 4,021
13-05-21 조회 5,066
13-05-02 조회 1만
13-04-29 조회 5,261
13-04-15 조회 5,512
13-04-13 조회 6,447
13-02-27 조회 4,145
13-02-26 조회 6,534
13-02-12 조회 5,298
13-02-01 조회 2.3만
13-01-23 조회 3,580
13-01-09 조회 8,065
13-01-07 조회 4,976
13-01-07 조회 3,726
13-01-04 조회 1.3만
13-01-03 조회 1.2만
12-12-31 조회 6,416
12-12-27 조회 4,549
12-12-27 조회 4,232
12-12-27 조회 8,911
12-12-18 조회 3,725
12-12-12 조회 3,755
12-12-12 조회 6,791
12-12-12 조회 8,205
12-12-05 조회 5,497
12-12-01 조회 6,805
12-11-22 조회 4,716
12-11-09 조회 5,566
12-11-09 조회 7,629
12-10-29 조회 4,838
12-10-16 조회 6,385
12-10-09 조회 5,457
12-09-02 조회 4,567
12-09-01 조회 3,676
12-08-30 조회 4,338
12-08-30 조회 4,330
12-08-28 조회 3,673
12-08-21 조회 7,244
12-08-20 조회 3,769
12-08-18 조회 5,183
12-08-18 조회 3,555
12-08-11 조회 3,708
12-08-09 조회 3,878
12-08-07 조회 3,858
12-08-07 조회 4,436
12-08-01 조회 4,702
12-08-01 조회 4,590
12-07-20 조회 9,941
12-07-17 조회 4,304
12-07-15 조회 4,067
12-07-10 조회 4,332
12-07-09 조회 7,042
12-07-05 조회 3,382
12-07-04 조회 3,536
12-06-30 조회 5,774
12-06-28 조회 3,872
12-06-20 조회 4,030
12-06-16 조회 3,333
12-06-14 조회 3,983
12-06-07 조회 4,006
12-06-06 조회 6,368
12-05-27 조회 4,582
12-05-25 조회 3,334
12-05-25 조회 3,158
12-05-24 조회 3,272
12-05-24 조회 4,619
12-05-23 조회 4,001
12-05-22 조회 6,608
12-05-15 조회 4,142
12-05-15 조회 3,693
12-05-14 조회 3,128
12-05-12 조회 3,578
12-05-11 조회 7,079
12-05-07 조회 4,514
12-04-28 조회 3,713
12-04-25 조회 5,368
12-04-15 조회 3,945
12-04-12 조회 4,793
12-04-11 조회 3,551
12-04-08 조회 3,404
12-03-21 조회 6,449
글쓰기