I'm new to umbraco, and I've encountered the following problem.
I have a design with a fixed navigation box on the left. The right side is for content. This content needs to be filled with the new grid-layout from umbraco.
But the grid-container keeps getting the full width of the site. So together with the navigation-box, it pushes outside my site.
Like this:
http://i.imgur.com/iEo4Os6.jpg
I've tried the following html:
<div class="row">
<div class="col-lg-2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="col-lg-10">
#CurrentPage.GetGridHtml("ArticleContent")
</div>
</div>
But the GetGridHtml places a complete full width container inside my column. Setting the container to 10 columns (and the row configs too) within umbraco doesn't help either.
Anybody know a solution? Thanks in advance.
I think the solution could be to make your grid row configuration only span ten rows? I don't have enough rep in here (yet) to just comment, sorry.
Related
I am trying to create a page with a search bar and filters underneath. I really like the way the search-toolbar looks, but it's creating space that I don't need. Is there a way to modify i to get rid of the space?
Thanks!
Here's an image of what I have:
Search bar with toolbar underneath
Edit: That grey space is what I'm trying to get rid of.
Here's my asp code:
<div class="search-toolbar" style="background-color:white">
<ul class="list-unstyled nav nav-pills">
<li>
Everything
</li>
<li>
Other Content
</li>
</ul>
</div>
<div class="tab-content">
Content
</div>
Figured it out, I found the css file and edited it.
I'm still new to web development, and I wasn't aware that I could do that.
So I'm trying to build a nice page for a blog, but the challenge is I want it to be the most proper HTML5 compliant and mobile/seo friendly.
I have made what I believe to be a proper HTML5 page that looks like this :
<!-- Header -->
<header>
<h1>Title of the page</h1>
<h2>Subtitle of the page</h2>
<!-- nav -->
<nav>
<ul>
<li>Page one</li>
<li>Page two 2</li>
<li>Page three 3</li>
<li>Page four 4</li>
</ul>
</nav>
</header>
<!-- last articles -->
<section>
<article>
<header>
<h2>Article title</h2>
</header>
Content of the article.
<aside>
Related post or other links.
</aside>
<footer>
Read the full article.
<ul>
<li>Share on Facebook</li>
<li>Tweet it</li>
</ul>
</footer>
</article>
<article>
<header>
<h2>Article title</h2>
</header>
Content of the article.
<aside>
Related post or other links.
</aside>
<footer>
Read the full article.
<ul>
<li>Share on Facebook</li>
<li>Tweet it</li>
</ul>
</footer>
</article>
</section>
<!-- sidebar -->
<aside>
<h2>Sidebar</h2>
<h3>Social media</h3>
<ul>
<li>Facebook account</li>
<li>Twitter account</li>
<li>Github account</li>
</ul>
<h3>Last comments</h3>
<nav>
<ul>
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
</ul>
</nav>
</aside>
<!-- footer -->
<footer>
© 1264-2016 - Handsome coder (me) industry
</footer>
I don't know about you but I think it looks like a proper semantic use of HTML5 tags.
Now I want it to be responsive and two options are presented.
I do all the css by myself (maybe using normalize.css to prevent weird stuff from happening on some browsers.)
I use a lightweight framework, for example Skeleton.
Both would mean the use of classes but also of probably the use of div tags to wrap certain parts of the pages and I'm not sure it is how I should do it...
I'm trying to avoid the over use of div tags, especially the nested div that look like ol' of ten years ago.
I tried to use the HTML5 Boilerplate, but I just looked at the source code of their main page which is quite simple in appearance and I found div in div in div in div in div. I mean, what the hell ?
So what do you think I should do to build responsive proper and semantic HTML5 pages ? Do you have any example ?
Thank you for reading me.
Have a nice day.
As far as I understood, you want a way to build simple, semantic, lightweight pages (which should be the aim of us all).
Adding / nesting divs is not a crime. A div by itself is just a blank container which holds very little relevance to the overall HTML document structure, you can use as much divs as you like. Focus on learning HTML/5 Semantics and learning how to combine the new tags so that your page can be easy to read and describe (by the bots).
Example of a well structured simple page. (Google images)
Concerning grid systems - My advice is to learn SASS and combine it with Bourbon.io's grid system called Neat. It is pretty straightforward and easy to understand/implement. The grid alignment is sorted in a super-simple manner which gets your code down to something like:
Using JQuery Mobile 1.4.5, it appears that my external panel cannot hold a style!
Conventional wisdom states that .enhanceWithin(); should be called to update the contents of an element, but this does not appear to give good results with the current version of JQM.
Fiddle to demonstrate.
Has this been updated? Every answer I have found on the topic of dynamic elements losing their style is using an older version of JQM.
By default jQM 1.4.x only has 'A' and 'B' themes. You have set theme to 'C' which does not exist unless you add it to the CSS. For the fiddle, change it to:
<div data-role="panel" id="menuPanel" data-theme="b">
<ul data-role="listview" data-theme="c" data-dividertheme="b">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
Updated FIDDLE
Ran into this 'funny' issue today. I have an asp.net mvc application, with a twitter bootstrap design template, which up until now has been working fine. However, when I added some #Scripts.Render("...") statements to the top of my view (Not shared layout file, but view) it seems to alter my layout!
View:
#Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")
#Scripts.Render("~/signalr/hubs")
#Scripts.Render("~/Scripts/Stimline/connector.js")
<div class="span12">
<legend>Fleet List</legend>
<div class="row-fluid">
...
</div>
</div>
Whenever the three script statements at the top is added to my .cshtml file, it seems to move the entire div-part over to the right, so that it aligns with the edge of my browser. Removing the statements again causes it to go back to normal, adding the margin supposed to be there by default from bootstrap.
I have not done any changes to the bootstrap css.
Has anybody seen this, or at least something similar, before?
Here's how it looks with the #Render.Scripts statement:
And here's without it:
If you use the fixed header bar as a reference for right edge, you'll see that the table is aligned all the way to the right in one image, and correctly "spaced" from the edge in the other.
I recently ran into a similar issue where I was float li elements for a menu. I had each element on it's own line in the html, so a space was rendered between each item.
<ul>
<li style="float:left">Item 1</li>
<li style="float:left">Item 2</li>
<li style="float:left">Item 3</li>
</ul>
changed to
<ul>
<li style="float:left">Item 1</li><li style="float:left">Item 2</li><li style="float:left">Item 3</li>
</ul>
In your situation moving the script to the bottom of the page would be best to follow other best practices, but you could also remove the whitespace to get the same result.
Making a left hand side menu for my website.
Should I create a Unordered List and add them as list-item?
What way is the proper way.
Thanks
That's the usual way to make a menu. Often the menu will be contained in a DIV with headers being the menu section header and the unordered list elements comprising the menu items. Use CSS to style the list (say to remove the bullets and add a background) so that it looks the way you want your menu to appear. You may want to consider one of many JS frameworks/plugins to add some interactivity to your menu. One I've used is jQuery + fgmenu from the Filament Group (though the example below is not in the correct format for it).
<div id="nav">
<h3>Main</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h3>Other</h3>
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>