Jump to content

loserone+_+

Members
 View Profile  See their activity

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by loserone+_+

    Wrapping Drop Down Menu Failed

    in CSS

    Posted

    this is my updated css,

    and look like this still having a problem like top but many css code changed especially crap margin,

    body, ul, li {	font-size:14px; 	font-family:Arial, Helvetica, Sans-Serif;/*	line-height:21px; REMOVED BY GEOFFF */ /*	text-align:left; REMOVED BY GEOFFF */}#cssmenu {	background-color:#1919A3; /*CHANGE THE BACKGROUND URL TO HEXA COLOR*/	width: auto;}#menulogo{    float: none;	height: auto;}#menu {	/*	padding:0px 20px 0px 20px; DONT USE THIS*/	padding-right:8px;	list-style:none;	line-height:37px;	margin:0;	width:100%;	/* Border Radius Changer */	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius: 5px;		border: 1px solid #002232;	-moz-box-shadow:inset 0px 0px 1px #edf9ff;	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;	box-shadow:inset 0px 0px 1px #edf9ff;}#menu li  {	float:none;	display:inline-table;	position:relative;	padding-right:60px;	border:none;}#menu li:hover {	background-color: red;	-moz-border-radius: 0px;	-webkit-border-radius: 0px;	border-radius: 0px;}#menu li a {	font-size:12px;	color:#CDF9FA;	text-decoration:none;	text-shadow: 1px 1px 1px #000;}#menu li .drop {	z-index:2;	}#menu li:hover .drop {	z-index:2;}.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns,.dropdown_5columns {	float:none;	position:absolute;	left:-999em;	padding-top: 20px;	padding-left: 20px;/* CHANGED THE SPACE ON DROPDOWN MENU FIRST MENU */		background: #1919A3;	background: -moz-linear-gradient(top, #1919A3, #2E92B0);	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1919A3), to(#2E92B0));	-moz-border-radius: 0px 0px 5px 5px;	-webkit-border-radius: 0px 0px 5px 5px;	border-radius: 0px 0px 5px 5px;										z-index:2;}.dropdown_1column {width: auto;   z-index:2;}.dropdown_2columns {width: auto;  z-index:2;}.dropdown_3columns {width: auto;  z-index:2;}.dropdown_4columns {width: auto;  z-index:2;}.dropdown_5columns {width: auto;  z-index:2;}#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns {	left:0;	top:auto;}.col_1,.col_2,.col_3,.col_4,.col_5 {	display:inline;	float: none;	position: relative;	margin-left: 0;	margin-right: 0;	z-index:2;}.col_1 {width:auto; z-index:2;}.col_2 {width:auto;}.col_3 {width:auto;}.col_4 {width:auto;}.col_5 {width:auto;}#menu ul li {	font-family:Arial, Helvetica, sans-serif;	line-height:21px;	font-size:12px;	text-align:left;	text-shadow: 1px 1px 1px #FFFFFF;}#menu li:hover div a {	font-size:13px;	color:#FFFFFF;}#menu li:hover div a:hover {	color:#E4FF4A;}#menu li ul {	list-style:none;	padding:0;	font-size:12px;	position:relative;	margin:0 0 10px 0;}#menu li ul li {	float:none;	text-shadow: 1px 1px 1px #ffffff;	text-align:left;	width:200px;	padding:0;	margin:0;}#menu li ul li:hover {	background:none;	border:none;	padding:0;	margin:0;}

    and this is my updated image

    http://imageshack.us/photo/my-images/24/e993.jpg/

     

    sorry if i using the freehosting images, because i didnt know how to add images on this reply

     

    whenever its looks better and good now,

    i still having the same problem in above,

     

    first i think the margin was wrong,

    i removed all margin and after one hour, its become like this,

    but not the wrapping, and its odd to having text-align:center didnt work on the menu li

    im confused in this one, and i think some of pal here know the reason and the solution.

    Wrapping Drop Down Menu Failed

    in CSS

    Posted

    lol again i having problem with drop down menu,

    this time is failed to wrapping to the left of the bar,

    look,

     

    my objective build on myself, is to wrapping the ScrollDown1 to the left of the bar

    like this,

     

    and so the Next ScrollDown like ScrollDown 2, Scroll Down 3, ScrollDown 4 is wrapping until the right of the late ScrollDown. (Sorry, if my language is bad)

     

    here is my html code,

    <html><head><link rel="stylesheet" type="text/css" href="dropdownmenu.css"/></head><body><div id="cssmenu"><!--CSS Menu Start --><div id="dunnodiv">    <ul id="menu">    <li><a href="#" class="drop">Subdown1</a>    		<div class="dropdown_1column">                        <div class="col_1">                    <ul>                         <li><a href="#">Subdown1.1</a>						<ul>                        <li><a href="#">Subdown1.2</li>                        <li><a href="#">Subdown1.3</a></li>                        <li><a href="#">Subdown1.3</a></li>                        <li><a href="#">Subdown1.4</a></li> 						</ul>						</li>					</ul>                      </div> 		</div>	</li>       <li><a href="#" class="drop">Subdown2</a>            <div class="dropdown_5columns">                        <div class="col_1">                <ul>                    <li><a href="#">Subdown2.1</a>					<ul>                    <li><a href="#">Subdown 2.1.1</a></li>                    <li><a href="#">Subdown 2.1.2</a></li>                    <li><a href="#">Subdown 2.1.3</a></li>                    <li><a href="#">Subdown 2.1.4</a></li>					</ul>					</li>				</ul>               </div>                        <div class="col_1">                    <ul>                    <li><a href="#">Subdown2.2</a>					<ul>                    <li><a href="#">Subdown 2.1.1</a></li>                    <li><a href="#">Subdown 2.1.2</a></li>                    <li><a href="#">Subdown 2.1.3</a></li>                    </ul>					</li>                </ul>                   </div>            <div class="col_1">                    <ul>                    <li><a href="http://www.pascaistn.org/html/index.php" target="_blank">Subdown 2.3</a></li>                </ul>                   </div>         </div>        </li>    <li><a href="#" class="drop">Subdown 3</a>            <div class="dropdown_3columns">                        <div class="col_1">                    <ul>                    <li><a href="#">Subdown 3.1</a>					<ul>                    <li><a href="#">Subdown 3.1.1</a></li>                    <li><a href="#">Subdown 3.1.2</a></li>					</ul>					</li>				</ul>                   </div>                        <div class="col_1">                    <ul>	                <li><a href="#">Subdown 3.2</a>						<ul>                    	<li><a href="#">Subdown 3.2.1</a></li>                        <li><a href="#">Subdown 3.2.2</a></li>						</ul>					</li>                </ul>                   </div>        </div>            </li>		<li> <a href="#" class="drop">Subdown 4</a>    		<div class="dropdown_1column">                        <div class="col_1">                                    <ul>                        <li><a href="#">Subdown 4.1</a></li>                        <li><a href="#">Subdown 4.2</a></li>                        <li><a href="#">Subdown 4.3</a></li>                    </ul>                                        </div>     		</div>	</li>      <li><a href="#" class="drop">Subdown 5</a>    		<div class="dropdown_1column">                        <div class="col_1">                                    <ul>                        <li><a href="#">Subdown 5.1</a></li>                        <li><a href="#">Subdown 5.2</a></li>                        <li><a href="#">Subdown 5.3</a></li>                    </ul>                                </div>                		</div>        	</li></ul></div></div><!--End OF CSSMENU --></body></html>

    and this is my css code,

    body, ul, li {	font-size:14px; 	font-family:Arial, Helvetica, Sans-Serif;/*	line-height:21px; REMOVED BY GEOFFF */ /*	text-align:left; REMOVED BY GEOFFF */}#header{float:none; width:100%; height:100%; background-color:#FFF;}#cssmenu {	background-color:#000000; /*CHANGE THE BACKGROUND URL TO HEXA COLOR*/	padding-left: auto;	height: 40px;	width: auto;}#dunnodiv{    float:none; 	height: auto;}/*THIS IS WHERE I THINK THE PROBLEM CAN BE SOLVED*/#menu {	/*	padding:0px 20px 0px 20px; DONT USE THIS*/	list-style:none;	line-height:21px;	margin:0px auto 0px auto; 	width:100%;	padding-right: 8px;		/*THIS USED FOR WRAPPING THE RIGHT MENU SIDE*/	/* Border Radius Changer */	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius: 5px;		border: 1px solid #002232;	-moz-box-shadow:inset 0px 0px 1px #edf9ff;	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;	box-shadow:inset 0px 0px 1px #edf9ff;}#menu li {	float:none;	display:inline-table;	position:relative;	padding: 0 10px 10px 5px; 	margin-right:32px;	margin-top:7px;	border:none;}#menu li:hover {/*	border:none; REMOVED BY GEOFFF*//*	background-color: #1919A3; */	background-color: red;	-moz-border-radius: 0px;	-webkit-border-radius: 0px;	border-radius: 0px;}/*THIS IS WHERE I THINK THE PROBLEM CAN BE SOLVED*/#menu li a {	font-size:12px; 	color:#CDF9FA;	display:block;	outline:0;	text-decoration:none;	text-shadow: 1px 1px 1px #000;	font-variant:normal;}#menu li .drop {/*	background:right 0px;  REMOVED BY GEOFFF*/	padding-right:21px;	z-index:2;}#menu li:hover .drop {/*	background:right 0px;  REMOVED BY GEOFFF */	z-index:2;}.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns,.dropdown_5columns {	float:none;	position:absolute;	left:-999em;	margin-top: 9.5px;	padding-top: 20px;	padding-left: 20px;/* CHANGED THE SPACE ON DROPDOWN MENU FIRST MENU *//*  padding:10px 5px 10px 5px;  *//*	border:1px solid #777777; */		background: #000000;	background: -moz-linear-gradient(top, #000000, #000000);	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#000000));	-moz-border-radius: 0px 0px 5px 5px;	-webkit-border-radius: 0px 0px 5px 5px;	border-radius: 0px 0px 5px 5px;										z-index:2;}.dropdown_1column {width: auto;   z-index:2;}.dropdown_2columns {width: auto;  z-index:2;}.dropdown_3columns {width: auto;  z-index:2;}.dropdown_4columns {width: auto;  z-index:2;}.dropdown_5columns {width: auto;  z-index:2;}#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns {	left:-1px;	top:auto;}.col_1,.col_2,.col_3,.col_4,.col_5 {	display:inline;	float: left;	position: relative;	margin-left: 5px;	margin-right: 5px;	z-index:2;}.col_1 {width:auto; z-index:2;}.col_2 {width:auto;}.col_3 {width:auto;}.col_4 {width:auto;}.col_5 {width:auto;}#menu p, #menu h2, #menu h3, #menu ul li {	font-family:Arial, Helvetica, sans-serif;	line-height:21px;	font-size:12px;	text-align:left;	text-shadow: 1px 1px 1px #FFFFFF;}#menu h2 {	font-size:14px;	font-weight:400;	letter-spacing:-1px;	margin:7px 0 14px 0;	padding-bottom:14px;	border-bottom:1px solid #666666;}#menu h3 {	font-size:14px;	margin:7px 0 14px 0;	padding-bottom:7px;	border-bottom:1px solid #888888;}#menu p {	line-height:18px;	margin:0 0 10px 0;}#menu li:hover div a {	font-size:13px;	color:#FFFFFF;}#menu li:hover div a:hover {	color:#E4FF4A;}#menu li ul {	list-style:none;	padding:0;	margin:0 0 12px 0;}#menu li ul li {	float:none;	font-size:12px;	line-height:auto;	position:relative;	text-shadow: 1px 1px 1px #ffffff;	text-align:left;	width:130px;	padding:0;	margin:0;}#menu li ul li:hover {	background:none;	border:none;	padding:0;	margin:0;}

    i think the whole problem can be solved in the menu, menu li and menu li:hover , about 2 hours i trying to change the padding or whatever is that to make wrap i failed.

    Please help me to achieve my objective, any help and any advice will be appreciated :(

    ScrollDown Failed 2

    in CSS

    Posted

    it works :good:

     

    seems, the width i using before this changed the top nav until the bottom of nav selector,

    i'll fix this carelessness on the future coding,

    Problem Solved! Thanks a million sir :Pleased:

    ScrollDown Failed 2

    in CSS

    Posted

     

    width: 200px becoming like this,

    i using width: 1000px to larging the menu horizontally,

     

    my goal simply i want to larging the menu horizontally,

    but the submenus dont larging like the nav menu did,

    this is my goal,

     

    please help me fix the problem. i didnt know how to larging the menu horizontally rather than width in this case, and unfortunately width cause problem to the submenus.

    ScrollDown Failed 2

    in CSS

    Posted

    i have a normal scroll down in my html like this

     

     

     

    but when i adding something to larging the menu it becomes like this

     

     

     

    is that supposed to be happen ?

    when i entering witdh into the css for navbar like that

     

    here's my css code

    <style type="text/css">nav ul, nav li { padding: 0;margin: 0;text-indent: 0;list-style-type:none;}nav ul {background: #009933;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#009933,endColorstr=#bbbbbb);background: linear-gradient(top, #009933 0%, #bbbbbb 100%);background-image: -ms-linear-gradient(top, #009933 0%, #bbbbbb 100%);background: -moz-linear-gradient(top, #009933 0%, #bbbbbb 100%);background-image: -o-linear-gradient(top, #009933 0%, #bbbbbb 100%);background: -webkit-linear-gradient(top, #009933 0%, #bbbbbb 100%);box-shadow: 0px 0px 9px r gba(0,0,0,0,15);width: 1000px; /* This was causing the problem but i want to larging the range of menu */padding: 0;border-radius: 25px;list-style: none;display: inline-block;}nav ul:after {content: "";clear: both; display: block;}nav ul li {float: left;position: relative;   }nav ul li: hover {background: #66FF66;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#47B247, endColorstr=#59BA59);background: linear-gradient(top, #47B247 0%, #59BA59 40%);background-image: -ms-linear-gradient(top, #47B247 0%, #59BA59 40%);background: -moz-linear-gradient(top, #47B247 0%, #59BA59 40%);backgorund-image: -o-linear-gradient(top, #47B247 0%, #59BA59 40%);background: -webkit-linear-gradient(top, #47B247 0%, #59BA59 40%);}nav ul li: hover a {color: #fff;}nav ul li a {display: block; padding: 25px 40px;color: #993300; text-decoration: none;}nav ul li:hover > ul{display: block;}nav ul ul {display: none;position: absolute;left: 0;top: 68px;background: #59BA59;border-radius: 0px;padding: 0;z-index: 9999;}nav ul ul li {float: none;border-top: 1px solid #A30000;border-bottom: 1px solid #3333FF;}nav ul ul li a {padding: 15px 40px;color: #fff;}nav ul ul li a:hover {background: #3333FF;}</style><!--[if IE]><style type="text/css">nav ul ul            {            top:66px;            }nav ul li:hover > ul            {            display: none;            }</style><![endif]--><!--[if gte IE 8]><style type="text/css">            nav ul li:hover            {                    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#47B247, endColorstr=#59BA59);                    }</style><![endif]-->

    nah, what should i add or remove for larging the menu ?

    need help with indentation

    in CSS

    Posted · Edited by loserone+_+

    201306131440.jpg im having trouble with indentation, as you can see in the picture,i already tried with margin, padding,  , but still had a left indentationhere css code that had relation with the problem 
    .container{width: 960px;background: #CCC;margin: 0 auto;overflow: hidden;}  .sidebar1{float: left;width: 180px;background: #CCC;padding-bottom: 0;font-family: Verdana, Arial, Helvetica, sans-serif;}/*This is the "Archive: " word in stylin */  /*all below is belong to Home, About, and Sign-In anchor thats no relation on this problem */ ul.nav{list-style: none;margin-bottom: 15px;} ul.nav li{/* i didnt inserting this, nothing changed though*/} ul.nav a, ul.nav a:visited{padding: 7px 5px 7px 15px;display: block;width: 160px;text-decoration: none;background: rgb(41, 41, 41);;}

    Dropdown Menu Failed

    in CSS

    Posted

    ohh, /* [Text Here] */ for css comment, let me guessin again, so the first time,

    <!--[if IE]> <script type="text/javascript">     document.createElement("article");     document.createElement("header");     document.createElement("section");     document.createElement("nav"); </script> <![endif]-->

    IE must had Element Create add by javascript 

    <!--[if IE]> <style type="text/css"> nav ul ul {             top:66px;               } </style> <![endif]-->  <!--[if gte IE 8]> <style type="text/css"> nav ul li:hover { filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#47B247, endColorstr=#59BA59);                   	 } </style> <![endif]-->

    and IE must had CSS add using <!--[if IE]> ended with <![endif]--> and that will fix the all IE crappy for this dropdown menuam i right? whats the ,filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#47B247, endColorstr=#59BA59); what will changin for the IE browser?

    Dropdown Menu Failed

    in CSS

    Posted · Edited by loserone+_+ 

    nav ul ul {  	  display: none;  	  position: relative; <!--Changed by loserone+_+ -->  	  left: 0;  	  top: 68px;  	  background: #59BA59;  	  border-radius: 0px;  	  padding: 0;  	  z-index: 9999; <!--This z-index only available on the browsers except IE-->		  }

    lol i guess. this what ur meaning right ?

    so i can only come to the conclusion its something to do with the content element containers below it, and that is the problem, not the menu
    nahh, this is what i didnt know about,my english was bad, so can u give me an example,its okay for another example didnt related though,all i want to learn not from copy paste and claim thats mine work :dirol:

    Dropdown Menu Failed

    in CSS

    Posted

    yeahh i add in the code in nav ul ul { sub menu code,u mean like this?

    nav ul ul {      display: none;      position: absolute;      left: 0;      top: 68px;      background: #59BA59;      border-radius: 0px;      padding: 0;      z-index: 9999;          }

    i already changin the position: relative;and adding the z-index too,but changin the position: relative;it turn bad, lol "if that does not work on its own, try it by adding a lower z-index than given to submenu UL." let me guess u mean, i must giving the z-index to all the nav ul, nav li css right?

    Dropdown Menu Failed

    in CSS

    Posted

    yeahh it solved the problem :)for Firefox, Safari and Chrome IE still sucks by the way :(and i trying the z-index on the css code here,

     <!--[if IE]><style type="text/css">nav ul ul {    top: 68px;     z-index: 9999;               }</style><![endif]-->]]></b:skin>

    i though its the same " nav ul ul { " line under the sub or parent " nav ul, nav li "but it seems my wrong,IE sucks, yeahh. but IE still browsers that people used to in mine country

    Dropdown Menu Failed

    in CSS

    Posted

    sorry if i didnt get the better explain,i already figured it out how to attach files :)so see my thumbnail below anyway thanks for reply :)and sorry for my bad :( the condition are bad, and i cant figured it outthe same thing happened on 3 most famous browser, firefox,chrome and safari.

    Dropdown Menu Failed

    in CSS

    Posted

    yeahhh its fixed :)thanks with all of your helpbut the problem not solved at all,i know i am rude but why the dropdown menu didnt highlight?i mean its drop on the back not the top,sorry i cant insert any image, i cant figure it out how to inserting image in quickpost reply, and sorry for asking more help because i cant figure it out whats wrong with it really :(

    • Like 1

    Dropdown Menu Failed

    in CSS

    Posted

    whats wrong with my css code for

    <nav><ul><li><a href="#">HOME</a></li><li><a href="#">ACCESORY</a></li>	  <ul>	  <li><a href="#">Dropdown Menu1</a></li>	  <li><a href="#">Dropdown Menu2</a></li>	  <li><a href="#">Dropdown Menu3</a></li>	  </ul><li><a href="#">ABOUT ME</a></li></ul></nav>

    and my css code here 

    nav ul ul {		  display: none;		  }nav ul li:hover>ul {					 display: block;					 }nav ul {	   background: #009933;	   background: linear-gradient(top, #009933 0%, #bbbbbb 100%);	   background: -moz-linear-gradient(top, #009933 0%, #bbbbbb 100%);	   background: -webkit-linear-gradient(top, #009933 0%, #bbbbbb 200%);	   box-shadow: 0px 0px 9px r gba(0,0,0,0,15);	   padding: 0 20px;	   border-radius: 25px;	   list-style: none;	   position: relative;	   display: inline-table;	   }nav ul:after {	   content: ""; clear: both; display: block;			 }nav ul li {	   float: left;		  }nav ul li: hover {	   background: #66FF66;	   background: linear-gradient(top, #47B247 0%, #59BA59 40%);	   background: -moz-linear-gradient(top, #47B247 0%, #59BA59 40%);	   background: -webkit-linear-gradient(top, #47B247 0%, #59BA59 40%);			    }nav ul li: hover a {	   color: #fff;				   }nav ul li a {	  display: block;	  padding: 25px 40px;	  color: #993300;	  text-decoration: none;		    }   nav ul ul {	  background: #59BA59; border-radius: 0px; padding: 0;	  position: absolute; top: 100;		  }nav ul ul li {	  float: none;	  border-top: 1px solid #A30000;	  border-bottom: 1px solid #3333FF;	  position: relative;			 }nav ul ul li a {	  padding: 15px 40px;	  color: #fff;			   }nav ul ul li a:hover {	  background: #3333FF;					 }nav ul ul ul {	  position: absolute; left: 100%; top:0;			 }

    by the way this is not my code,i get it from here,http://www.handy-html.com/create-a-simple-css-dropdown-menu/and the funny thing this code only works in Internet Explorer 9 and 8but bugs on the Internet Explorer 9 and 8here is the thing what i mean to on the attached files,Whats wrong then? Any ideas?

×
×
  • Create New...