I'm doing a website project, where I'm using Materialize framework.
Problem :
I have to make a navbar, where it should be able to let out a dropdown menu/submenu. I think the main problem could be either on the overflow: or the z-index. Because of that, I've tried to test the overflow between auto, visible, etc. There are 2 observations that I got during my testing:
Navbar dropdown menu came out perfectly, but got hidden behind the main content
Navbar dropdown came out perfectly on top of the main content, but resulting a large white space between the navbar and the main content.
Can anyone points out what did I miss? or what is wrong in my code, any help would be appreciated, thank you.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="HandheldFriendly" content="true">
<title></title>
<!--CSS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<!-- Header -->
<nav id="navbar" class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.html" class="brand-logo">
<img src="images/logo_new.png" class="logosize" alt="logo">
</a>
<ul class="right hide-on-med-and-down">
<li>
<a class='dropdown-button' href='#' data-activates='architect'>Architect</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='interior'>Interior</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='commercial'>Commercial</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='test'>Office</a>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a class="dropdown-button" href="#" data-activates="architect-mobile">Architect</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="interior-mobile">Interior</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="commercial-mobile">Commercial</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="test-mobile">Office</a>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
<!-- Info Page -->
<div class="container">
<div class="row">
<div class="col s12">
<!-- note: there is center before -->
<!-- <h3><i class="mdi-content-send brown-text"></i></h3> -->
<!-- Menu 1 -->
<div class="col s12 m5">
<p align="left">
<h3>
<b>Intimate House</b>
</h3>
<br> Project : Intimate House
<br>
<br> Location : Pulau Putri, Puri - West Jakarta - Indonesia
<br>
<br> Site Area : 160 sqm
<br>
<br> Building Area : 210 sqm
<br>
<br> Design Phase : 2016
<br>
<br> Construction Period : April 2016 - July 2017
<br>
<br>
</p>
<div class="textbox">
<p align="left">
<i>
Intimate House was built on a 8m x 20m land in West Jakarta. At first, it was a one story house with 2 bedrooms and 2 bathrooms.
It had a high ceiling, but lack of open space inside the house which make this house look
extremely dark, moist, and stuffy.</i>
<br>
<br>
</p>
<p align="right">
<i>
We transformed this house program by separating service area and private area. Furthermore private area is connected by a
connecting chamber in order to transform service area into private area which can be used
as a gathering room which is the main area in this Intimate House.</i>
<br>
<br>
</p>
<p align="left">
<i>
Living Room was designed to have natural air circulation and natural lighting. Both these natural element is obtained from
an open space next to Living Room, High Ceiling, and Skylight.</i>
<br>
<br>
</p>
</div>
</div>
<!-- Menu 2 -->
<div class="col s12 m7">
<div class="slider">
<ul class="slides">
<li>
<img src="images/architecture/intimate_house/1.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/3.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/4.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/5.jpg">
<!-- random image -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- Dropdown Menu -->
<div class="container_sub">
<div class="section">
<div class="row">
<!-- Architect -->
<ul id='architect' class='dropdown-content'>
<li>
Project one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='architect-mobile' class='dropdown-content'>
<li>
Project one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<!-- Interior -->
<ul id='interior' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='interior-mobile' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<!-- Commercial -->
<ul id='commercial' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='commercial-mobile' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<!-- Office -->
<ul id='test' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='test-mobile' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
</div>
</div>
</div>
<footer class="page-footer teal">
<div class="footer-copyright">
<div class="container">
Copyright #
<a class="white-text" href="#">2018</a>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel.carousel-slider').carousel({
fullWidth: true
});
$('.slider').slider();
$(".dropdown-button").dropdown({
hover: true
});
});
</script>
Here is my full code: https://codepen.io/bukuchaga/pen/Zjqvxe
Thanks again.
You are doing it wrong, you should know how the position properties work. You are using position relative. so when you use position relative it means relative to itself not from something else. Next time keep in mind how these tricky things works so that it won't waste your time in resolving the error caused by them.
I have seen your code, the css wrapper class nav .nav-wrapper has a wrong relative position.
You don't need to use relative position here because, It is unnecessary. So, remove it and your code will work like a charm.
If you have any other error in design, post another question and if i or someone else has answered your question marked my or someone answer as accepted so that this thread can be closed. Thanks.
It kind of worked when I removed position: relative property from the style class nav .nav-wrapper. You can either remove it or override it with position: inherit.
Related
I'm trying to add an alert for unread messages in my Bootstrap navbar. I was able to figure out how to format this alert nicely. However, I have not been able to figure out how to format it correctly within an <a> tag.
<ul class="nav navbar-nav">
<li>Profile</li>
<li>Message Trainer</li>
<li>
<a href="#">
<span class="navbar-text label label-danger" style="color: white">
1
</span>
</a>
</li>
</ul>
This layout looks like this.
I also tried moving the CSS classes currently in my <span> element to the <a> element (and remove the span), but that was much worse.
Is there an existing way for Bootstrap to support this, or do I need to just custom style this all?
Just remove the CSS class: .navbar-text;
Result:
<span class="label label-danger" style="color: white">
1
</span>
View on JsBin : https://jsbin.com/bugakey/edit?output
alert("View the example on a large screen so that the <nav> elements are displayed inline")
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav">
<li>Profile</li>
<li>Message Trainer</li>
<li>
<a href="#">
<span class="label label-danger " style="color: white">
1
</span>
</a>
</li>
</ul>
I'm having difficulty having my off-canvas menu in Foundation 5 toggle on and off, or at least not always appear on canvas. Below is a picture of the current site.
As shown, the offcanvas is very much on canvas
This is the HTML I am running so far. The content is not included as it is on a separate YAML file, but it should be unnecessary.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }} | Paly SJP</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/syntax.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/foundation/css/foundation.css">
<link rel="stylesheet" href="/assets/foundation/css/normalize.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
</head>
<body>
<div class="site">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="header">
<!-- Top Bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Paly SJP</h1>
</li>
</ul>
<!-- All tabs on right side -->
<section class="top-bar-section">
<ul class="right">
<li class="name">
ABOUT US
</li>
<li class="name">
CALENDAR
</li>
<li class="has-dropdown not-click">COHORTS
<ul class="dropdown">
<li>COHORT 1</li>
<li>COHORT 2</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<!-- Side bar -->
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>
Paly SJP
</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Menu</label>
</li>
<li>
Paly SJP
</li>
<li>
About Us
</li>
<li>
Calendar
</li>
<li>
<label>Cohorts</label>
</li>
<li style="background-color: #3B3B3B">
Cohort 1
</li>
</ul>
</aside>
<div class="content">
{{ content }}
</div>
<div class="footer">
<div class="row">
<div class="large-12 columns">
<h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
<a href="https://twitter.com/palysocjustice" target="_blank">
<img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
<a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
<img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
<a href="http://palysocialjustice.blogspot.com/" target="_blank">
<img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
If you inspect the aside element using the developer tools in Chrome or whatever browser you're using, the styles associated with the left-off-canvas-menu class are not present.
Re-upload the complete foundation.css file to ensure the appropriate styles are applied.
I tried all day to re-order this menu like I need but I am new to jquery..
What I am trying to do is:
Inside the last td.top from this menu there are 3 ul.sub li, I want each to be extracted from there and it's content put inside a td.top.
Then inside the content there is a div and a link, I need to switch positions, the link must be before the div (just like inside the other td.top)
Basically I try to make the 3 ul.sub. li identical (add same classes, have same structure etc, like the rest of td.top)
How can I do this?
I appreciate any tips..
This is the code I used so far:
$("ul.sub a.more_top_element").removeClass('button more_top_element').addClass("top_link").removeAttr('style').removeAttr('value');
$("ul.sub div").removeClass('more_sub').addClass("sub");
.. here I should have the code to extract the content inside the 3 ul.sub li and switch the link with the div, then wrap it in a td.top..
This is the html I need to modify with jquery:
<table class="topMenu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="top">
<a href="http://localhost/d7t/m/photos/home/" class="top_link"><span class="down bx-def-padding-sec-leftright">Photos</span>
<!--[if gte IE 7]><!-->
</a>
<!--<![endif]-->
<div class="sub">
<!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
<ul class="sub main_elements">
<li>
Home
</li>
<li>
Albums
</li>
<li>
Recent
</li>
<li>
Top
</li>
<li>
Popular
</li>
<li>
Featured
</li>
<li>
Tags
</li>
<li>
Categories
</li>
<li>
Rater
</li>
<li>
Calendar
</li>
<li>
Search
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</td>
<td class="top">
<a href="http://localhost/d7t/m/poll/&action=poll_home" class="top_link"><span class="down bx-def-padding-sec-leftright">Polls</span>
<!--[if gte IE 7]><!-->
</a>
<!--<![endif]-->
<div class="sub">
<!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
<ul class="sub main_elements">
<li>
Polls Home
</li>
<li>
All Polls
</li>
<li>
Popular
</li>
<li>
Featured
</li>
<li>
Calendar
</li>
<li>
Search
</li>
<li>
Tags
</li>
<li>
Categories
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</td>
<td class="top">
<a href="javascript: void(0);" onclick="void(0);" class="top_link">
<span class="down bx-def-padding-sec-leftright">More</span>
<!--[if gte IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
<div style="position:relative;display:block;">
<ul class="sub">
<li class="">
<div class="sub">
<ul class="sub main_elements">
<li>
Sites Home
</li>
<li>
All Sites
</li>
<li>
Admin Sites
</li>
<li>
User Sites
</li>
<li>
Top Rated
</li>
<li>
Popular
</li>
<li>
Featured
</li>
<li>
Tags
</li>
<li>
Categories
</li>
<li>
Calendar
</li>
<li>
Search
</li>
</ul>
</div>
Sites
<div class="clear_both sub">
</div>
</li>
<li class="">
<div class="sub">
<ul class="sub main_elements">
<li>
Sounds home
</li>
<li>
Sound albums
</li>
<li>
All Sounds
</li>
<li>
Top Sounds
</li>
<li>
Popular Sounds
</li>
<li>
Featured Sounds
</li>
<li>
Tags
</li>
<li>
Categories
</li>
<li>
Rater
</li>
<li>
Calendar
</li>
<li>
Search
</li>
</ul>
</div>
Sounds
<div class="clear_both sub">
</div>
</li>
<li class="">
<div class="sub">
<ul class="sub main_elements">
<li>
Store Home
</li>
<li>
Recent
</li>
<li>
Top Rated
</li>
<li>
Popular
</li>
<li>
Featured
</li>
<li>
Free
</li>
<li>
Tags
</li>
<li>
Categories
</li>
<li>
Calendar
</li>
<li>
Search
</li>
</ul>
</div>
Store
<div class="clear_both sub">
</div>
</li>
<li class="li_last_round"> </li>
</ul>
</div>
<div class="clear_both">
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</td>
</tr>
</tbody>
</table>
This is kind of a lot of questions, not just one, and probably not particularly well suited for stackoverflow.
You want to select the last td with class top. This should be done using the last-child selector:
$( "table.topMenu td.top:last-child" ) // you won't use this, just showing the hierarchy
Then, from within this td, you want to select each of the divs with class sub.
$( "table.topMenu td.top:last-child div.sub" )
That should select all the content of the div you want. Then you need to select the content of the links in this same section like so:
$( "table.topMenu td.top:last-child a.top_link" )
You should store them into javascript objects, like so:
var divs = $( "table.topMenu td.top:last-child div.sub" ).remove();
var links = $( "table.topMenu td.top:last-child a.top_link" ).remove();
These lines will remove them from the DOM, but save the jQuery objects for later use (Note that since these selectors will get multiple DOM elements they are jQuery objects, not DOM elements at this point). You should then be able to append them as needed with an appropriate selector. You may also want to call:
$( "table.topMenu td.top:last-child" ).remove();
as well to clean up the DOM.
I am using Codiqa, a mobile prototyping tool, which creates div id layers with iframes inside them, and the menu links just go to that DIV id without any real page loading; so when the main Apps menu is initially loaded, all divs and their respective iframes load simultaneously, and then everything is navigable via div ids for page linking. The issue here is that I am dealing with content that could have been updated while navigating the menu, so if the content changes and you click on a menu item then the iframe doesn't refresh and load any new or updated content; I need to manually refresh my browser every time to see changes! How can I fix this? I was thinking of putting a javascript function on the menu link itself, but not sure how to go about that. Thanks in advance!
HTML
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">Apps</li>
<li data-theme="">
<a href="#page16" data-transition="flip">
Central Office Survey
</a>
</li>
<!-- <li data-theme="">
<a href="#page18" data-transition="flip">
Manhole
</a>
</li>-->
<li data-theme="">
<a href="#page21" data-transition="flip">
Prepping A
</a>
<!-- </li>
<li data-theme="c">
<a href="#page19" data-transition="flip">
Prepping A
</a>
-->
</li>
<li data-theme="c">
<a href="#page20" data-transition="flip">
Prepping Z
</a>
</li>
<li data-theme="c">
<a href="#page17" data-transition="flip">
Extracting
</a>
</li>
<li data-theme="c">
<a href="#page15" data-transition="flip">
Warehouse
</a>
</li>
<li class="sample">
<a href="#page22" data-transition="flip">
Sample
</a>
</li>
</ul>
<!-- Extracting -->
<div data-role="page" id="page17">
<div data-theme="a" data-role="header" id="frame_header">
Return To Main Menu
<h3>Extracting</h3>
</div>
<div data-role="content">
<iframe src="http://gp21.idmyasset.com/mobile/extraction/" id="Cable_Extraction_Worksheet"
name="Cable_Extraction_Worksheet" class="contentiframe"></iframe>
</div>
<div data-role="tabbar" data-iconpos="left" data-theme="a">
<ul>
<li>
<a href="http://gp21.idmyasset.com/mobile/extraction/" target="Cable_Extraction_Worksheet" data-transition="flip" data-theme="" data-icon="arrow-l">
Back
</a>
</li>
<li>
<a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.location.reload();" data-transition="none" data-theme="" data-icon="minus">
Reset
</a>
</li>
<li>
<a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata();" data-transition="none" data-theme="" data-icon="check">
Submit
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="page22">
<div data-theme="" data-role="header" id="frame_header">
Return To Main Menu
<h3>Sample</h3>
</div>
<div data-role="content">
<iframe src="http://gp21.idmyasset.com/mobile/sample/" name="sample" id="sample" class="contentiframe"></iframe>
<script type="text/javascript">
document.frames['sample'].location.reload(true);
</script>
</div>
<div data-role="tabbar" data-iconpos="left" data-theme="a">
<ul>
<li>
<a href="http://gp21.idmyasset.com/mobile/" target="_parent" data-transition="flip" data-theme="" data-icon="arrow-l">
Back
</a>
</li>
<li>
<a onclick="document.getElementById('sample').contentWindow.location.reload();" data-transition="none" data-icon="minus">
Reset
</a>
</li>
<li>
<!--Use Submit Validation Function for iFrame Form-->
<a onclick="sample.submitForm();" data-transition="flip" data-icon="check">
Submit
</a>
</li>
</ul>
</div>
</div>
Cool you used Codiqa, I made it :)
You can do what you are requesting by listening for the pageshow event on that page and triggering the refresh:
$('#page22').on('pageshow', function() {
$('#sample').attr("src", $('#sample').attr("src"));
});
We recently added support to change the page id, so you can customize it now.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
None of my content appears to be showing in a web browser. I created the website in Wordpress
I am not sure whether I am missing some vital code but it seems to display the logo and the 'Services' bar but otherwise my page appears to be empty
header.php:
</head>
<body class="">
<div id="wrapper">
<div id="jump">
<p>jump to content</p>
</div>
<div class="hud-content">
<div id="content-container">
<div id="header">
<div id="logo">
<a href="/" title="Wild Lion Media">
<img src="/wildlion/wp-content/themes/child/images/logo.png" width="95" height="120" alt="Wild Lion Media" title="Wild Lion Media" />
</a>
</div>
<h1>
Wild Lion Media
</h1>
<div id="hud-toggler">
<ul>
<li>Login / Register</li>
</ul>
</div>
</div><div id="nav">
<ul>
<li id="nav-home">Home</li>
<li id="nav-dandad"><a class="nav-item" href="/dandad" title="Wild Lion Media">Wild Lion Media</a>
<div class="subnav">
<ul class="subnav">
<li>About</li>
<li>Events</li>
<li>Join</li>
<li>Latest</li>
<li>Partnerships</li>
<li>White Pencil</li>
<li class="feature">
<p class="intro">Get your voice heard</p>
<p>Wild Lion Media Membership: It’s classy, exclusive, well connected – everything you could ask for from a private member’s club. Ok, we don’t have a pool on the roof, but just wait till you see the size of our archive.</p>
<p class="readmore">Read More</p>
<img src="#" width="167" height="167" alt="Nav Yellow Pencil" class="feature-pic"/>
<ul class="feature-links">
<li><a href="/dandad/join/individual-membership" title="Individual Membership">Individual<br />
Membership</a></li>
<li><a href="/dandad/join/d-ad-education-network" title="Education Network">Education<br />
Network</a></li>
</ul>
</li>
</ul>
</div> </li>
<li id="nav-inspire"><a class="nav-item" href="/inspiration" title="Inspiration">Inspiration</a>
<div class="subnav">
<ul class="subnav">
<li>Inspired by…</li>
<li>Watch & Listen</li>
<li>Have Your Say</li>
<li>Features & Opinion</li>
<li>Profiles</li>
<li>Archives & Collections</li>
<li class="feature">
<p class="intro">Wild Lion Media<br/>President’s Lectures</p>
<p>Chosen by the President of Wild Lion Media speakers represent the best in their creative fields and inspire discussion and debate.<br/></p>
<p class="readmore">Book your tickets</p>
<img src="#" width="167" height="167" alt="President’s Lectures" class="feature-pic"/>
</li>
</ul>
</div> </li>
<li id="nav-awards"><a class="nav-item" href="/awards" title="Awards">Awards</a>
<div class="subnav">
<ul class="subnav award-sections">
<li>
<p class="intro">Professional Awards</p>
<p>Yellow Pencils are recognised the world over as a symbol of true creative achievement. Year on year the Wild Lion Media Annual showcases the very best work and continues to provide an unrivalled source of creative inspiration.</p>
<ul>
<li>Professional</li>
<li class="new">2012</li>
<li>2011</li>
<li>2010</li>
<li>Archive</li>
</ul>
</li>
<li>
<p class="intro">Student Awards</p>
<p>Creatives the world over value the Wild Lion Media Student Awards above any other. Winning a Wild Lion Media Student Award truly marks you out as one of the best. Take your first step in becoming a creative superstar.</p>
<ul>
<li>Student</li>
<li class="new">2012</li>
<li>2011</li>
<li>2010</li>
<li>Archive</li>
</ul>
</li>
</ul>
</div> </li>
<li id="nav-talent"><a class="nav-item" href="/talent" title="Talent">Talent</a>
<div class="subnav">
<ul class="subnav">
<li>Spotlights</li>
<li>Portfolios</li>
<li>New Blood</li>
<!-- <li>Graduate Placement Scheme</li>-->
<li>Graduate Academy</li>
<!-- <li>Jobs</li>-->
<li class="feature">
<img src="#" alt="Graduate Academy - Where the creatively brave shine" class="fullpic" />
</li>
</ul>
</div>
</li>
<li id="nav-learning"><a class="nav-item" href="/learning" title="Learning">Learning</a>
<div class="subnav">
<ul class="subnav">
<li>Case Studies</li>
<li>Commentary</li>
<li>Guides</li>
<li>Talks</li>
<li class="new">Projects</li>
<li>Workshops</li>
<li>Professional Development</li>
<li class="feature">
<img src="#" alt="Education Network Membership. One yellow pencil. Lots of benefits." class="fullpic" />
</li>
</ul>
</div> </li>
<li id="nav-search">
<form action="/search" method="get" accept-charset="utf-8">
<p><label for="search">Search</label><input type="text" name="q" value="Search" id="search" class="tfield" tabindex="5" /></p>
<p><input type="submit" id="search_submit" value="Go" tabindex="6" /></p>
</form>
</li>
</ul>
</div> <div id="content">
<div class="panel-10">
<p class="widget-title">Services</p>
<ul class="powerlinks pl-feature extended">
<li class="first">
<img src="/wildlion/wp-content/themes/child/images/video_production.jpg" width="176" height="104" alt="Video Production" title="" />
<p>
<a href="#">
<span>
<strong>Video Production</strong>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Every element of your production can be designed to meet your needs.
</span>
</a>
</p>
</li>
<li>
<img src="/wildlion/wp-content/themes/child/images/talking_heads.jpg" width="176" height="104" alt="Talking Heads" title="" />
<p>
<a href="#">
<span>
<strong>Talking Heads</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
A simple but effective way of communicating a message and introducing key players.
</span>
</a>
</p>
</li>
<li>
<img src="/wildlion/wp-content/themes/child/images/motion_graphics.jpg" width="176" height="104" alt="Motion Graphics" title="" />
<p>
<a href="#">
<span>
<strong>Motion Graphics</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Whether 2D logo design or 3D animation and visual effects, anything is possible.
</span>
</a>
</p>
</li>
<li class="last">
<img src="/wildlion/wp-content/themes/child/images/web_videos.jpg" width="176" height="104" alt="Web Videos" title="" />
<p>
<a href="#">
<span>
<strong>Web Videos</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
From social networks to blogs and news feeds, get your viral out there.
</span>
</a>
</p>
</li>
<li class="first">
<img src="/wildlion/wp-content/themes/child/images/live_events.jpg" width="176" height="104" alt="Live Events" title="" />
<p>
<a href="#">
<span>
<strong>Live Events</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Why limit your audience to the venue capacity? Capture your event in style.
</span>
</a>
</p>
</li>
</ul>
</div>
<div class="panel-10">
<div class="panel-8 alpha">
<div class="panel-2 alpha">
</div>
</div>
</div>
<div class="panel-10" id="footer">
<div class="panel-2">
<p>© 2012 Wild Lion Media Limited </p>
</div>
<div class="panel-2" id="back-to-top">
<p>Back to the top</p>
</div>
</div>
<div class="clearing"></div>
</div>
</div>
<div class="overlay"></div>
On line 5 of your stylesheet you have:
#nav,
#hud,
#hud-toggler,
#imagebar,
#jump,
div #breadcrumb,
#quick-jump,
#sitemap,
#external-links,
#back-to-top,
ul.powerlinks,
ul.article-nav,
#sidenav ul,
p.return,
a.doc-pdf,
a.doc-word,
div.logo a {
display: none;
}
This is causing everything to be hidden. Remove that line and you'll see your content.
In your style.css (line 5) you have a rule:
#nav, #hud, #hud-toggler, #imagebar, #jump, div #breadcrumb, #quick-jump, #sitemap, #external-links, #back-to-top, ul.powerlinks, ul.article-nav, #sidenav ul, p.return, a.doc-pdf, a.doc-word, div.logo a {
display: none;
}
It hides all your content.