Вынос меню под экстратоп

четверг, 22 августа 2013

22:46

все записи пользователя в сообществе crimson soda

sometimes the hardest thing and the right thing are the same

В общем, уверена на 100%, что такой вопрос задавался, и не раз, но мои способности поиска оставляют желать лучшего.

Хочу сделать меню между записями и экстратопом в три колонки.
Насколько поняла, нужно привязывать отдельные пункты к координатам, так? Можете скинуть ссылку с как можно более подробным описанием того, как это делается.
Буду премного благодарна.

@темы: меню

URL

Комментарии

23.08.2013 в 01:11

Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

Если меню так и останется выпадающим просто сдвиньте его целиком абсолютным позиционированием,
#side {position:absolute; left:200px; top:400px;z-index: 10 !important; } ,
а все лишние пункты меню уберите.
Например так: #iAmQuit a, #thisDiaryLinks_title {display: none !important;}

URL

23.08.2013 в 07:16

crimson soda

sometimes the hardest thing and the right thing are the same

Кареглазый демон, спасибо. правда, я некорректно выразилась, за что прошу прощения. имелось ввиду чтобы меню было не выпадающим, а "открытым". как я поняла, позиционировать нужно будет каждый отдельный пункт. можете с этим подсказать?

URL

23.08.2013 в 08:52

Tish Evans

Когда наступает депрессия или смятение, попробуй лечь на спину на полу и подними лапы вверх. Иногда мир выглядит лучше вверх ногами.

crimson soda, вот пример:

#side {position: absolute; top: 0px; left: 0 px;}
 .menuSection {margin-left: 10px !important; padding-left: 10px !important; font-size: 10px !important; text-transform: uppercase; text-align: center !important; }
 #myDiaryLinks { position:absolute; top: 456px; left: -15px; no-repeat; width: 160px !important; }
 #myDiaryLink { position:absolute; top: 0px; left: 40px; background: #a1a1a1; width: 160px; height: 15px; padding: 3px !important;}
 #writeThisDiary { position:absolute; top: 0px; left: 210px; background: #a1a1a1; width: 160px; height: 15px; padding: 3px !important;}
 #myDraftLink { position:absolute; top: 0px; left: 380px; background: #a1a1a1; width: 160px; height: 15px; padding: 3px !important;}
 #umailLink { position:absolute; top: 0px; left: 550px; background: #a1a1a1; width: 160px; height: 15px; padding: 3px !important;}
 #myFavLink { position:absolute; top: 0px; left: 720px; background: #a1a1a1; width: 160px; height: 15px; padding: 3px !important;}
 #myQuotLink { position:absolute; top: 25px; left: 40px; background: #d6d5d5; width: 160px; height: 15px; padding: 3px !important;}
 #discussionLink { position:absolute; top: 25px; left: 210px; background: #d6d5d5; width: 160px; height: 15px; padding: 3px !important;}
 #myProfileLink { position:absolute; top: 25px; left: 380px; background: #d6d5d5; width: 160px; height: 15px; padding: 3px !important;}
 #optionsLink { position:absolute; top: 25px; left: 550px; background: #d6d5d5; width: 160px; height: 15px; padding: 3px !important;}
 #thisDiaryOwner { position: absolute; top: 481px; left: 0px; no-repeat; margin-left: 0px !important; }
 #postsCalendar { position:absolute; top: 0px; left: 715px; background: #d6d5d5; width: 160px; height: 15px; padding: 3px !important; }
 #globalLinks { position:absolute; top: 506px; left: 25px; no-repeat; }
 #allDiaryLink { position:absolute; top: 0px; left: 0px; background: #f4f4f4; width: 160px; height: 15px; padding: 3px !important; }
 #mainpageLink { position:absolute; top: 0px; left: 170px; background: #f4f4f4; width: 160px; height: 15px; padding: 3px !important; }
 #communityCatalogueLink { position:absolute; top: 0px; left: 170px; background: #f4f4f4; width: 160px; height: 15px; padding: 3px !important; }
 #diarySupportLink { position:absolute; top: 0px; left: 340px; background: #f4f4f4; width: 160px; height: 15px; padding: 3px !important; }
 #faqLink { position:absolute; top: 0px; left: 510px; background: #f4f4f4; width: 160px; height: 15px; padding: 3px !important; }
 #iAmQuit { position:absolute; top: 0px; left: 680px; background: #f4f4f4; width: 160px; height: 15px; padding: 3px !important; }
 #writeToAuthor { position:absolute; top: -50px; left: 375px; background: #6d6d6d; width: 160px; height: 15px; padding: 3px !important; }
 #subscribeEmail, #unsubscribeEmail { position:absolute; top: -50px; left: 545px; background: #6d6d6d; width: 160px; height: 15px; padding: 3px !important; }
 #addToFav, #delFromFav { position:absolute; top: -50px; left: 715px; background: #6d6d6d; width: 160px; height: 15px; padding: 3px !important; }
 #thisDiaryLinks { position: absolute; top: 431px; left: 25px; no-repeat; width: 160px !important;}
 #authorQuot { position:absolute; top: 0px; left: 0px; background: #6d6d6d; width: 160px; height: 15px; padding: 3px !important; }
 #authorFav { position:absolute; top: 0px; left: 170px; background: #6d6d6d; width: 160px; height: 15px; padding: 3px !important; }
 #thisDiaryInfo { position: absolute; top: 10px; left: 25px; no-repeat; width: 831px !important; height: 20px !important; border-bottom: 1px dashed #e1e1e1 !important; }
 #myNotepadLink, #tagslistlink, #albumLink, #authorAlbum, #photolibLink, #favListLink, #pchListLink, #diarySpiritLink, #myCommunitiesLink, #thisDiaryPhoto, #upInChart, #communityCatalogueLink, #randomDiaryLink, #authorRSS, #rssLink, #YaSearch, #Stats, #usrlog, #usrpass, .order_button, .urlLink, #authorLinks, #myLinks {display: none;}

выглядеть будет вот так:

правда, здесь меню не под экстратопом, я в самом его низу, но принцип тот же. нужно будет просто поменять координаты, чтобы меню съехало вниз, и опустить вниз #page.

URL

23.08.2013 в 10:38

Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

crimson soda, Если вам потом нужно оформлять каждую ссылку то да, целесообразно как советует Tish Evans, если же просто меню со всегда раскрытым списком то так #myDiaryLinks ul, #thisDiaryOwner ul, #globalLinks ul { visibility: visible !important; display:block;}

URL

23.08.2013 в 11:28

crimson soda

sometimes the hardest thing and the right thing are the same

Tish Evans, спасибо, это то, что нужно!

Кареглазый демон, и Вам спасибо, что откликнулись С:

URL

23.08.2013 в 11:32

Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

crimson soda, пожалуйста)

URL

23.08.2013 в 12:52

Tish Evans

crimson soda, всегда пожалуйста, рада, что смогла помочь ^_^

URL


Запомнить

Вынос меню под экстратоп

@CSS — стилизация дневников