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 having trouble with aligning DIV tags. I am making a very basic page with Lightbox. In the old days, I would just make a table, align every cell vertically to the bottom, and move on. But trying to use DIV tags, having some trouble. When I do the code below, its pretty jumbled. 2 shorter DIV containers may align on one "row". Can someone point to me the best way to achieve this?
HTML CODE
<div id='wrapper' style='width:924px;>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
...
</div>
Thanks!
See this fiddle. use a class instead of inline styles. I'm using inline-block here instead of float. the result is the divs are aligned at the bottom instead of the top. but be aware of whitespace in the code. see how I smashed your divs together. If there is whitespace a width of 33% is too much and will knock the third div down a line.The width of 33% is one third of the container so they each take up the same width.
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
Here is what I have.
I played with DIV tags but still cannot figure out how to use them to design this page?
one of the problems I am having is that I cannot correctly align the "Alias" label with its TextBox that is under it...and also putting these controls on the same line - for example Reference Sequence and Ancestry is another problem I could not fix yet.
Tables shouldn't be considered unless it's truly tabular data. I'd recommend the blue and green spaces be div elements with set widths, floated left. The grey div should be cleared. The green and blue sections seem to be separated for layout convenience and are not related content, so I wouldn't recommend fieldset over div elements.
If you give label and input/select elements set widths and use display: block, the label display shouldn't be problematic. The Not Found link and checkbox seem to be the only unique parts to the form.
Float the top 2 divs (blue and green), set a width for each of them and toss a margin-right on the blue one (or a margin-left on the green one) to get the red space you want.Then have the bottom div clear so it skips onto the next line.
As for the "Alias" label and alignment issue, I'd suggest using an unordered list with list-style:none. Each label would go on its own li, as would each input. This should automatically line them up left justified, as is the case with your current form. Plus it has the benefit of not having to hard-set the width (if that's something that can be said to be an issue in this case).
example markup
<li><label>Alias</label></li>
<li><input type='text'></li>
Try this. It is likely that it will work.
You may have to tweak few style values for your needs.
<div style="clear:both">
<div id="topLeft" style="float:left;width:400px;padding:7px">
<div style="clear:both;margin:5px 0">
Gene Symbol
</div>
<div style="clear:both;margin:5px 0">
//drop 'Gene Symbol Search Box' here
</div>
//repeat Gene Symbol like divs for other elements
</div>
<div id="topSeparator" style="float:left;width:10px">
</div>
<div id="topRight" style="float:left;width:400px;padding:7px">
<div style="clear:both;margin:5px 0">
Alias
</div>
<div style="clear:both;margin:5px 0">
//drop 'Alias Box' here
</div>
//repeat Alias like divs for other elements
</div>
</div>
<div style="clear:both;margin:10px 0 0 0;padding:7px">
<div style="clear:both;margin:5px 0">
//drop checkbox here
</div>
<div style="clear:both;margin:5px 0">
//drop buttons here
</div>
</div>
What is the differences between Float vs Display:inline? by default everything goes to left side in every browser. then 2 display inlined elements should be worked same like float:left.
http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline
display:inline means a element is will "stack" next to other items, like images, spans or the bold tag. This is opposed by block level elements (display:block) which take up horizontal space, imply a line break, and will not sit next to one another, like divs, paragraphs, or tables.
Think of it this way...
<img /><img /><img />
<div />
<div />
<div />
float is a different notion altogether, moving content either left or right. By default, a floated element is inline, and floated elements will stack up next to one another.
All of these types of elements are part of the normal document flow, meaning they take up "space" in the design that cannot be shared.
There are two types of formatting: block level and inline. The block level formatting is done with a box model that uses a set of rules for layout.
Inline formatting is what text normally gets. It means, informally, that things are filled into lines.
At times, you want to change the default formatting an item will get. Something that normally might be block level formatted you might want to have treated as inline. A div containing content such as graphic of a key, for example, might need to be displayed within a sentence. One might then override its formatting with display:inline. Images are already displayed "Inline"
The CSS specification has a surprisingly simple definition for floats:
A float is a box that is shifted to
the left or right on the current line.
The most interesting characteristic of
a float (or "floated" or "floating"
box) is that content may flow along
its side
So a float is a sort of third category of formatting model. It relates to inline as being, informally put, a layout model.
Although it's too late to answer, but one of the major differences that I can mentioned here is about: Clear
In float elements you should Clear your floats but in inline elements no clearing is required.
You can see a live example here: http://jsfiddle.net/K9PXF/
And this a great article about floats and clearing: http://css-tricks.com/all-about-floats/
Every browser has a "flow". The flow sort of emulates a word processor in that elements flow from left to right, top to bottom. Elements that do not fit at the end of a "line", wrap to the next "line", so to speak.
Block elements take up the full line. Inline elements only take up as much space as they need, so other elements can sit next to them on the same line. Unless there is a width declared, that doesn't happen with block elements.
Floating an element takes the elements out of the normal flow and shifts it to the left/right. The space that the object occupied before it was floated is empty, and collapses.
If I float two elements that take up more space than the line can hold, one may fall to the next "line".
#Jitendra - displaying two spans inline will put them together in the flow, yes. Floating two elements that do not take up the space of the full line will appear to do the same thing. They definitely have different uses, though.
If I wanted to have text flow around an image in a paragraph, I would float the image not use display:inline. If I wanted to create a horizontal menu from list item elements, I would use display:inline, not float.
I always remember what floating is by remembering the original <img align="left" /> which acts very similar to float:left. Basically float, floats the image to the left and wraps the text or other content around it. Without float it would display as a piece of text.
Float works similar to other document tools where you can have the text wrap around the image (or HTML element).
display: inline means that the element acts like a <span> instead of a <div>: i.e. it is not a block.
Elements that are floated are not in the normal flow of the document. Here is a good description.
ETA:
Try this code. If you can't see the difference then I can't help you.
<html>
<head>
<style type="text/css">
p.inlinel {display:inline; width: 4em;}
p.inliner {display:inline; width: 4em; text-align: right;}
p.floatl {width: 4em; float:left;}
p.floatr {width: 4em; float: right;}
</style>
</head>
<body>
<p class='inlinel'>The is an inline paragraph with lots of words.</p>
<p class='inliner'>The is an inline paragraph with lots of words.</p>
<br/><br/>
<p class='floatl'>The is a left floated paragraph with lots of words.</p>
<p class='floatr'>The is a right floated paragraph with lots of words.</p>
</body>
</html>
The normal workflow of a browser is to display the elements from the left to the right, each near the other (if inline elements) ... when a line ends because of the size of the web page, the browser starts again to display the elements from the left to the right but on the next line.
A "float" directive, on an element, forces the browser to display the element out of the normal workflow, on the top-left or the top-right side of the webpage.
The "display inline" directive forces the block elements to be displayed inline, so the browser manage these elements as explain above!
IN RESPONSE TO YOUR QUESTION: No! As I've written: the float:left force any element (block or not block), placed on any line of a web page, to be floated on the left side of the web page ... even if the text aligning is set to "right"!
If the text align is set to left, applying a float:left seams that nothing happens ... instead even in that case the element is forced to go out of the normal workflow of the browser, in fact, usually, the margin left is reseted!
The display:inline doesn't affects the inline elements ... if the text align (of the elements' container) is set to "right", a display:inline doesn't float it on the left (notice, I'm referring to inline elements)... because the "display:inline" says to the browser only to display an element in the same line of the normal workflow ... so, if an element is inline (for example a link element), this property doesn't change its behavior!
So, the "display:inline" affects only the "block" elements! But even in this case, it doesn't float left the block element, but it force the element only to be displayed in the same line of the other inline elements!
ABOUT YOUR EXAMPLE: The div(s) are block elements, the normal workflow is not inline ... so the browser, by default, shows them one below the other, like in this example:
<div class="purple" style="float:left">Link one</div>
<div class="purple">Link two</div>
<div class="purple">Link three</div>
<div class="purple">Link four</div>
even if you apply a float:left to the first div, seams that nothing happens only why it is already on the top-left corner ... where should it go otherwise!!!???
The second example ...
<div class="red" style="float:left">Link one</div>
<div class="red" style="float:left">Link two</div>
<div class="red" style="float:left">Link three</div>
<div class="red" style="float:left">Link four</div>
When you apply a float:left to adjacent div(s), force the browser to display them out of the normal workflow (As I sad, block elements appears, by default, one below each other!), floating the div(s) on the left side ... in this case one near each other. Notice that as I sad the margin are reseted ... because the div(s) are not on a ordinary line of the browser, but are only floated on the left ... again, out of the normal workflow!
In fact, the next example confirm what I sad in theory ... the display:inline force the browser to display block elements (div) on the same line respecting their default margin and padding:
<div class="brown" style="display:inline">Link one</div>
<div class="brown" style="display:inline">Link two</div>
<div class="brown" style="display:inline">Link three</div>
But the display:inline doesn't force elements to float on the left but only to be managed as inline elements, to clarify this concept look at the big difference between the two example below!
FIRST:
<div style="width:800px; text-align: right;">
<div class="brown" style="display:inline">Link one</div>
<div class="brown" style="display:inline">Link two</div>
<div class="brown" style="display:inline">Link three</div>
<div class="brown" style="display:inline">Link four</div>
</div>
SECOND:
<div style="width:800px; text-align: right;">
<div class="brown" style="float:left">Link one</div>
<div class="brown" style="float:left">Link two</div>
<div class="brown" style="float:left">Link three</div>
<div class="brown" style="float:left">Link four</div>
</div>
ABOUT THE WIDTH: the display:inline applied on a block element without a fixed width, it force the width to collapse to the minimum value (width of the content + padding), because this is the normal behavior of an inline element.
The div element, by default, has a width of 100% ... so, when you apply a float:left the width is still set to 100% but the floating on the left force the browser to manage and display its width in an unordinary way! In this case there isn't a general rule, each element has a different behavior!
Go to w3schools and try this in their editor (because the image links are entirely theirs, or you can replace the image src from your image source urls)
Then resize the windows.
What you will notice is.. That in case of display:inline, the text will split into words and some words of the text will appear in the next line. Though in the case of float:left the whole text will be displayed together as an element and will not split.
The purpose of inline is just to display everything in a LINE, though the purpose of float is to arrange ELEMENTS aligning to some dimension.
<!DOCTYPE html>
<html>
<head>
<style>
.thumb
{
float:left;
}
.thumbnail
{
display:inline;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<br>Below are the inline elements<br>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<p class="thumbnail">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<br><br>Below is the floating elements<br><br>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
<p class="thumb">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>