I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
Related
The picture is the layout that I want but when you hover, everything gets messed up. The div's start shifting around and moving horizontally when the next div italicizes. How can I maintain this exact layout 100% of the time?
.project-link {
font-family: 'UtopiaStd';
color:#010202;
font-size:5.6vw;
white-space:nowrap;
text-decoration:none;
margin-right: 3%;
line-height:125%;
border-bottom: solid transparent 2px; }
https://jsfiddle.net/zjkouzbo/1/
Solution 1:
You had the right idea with trying white-space:nowrap. To keep your first two links together and keep them on one line, wrap them in a parent element and apply the white-space:nowrap to that parent element. If you have that on both the anchor elements and the parent elements, then you won't break the lines in the middle of a link or between them.
<div class="line">
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a>
<a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
</div>
CSS
.line{
white-space: nowrap;
}
New fiddle: https://jsfiddle.net/zjkouzbo/2/
Solution 2:
Place a non-breaking space between the anchor elements that you want to keep on the same line using the HTML entity . Just make sure that you take out any other spaces, including line breaks, between the two elements. This makes your code a little annoying to read, but it doesn't suffer from the "div-itis" that solution one does.
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a> <a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
Second fiddle: https://jsfiddle.net/zjkouzbo/3/
Since the <a> tag is an inline element, it will adjust which 'line' it is on as the parent block element changes width, or in your case the link width changes size. If you want to keep a the particular layout where link 1 and 2 are on the same line, but different lines from the rest, you should organize each group in a block element.
<div class="project_miniwrap">
<div class="group-block">
<a>Link 1</a>
<a>Link 2</a>
</div>
<div class="group-block">
<a>Link 3</a>
<a>Link 4</a>
</div>
</div>
adding
display:inline-block
and removing the line breaks you added to project-link solves the issue.
https://jsfiddle.net/70dceskq/1/
Does anyone can create a JSfiddle code to demonstrate how to integrate two or more anchor tags in the same li item? I have searched but no clear answer of how could you for instance divide the li element with lets say 3 square anchors 1/3 each. Do you for example need to add div tags to each anchor?
eg.
<ul>
<li>
</li>
<li>
</li>
You can use the jQuery Mobile grid:
http://demos.jquerymobile.com/1.4.5/grids/
e.g.:
<li>
<div class="ui-grid-b">
<div class="ui-block-a">
<img src="http://lorempixel.com/80/80/food/1/" />
</div>
<div class="ui-block-b">
Some text
</div>
<div class="ui-block-c">
Delete
</div>
</div>
</li>
Here is a simple DEMO
NOTE: you can then use CSS to tweak widths, margins, padding, etc. to taste.
Let's say, as you asked, you have 3 elements:
<div class="your_three_elements">
<img src="..." alt="..." />
Your Text
Your Button
</div>
So you have to have one link per one target. But those things aren't anchors. An anchor would be something like this:
<div class"your_anchorlink">
Your Link
</div>
<div id="gototext">
When you click on the link, you will get to this text (which is on the same page).
</div>
You could combine that by having a link go_to_some_page.html#gototext which will open the go_to_some_page page and jump to the id gototext.
But maybe I am missunderstanding what you want to do.
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 have a list of span elements inside a div:
<div id="mediaListHolder">
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
</div>
I would like to place numbers in front of span items like it was an ordered list.
Here is the fiddle:
http://jsfiddle.net/nqq3c/2/
Is it possible?
Thank you!
a Div inside a span is not legit HTML. Block elements do not go inside of inline elements.
You can, however set the span to display:list-item -- you'd also need to use list-style-type attribute as described here
Note, I've not actually done this, but it's what would need to happen providing the browser allows it.
Listview has a data-inset property to make its corners rounded. However, I can't use listview because my list is a nested list and the frameworks default behavior is hide the nested list and show it once the its primary list is clicked. So, I chose to use a ui-grid view inside the primary listview row which looks like below:
<ul data-role="listview">
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li>
<li>
<div class="ui-grid-b">
<div>Secondary Title</div>
<div>Content.....</div>
<div>Blah Blah</div>
</div
</li>
<li>Footer</li>
</ul>
My problem is the ui-grid's corners should be rounded. I tried to put data-inset="true" but didn't work.
You can use the classes that jQuery Mobile adds to widgets, in this case you're looking for the ui-corner-all class which puts corners on all four corners, and then you will probably want the box-shadow that ui-shadow applies:
<div class="ui-grid-b ui-corner-all ui-shadow" style="padding: 5px;">
I added the padding because the grid element didn't have any by default. Also there are the ui-corner-top and ui-corner-bottom classes that only round the top/bottom of the element to which they are applied.
Here is a demo: http://jsfiddle.net/VXrxv/
If instead you want to round the li element that is the parent of the ui-grid element you can add margin to them:
<li class="ui-corner-all ui-shadow" style="margin: 5px;">
Here is a demo: http://jsfiddle.net/VXrxv/1/
Try with css property border-radius. For example, try border-radius: 0.5em 0.5em;
On the Bootstrap the rounding is effected;
This seems to be the quickest solution for me;
Wrap mist widgets with the following div
<div class="k-block" style="padding:0px">