I have a tile that displays information but also needs to be a link. If the user clicks anywhere on the tile it needs to take them to the appropriate action.
Below is an image of what I have created.
The HTML
<div class="tile">
<div class="tile-text">Runs</div>
<div class="tile-text details">Manage runs, routes, races, and goals</div>
<div id="runs" class="tile-text live">You have a four mile run today</div>
</div>
Now if I create an ActionLink, it will create the blue tile, but I am unsure of how to get the three child divs inside of the ActionLink.
I have tried the following ActionLink:
#Html.ActionLink("Runs", "Index", "Run", null, new { #class = "tile-text" })
This creates the following image:
So basically, how do I get the tile to link to the Action and still have all of the three child divs inside of it?
You could add a onclick="window.location.href='link'" attribute on the tile <div>, and style it with cursor: pointer to make it look like a link, if needed.
Example:
<div class="tile" onclick="window.location.href='link'">
<div class="tile-text">Runs</div>
<div class="tile-text details">Manage runs, routes, races, and goals</div>
<div id="runs" class="tile-text live">You have a four mile run today</div>
</div>
Or you could make the tile <div> be an <a> element and style it to be display: block and to include the appropriate width and height, then make all its children <span>s with display: block.
Example:
<style type="text/css">
.tile, .tile-text { display: block; }
// You could add width and height to .tile if needed.
// Also, if you want to put tiles next to each other, inline-block for .tile
// would be more appropriate.
</style>
<a class="tile" href="link">
<span class="tile-text">Runs</span>
<span class="tile-text details">Manage runs, routes, races, and goals</span>
<span id="runs" class="tile-text live">You have a four mile run today</span>
</a>
You need to have the blue tile as an actual image. This clickable image should be placed in a div.
With CSS you can then put the image behind the text content using z-index / absolute positioning.
This is a quick implementation of Radu's option 2.
All you need to do now is tidy it up and move the inline css into the css for your a class called title.
<body>
<a class="tile" href="#" style="width: 200px; height: 300px; background-color: lightblue; display: block;">
<h3 class="tile-text">Runs</h3>
<p class="tile-text-details">Manage runs, routes, races, and goals</p>
<p class="runs" class="tile-text-live">You have a four mile run today</p>
</a>
</body>
Related
I generated code for an HTML view page, to show BS Tool Tip against each column in the table. The content of the Tool Tip, also table-like structure. I made it using divs, but on div has long content not aligned correctly as a table
can you help me to correct this change?
Severity level is the second row, the value against the severity level is the long one. I need to align the severity level against the starting of the corresponding value
HTML (generated through rails template)
<div data-toggle="tooltip" data-placement="right" data-html="true" title="" data-animation="true" data-original-title="
<div style = 'width:200px,'>
<div class ='tool-tip-cells'>Repair Method </div>
<div class ='tool-tip-cells'> Repaint </div><div class ='tool-tip-cells'>Severity Level</div>
<div class ='tool-tip-cells'>Damage 2.5cm to 7.5cm in length and/or diameter</div>
<div class ='tool-tip-cells'>Estimate No.</div>
<div class ='tool-tip-cells'>9176863</div>
<div>">Rear Bumper RHS (Scuffed)</div>
CSS
.tool-tip-cells{
text-align: left;
width: 100px;
display: inline-block;
}
You can try this code :
vertical-align: text-top;
There is a bootstrap carousal(full-width) on my page and the carousal have registration form an i want to bring the form below the carousel on resizing the screen,I am using media queries but my form is coming above the text of my page below is my screenshot and code can anyone help to sort the problem
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/corousal1.jpg');"></div>
<div class="carousel-caption">
<h3><strong>Healing People,</strong>Changing lives<br/>
Personalized Treatments that are safe,
Sure and Scientific
</h3>
</div>
</div>
<div class="multi-form">
<form id="msform">
<fieldset>
<input type="button" name="next" class="next action-button btn-btn-primary" value="Book An Appointment">
<button type="button" class="next action-button btn-btn-primary" style="background-color:#3B5998 !important;"><i class="fa fa-facebook" aria-hidden="true"></i> Connect With Facebook</button>
</fieldset>
</form>
</div>
media queries
#media (max-width:786px) {
.multi-form {
margin-top: 400px;
height: 100%;
z-index: 1000;
display: block;
}
}
full page screenshot
Responsive page screenshot
Have you tried with absolute position ? you can design the div with absolute position and values in %.
For Example :
.multi-form {
position:absolute;
top:20%;
right:0%;
left:0%;
bottom:0%;
}
This will work for all resolution.
EDIT :
Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.
You'll definitely want to check out this positioning article from A List Apart.
And finally please try to make my corousel is absolute positioned and my form is relative positioned. So that your component will work in all resolution as your expectations.
I am using angularjsJS to create a list with the ng-repeat directive. This list contains 3 divs inside itself, which are layed out using floats. The idea is to change the background color of the entire div whenever the user moves the mouse inside the div's area. Below is the code I am using:
HTML
<div class="concert-item" ng-repeat="(key, concert) in value">
<div class="selfie item-float-left">
<img alt src="[[[concert.author.selfie]]]" class="img-circle"/>
</div>
<div class="item-float-left">
<p class="event-header">[[[concert.author.displayName]]]</p>
<p>[[[concert.venue]]]</p>
<p>[[[concert.dateInMs | timeFilterShort]]] # [[[concert.beginTimeShort]]]</p>
</div>
<div class="item-float-right">
<a href="https://maps.google.com/?q=[[[concert.street]]],[[[concert.zipCode]]]&output=classic" target="_blank">
<img alt src="{{static '/img/MapIcon#50px.png'}}"/>
</a>
</div>
<div class="clear"></div>
</div>
CSS (less)
.concert-item :hover{
background-color: #light-gray-font-color;
}
With this code, when the user hovers over any of the div's children, only the background of that child element is modified. The rest of the div's area is not affected by the :hover setting.
I would appreciate is someone can provide any pointers about how to make the whole div's area change its background color when the mouse moves inside any point within the div's area.
You need to apply the :hover to the actual parent div. If you lose the space in your LESS so it looks like this:
.concert-item:hover{
background-color: #light-gray-font-color;
}
It should work the way you want.
I am trying to adjust the CSS so the "product" and product information is centered and not floated to the left I cannot adjust the HTML as its given via a shortcode thats added into the WP post but maybe I could wrap it in a div?
HTML:
<ul class="products ribbon">
<li class="product last first">
<a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/">
<div class="thumbnail">
<span class="onsale">Sale!</span>
<img width="325" height="325" src="http://dailybabydeals.co.nz/wp-content/uploads/2013/02/Front-Page-325x325.jpg" class="attachment-shop_catalog wp-post-image" alt="Front Page" />
<div class="thumb-shadow"></div>
<strong class="below-thumb">Estella Rose Designs</strong>
</div>
<span class="price"><span class="from">From: </span><del><span class="amount">$25</span></del> <ins><span class="amount">$19.95</span></ins></span>
</a>
<div class="buttons">
Select options</div>
</li></ul>
CSS:
CSS
Okay, let's try this again now that I understand your question better. So you want to center the <ul> element as a whole? That is a lot simpler than what I originally thought you were going for.
To do that, all you need to do is wrap the <ul> element in a span tag that is set to display as an inline-block. Then set the containing element so that its text is centered.
Try this:
<html>
<head>
<style language="text/css">
/*<![CDATA[ */
#test1 {
text-align: center;
}
#test2 {
display: inline-block;
text-align: left;
}
/* ]]> */
</style>
</head>
<body>
<div id="test1">
<span id="test2">
<!-- Place your <ul> element here -->
</span>
</div>
</body>
</html>
how it works
The "test2" element is set to display as an inline-block, which means it displays inline with the text. This means that it can then be affected by properties that manipulate lines of text, such as "text-align".
Setting "text-align" to "center" on the "test1" element makes the inline content -- the "test2" element in this case -- within it become centered on the screen.
The standard way to center a block is to set the "margin-right" and "margin-left" properties to "auto", but that only works for elements that are displayed as blocks and that have a width that is less than 100%.
I would just put it in a div and float it next to another div with nothing in it.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Like in step 8 in this link.
The reason that it looks like the text "Sale!" is floated to the left is that <img> elements display as inline blocks by default, so the image is on the same line of text as the words "Sale!". A <br /> tag immediately following the text "Sale!" would solve that problem; but you said you can't modify this HTML, right?
Given that restriction, here is how I was able to solve the problem...
Surround the HTML from your example in a <span> tag and assign it a class. I used "test" as my class name".
Then Place this CSS in the head of the HTML document:
<style language="text/css">
/*<![CDATA[ */
.thumbnail img {
display: block;
}
.test {
display: inline-block;
}
.test .price, .test .below-thumb {
display: block;
text-align: center;
}
/* ]]> */
</style>
why it works
The selector for making the image display as a block solves the problem of the missing <br /> tag.
The span tag with which you surrounded the HTML displays as an inline block. This means that it will collapse around its contents, giving you a box within which you can center the text.
Making the items that contain the text display as a block causes them to take a width of 100%, filling the surrounding box
The inclusion of "text-align: center" is what finally makes the text display as centered within its container
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me