I'm making an ASP.NET MVC5 web app. The default template uses bootstrap, which is fine for almost all of the pages. However I need one page to have width: 100%.
The view I would like to use this is a partial view, so it will be rendered in the .container (see code below), as well as the other partial views.
<div class="container">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
All of them are fine to be fluid, but I need this one to be 100% width. What is an elegant way to do it?
In your partial view, you can use jQuery to modify the CSS of the container div. This would change the width whenever that view is rendered, but would no effect on other pages.
EDIT: As the OP pointed out, Bootstrap's JS will reset the width on window resize. So we have to do the same:
$(document).ready(function(){
setWidthOfContainer();
$(window).resize(setWidthOfContainer);
});
function setWidthOfContainer(){
console.log("Setting width of container to 100%.");
$('div.container').css('width','100%');
}
See the fiddle here: http://jsfiddle.net/GqRd7/
I had a similar problem, where the container was used in the Layout and fine for most pages, but I wanted an odd full width element within that container.
As of Bootstrap 3, you can use the .container-fluid class for 100% width content. However, using this within .container does nothing, as it is limited by the .container width. Here are a few options/workarounds I've come across:
Use sections
If the 100% width content is always used at the beginning or end of the container content, you could define sections in the layout page, and insert the 100% width element in there.
Layout:
<div class="container-fluid">
#RenderSection("containerFluid", required: false)
</div>
<div class="container">
#RenderBody()
</div>
View:
#section containerFluid
{
<div>Full width content.</div>
}
<div>Other content</div>
In your case, if you had no other content on that one page, you could just put the whole page in the section.
Use another layout page
If it's a whole page that needs to be full width, you could just get it to use a different layout. Use partials for the common code and change the .container element to .container-fluid.
Normal layout:
<!DOCTYPE html>
<html lang="en">
#Html.Partial("_LayoutHead")
<body>
#Html.Partial("_Navbar")
<div class="container">
#RenderBody()
</div>
#Html.Partial("Footer")
</body>
</html>
Alternative layout
<!DOCTYPE html>
<html lang="en">
#Html.Partial("_LayoutHead")
<body>
#Html.Partial("_Navbar")
<div class="container-fluid">
#RenderBody()
</div>
#Html.Partial("Footer")
</body>
</html>
Manually close the container and reopen later
I wouldn't really recommend this one, as it's very hacky, and will show up errors, but it does compile and work. This can be used if you have an element somewhere in the middle of the content that you want to be full width for whatever reason.
View:
<div>Some normal content here.</div>
</div> <!--This shows an error for missing a starting tag. The actual starting tag is on the layout page.-->
<div class="container-fluid">
<div>Full width div</div>
</div>
<div class="container"> <!--This shows an error for missing an ending tag. It actually gets closed using the end tag in the layout page-->
<div>Back to normal</div>
I managed to solve it by making the position of the rendered content absolute and left: 0, but <footer> is hidden behind it, so I have to take care of that one separatelly (or remove it altogether). Not the elegant solution I was wishing for, but works.
You can use the razor code to change the page's style in _Layout.cshtml file.
<div class="container" style="#(ViewData["Title"] == "Page1" ? "max-width: 100%;" : "")">
Replace "Page1" with your real page title.
Related
I need to make my footer stay on the bottom but also have it not interfere with my content. As seen in the jfiddle, the blue box interferes with the footer. After looking through all the current threads and trying to fix my CSS and HTML, I could not find my solution. I tried changing the position to fixed, adding some padding, etc. Below is my code:
http://jsfiddle.net/9A2gL/8/
Basically I have:
<html><div id="wrapper"><header></header>
<body></body>
<footer></footer></div></html>
I do have floating divs but I used clearfix so clear: both;
Also, please read this: I do have a valid HTML structure but jsfiddle doesn't recommend the tags to be placed. Please focus on the floating aspect as when I take float:right;in the CSS off of the .news it is working. When I remove the code to make the footer stick at the bottom of the page, it also works.
Your HTML Mark is Messed Please first of all W3C Stabdards, and correct your HTML Markup some thing like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header></header>
<footer></footer>
</body>
</html>
Sencond for your footer please apply clearfix class there after proper markup or just
.Clear{
clear:both;
}
You are good to go (y).
I understand it was a fiddle (THANK YOU!), but your HTML tags are out of place. That being said, the image I see from your fiddle is as follows
<div id="wrapper">
<div id="container">
<!-- REMOVED body HTML tag-->
<div id="content">...</div>
<aside>
<div class="advert">..</div>
<div class="news">..</div>
</aside>
<!-- End Container -->
</div>
<div class="clearfix">..</div>
<footer>..</footer>
<!--End Wrapper-->
</div>
edit
Add bottom margin to your aside.
The clearfix div should be added before the end div of container.
I have a pre-code page coded as follows:
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video"></div>
<div class="content"></div>
</div>
</div>
Where linearBg is a gradient background, the back board of the website.
Wrapper is the container for the inner div's, and the rest are content oriented.
So I've already implemented this with styles and all sorts, but the thing is I want to add:
<div class="watermark"></div>
Underneath/behind both the content and video div, sort of like a reverse watermark,
I've tried z-indexing but I'm not an expert. Could you guide me on to do make this possible?
http://jsfiddle.net/nEWCP
All I need is to get the watermark behind both the video and content div's.
Something like this?
http://jsfiddle.net/yXTYM/3/
The trick is:
position: relative on the video and content div
position: absolute on the watermark div and no positioning, so that it starts where the previous element (nav) ended
height: 100% on the watermark so that it spans to the bottom of the wrapper
overflow: hidden on the containing div so that the watermark doesn't extend below it
Let me know if this is what you had in mind.
From your description, I don't think that you would even need a new HTML element. If you want a "reverse watermark" as you've described it, it sounds like you want a different background behind the content and video elements. Something different from the gradient.
Really all you need to do is define a class in your CSS that adds the watermark when you need it.
Here's a basic example. The orange color simulates your watermark behind only the video and content.
.watermark { background: url('/path/to/watermark.png'); }
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video watermark"></div>
<div class="content watermark"></div>
</div>
</div>
http://jsfiddle.net/82saE/
I think I have what you're after - a wrapping element that mirrors the dimensions of linearBg - giving you a gradient background with a repeating image as well.
A bit of head scratching going on here, so any pointers would be much appreciated!
I have a header div that has the property overflow:hidden. On the left of this header is the page title, and on the right a number of images. This works perfectly well and everything shows as it should.
However, I now need to wrap these images around div tags (they will become clickable, and updated via Ajax - so I need to define the postback div for each image). As mentioned, without wrapping the image around a div tag, they show fine. However, as soon as I add the div tags, they disappear (though still show in the page source). The div tags take the simple form of and no styling is associated with them.
I'm sure I'm missing something here, but for the life of me it's totally bypassing me right now!
Thanks :-)
Your question is bit unclear for me, any way if i understood your question
If you need to have click event you can use asp:ImageButton to hold the image.
if you really need to use div
<div class="header"> // this is the one with overflow hiddden
<div class="left"> // this div holds the page title ; float:left
<h1>Title</h1>
</div>
<div class="right"> // this div to hold the divs which contain images
// if all your images are same height set the same height to this div and float:right
<div class="image"> // this div holds the image; make float:left set height and width
<img/>
</div>
<div class="image">
<img />
</div>
<div class="image">
<img />
</div>
</div>
</div>
Hope this helps
This may be the simplest question ever, but try as I might I simply couldn't figure it out. I'm working on a website right now and I wish to use as few <div> elements as possible to keep the HTML pretty and easy to edit. At the moment I essentially have:
<html doctype etc etc>
<head>
<title and meta tags>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
Very simple and elegant, yes? However the client wants their header to consist of a single large image which contains their company name and logo. So my options were pretty clear - either use an <img> tag, or set the background-image property on the header <div>. However then I got to thinking about SEO. For Google's sake it would be nice if the header <div> contained an <h1> element with her website's title, but then this element would have to be hidden so that human users only see the background image.
Although if you were to use the display:none; css property then the entire <div> disappears, including the background. Is there a good way to hide the contents of a <div> without hiding the <div> itself?
Have you tried to apply the hide on the H1 itself?
<div id="header">
<h1>Company title</h1>
</div>
Your style would be: #header h1{display:none;visibility:hidden;}
UPDATE
Apparently, we're both just having one of those days. If you want to make the H1 truly SEO/Screen reader friendly, it would be better to do this with your CSS:
#header h1{
width:XXXpx;
hight:XXXpx;
background:url('image/location.png');
text-indent:-9999px;
overflow:hidden;
}
This way your text is actually there on the page and rendered, it's just kind of off screen.
You could replace #header div with h1 if you want this tag, set background image on said h1 and even put some text in it (company name) and use text-indent to hide it.
Plus, in your quest to minimize number of elements you can use body as a wrapper, and if you need full page background just set in on html element.
Set display: none on the H1 tag rather than the div, and use the background image on the div.
The code goes:
<div id="wrapper">
<div id="content">
<!-- content -->
</div>
<div id="sidebar">
<!-- sidebar -->
</div>
</div>
I apply a background-color to wrapper, but it does not show unless I set a fixed height. Why does it do that considering content and sidebar are filling wrapper? What other ways are there to get the background-color to appear without setting a fixed height?
As someone said in the comments, if their were floated (which they are), then apply overflow: hidden (which worked).
What other ways are there to get the
background-color to appear without
setting a fixed height?
Float #wrapper
Use a clearfix.
Make sure you have content :)
Make sure #wrapper is display:block or inline-block
Add padding
One way to check, besides Firebug, is set border:1px solid red, and see if you get a 2px line or if you see the border as you would expect. If you see the normal border, there is another problem: time to post your CSS.
Here's a quick-and-dirty clearfix you can try for now, see if this helps:
<div id="wrapper">
<div id="content">
<!-- content -->
</div>
<div id="sidebar">
<!-- sidebar -->
</div>
<br style="display:block;clear:both;width:100%" />
</div>