So I found this really nice bootstrap slider that I would like to use in my asp.net project's index html page.
For some reason if I am trying to put straight into index.html:
<!-- Half Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
... some data related to slider
</div>
it just simply won't display properly, however if I will cut this part and paste into _Layout.html right before:
// right before this div
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
it works perfectly fine. For some reason slider doesn't like to be inside another div, when it's on its own, it works great.
But obviously since _Layout.html is shared between pages I don't want have slider to be shown for every page, so I was wondering what would be the best way to solve it.
Not sure why you have problems with it being in a div (most likely you have a style on the container class, or body-content class that is interfering), however, you can create your own custom section in layout, that isn't required and only put that section in the page you want.
Put this in _layout.html where you want the slider to go:
#RenderSection("slider", required: false)
and put this in your page:
#section slider {
Your slider html here
}
not really sure why it wont work inside a div but what about using two _Layout.html ?
one for the site that needs the slider and the second for all other sites.
Related
I'm studying web development for a few months now and I generally have some problems with the front-end and the UI layout. I often have difficulties placing the elements exactly where I want them. In that case, either I use relative values and break the responsiveness of the site, or I write some rules that seem to me like hacks.
For the example, let's consider this image:
As you can see, there is a Bootstrap container, full-width background color, two classic elements inside the container and an image outside.
For this kind of layout, I'd do something like the following:
<!-- /* MAIN WRAPPER -->
<div class="pull-right">
<img src="/img/topright_image.PNG" alt="shape">
</div>
<div class="bg-red"> <!-- Red background color. -->
<div class="container">
<header class="row">
<div class="hidden-sm hidden-xs col-sm-2" id="logo"> <!-- I'm using Bootstrap 3, IIRC there's a better way to do that in Bootstrap 4. -->
<img src="/img/logo.PNG" alt="logo">
</div>
<div class="col-sm-6 col-sm-push-3" id="title"> <!-- First difficulty, how to make sure the title will always be centered without being relative to the logo and no matter its content? -->
<h1>Centered title</h1>
</div>
</header>
</div>
</div>
<div class="bg-green"> <!-- Multiple containers, just to have colored backgrounds at 100% width of the page. -->
<div class="container">
<section></section>
</div>
</div>
<!-- MAIN WRAPPER */ -->
It's a quick draft, but you get the idea. The CSS will then implement arbitrary height for the header and the section (300px and 400px), then the max-width for the container.
How to do that properly?
(And what if I want to make the logo a little above the title; between two rows?)
"Proper" is relative. Which makes this a tough question to answer. Using only TBS, this solution is how I would do it. However, I tend to favor flexbox more than TBS so I'd probably use the TBS container how you have it set up (yes, doing that to the containers is a valid way of achieving your goal. Another method I have used before, is box-shadows. Neither option is better, but now you know), and then handle each row as a flexbox or even just simply use floats and centering. This is not a very heavy layout.
If you are looking to learn how to do it "properly", I'd read other code. Specifically for TBS I'd recommend Start Bootstrap. It has a bunch of TBS themes you can look at. Look at the code, see how they do it, see what you like, start doing that.
Ultimately, in the end, it doesn't matter how you get there[1] it just matters that you do. This is a viable solution, and I don't see anything glaringly wrong or hackish.
It actually does matter. But you appear to still be in the learning
phase[2] so it doesn't matter as much so long as you are willing to
keep an open mind and correct things as they are found
We are all always learning.
I have a similar question as this thread, but the answer doesn't seem to be listed anymore. I have a list of tiles that show a property image and some relevant information. I'd like each to be a full link to another page with more information on the property.
I've made my tiles into a directive, and currently the html content of that directive is wrapped in an anchor tag. Which works to reach my specified link, however that anchor tag only matches the height of the mdGridTileFooter.
Is there a way to make the entire tile clickable? So that the user can click on any part of it and access the intended link (not just the bottom footer?
The HTML Directive:
<a ng-click="spVm.linkToProperty(proforma)" ng-href="{{spVm.path}}">
<div>
<md-grid-tile-footer class="saved-prop-address">
<div class="saved-prop-address-title" ng-bind="spVm.city"></div>
<div class="saved-prop-address-subtitle"
ng-bind="proforma.listing.update_date | date: 'MMMM dd'"></div>
</md-grid-tile-footer>
</div>
</a>
The HTML Page with the Tile List:
<md-grid-list md-cols-xs="2"
md-cols-sm="3" md-cols-md="3" md-cols-gt-md="6"
md-row-height="1:1" md-gutter="4px">
<md-grid-tile class="saved-prop"
ng-repeat="proforma in sdVm.pageGroups[sdVm.saved.idx]"
ng-click="sdVm.showSelectedProperty(proforma); sdVm.linkToProperty(proforma)"
ng-href="{{sdVm.path}}"
ng-style="{'background-image':'url({{proforma.thumbnail_url}})'}">
<pgo-saved-property proforma="proforma">
</pgo-saved-property>
</md-grid-tile>
</md-grid-list>
Thank you!
Since it looks like the directive had no height, adding any responsive height/width styling to the anchor tag won't work.
Adding this code to the css for the directive, and the anchor tag, will bring the anchor/link to the full height and width of the tile.
style="display:block;height:100%;width:100%;"
And any responsive changes that occur with the tiles will work with this code as well.
I'm a beginner in HTML/CSS and was using this Bootstrap theme for making my personal website. As you can see, the nav bar has Top, Work, Portfolio and Contact. I want to rename Top as About. For that, I replaced Top by About wherever necessary in index.html but the result isn't what I desire. The website gets messed up with the About being an inactive link. Should I change the CSS files and do the replacement there as well?
Ok so all you need to do is change <article class="container" id="top"> to <article class="container" id="about">
And change Top to About.
Now if there is CSS associated with #top you will need to change that to #about. That is all you should need to do.
I want to make htmlpage like this .
But i dont want to make 4 table for this 1 page.
What will be best way to make this (i will add some elements in cells after ) - Panel , Div , or something else ? Wait for good advice .
P.S. i write in Asp.Net / CSS .
You didn't state what contents should come on the page and how should they be placed. I'm just guessing what your page might look like and would suggest you to use the appropriate elements provided in HTML5. For the top area you could use:
<header role="banner><!-- your contents --></header>
assuming it contains title, logo or similar.
The central part could be wrapped by the element main:
<main role="main">
<section>Section1</section>
<section>Section2</section>
<section>Section1</section>
</main>
The part taking the menu i.e. navigation should be marked up with:
<nav role="navigation">
<!-- menu entries -->
</nav>
The bottom part could be marked up as:
<footer role="footer">
<!-- if you need two different containers inside -->
<div id="footer-left"></div>
<div id="footer-right"></div>
</footer>
This is just a rough example that should give you an idea how to proceed further.
Don't use tables for layouting the page as it is frowned upon. Position the elements using CSS3.
Good luck!
I am new to web-design. I want to set the page-width so that it appears well in a 800x600 resolution screen. I normally use Tables but I read somewhere that excessive use of Tables slows the performance of the website. What other thing I can use and how to set the width?
Usings DIVs rather than tables would look like this
<div style="width:800px">
<!-- your content here -->
</div>
This produces on column with the width of 800 pixels. Keep in mind that you normally may put your style definitions in an externals *.css file. In reality you will have some nested DIVs too which hold e.g. your main menu and content e.g.
<div id="wrapper">
<div id="topMenu">
<!-- menu items -->
</div>
<div id="content">
<!-- content -->
</div>
</div>
Here I have used IDs for specific items which can be addressed uniquely. It's easy to assign styles to them via CSS:
#wrapper {
width:800px;
}
#topMenu {
width:800px;
height:200px;
}
Sooner or later you will stumble upon the term "floating divs" which is another big topic.
Yes, Tables are so 1995....
Now you're supposed to use DIVs and SPANs.
http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
also, w3schools are the normal resource for html starters
but, why bother, you can use an already made layout from websites like:
http://www.freelayouts.com/websites/html-templates