leev18
-
Posts
12 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by leev18
-
-
Hope you don't mind a complete reform. Demo: http://jsfiddle.net/BnBFh/
HTML:
<div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html">About</a></li> <li><a href="products.html">Products</a> <ul> <li><a href="fireplace.html">Fireplaces & Accessories</a></li> <li><a href="fireplacedoors.html">Fireplaces Doors</a></li> <li><a href="inserts.html">Fireplaces Inserts</a></li> <li><a href="stoves.html">Stoves</a></li> <li><a href="outdoorkitchens.html">Outdoor Kitchens</a></li> <li><a href="gasgrills.html">Gas Grills</a></li> </ul> </li> <li><a href="services.html">Services</a> <ul> <li><a href="chimney_services.html">Chimney Services</a></li> <li><a href="gas_services.html">Gas Services</a></li> <li><a href="custom_design.html">Custom Design</a></li> </ul> </li> </ul></div><br class="clear" />
CSS:
.clear { margin: 0; padding: 0; clear: both; }#nav ul { margin: 0; padding: 0; list-style: none;}#nav li { float: left; margin-right: 10px; position: relative; background-color: #663333; font-size: 150%; font-family: Georgia, "Times New Roman", Times, serif;}#nav li li { width: 175px; font-size: 75%;}#nav li:nth-child(3) li { /* targets "Product" using "nth-child(3)", which is the third li of #nav */ width: 225px;}#nav a { padding: 5px 15px; display: block; color: #bca380; text-decoration: none;}#nav li:hover > a { color: #dccfbd;}#nav ul ul { position: absolute; visibility: hidden; border-top: solid 1px transparent;}#nav li:hover > ul { visibility: visible;} -
What is the optimum way to kill that red box?
You want to remove it?
If so, then remove "border: 1px solid red;" and "border: 1px solid green;"
-
Interesting. I have never used html as a selector. What is that?
html, body
Almost every websites have it. Right click and view source on any website. It's kind of like an entire body for all other tags.
<!DOCTYPE html><html><head></head><body>Content</body></html>
Even if you don't have it in your HTML file, most web browser will pretend that it's there anyway. Try adding this to css to see:
html { display: none;} -
You're asking how to create a css dropdown menu?
DEMO: http://jsfiddle.net/LuQRr/embedded/result/
HTML:
<div id="nav"><ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2 <span class="right-arrow">►</span></a> <ul> <li><a href="#">SubSub-Menu 1</a></li> <li><a href="#">SubSub-Menu 2 <span class="right-arrow">►</span></a> <ul> <li><a href="#">SubSub-Menu 1</a></li> <li><a href="#">SubSub-Menu 2</a></li> </ul> </li> </ul> </li> </ul> </li></ul> <br class="clearboth"/> </div>
CSS:
.clearboth { margin: 0; padding: 0; clear: both;} #nav { font-family: verdana; font-weight: bold; font-size: 9pt;} #nav ul { margin: 0; padding: 0; list-style: none;} #nav a:link,#nav a:visited { color: #ffffff; text-decoration: none;} #nav a { display: block; padding: 6px 8px;} #nav li { float: left; background-color: #000000; margin-right: 1px; position: relative;} #nav li li{ width: 160px; margin-top: 1px;} #nav li:hover { background-color: #555555;}#nav li li:hover { background-color: #757575;} #nav ul ul { position: absolute; visibility: hidden;} #nav ul ul ul{ position: absolute; left: 100%; top: -2px; border: solid 1px transparent;} #nav li:hover > ul { visibility: visible;} .right-arrow { float: right;} -
Create a new file call "custom-header.php" (or whateveryouwant.php) and put it in where your current WordPress theme folder is. In your current WordPress theme's header file, add this code somewhere in it:<?php include (TEMPLATEPATH . '/custom-header.php'); ?> Add whatever you want to the "custom-header.php" file. See if it helps. I created my own WordPress theme: http://leev18.com/20...drop-down-menu/I'm still newbish at php also.
-
1
-
-
I don't see it unnecessary. Here's another known way you can do it differently: Demo/Codes: http://jsfiddle.net/yUjC7/ | fullscreen: http://jsfiddle.net/yUjC7/embedded/result/In order to center text under an uncentered image is it necessary to float the image? I see that works but is it necessary? Thanks.<!DOCTYPE html><html><head> <style type="text/css">.clearboth { clear: both;} .images { display: table; float: left; margin-right: 5px; padding: 5px; border: solid 1px #cccccc;} .images img { height: 200px;} .image-title { font-family: arial; font-size: 8pt; font-weight: bold; text-align: center;}</style> </head><body> <div class="images"> <img src="http://i379.photobucket.com/albums/oo232/Sa-Yu/childs/Young_Ayu_Tsukimiya_Kanon_game-2.jpg" /> <div class="image-title">Ayu Tsukimiya</div></div> <div class="images"> <img src="http://i40.photobucket.com/albums/e219/doggiequeen910/Anime/clannad/renderfornunu.png" /> <div class="image-title">Nagisa Furukawa</div></div> <div class="images"> <img src="http://i276.photobucket.com/albums/kk39/hnanimegrl88/blonde%20girls/1130450283_cturesGirl.jpg" /> <div class="image-title">Random Anime Girl</div></div> <div class="clearboth"></div> Content Area </body></html> -
here's some example files, see if it helps: index.html or index.php (which is the home page, or page #1):
<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css"/></head> <body class="page-1"> <!-- assign class to "body" for the page --> <div id="nav"> <ul> <li class="nav-menu-1"><a href="index.html">Home</a></li> <!-- assign class to each "li" nav menu --> <li class="nav-menu-2"><a href="about.html">About</a></li> </ul></div> </body></html>
about.html or about.php (page #2):
<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css"/></head> <body class="page-2"> <!-- assign class to "body" for the page --> <div id="nav"> <ul> <li class="nav-menu-1"><a href="index.html">Home</a></li> <!-- assign class to each "li" nav menu --> <li class="nav-menu-2"><a href="about.html">About</a></li> </ul></div> </body></html>
style.css:
#nav ul { margin: 0; padding: 0; list-style: none;} #nav a { display: block; padding: 5px; text-decoration: none; color: #000000;} #nav li { float: left;} #nav li:hover { background-color: pink;} .page-1 .nav-menu-1,.page-2 .nav-menu-2 { background-color: red;} -
What i usually do is give a class to a body for each of the page and a class to all of the nav menu. for example: in the home page, you set it's body tag in the index.php, or index.html to <body class="page-home">in the about page, you set it's body tag in the about.php, or about.html to <body class="page-about"> Then, the nav menus are each given a class: class="nav-home", and class="nav-about" Finally, the CSS:
.page-home .nav-home,.page-about .nav-about { background-color: red;}You can name the class to whatever you like.
-
Try CSS dropdown menu navigation tutorials?
I actually learned how to create a css drop down menu navigation from to the video -
I think you're suppose to put them in between script tags, like:
<div><script type="text/javascript">Your Javascripts go here</script></div>
-
Hi, in the internet world, you may know me as leev18 (google leev18). I'm still a community college student majoring in computer science and hoping to get out of there by 2014-2015 with an associate's degree. One of my goal is to learn computer programmings and I'm still pretty new to it. I'm also still pretty new to HTML & to other web coding. I hope to learn much more about web coding during my stay here at this forum. I will do my best share my knowledge and help out others here also. Right now I have two running website, leev18.com and hmongweb.com.
Adding a "Previous" and "Next" link
in HTML/XHTML
Posted
try using float instead: http://jsfiddle.net/jkEVS/