Results 1 to 8 of 8

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Registered User
    Join Date: Jul:2009
    Location: Sofia
    Posts: 99

    Ïîìîù ñ HTML/CSS

    Çäðàâåéòå. Ïðàâÿ åäèí ñàéò è èñêàì äà ñëîæà ïîäìåíþòà íà íÿêîè ñåêöèè îò navigation bar-à. Íàïðàâèõ ìåíþòî, íî èìàì ìàëúê ïðîáëåì ñ ïîäìåíþòàòà.

    ÌÅÍÞ
    ïîäìåíþ1
    ïîäìåíþ2
    ïîäìåíþ3

    Êîãàòî ïîñî÷à ñ êóðñîðà âúðõó 'ÌÅÍÞ' òðÿáâà îòäîëó äà èçëèçàò ïîäìåíþòàòà, íî â ìîìåíòà 'ïîäìåíþ1' èçëèçà âúðõó 'ÌÅÍÞ' è ñå ïðèïîêðèâàò, êàòî ñå âèæäà ñàìî 'ïîäìåíþ1'. Ìîæåòå ëè äà ìè êàæåòå êàêâî òðÿáâà äà íàïðàâÿ â HTML èëè CSS. Íå çíàì êîå òî÷íî êîíòðîëèðà òåçè íåùà, ïúê çà ïúðâè ïúò ïðàâÿ ñàéò è íÿìàì íèêàêúâ îïèò.

  2. #2

  3. #3
    Registered User korben's Avatar
    Join Date: Nov:2010
    Location: Ñâèëåíãðàä
    Posts: 32
    Çäðàâåé, êîëåãà.

    Áåç äà ñúì âèäÿë html-à, íå ìîãà ìíîãî äà òè ïîìîãíà, íî ìîãà äà òè äàì åäèí ïðèìåð. Âèæ êàê ñòàâàò dropdown ìåíþòàòà:

    HTML
    Code:
            	<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

    Code:
    #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%;
    	}
    Òóêà ñúùî èìà äîñòà ïðèìåðè - CSS Dropdown menu
    8 hobbits = 1 hobbyte

  4. #4
    Registered 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, èç÷åòîõ ñóìà ìàòåðèàë è èçãëåäàõ ñóìà êëèïîâå ïî òåìàòà, íî çàñåãà íå ñúì ñòèãíàë äî ðåøåíèå.

  5. #5
    Registered User korben's Avatar
    Join Date: Nov:2010
    Location: Ñâèëåíãðàä
    Posts: 32
    îáãúðíè ìåíþòî â åäèí äèâ, è ïîñëå â öññ íàïðàâè óíàñëåäÿâàíåòî çà ul è li-òàòà, êàêòî â ìîÿ ñëó÷àé ñúì íàïðàâèë ñ äèâ-à #menu
    8 hobbits = 1 hobbyte

  6. #6
    Registered User
    Join Date: Jul:2009
    Location: Sofia
    Posts: 99
    Ìåðñè. Ùå ïðîáâàì è ùå êàæà êàêâî ñúì íàïðàâèë.

  7. #7
    Registered 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>
    .....

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Copyright © 1999-2011 Õàðäóåð ÁÃ. Âúçìîæíî å ñúäúðæàíèåòî íà òàçè ñòðàíèöà äà å îáåêò íà àâòîðñêè ïðàâà.
iskamPC.com | mobility.BG | Bloody's Techblog | Êðèïòîâàëóòè è ìàéíèíã | 3D Vision Blog | Ìàãàçèí çà åëåêòðîííè öèãàðè