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
Related
When I use the <center> tag along with the <ul> tag in my html code, The bullet points are staying on the left while the text is appearing in the center. How do I fix this?
here is the problematic code:
<center>
<h2>future projects</h2>
<div>
<ul>
<li>Weird dreams</li>
</ul>
</div>
</center>
I've tried everything I can think of, but none of it has worked.
UPDATE:
<center> is Deprecated in HTML4 onwards. So, it can be replaced using CSS as:
<div style="text-align:center">
<h2>future projects</h2>
<div>
<ul style="list-style-position: inside;">
<li>Weird dreams</li>
</ul>
</div>
</div>
Use list-style-position to center the unordered list bullets.
<center>
<h2>future projects</h2>
<div>
<ul style="list-style-position: inside;">
<li>Weird dreams</li>
</ul>
</div>
</center>
set style as list-style-position: inside; for "ul"
The center tag is deprecated.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
Use style-sheet instead...
Like here :
#center{
text-align: center;
}
#center ul{
margin:0px;
padding:0px;
}
<div id="center">
<h2>future projects</h2>
<div>
<ul>
<li>Parrot</li>
<li>stiff</li>
<li>Pining for the flords</li>
<li>resting</li>
</ul>
</div>
</div>
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.
I just started with bootstrap 3 and got stuck on an issue. I wanted to have a side menu like in this documentation which is positioned fixed during scroll down and highlights sections accordingly. I have managed to get something done very similar to this but when I resize the window to mobile size, the side menu overlaps the content instead of being on top of it. If you checked the link, when you resize the window, the sidemenu goes on top of the content.
I believe the culprit here is affix-top but I leave it to the experienced people here in stackoverflow
<body data-spy="scroll" data-target="#myScrollspy">
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Title
<small>Subheading</small>
</h1>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Sidebar Menu -->
<div class="col-md-2" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" >
<li class="active">Section One</li>
<li>Section Two</li>
<li>Section Three</li>
<li>Section Four</li>
<li>Section Five</li>
</ul>
</div>
<!-- Content Column -->
<div class="col-md-9">
<h2 id="section-1">Section One</h2>
<h2 id="section-2">Section Two</h2>
<h2 id="section-3">Section Three</h2>
<h2 id="section-4">Section Four</h2>
<h2 id="section-5">Section Five</h2>
</div>
</div>
</div>
</body>
How can this be fixed?
What you are looking for is called a CSS media query, which allows you to modify a style rule based on media features such as color, height, and width. The Bootstrap page you linked to uses min- and max-width features to change how the sidebar appears, which you can see in its CSS filenear the bottom of the page. The pertinent code looks like this:
#media (min-width: 768px) {
/* Adjust sidenav width */
.bs-docs-sidenav {
width: 166px;
margin-top: 20px;
}
.bs-docs-sidenav.affix {
top: 0;
}
}
#media (max-width: 767px) {
/* Sidenav */
.bs-docs-sidenav {
width: auto;
margin-bottom: 20px;
}
.bs-docs-sidenav.affix {
position: static;
width: auto;
top: 0;
}
}
I have simplified it a little bit, but that should be enough to get you started. When the max-width is less than 768px the sidebar width will change to auto, and the affix code will keep the sidebar at the top of the page.
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.
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