my #slides is 800px and each li is 200px wide, so why 4 lis does not fit in one row?
jsFiddle
<div class="carousel-container">
<div class="slides">
<ul>
<li>
<div>some html</div>
</li>
<li>
<div>some html</div>
</li>
<li>
<div>some html</div>
</li>
<li>
<div>some html</div>
</li>
</ul>
</div>
</div>
I cant say I know the answer but changing
display: inline-block;
to
float:left;
Will accomplish the desired result (fiddle)
UPDATE
As CBro said (and he deserved full credit, should he post an answer), condense the spaces between </li> and <li> (fiddle 2)
You can also eliminate the whitespace between the lis by removing the closing </li> tags. They are optional anyway.
Related
I have created a custom alignment of li tags that I want to use in a CSS media query. Here is a JFiddle how it should look:
https://jsfiddle.net/4fwx7rbj/1/
The li are centered in their container and the text is centered with the list images. Now I tried to use this together with a media query:
https://jsfiddle.net/ro7gj60h/
What should happen is, that the .half-width div take 100vw and the list gets aligned like in the first snippet. However this does not really work as expected, could someone help me what I am missing?
Thanks a lot.
Here the HTML for a quick overview:
<div class="container">
<div class="half-width section3">
<div class="half-width-content">
<div class="middle-text">
<h2>A Headline</h2>
<p>
Some paragraph
</p>
<div class="list-div" id="A">
<ul class="items-list" id="list">
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
</ul>
</div>
<img class="hand-writing-img" src="https://fakeimg.pl/498x50/?text=this is some image">
</div>
</div>
</div>
</div>
the display flex in class #media (max-width: 768px) and (min-width: 500px)
.list-div {} shrinks the ul
If I have the following HTML. Why does the content of the li drop down a line?
I am looking for an explanation of the behaviour and how to fix
<html>
<body>
<div>
<ol>
<li>
<div>
<div style='width:65%;float:left;'>
Left Text
</div>
<div style="width:35%;float:left;font-style: italic;">
Right Text
</div>
<div style='clear:both;'></div>
</div>
</li>
</ol>
</div>
</body>
</html>
<html>
<body>
<div>
<ol>
<li>
<table>
<tbody>
<tr><td>left</td><td>right</td></tr>
</tbody>
</table>
</li>
</ol>
</div>
</body>
</html>
The DIV's are set as display: block by default, therefore it does not stay in the same line as the LI..
If you set it as display: inline; it will force it to stay in the same line
<html>
<body>
<div>
<ol>
<li>
<div style="display: inline;">
<div style='width:65%;float:left;'>
Left Text
</div>
<div style="width:35%;float:left;font-style: italic;">
Right Text
</div>
<div style='clear:both;'></div>
</div>
</li>
</ol>
</div>
</body>
</html>
Edit:
as Billy said there is an issue with the floats, but changing them to inline-block adds another issue, the margin look at this explanation
Adding a SPAN instead of a div won't solve the issue, because the difference is that the SPAN is display: inline; by default, (the same as we have now with the DIV)
<html>
<body>
<div>
<ol>
<li>
<div style="display: inline;">
<div style="width:65%;display: inline-block;margin-right: -2px;">Left Text</div>
<div style="width:35%;display: inline-block;font-style: italic;margin-left: -2px;">Right Text</div>
</div>
</li>
</ol>
</div>
</body>
</html>
So I'm trying to add a navbar to the footer of my pages in jQuery Mobile, with three list items. The first and last are data icons, while the one in the middle is simple text. The problem is that the middle item (Contact Us) is shorter than the other two, and I can't figure out a way to get them to all be equal sizes. Here is my code:
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed">
<h1 style="width:90%; margin:0 auto;">Title</h1>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li></li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</div>
</div>
Any ideas?
Here is a Fiddle. Thanks!
I have added simple padding on contact us Hyperlink:
.contact-us{padding: 12px;}
Here is footer markup:
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li></li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</div>
DEMO
Note: This height issue is just because of Icon on Navbar taking
different height them text. Use custom css is pretty nice idea.
QUESTION: I am trying to get my {{TEXT}} or ".acton" section to remain centered in the body of the page and between the footer and header at all times.
I'm using this template to build out landing pages in a marketing automation software called ACT-ON. So hopefully whatever fix we can put in for the body content to remain centered will take.
Here is my jsfiddle:
http://jsfiddle.net/misterizzo/dMu79/
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Hopefully this is my last questions on this template i've been building.
I sincerely appreciate all the help from everyone so far!
you can easely use the display : table,table-row/table-cell properies along with : vertical-align:middle; if your HTML is valid and with the structure needed.
Reset CSS should be loaded in front of your own CSS, it will, as well, avoid to use !important.
// comment // is not a valid comment in CSS, but /* comment */ is.
http://jsfiddle.net/dMu79/7/
basicly the structure is :
<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>
Here is one solution that may work for you:
Demo Fiddle
CSS:
.acton {
width: 900px;
position: relative;
margin-left: auto;
margin-right: auto;
height: auto;
top: 106px;
}
You're HTML is broken in places and is missing a closing div. I've fixed it in this Fiddle and the updated code is below:
<div id="header">
<div id="top-left">
<img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li>
<span class="button">NewsWorthy</span>
</li>
<!-- the closing span's were after the closing A -->
...
</ul>
</div>
</div> <!-- this div was missing -->
I fixed it by setting a margin top in the .action section.
Also I removed the position-right and position-left
Notice that the margin-top is set to 40%. This is because it takes in to account the nav and the footer. You can play with the margin depending on the other content that is added above it or below it.
working jsfiddle
http://jsfiddle.net/dMu79/9/
.acton {
width: 900px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40%;
text-align: center;
}
I am trying to achieve a layout like the image in the link below. It's basically a set of list items that contain some text and then a large number to the right. I am wondering if it would be possible to distribute the text where it's outputted over 2 lines even though there is no fixed width on the list item elements
Additionally, i am looking for a cross browser solution to vertically align the text and the numbers inside the LI. It needs to work in IE7+ without any javascript
Try this
<ul>
<li>
<div class="top">To</div>
<div>For Submit<span class="number">50</span></div>
</li>
<li>
<div class="top">To</div>
<div>For Submit<span class="number">50</span></div>
</li>
<li>
<div class="top">To</div>
<div>For Submit<span class="number">50</span></div>
</li>
<ul>
CSS
ul {
list-style:none;
font-size:14px;
margin:0;
padding:0;
}
ul li {
background-color:gray;
display:inline-block;
padding:5px 10px;
}
.number {
margin-left:10px;
font-size:20px;
}
JS Fiddle Demo
First solution: navigation bar
I think that you need basically a navbar.
Twitter Bootstrap navbar is the best thing you can chose I say.
See the documentation.
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
See live example: JSFIDDLE.
Second solution
Also, you can use rows and spans.
Documentation is here.
Example:
<div class="row">
<div class="span1">Text 1</div>
<div class="span1">Text 2</div>
<div class="span1">Text 3</div>
<div class="span1">Text 4</div>
<div class="span1">Text 5</div>
<div class="span1">Text 6</div>
</div>
JSFIDDLE