Results 1 to 8 of 8
Thread: Ïîìîù ñ HTML/CSS
Hybrid View
-
13th April 2013 17:14 #1Registered User
Join Date: Jul:2009
Location: Sofia
Posts: 99
Ïîìîù ñ HTML/CSS
Çäðàâåéòå. Ïðàâÿ åäèí ñàéò è èñêàì äà ñëîæà ïîäìåíþòà íà íÿêîè ñåêöèè îò navigation bar-à. Íàïðàâèõ ìåíþòî, íî èìàì ìàëúê ïðîáëåì ñ ïîäìåíþòàòà.
ÌÅÍÞ
ïîäìåíþ1
ïîäìåíþ2
ïîäìåíþ3
Êîãàòî ïîñî÷à ñ êóðñîðà âúðõó 'ÌÅÍÞ' òðÿáâà îòäîëó äà èçëèçàò ïîäìåíþòàòà, íî â ìîìåíòà 'ïîäìåíþ1' èçëèçà âúðõó 'ÌÅÍÞ' è ñå ïðèïîêðèâàò, êàòî ñå âèæäà ñàìî 'ïîäìåíþ1'. Ìîæåòå ëè äà ìè êàæåòå êàêâî òðÿáâà äà íàïðàâÿ â HTML èëè CSS. Íå çíàì êîå òî÷íî êîíòðîëèðà òåçè íåùà, ïúê çà ïúðâè ïúò ïðàâÿ ñàéò è íÿìàì íèêàêúâ îïèò.
-
13th April 2013 17:36 #2Registered User
Join Date: Jan:2004
Posts: 50
-
13th April 2013 17:38 #3
Çäðàâåé, êîëåãà.
Áåç äà ñúì âèäÿë html-à, íå ìîãà ìíîãî äà òè ïîìîãíà, íî ìîãà äà òè äàì åäèí ïðèìåð. Âèæ êàê ñòàâàò dropdown ìåíþòàòà:
HTML
CSSCode:<div id="menu"> <ul> <li> <a href="index.php"> Íà÷àëî </a></li> <li> <div class="pr"><a href="products.php">Ïðîäóêòè</a></div> <ul> <li> <div class="pr2"><a href="monitorps.php">Ìîíèòîðè</a></div> <ul> <li><a href="asus.php"> ASUS</a> </li> <li><a href="dell.php"> DELL</a> </li> <li><a href="aoc.php"> AOC</a> </li> <li><a href="hp.php"> HP </a></li> <li><a href="eizo.php"> EIZO</a> </li> <li><a href="acer.php"> ACER</a> </li> </ul> </li> <li><a href="mb.php"> Äúííè ïëàòêè</a> <ul> <li><a href="asus.php"> ASUS</a> </li> <li><a href="dell.php"> FOXCONN</a> </li> <li><a href="aoc.php"> ASROCK</a> </li> <li><a href="hp.php"> GIGABYTE </a></li> <li><a href="eizo.php"> ECS</a> </li> <li><a href="acer.php"> MSI</a> </li> </ul> </li> <li><a href="hdd.php"> Òâúðäè äèñêîâå</a> <ul> <li><a href="asus.php"> Hitachi</a> </li> <li><a href="dell.php"> WD</a> </li> <li><a href="aoc.php"> Seagate</a> </li> </ul> </li> <li><a href="ram.php"> Ðàì ïàìåòè</a> <ul> <li><a href="asus.php"> Corsair</a> </li> <li><a href="dell.php"> Geil</a> </li> <li><a href="aoc.php"> OCZ</a> </li> <li><a href="hp.php"> Kingston </a></li> <li><a href="eizo.php"> Supertalent</a> </li> </ul> </li> <li><a href="cpu.php"> Ïðîöåñîðè</a> <ul> <li><a href="asus.php"> AMD </a> </li> <li><a href="dell.php"> INTEL</a> </li> </ul> </li> <li><a href="vga.php"> Âèäåîêàðòè</a> <ul> <li><a href="asus.php"> Sapphire </a> </li> <li><a href="dell.php"> Gainward </a> </li> <li><a href="aoc.php"> XFX </a> </li> <li><a href="hp.php"> ASUS </a></li> <li><a href="eizo.php"> MSI</a> </li> <li><a href="acer.php"> Gigabyte</a> </li> </ul> </li> </ul> </li> <li> <a href="config.php">Êîíôèãóðàòîð</a> </li> <li><a href="aboutus.php"> Çà íàñ</a> </li> <li><a href="contacts.php"> Êîíòàêòè </a></li> </ul> </div>
Òóêà ñúùî èìà äîñòà ïðèìåðè - CSS Dropdown menuCode:#menu li { float: left; list-style:none; font-size: 120%; text-shadow: 0 1px 1px #fff; padding-right: 40px; margin-right: 10px; margin-left: 0!important; padding-left: 0!important; padding: 10px; } #menu ul ul { display: none; z-index:10; } #menu ul li:hover > ul { display: block; } #menu ul { padding: 0 10px; list-style: none; position: relative; display: inline-table; margin-bottom:0!important; } #menu ul:after { content: ""; clear: both; display: block; } #menu ul li { float: left; } #menu ul li:hover { } #menu ul li:hover a { color: #fff; } #menu ul li a { display: block; padding: 5px 10px; padding-right: 15px; color: #757575; text-decoration: none; } #menu ul ul { background: #b5cfe6; border-radius: 0px; padding: 0; position: absolute; top: 100%; color: #757575; } #menu ul ul li { float: none; border-bottom: 1px solid #fff; position: relative; } #menu ul ul li a { padding: 5px 10px; color: #757575!important; font-size:75%; } #menu ul ul li a:hover { color: #fff!important; } #menu ul ul ul { position: absolute; left: 100%; top:0; color: #757575; border-left:1px solid #fff; } #menu ul ul ul li a { font-size: 65%; }8 hobbits = 1 hobbyte
-
13th April 2013 19:11 #4Registered User
Join Date: Jul:2009
Location: Sofia
Posts: 99
Ìîÿ ãðåøêà, ÷å çàáðàâèõ äà êàæà. Àç ñúì ãî íàïðàâèë ìåíþòî âå÷å ïîñðåäñòâîì íÿêàêúâ òàêúâ ïðèìåð äåòî ìè ïîêàçâàòå. Ïðîáâàõ ãî íà åäíà ñòðàíèöà, â êîÿòî íàïèñàõ ñàìî HTML êîäà çà ìåíþòî è ïðèêà÷èõ CSS ôàéëà, êîéòî å ñàìî çà ìåíþòî è âñè÷êî ñè å îê. Ñàìî, ÷å ñëåä òîâà èñêàõ äà ïðèëîæà òåçè íåùà êúì öåëèÿ ñàéò, êîéòî èìàì. Ñëîæèõ HTML êîäà è ñ íåãî âñè÷êî å îê, íî êàòî äîáàâÿ CSS êîäà íà ìåíþòî êúì CSS ôàéëà, êîéòî èçïîëçâàì çà öåëèÿ ñàéò ñòàâà îáúðêâàíåòî. Ïðîáëåìà å, ÷å â ãëàâíèÿ CSS ôàéë èìàì ìíîãî êîä ñ êîéòî å ôîðìàòèðàí öåëèÿ ñàéò. Ïðåäè äà çàïî÷íà òàì ñëîæèõ è íÿêàêúâ Reset êîä èëè Startup CSS êîä èëè íåùî ïîäîáíî, êîéòî ïðàâè ïîâå÷åòî íàñòðîéêè íà íÿêàêâè default ñòîéíîñòè è ñëåä òîâà êàêâîòî ìè ïîòðÿáâà ñè ãî ïðîìåíÿì. È àç ñè ìèñëÿ, ÷å èìà êîíôëèêò ìåæäó ãîëåìèÿ CSS ôàéë è êîäà, êîéòî äîáàâÿì çà ìåíþòî. Ìîæå áè âå÷å ñúì íàïðàâèë íÿêàêâà íàñòðîéêà â ãëàâíèÿ ôàéë, íî òúé êàòî âçåõ òîçè Reset êîä ãîòîâ íåçíàì êîÿ òî÷íî, è òÿ å ñ ïðèîðèòåò ïðåä äðóãàòà èëè íåùî òàêîâà.
Ñ åäíà äóìà: ìåíþòî ñè ðàáîòè êîãàòî èçïîëçâàì ñàìî íåãîâèÿ HTML è CSS êîä, íî êîãàòî ãî äîáàâÿ êúì öåëèÿ ñàéò íå áà÷êà êàòî õîðàòà è ñúì ïî÷òè ñèãóðåí, ÷å å îò CSS íàñòðîéêèòå íåùî, ñàìî äåòî íåçíàì òî÷íî êîÿ îòãîâàðÿ çà ïîêàçâàíåòî íà ïîäìåíþòàòà, à òîâà ñå äúëæè íàé-âåðîÿòíî íà ôàêòà, ÷å íèêîãà íå ñúì ïðàâèë ñàéò è íå ñúì ðàáîòèë ñ HTML è CSS, èç÷åòîõ ñóìà ìàòåðèàë è èçãëåäàõ ñóìà êëèïîâå ïî òåìàòà, íî çàñåãà íå ñúì ñòèãíàë äî ðåøåíèå.
-
13th April 2013 19:15 #5
îáãúðíè ìåíþòî â åäèí äèâ, è ïîñëå â öññ íàïðàâè óíàñëåäÿâàíåòî çà ul è li-òàòà, êàêòî â ìîÿ ñëó÷àé ñúì íàïðàâèë ñ äèâ-à #menu
8 hobbits = 1 hobbyte
-
13th April 2013 20:16 #6Registered User
Join Date: Jul:2009
Location: Sofia
Posts: 99
Ìåðñè. Ùå ïðîáâàì è ùå êàæà êàêâî ñúì íàïðàâèë.
-
15th April 2013 21:28 #7Registered User
Join Date: Mar:2008
Location: Buglaria
Posts: 86
ËÎË?! Êàêâè ñà òåçè ãëóïîñòè?! important, èçëèøíè ñâîéñòâà?! Òè àêî òðúãíåø òàêà ñ íàâèãàöèÿòà, êúì êðàÿ íà ñàéòà íå çíàì äî êúäå ùå ñòèãíåø, åâåíòóàëíî äî <div style="block !important" />, àêî ìå ðàçáèðàø...
Dropdown íàâèãàöèÿ ñå ïðàâè åëåìåíòàðíî - èäåÿòà å âñè÷êè 'ãëàâíè' åëåìåíòè äà ñà òè ðåëàòèâíè, ñïèñúöèòå â òÿõ àáñîëþòíè è ïðè õîâúð äà ãè ïîêàçâàø:
Òîâà áè òè ðàáîòèëî çà ïîäíèâà, êîëêîòî äèçàéíà ïîçâîëÿâà.HTML Code:#navigation li { position:relative; } #navigation ul ul { position:absolute; top:100%; left:0; display:none; } #navigation ul ul ul { top:0; left:100%; } #navigation li:hover > ul { display:block; }
PS. Òîâà å ñàìî 'core' êîäà çà dropdown. Ñòèëèçèðàíåòî ùå ñè ãî íàïðàâèø òè. HTML òðÿáâà äà èçãëåæäà òàêà:
HTML Code:<div id="#navigation"> <ul> <li> <a href="#">Nav 1</a> <ul> <li><a href="#">DD 1</a></li> .....




Reply With Quote
Lenovo ThinkPad 15 èëè IdeaPad 15
5th May 2023, 22:16 in Ìîáèëíè êîìïþòðè