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.
Related
I have created a Bootstrap carousel, and I am using custom css to define a background image for each of the three slides. For some reason, the background image is not appearing on the first slide, although the background images for slides 2 and 3 are appearing ok. I can't work out what is wrong. I think it may be something to do with the active class being applied just to the first slide?? Here is the HTML and CSS for the first slide, the carousel is called myCarousel, thanks:
HTML:
<!-- class item means item in carousel -->
<div id="slide1" class="item active">
<!--
<img src="http://placehold.it/1200x500">
-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
CSS:
#myCarousel .item { height: 400px; }
<!-- top left is the background position of the image, no repeat because we don't want the background image repeating -->
#slide1 {
background: url('images/carousel_medium_01.jpg') top center no- repeat;
}
Instead of putting your code directly on the <div class="item"> I suggest to make a nested div (replacing the image) and apply a height, width and background-image properties there instead. Like this:
HTML
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="item-custom first"></div>
</div>
<div class="item">
<div class="item-custom second"></div>
</div>
<div class="item active">
<div class="item-custom third"></div>
</div>
</div>
CSS
.item-custom {
height: 100%;
width: 100%;
}
Then for your .first, .second, and .third classes you can add the background-images you want. That should get you going in the right direction. Hope that helps.
The code above is loading the placeholder background image, but it is only visible behind the h1 element due to the lack of the parent #myCarousel div.
The CSS is looking for the parent div on which to apply the explicit height and width.
Try adding the parent div:
<!-- class item means item in carousel -->
<div id="myCarousel">
<div id="slide1" class="item active">
<!--<img src="http://placehold.it/1200x500">-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
</div>
This allows your height/width properties to be applied, and for the background image to display.
Along with crazymatt's suggestion to organize the nested elements a bit more, you can use the background-size and background-position rules to display the image as needed for each individual slide.
jsfiddle example
I have found the solution by ammending the media queries that the site was using. What I had to do was make sure that I had an explicit media query rule to cover all potential screen widths. In the media queries, I specified the background images for the carousel slides. By doing this, I found I always had the background images correctly populated. Previously, for a certain range of screen sizes, I was just letting default CSS define the background images, and this meant the background image for the first slide didn't show. I guess adding media queries for all possible screen sizes meant there was always a "trigger" to populate the background images.
Thanks also to those who offered a reply.
I have a link that looks like a button that needs to be at the center of the page horizontally.
This is the link:
Return to Top
I have tried:
style = "margin: 0 auto"
style = "text-align: center"
class="btn btn-info btn-xs center-block"
Nothing works. Is it because my ui-view is set like so this?
<div class="col-md-10 col-md-offset-1">
<ui-view></ui-view>
</div>
What should I do?
You can just wrap your button inside a div and add the text-center class to the div as follows:
<div class="text-center">
Return to Top
</div>
axc, Hi there. Along the line of what Imgonzalves has said.
You need to give some width to center something within.
Have a look at this Fiddle.
The top block you will see the button is centered.
Using the Bootstrap class text-center which is placed in the parent and then it will center all text within that div and ones within.
The parent has width because it uses the class col-md-10.
The second orange block in this demo shows you what you were trying to do.
Hope this shows you that you need to give a div some width to center the button within.
How can i add text over image ? I always get text bellow image? Is there any style so that title and descripton goes over image and not below?
<div class="row">
#foreach (var banner in Model.SportBanners)
{
<a href="#banner.LinkTo">
<img id="resize" src="#banner.BannerPath" alt="" />
<div class="#banner.ClassTag">
</div>
</a>
<div class="image" style="">
<h1>
#MvcHtmlString.Create(Html.Encode(banner.Title).Replace("-", "<br />"))
</h1>
<br>
<p> #MvcHtmlString.Create(Html.Encode(banner.Description).Replace("-", "<br />"))</p>
<br>
<br>
</div>
}
</div>
You can use positioning.
Set the position: relative of the containing element.
Set the position: absolute of any internal element that you want to take control over beyond the default behaviour. Then top, right, bottom and left will allow you to position this element wherever you want in the containing div.
This will help you position things based on your HTML where img tags are used (allowing CMS driven alts etc.), rather than setting them as background images, which will require verbose classes or inline style tags.
Please see http://jsfiddle.net/5nryk3L6/2/ for a simplified version (removes the CMS backend stuff) of your code that achieves this. I've added a margin-left on the container to demonstrate how position absolute values are relative to the next element up the DOM tree with position relative set, as this can be quite confusing
What is the correct way to make the total area of a div a link?
I have multiple div's that are small tiles and I want the total area of the div to be a link.
Should the Anchor tag wrap a span on the inside or what is the best way to do this?
<div class="l-box">
<h3>Service 1</h3>
<p>Service description</p>
</div>
<div class="l-box">
<h3>Service 2</h3>
<p>Service description<</p>
</div>
Wrap your div with and give display: block; to a
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>