Search the Community
Showing results for tags 'div'.
Found 4 results
-
I think this is seriously simple. I know html but not css so well. I want to resize this background photo in a template I purchased. The site is at ... I want the photo smaller so the text can be seen under on the first page. Thanks
-
Just read the HTML5 Flowcghart on html5doctor.com and thought it might come in handy. Not sure what element to use when creating your web pages? Should you be using a div, an article, a section or an aside? View the chart here: http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf Hope it is useful.
-
Hi all I am trying to build a website but I am struggling to understand and compute a few things. In the 90's when I first learned HTML we used tables to achieve the look and feel of the website. In comes a new millenium and in comes a much needed new design method .... CSS. I am not sure if this is correct, but I am using <div> where I would have in past used <table> and <tr> (table row) and I am using <span> where I would have used <td> (table data). If this is wrong then I would like to know. Onto my problem: I want to create a drop-down menu on hover. (I need to learn "Pseudo classes" but that will come in a related but new topic). I kinda have the drop-down menu on hover but it needs some tweeking and for that i am struggleing. The problem is that the background-color for the <div> is being overwritten somewhere but I can not see it, the menu is not center in the <div> and the drop-down looks wrong. Here is the css file: /**************** Global ****************/ * { font-family: Tahoma, sans-serif; /* corporate font */ font-size: 12px; /* corporate font size */ text-decoration: none; /* hyperlinks no underline by default */ } div { background-color: #ee2326; /* Corporate red color */ width: 1000px; /* Page width */ margin: 0 auto; /* Center div */ } .shadow { 1px 1px 1px #606163; } /* default shadow */ /**************** Pseudo classes ****************/ a { text-decoration: none;} /* removes underline for hyperlinks */ ul { border: 0px hidden; list-style: none; padding: 0px; margin: 0px; width: 100%; margin-left: auto; margin-right: auto; font-family: Tahoma, sans-serif; font-size: 14px; font-weight: bold; text-shadow:1px 1px 1px #606163; } ul li { display: block; position: relative; float: left; text-align: left!important; text-shadow:1px 1px 1px #606163; } li ul {display: none;} /* Hides drop down menu */ ul li a { display: block; background: #ee2326; padding: 5px 10px 5px 10px; text-decoration: none; white-space: nowrap; color: white; border: 10px 100px; /* Sets size of box */ } ul li a:hover {background: #8523ee;} /* Sets the color of the hover on the parent */ li:hover ul { display: block; /* displays the drop down menu */ position: absolute; } li:hover li {float: none;} li:hover a {background: #ee2326;} /* sets the background-color of the drop down menu */ li:hover li a:hover {background: #8523ee;} /* Sets the color of the hover on the child */ /************************* ID's *************************/ <!------------------NavBar ---------------------> #NavBar { width: 100%; /* Sets the NavBar div to be equal the default div */ /* height: 12px; not needed */ margin: 0 auto; /* trying to center NavBar-Drop but doesn't work */ } #NavBar-Drop li ul li { border-top: 0px; margin: 40px auto; /* Center NavBar - Not working */ } and here is the html code: <div id="NavBar"> <span><ul id="NavBar-Drop"> <li><a href="#">Home</a></li> <li><a href="#">Swimwear</a></li> <li><a href="#">Tops</a></li> <li><a href="#">Bottoms</a></li> <li><a href="#">Dresses</a></li> <li><a href="#">jackets</a></li> <li><a href="#">lingerie</a> <ul> <li><a href="#">Bras</a></li> <li><a href="#">Briefs & Thongs</a></li> <li><a href="#">hosiery</a></li> <li><a href="#">Nightwear</a></li> <li><a href="#">Slips & Teddies</a></li> </ul> </li> <li><a href="#">footware</a></li> <li><a href="#">sale</a></li> <li><a href="#">Additional Link</a> <ul> <li><a href="#">Child Link1</a></li> <li><a href="#">Child Link2</a></li> <li><a href="#">Child Link3</a></li> </ul> </li> </ul> </span> </div> Questions: 1) how do I center the menu in the div? 2) what is filling the <div> with the color white instead of the corporate red? 3) how do I change the size of the child menu so that all the text fits? (The child is the part which drops down when you hover).
