이전
목록
다음
인

li 가로정렬

航海
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-04-13 (금) 17:54:36 · 4552 · 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-03-03 조회 6,251
13-03-01 조회 5,579
13-03-01 조회 8,321
13-03-01 조회 6,319
13-02-26 조회 3,928
13-02-26 조회 3,878
13-02-26 조회 4,766
13-02-24 조회 8,181
13-02-24 조회 4,262
13-02-24 조회 3,511
13-02-24 조회 5,319
13-02-24 조회 5,310
13-02-24 조회 4,378
13-02-24 조회 5,714
13-02-24 조회 9,405
13-02-14 조회 5,121
13-02-13 조회 9,051
13-01-29 조회 7,698
13-01-24 조회 5,037
13-01-24 조회 4,914
13-01-17 조회 4,326
13-01-16 조회 4,356
13-01-08 조회 4,407
12-12-27 조회 4,073
12-12-20 조회 1.1만
12-12-20 조회 3,388
12-12-06 조회 4,385
12-12-01 조회 4,140
12-11-28 조회 5,705
12-11-25 조회 5,408
12-10-20 조회 4,674
12-10-03 조회 4,835
12-09-26 조회 4,998
12-09-15 조회 8,451
12-09-14 조회 5,465
12-09-11 조회 3,974
12-09-10 조회 3,983
12-09-05 조회 8,867
12-08-29 조회 4,667
12-08-26 조회 3,799
12-08-23 조회 3,495
12-08-22 조회 3,584
12-08-22 조회 4,397
12-08-21 조회 3,540
12-08-20 조회 3,465
12-08-20 조회 9,272
12-08-15 조회 4,389
12-08-13 조회 3,302
12-08-11 조회 4,721
12-08-05 조회 4,575
12-08-03 조회 3,353
12-08-03 조회 4,043
12-08-02 조회 5,029
12-07-29 조회 4,142
12-07-26 조회 3,717
12-07-26 조회 3,587
12-07-22 조회 3,500
12-07-20 조회 3,339
12-07-19 조회 4,199
12-07-19 조회 3,454
12-07-16 조회 3,567
12-07-16 조회 4,491
12-07-15 조회 3,569
12-07-12 조회 7,394
12-07-12 조회 5,039
12-07-11 조회 3,085
12-07-09 조회 3,242
12-07-05 조회 3,857
12-07-04 조회 4,431
12-07-04 조회 3,833
12-07-04 조회 4,360
12-06-29 조회 3,825
12-06-27 조회 3,411
12-06-24 조회 3,886
12-06-22 조회 4,194
12-06-22 조회 8,610
12-06-22 조회 3,263
12-06-21 조회 3,294
12-06-17 조회 3,922
12-06-14 조회 4,019
12-06-14 조회 3,309
12-06-08 조회 4,451
12-06-06 조회 3,415
12-06-04 조회 4,172
12-05-26 조회 4,986
12-05-26 조회 3,938
12-05-25 조회 3,237
12-05-24 조회 3,338
12-05-22 조회 3,387
12-05-20 조회 3,013
12-05-16 조회 3,146
12-05-15 조회 3,537
12-05-10 조회 3,968
12-05-08 조회 3,492
12-05-04 조회 3,348
12-05-03 조회 4,299
12-05-02 조회 3,435
12-05-02 조회 3,208
12-05-02 조회 3,305
12-04-26 조회 3,455
글쓰기