Jump to content

Search the Community

Showing results for tags 'css html'.


More search options

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (Dreamweaver, Zend, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

AIM

MSN

Website URL

ICQ

Yahoo

Jabber

Skype

Location

Interests

Age

Donation Link

Found 1 result

  1. anatak

    CSS navigation menu

    anatak posted a topic in CSS Help

    I have a CSS navigation menu that has some problems. you can take a look here http://www.test.anatak.com/ In the mobile version, no content is shown when the menu is not open. in the desktop version, the content starts right of the menu. You can see an example here http://www.test.anatak.com/en/surfboardRipper3.php a few things I noticed. in the navigation menu the <ul class="nav" id="menu"> has no closing </ul> tag. When I use the closing </ul> tag the first few lines of the content gets under the navigation menu in the desktop version. The mobile version works without problems then. the second thing I tried was putting a div around the navigation menu but that did not solve the problem in the desktop version. Could anyone help me so that the content in the desktop version shows correctly under the menu without having the few first lines hidden by the menu ? The CSS is this /*horizontal navigation style*/ /*Strip the ul of padding and list styling*/ ul.nav { list-style-type:none; margin:0; padding:0; position: absolute; } /*Create a horizontal list with spacing*/ li.nav { display:inline-block; float: left; margin-right: 1px; } /*Style for menu links*/ li.nav a.nav { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } /*Hover state for top level links*/ li.nav:hover a.nav { background: #19c589; } /*Style for dropdown links*/ li.nav:hover ul.nav a.nav { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ li.nav:hover ul.nav a.nav:hover { background: #19c589; color: #fff; } /*Hide dropdown links until they are needed*/ li.nav ul.nav { display: none; } /*Make dropdown links vertical*/ li.nav ul.nav li.nav { display: block; float: none; } /*Prevent text wrapping*/ li.nav ul.nav li.nav a.nav { width: auto; min-width: 100px; padding: 0 20px; } /*Display the dropdown on hover*/ ul.nav li.nav a.nav:hover + .hidden, .hidden:hover { display: block; } /*Style 'show menu' label button and hide it by default*/ .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 10px 0; display: none; } /*Hide checkbox*/ input[type=checkbox]{ display: none; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ #menu{ display: block; } /*Responsive Styles*/ @media screen and (max-width : 760px){ /*Make dropdown links appear inline*/ ul.nav { position: static; display: none; } /*Create vertical spacing*/ li.nav { margin-bottom: 1px; } /*Make all menu links full width*/ ul.nav li.nav, li.nav a.nav { width: 100%; } /*Display 'show menu' link*/ .show-menu { display:block; } } and the HTML is here (without </ul> and <div></div> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>kite japan</title> <link rel="stylesheet" type="text/css" href="../horizontalNavigationStyle.css"> </head> <body> <div name="language"><a class="nav" href="../en/home.php"> <img src="../image/language/english50x26.png" alt="English" width="50" height="26"> </a><br><a class="nav" href="../ja/home.php"> <img src="../image/language/japanese50x26.png" alt="日本語" width="50" height="26"> </a><br></div> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul class="nav" id="menu"> <li class="nav"><a class="nav" href="home.php">HOME</a></li> <li class="nav"><a class="nav" href="kite.php">KITES⬇</a> <ul class="hidden"> <li class="nav"><a class="nav" href="kiteXr5.php">XR5</a></li> <li class="nav"><a class="nav" href="kiteGts4.php">GTS4</a></li> <li class="nav"><a class="nav" href="kiteFree.php">FREE</a></li> <li class="nav"><a class="nav" href="kiteSection2.php">SECTION2</a></li> <li class="nav"><a class="nav" href="kiteImpact2.php">IMPACT2</a></li> <li class="nav"><a class="nav" href="kiteLW.php">LIGHT WIND (LW)</a></li> <li class="nav"><a class="nav" href="kiteXr5lw.php">XR5 LW</a></li> <li class="nav"><a class="nav" href="kiteGts4lw.php">GTS4 LW</a></li> <li class="nav"><a class="nav" href="kiteFreelw.php">FREE LW</a></li> <li class="nav"><a class="nav" href="kiteSection2lw.php">SECTION2 LW</a></li> </ul> </li> <li class="nav"><a class="nav" href="twintip.php">TWINTIPS⬇</a> <ul class="hidden"> <li class="nav"><a class="nav" href="twintipFusion3.php">FUSION3</a></li> <li class="nav"><a class="nav" href="twintipFusion3lw.php">FUSION3 LW</a></li> <li class="nav"><a class="nav" href="twintipChoice2.php">CHOICE2</a></li> <li class="nav"><a class="nav" href="twintipBolt2.php">BOLT2</a></li> </ul> </li> <li class="nav"><a class="nav" href="surfboard.php">SURFBOARDS⬇</a> <ul class="hidden"> <li class="nav"><a class="nav" href="surfboardRipper3.php">RIPPER</a></li> <li class="nav"><a class="nav" href="surfboard720.php">720</a></li> <li class="nav"><a class="nav" href="surfboardGreenRoom.php">GREEN ROOM</a></li> </ul> </li> <li class="nav"><a class="nav" href="bar.php">bar⬇</a> <ul class="hidden"> <li class="nav"><a class="nav" href="barSensor2.php">sensor2</a></li> <li class="nav"><a class="nav" href="barSensor2s.php">sensor2S</a></li> <li class="nav"><a class="nav" href="barSensor2sPro.php">sensor2S pro</a></li> </ul> </li> <li class="nav"><a class="nav" href="accessory.php">accessory⬇</a> <ul class="hidden"> <li class="nav"><a class="nav" href="pump.php">pump</a></li> <li class="nav"><a class="nav" href="fin.php">fin</a></li> <li class="nav"><a class="nav" href="strapPad.php">strap & pad</a></li> <li class="nav"><a class="nav" href="unhooked.php">unhooked</a></li> <li class="nav"><a class="nav" href="trainer.php">trainer</a></li> </ul> </li> <div class="siteWrap"> <figure> <img src="../image/surfboard/RIPPER/CORE_Ripper_3_Top_and_Bottom_Cutout_72dpi_102x200.png" alt="RIPPER 3 Wave Warrior<br><b>ALROUND WAVE</b>" width="102" height="200"> <figcaption>RIPPER 3 Wave Warrior<br><b>ALROUND WAVE</b></figcaption><!--40 Ripper 3 Intro--> </figure> <h2>Ripper 3</h2> <h3>Wave Warrior</h3> <p>The new Ripper 3 is our super smooth riding custom glass surfboard. The revised tail shape, tucked under rails, and slightly reduced width may induce endless woohoos in just about any waves. Like the ones a Nor'easterly brings to the East Coast. Or a good low brings to the Great Lakes. We built the ultra comfortable, Ripper 3 allrounder to feel right at home on big, messy, wind driven lake swell and the super smooth reefs of Mauritius and Maui. A handcrafted, glass shortboard for all your road trips, wherever they may take you. The Ripper 3. Your next allround surfboard-slash-kite surfboard-slash-lightwind weapon.</p> <p>Sizes: 5'8" 172 cm | 5'10" 178 cm | 6'1" 185 cm</p> <p>Features:<br> ▪ DESIGNED IN GERMANY. HANDCRAFTED IN PORTUGAL.<br> ▪ ACTIVE FOAM CORE – Superior flex memory.<br> ▪ CLASSIC GLASS COAT – Pros prefer it. So should you.<br> ▪ SHORTBOARD OUTLINE – Optimized for allround wave performance.<br> ▪ NEW: ROUND TAIL – Improved traction and lift for classic, smooth carving turns.<br> ▪ NEW: TUCKED UNDER RAILS – Extreme grip and control in turns.<br> ▪ STRAP-READY – Your choice. Go strapless or add straps.<br> ▪ DOUBLE STRINGER – Manages torsion and supports the strap inserts.<br> ▪ BLUNT NOSE – Safer. And heck, it looks cooler.<br> ▪ THRUSTER FIN SETUP – Optimizes the balance between control and a loose, skatey feel.<br> ▪ ORIGINAL FCS II SYSTEM – The world standard in fin systems.</p> <p> <table> <tr><td>Length</td><td>Width</td><td>Thickness</td><td>Volume L</td><td>Rider's weight</td></tr> <tr><td>5'8"</td><td>17 7⁄8"</td><td>2 1/16"</td><td>23,0 L</td><td>50 - 75 kg</td></tr> <tr><td>172 cm</td><td>45,5 cm</td><td>5,2 cm</td><td>23,0 L</td><td> </td></tr> <tr><td>5'10"</td><td>18 1⁄8"</td><td>2 1⁄4"</td><td>25,0 L</td><td>65 - 90 kg</td></tr> <tr><td>178 cm</td><td>46 cm</td><td>5,7 cm</td><td>25,0 L</td><td> </td></tr> <tr><td>6'1" </td><td>18 1⁄2"</td><td>2 3⁄8"</td><td>27,0 L</td><td>80 + kg</td></tr> <tr><td>185 cm</td><td>47 cm</td><td>6 cm</td><td>27,0 L</td><td> </td></tr> </table> </p> <p> Delivery: The Ripper 3 comes standard with a CORE Rear Traction Pad, Leash Plug, and FCS II fin boxes. </p> <p> Accessories:<br> ▪ CORE Center Traction Pad<br> ▪ CORE Front Traction Pad<br> ▪ CORE Surf Straps<br> ▪ "FCS II Carver GF Tri Set" Fins<br> ▪ "FCS II Accelerator Neo Glass Tri Set" Fins<br> ▪ "FCS II Accelerator PC Carbon Tri Set" Fins</p><!--41 Ripper 3 description--> <p>Please visit <a href="https://corekites.com/us/">https://corekites.com/us/</a> for more information.</p><!--17 Contact Us--> <img src="../image/logo/CORE_black_on_yellow_CMYK_800x244.png" alt="Core logo black on yellow" width="800" height="244"> </div><div style="text-align:center;"><span style="color: #000000;">Copyright © kite japan <?php echo date("Y"); ?>, All Rights Reserved</span></div> </body> </html>
×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept