Jump to content

loserone+_+

Members
  • Posts

    21
  • Joined

  • Last visited

Everything posted by loserone+_+

  1. wow you're so cool, thank you ! but u didnt explain the matter, i want to learn, not just copy paste copy paste
  2. hm, doesnt anyone wants to discuss this ?
  3. 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.
  4. 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
  5. it works 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
  6. 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.
  7. 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 ?
  8. 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);;}
  9. i dont had a good mind right now cause losing something :(

  10. That makes me remember of the blinking advertisement :Dso thats the true reason all browser except firefox didnt enable blinking text?
  11. maybe u already figured out what i want to ask, text-decoration :blink; why this code on css didnt work on IE under IE9?and only work on mozzila firefox, (thats what i read on w3schools education site)anyone knows?
  12. learning from basic to advanced :)

  13. okay i understand,all the problem fixed and this thread closedthanks for all of your help dsonesuk
  14. 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?
  15. 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 ? 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
  16. must learn a year to good at web proggraming.

  17. must learn a year to good at web proggraming.

  18. 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?
  19. 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
  20. 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.
  21. 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
  22. yeahh i can see that,but for csswhy u adding margin-top: -32px; whats that code for to?
  23. 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...