I am very new to css and don't have much knowledge about it.
I have a mvc application which uses a theme that is built based on bootstrap.
And in my _layout view I have this code
<div class="container body-content">
#Html.Partial("_alerts")
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year -myApp</p>
</footer>
</div>
I'm guessing that all my view will be wrapped by container body-content class.
Which is fine, because my web app's content is not displayed in full width stretched.
But my home page(landing page) let's say. Has a slider and because of the container body-content class it is not being shown in full width.
This is how my home page starts
<div class="fullwidthbanner-container" style="overflow:visible">
<div class="fullwidthbanner">
<ul>
<!-- Slide 1 -->
<li data-transition="slideright">
...
...
...
</div>
and here is the class for fullwidthbanner-container
.fullwidthbanner-container {
width: 100%!important;
max-height: 550px!important;
position: relative;
padding: 0;
overflow: hidden!important;
margin:0px 0 0px;
}
How do I make my home page be not wrapped aroundcontainer body-content?
Please let me know if I have to provide more details.
You can try the following:
In your _Layout.cshtml add a code block before your HTML:
#{
string classToSet = "";
string action = ViewContext.RouteData.Values["action"] as String;
string controller = ViewContext.RouteData.Values["controller"] as String;
//you might need to check for nulls
if (!(action == "Index" && controller == "Home"))
{
classToSet = "container body-content";
}
}
You can then set the class using Razor:
<div class="#classToSet">
#Html.Partial("_alerts")
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year -myApp</p>
</footer>
</div>
Simply change the place you put the #RenderBody() and re-structure the layout page
for example you can do this
<body>
#RenderBody()
<div class="container body-content">
#Html.Partial("_alerts")
<hr />
</div>
<footer>
<p>© #DateTime.Now.Year -myApp</p>
</footer>
</body>
By doing so you you view will not affect by the div with class container, body-content
Related
I'm learning Reactjs and am wondering about JSX parsing. It looks like I'm getting the error "Unterminated JSX Comments" because I'm not closing out each open tag within it's respective class. Is this true? And if so, what would be an elegant way of correctly placing my <html></html> tag in a modular way? I'd prefer not to place it directly in App.
class App extends Component {
render() {
return (
<div className="App">
<Header/>
<Body/>
<Footer/>
</div>
);
}
}
Header Class:
class Header extends Component{
render(){
return(
<html> {/* <!-- HTML tag is OPENED --> */}
<head>
<title>
Data Uploader
</title>
</head>
<body>
<div class="content">
<div class="nav blue">
<div class="logo">
<img SRC="./images/logo.png"/>
</div>
<div class="title">
Data Uploader
</div>
{/* End of nav */}
</div>
);
}
}
Body Class: {Use your imagination. Some content goes here}
Footer Class:
class Footer extends Component{
render(){
return(
<div class="footer">
<div class="footer_text">Data Uploader | Copyright 2017 | Developed by Me</div>
{/* <End of footer */}
</div>
{/* End of content */}
</div>
</body>
{/* <!-- HTML (and body) tag is CLOSED--> */}
</html>
);
}
}
got an issue with updating partial views within my application.
Basically, after the login procedure the user will be redirected to a selection of archives to choose.
It should lead to a searchmask to enter some criterias to search for.
What I got is this:
#_Layout.cshtml
<div id="_pview">
<div class="container body-content">
<div class="_pviewcontent">
#RenderBody()
</div>
</div>
<footer class="footer">
<hr />
<a class="copyright">#Html.ActionLink($"© Copyright 2006 - {#DateTime.Now.Year} MyCopyright", "Index", "About")</a>
</footer>
<div id="loading_image" class="loading" style="display: none;"></div>
</div>
#ArchiveSelection/Index.cshtml
<div id="container">
<div id="_divpartialview">
#{Html.RenderPartial("_ArchiveSelection", Model);}
</div>
</div>
#ArchiveSelection/_ArchiveSelection.cshtml
<table class="table">
#{
if (Model != null) {
foreach (var item in Model.FileCabinetList) {
<tr>
<td>
#Ajax.ActionLink(item, "Index", "SearchMask", new {filecabinet = item}, new AjaxOptions {UpdateTargetId = "_divpartialview", LoadingElementId = "loading_image"})
</td>
</tr>
}
}
}
</table>
#RenderBody/RenderPartial() will show the list below the navigation bar.
After updating the div container with a partial view, it moves into the navigation bar.
#SearchMask/_SearchMask.cshtml
<div style="height: 500px;">
<div>
<div style="height: 500px; width: 330px; float: left; background-color: aqua"></div>
<div style="height: 500px; width: 330px; float: left; background-color: gray"></div>
<div style="clear: both;"></div>
</div>
</div>
As you can see the container div (_divpartialview) moves right into the navigation bar after updating it.
Any idea what I am missing or doing wrong?
Regards
Finally resolved it on my own.
I now feel pretty embarassed, because it was so simple. It was just a css template, that was colliding with bootstrap css.
Due to improper naming of some css classes this was the result.
Im kinda new to this, so don't laugh at me too hard :D
I am trying to get the slider to work here and think I have the code but something isn't working right. It is only showing the image in the CSS and not rotating through the other ones.
Script in Header:
var images=new Array('/images/home/AC-InStock-Rotating.jpg', '/images/home/AC- MXV-Rotating.jpg', '/images/home/AC-Rental-Rotating.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.home-middle-part')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
Body:
<div class="home-middle-part">
<div class="container clearfix">
<div class="grid_12 omega" >
<div class="grid_6 omega" >
<div style="padding-left: 10px;">
</div>
</div> <!-- end of grid 6-->
<div class="grid_6 omega" >
<div>
<table>
</table>
</div>
</div> <!-- end of grid 6-->
</div> <!-- end of grid 12 -->
</div> <!-- end of container clearfix -->
</div> <!-- end of home-middle-part -->
CSS
.home-middle-part {
background-image: url("/images/home/body-image banner1.jpg");
background-repeat: no-repeat;
}
You script in the header is running before the browser knows that .home-middle-part exists. You need doSlideshow(); to run after the HTML has been parsed. You can do this by moving your script tag the bottom of the page or you can wrap your call to doSlideshow() in $(document).ready() like so:
$(document).ready(function() {
doSlideshow();
});
960 grid is great and after downloading it, I noticed that demo.html contains at the end examples of the .push and .pull classes like this one:
<div class="grid_6 push_6">
<div class="grid_1 alpha">
<p>
60, class = "grid_6 push_6" => class = "grid_1 alpha"
</p>
</div>
<!-- end .grid_1.alpha -->
<div class="grid_5 omega">
<p>
380, class="grid_6 push_6" => class="grid_5 omega"
</p>
</div>
<!-- end .grid_5.omega -->
<div class="clear"></div>
<div class="grid_3 alpha">
<p>
220, class="grid_6 push_6" => class="grid_3 alpha"
</p>
</div>
<!-- end .grid_3.alpha -->
<div class="grid_3 omega">
<p>
220, class="grid_6 push_6" => class="grid_3 omega"
</p>
</div>
<!-- end .grid_3.omega -->
</div>
<!-- end .grid_6.push_6 -->
The home page gives a link to a fluid grid system under the title "Custom CSS Generator" which strangely skips to include the above test (press "preview" to see a test).
I decided to add such a test as the css of the fluid grid DOES have these classes!
1) I immediately noticed that there is a problem when you try for example to set a background color in the outermost containing DIV: it doesn't fill the whole content to include my test (contained) cases at the bottom!
What was more strange was the fact that when I used the .clearfix from the css file that I took from the original site (960.gs) the problem was fixed! i.e. this one:
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
content: ' ';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.clearfix:after,
.container_12:after {
clear: both;
}
2) The biggest problem remain with my DIV test cases with classes "grid_6 pull_6" or "grid_6 push_6", which contain DIVs that are shrinked and don't expand in their full width!
Does anybody knows a solution for a fluid grid 960 template that does succeed to present the .pull and .push classes adjacent to each other?
See my point at jsbin.com: try to resize your browser (pixel sizes do not hold, use a picture as background to investigate further)
Thanks!
This solves the problem: "percentages in block elements are based on the width of their parents".
So, even if our "alpha" and "omega" classes are also class "grid_5" or "grid_3" they take 5 or 3 columns out of 12 of their containers which are "grid_6" and NOT of their grand-parent, i.e. "container_12"; that's the big difference from the static template where the measurements are hold on pixels and have nothing to do with parents or grand-parents.
The above calculations should be considered proportionally: a "grid_6" with 1% margins left and right per grid in a-just happened-960px container = a total width of 6*60+5*20 = 460px or 47.916%*960/100 (where the width in the CSS2 box model is defined as border+padding+context and not the broken one of <=IE7 in quirks mode).
Taken the above result of 460px for a "grid_3" child we should measure 22.916%*460/100 = 105.41px and Chrome Developer Tools gives us almost that number as long we resize the window to reach a 960px "container_12"!
Rule of thumb: "the sum of grids in a sub-container should be equal to 12".
So, the above example should become:
<div class="grid_6 push_6">
<div class="grid_2 alpha">
<p>60, class = "grid_6 push_6" => class = "grid_2 alpha"</p>
</div>
<!-- end .grid_2.alpha -->
<div class="grid_10 omega">
<p>380, class="grid_6 push_6" => class="grid_10 omega"</p>
</div>
<!-- end .grid_10.omega -->
<div class="clear"> </div>
<div class="grid_6 alpha">
<p>220, class="grid_6 push_6" => class="grid_6 alpha"</p>
</div>
<!-- end .grid_6.alpha -->
<div class="grid_6 omega">
<p>220, class="grid_6 push_6" => class="grid_6 omega"</p>
</div>
<!-- end .grid_6.omega -->
</div>
See at jsbin.com.
I'm new and i have a question about CSS3 and :empty pseudo-class.
I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:
#my_sidebar:empty { display:none;}
For display it when isn't empty i wrote
#my_sidebar:not(:empty) { display:block; }
This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?
Thanks! (excuse me for my terryfing english!!)
EDIT:
the html page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1>Project Management</h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and css:
.sidebar {
float:right;
width: 36%;
text-align:left;
}
The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).
As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)