I have been browsing and searching around for sometime now to find a working example of a picture in one column and text with bullet points in the other.
This is my result so far.
As you can see the text doesn't start at the top as I want it to.
<div style="overflow:hidden;position:relative;display:table">
<div style="display:table-cell;background:red">
<img src="http://www.lyricsmode.com/i/bpictures/4795.jpg" />
</div>
<div style="display:table-cell;width:100%;background:grey;">
<p>
Here is some text about how awesome Spongebob squarepants is!
</p>
<ul>
<li>Home
<ul>
<li>Dashboard</li>
</ul>
</li>
<li>Views
<ul>
<li>Tickets</li>
</ul>
</li>
<li>Customers
<ul>
<li>List of Customers</li>
</ul>
</li>
<li>Conditional
<ul>
<li>Admin extension</li>
</ul>
</li>
</ul>
</div>
Link to example in Fiddle
Try this
Fiddle Demo
<div style="overflow:hidden;position:relative;display:inline-flex">
just change the display css to inline-flex
try this.. I think this is what you're looking for.
<div style="float:left; background:red">
<img src="http://www.lyricsmode.com/i/bpictures/4795.jpg" />
</div>
<div style="background:grey; float:left;">
<p>
Here is some text about how awesome Spongebob squarepants is!
</p>
<ul>
<li>Home
<ul>
<li>Dashboard</li>
</ul>
</li>
<li>Views
<ul>
<li>Tickets</li>
</ul>
</li>
<li>Customers
<ul>
<li>List of Customers</li>
</ul>
</li>
<li>Conditional
<ul>
<li>Admin extension</li>
</ul>
</li>
</ul>
</div>
How about you actually use a table if you want the get that effect.
Try this html in the snippet:
<table >
<tr>
<td style="display:table-cell;background:red">
<img src="http://www.lyricsmode.com/i/bpictures/4795.jpg" />
</td>
<td style="display:table-cell;width:100%;background:grey;">
<p>
Here is some text about how awesome Spongebob squarepants is!
</p>
<ul>
<li>Home
<ul>
<li>Dashboard</li>
</ul>
</li>
<li>Views
<ul>
<li>Tickets</li>
</ul>
</li>
<li>Customers
<ul>
<li>List of Customers</li>
</ul>
</li>
<li>Conditional
<ul>
<li>Admin extension</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
You gonna have to change your divs into table and td respectively and add your td items (img and text containers) into tr.
If you have some constraints about this solution let me know.
ADVICE:
don't use inline styles, your markup gets really messy and it's difficult to make any changes later on.
Related
Since adding a slide show into my site I now have a odd gap above my navigation bar. I am not sure on how to fix this. I tried what I did last time I had this happening but nothing ...
I have a JSfiddle set up: https://jsfiddle.net/7yj8rkbe/
HTML (for my nav bar):
<img src="img/Logo.png" id="logo">
<li>
Other
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li>
Store
<ul>
<li>Official</li>
<li>Community</li>
</ul>
</li>
<li>
Projects
<ul>
<li>Official</li>
<li>Community</li>
<li>Open Source</li>
</ul>
</li>
<li>
Forum
<ul>
<li>Programming</li>
<li>Technology</li>
<li>Gaming</li>
</ul>
</li>
<li>
<a id="nav-home" href="#">Home</a>
</li>
</ul>
#information {
top: 0;
}
You specified fixed positioning to that div but you forgot to set top value.
I am trying to create an appropriate semantic markup for header section of design below.
Please header section of this bootstrap theme (Sorry i couldn't add image due to reputation restriction)
Please see code below
<header role="banner">
Skip to main content
<div class="utility-bar">
<ul>
<li><span>Mail</span>
</li>
<li><span>Number</span>
</li>
</ul>
<ul>
<li><span>Social Link 1</span>
</li>
<li><span>Social Link 2</span>
</li>
<li><span>Social Link 3</span>
</li>
<li><span>Social Link 4</span>
</li>
<li><span>Social Link 5</span>
</li>
</ul>
</div>
<a href="#">
<img src="img/logo.svg">
</a>
<nav role="navigation">
<ul>
<li>
Main 1
<ul>
<li>SubMenu 1
</li>
<li>SubMenu 2
</li>
<li>SubMenu 3
</li>
<li>SubMenu 4
</li>
<li>SubMenu 5
</li>
</ul>
</li>
<li>Main 2</li>
<li>Main 3</li>
<li>Main 4</li>
<li>Main 5</li>
<li>Main 6</li>
</ul>
<button title="Show / Hide menu">
<img src="burger.png" alt="Show / Hide menu">
</button>
</nav>
</header>
From reading articles about semantics in sites like HTML5Doctor and posts in stackoverflow. I have the following doubts.
Where should we place the "utility bar"/ "Top Bar", which contains
the social links and contact details? Should we place it in aside
outside the header tag, as it is tangential content to the site.
Is the trick of using H1 for logo with text-indent, not advised
anymore?
Where should we place the burger icon for responsive view. Some doesn't place it in the markup , but add it using javascript. It is the recommended way. if we place it in markup, where is the appropriate place.
Hi Im new to PureCss of Yahoo. Im trying to make a vertical navigation with collapsible items
im wondering why ul in a li doesn't shows any display. No other css. PureCss of Yahoo only.
this is my code:
<div class="pure-u" id="nav">
Menu
<div class="nav-inner">
<div class="pure-menu pure-menu-open">
<ul>
<li>Dashboard</li>
<li>
Sales
<ul> <!-- this doesn't show :( -->
<li>Create Order</li>
<li>Orders</li>
<li>Sales Report</li>
</ul>
</li>
<li>Purchasing</li>
<li>Reports</li>
<li>Users</li>
<li>Help</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
As i Understood by the documentation you need add pure-menu-open to any menu that you want to show, and some other classes to make it look decent, this is anyways what i came up with.
<div class="pure-u" id="nav">
Menu
<div class="nav-inner">
<div class="pure-menu pure-menu-open">
<ul>
<li>Dashboard</li>
<li class="pure-menu pure-menu-open pure-menu-can-have-children pure-menu-has-children">
Sales
<ul> <!-- this doesn't show :( -->
<li>Create Order</li>
<li>Orders</li>
<li>Sales Report</li>
</ul>
</li>
<li>Purchasing</li>
<li>Reports</li>
<li>Users</li>
<li>Help</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
You can see a live version here http://jsfiddle.net/p4hus/
First off, Merry Christmas!
Hopefully no one else is working on xmas day unless they're knockout experts and really feel the urge to help me out ;-)
I'm using the fabulous jQuery Column Navigation Plugin to show data to my users in a multi column fashion. It worked fine in my static testing, but now implementing it into production code I've hit something that hopefully isn't too difficult to sort out.
It requires a div inside a ul element to allow for scrolling when the list gets to big. The problem here is that the foreach I'm using to create the columns wraps each child element in a div and not the entire child collection.
For example:
I should be producing HTML that looks like this
<div id="myTree">
<ul>
<div> <!-- required to allow scrolling within each column -->
<li>
<a>Homepage</a>
<ul>
<div>
<li><a>Contact</a></li>
<li><a>Terms & Conditions</a></li>
<li><a>Privacy information</a></li>
</div>
</ul>
</li>
<li>
<a>Contents</a>
<ul>
<div>
<li><a>Page 1</a></li>
<li>
<a>Page 2</a>
<ul>
<div>
<li>Page 2.1</li>
<li>Page 2.2</li>
</div>
</ul>
</li>
<li><a>Page 3</a></li>
</div>
</ul>
</li>
</div>
</ul>
but using this knockout code
<div id="whatever" style="width: 100%">
<ul data-bind="foreach: { data: Column1 }">
<div>
<li><a data-bind="text: Name"></a>
<ul data-bind="foreach: { data: Column2 }">
<div>
<li><a data-bind="text: Name"></a>
<ul data-bind="foreach: { data: Column3 }">
<div>
<li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
</div>
</ul>
</li>
</div>
</ul>
</li>
</div>
</ul>
I end up with HTML that looks like
<div id="myTree">
<ul>
<div> <!-- required to allow scrolling within each column -->
<li>
<a>Homepage</a>
<ul>
<div>
<li><a>Contact</a></li>
</div>
<div>
<li><a>Terms & Conditions</a></li>
</div>
<div>
<li><a>Privacy information</a></li>
</div>
</ul>
</li>
<li>
<a>Contents</a>
<ul>
<div>
<div>
<li><a>Page 1</a></li>
</div>
<li>
<a>Page 2</a>
<ul>
<div>
<li>Page 2.1</li>
</div>
<div>
<li>Page 2.2</li>
</div>
</ul>
</li>
<li><a>Page 3</a></li>
</div>
</ul>
</li>
</div>
</ul>
How can I get the internal DIVs to wrapper ALl the children and not individual child records inside the parent??
Many thanks for any help, and MERRY CHRISTMAS once again.
The first comment is correct... you would just do this to produce your desired HTML output:
<ul>
<div data-bind="foreach: { data: Column3 }">
<li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
</div>
</ul>
Although having a div directly in a ul isn't exactly valid HTML, so I don't know why you would want to do that anyways.
An alternative is using virtual elements:
<ul>
<div>
<!-- ko foreach: { data: Column3 } -->
<li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
<!-- /ko -->
</div>
</ul>
There is no (nice) way of getting your desired output without modifying the "script" as you mention in your comment.
I'm a novice and ran my code through an html validator.
Regarding my navigation I receive a message that reads: :Element ul not allowed as child of element ul in this context"
Here is the html structure:
<nav>
<div class="nav_container">
<ul class="navigation">
<ul class="logo">
<li><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></li>
</ul>
<ul class="subnav">
<li>home</li>
</ul>
<ul class="subnav">
<li>reclaimed wood</li>
<li>design</li>
</ul>
<ul class="subnav">
<li>flooring</li>
<li>paneling</li>
<li>beams</li>
</ul>
<ul class="subnav">
<li>shelving
</li><li>mantels</li>
</ul>
<ul class="subnav">
<li>news</li>
</ul>
<ul class="subnav">
<li>wood types</li>
<li>phrases</li>
</ul>
</ul>
</div>
</nav>
Whats wrong with it? It looks fine across browsers. Should I be concerned or take action?
A ul can not be a direct child of another ul, it needs to be contained within an li
<ul class="navigation">
<li>
<ul class="logo">
<li><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></li>
</ul>
</li>
<li>
<ul class="subnav">
<li>home</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>reclaimed wood</li>
<li>design</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>flooring</li>
<li>paneling</li>
<li>beams</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>shelving</li>
<li>mantels</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>news</li>
</ul>
</li>
<li>
<ul class="subnav">
<li>wood types</li>
<li>phrases</li>
</ul>
</li>
</ul>
you could also give the menu some headings by adding it in the li before the child ul,
you must wrap each of the inner ul with an li
<ul class="navigation">
<li>
<ul>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
</ul>
Your structure is likely wrong. Logo is not a list or list-item. As well as list item that contains just another list is generally pointless.
Use heading element for logo (I usually use H1 for home page and H3 with link inside it for other pages):
<!-- for home page -->
<h1 id="logo">Company</h1>
<!-- for other pages -->
<h3 id="logo">Company</h3>
And make sure that your navigation has correct hierarchy like this:
<ul>
<li>Products
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Tablets</li>
</ul>
</li>
<li>About
<ul>
<li>History</li>
<li>Contacts</li>
</ul>
</li>
</ul>
In the example, each LI has its own link and subsections of section that the link represents, and thus the link text is heading for subsections' list.
You need to wrap
<ul class="navigation">
<ul class="logo">
as
<ul class="navigation">
<li>
<ul class="logo">
...
</ul>
</li>
and so on...