My problem is that when I am resizing the browser window, the first text breaks up. It should never break up the words, just show the entire sentence no matter how small the window gets. I've tried with queries, but can't figure out how to do it correctly. See the image to understand the issue.
<div class="row">
<div class="col-sm-7">
<ul class="list-inline">
<h2>
<li class="list-inline-item">LYD</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LYS</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LED</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">AV</li>
</h2>
</ul>
</div>
<br>
<div class="col-sm-5">
<div class="middle">
<h2>
<span class="glyphicon glyphicon-earphone"></span> 57 67 18 14
</h2>
</div>
</div>
</div>
CSS:
ul li { display: inline; }
ul.list-inline{
text-align: center;
padding-right: 15px;
}
.middle{
margin-bottom: 60px;
padding-right: 15px;
}
The main issue here is that the content, namely the list and list items all inherit their width from the containing col-7.
If you know the exact width of the text you can just put an exact width property on it-
ul {
width: 302px;
}
In a more dynamic way, though, you can use either white-space or max-content
/* white-space */
ul {
white-space: nowrap
}
/* max-content*/
ul.list-inline {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
Related
I'm using the bootstrap bar to show the progress of a song. When I add it to a list stylize it to float, it disappears.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
<ul>
<li>
<div class="text-muted" id="currentTime"></div>
</li>
<li>
<div class="progress" style="width: 10%;">
<div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li>
<div class="text-muted" id="totalTime"></div>
</li>
</ul>
Applying the float property causes the elements to lose their dimensions (especially the width).
ّfloat explained in MDN Web Docs:
When an element is floated, it is taken out of the normal flow of the
document (though still remaining part of it). It is shifted to the
left, or right, until it touches the edge of its containing box, or
another floated element.
You can cover this problem by applying the parent width at the same time.
li {
float: left;
width: 100%;
}
Do not forget to use Bootstrap classes. (e.g. w-100, float-left, m-0, p-0, overflow-hidden, ... )
Note: I would be displaying this page on my SharePoint 2010 site.
I am trying to use CSS table to display and following is my HTML code for it:
<div id="cr">
<ul class="contact-img">
<li><img src="Landing page/Contacts/CassWade.png"></li>
<li>Cass Wade<br/>Project Manager</li>
<li><img src="Landing page/Contacts/Meredith.png"></li>
<li>Meredith<br/>HR Head</li>
<li><img src="Landing page/Contacts/Simon.png"></li>
<li>Simon<br/>CEO</li>
<li><img src="Landing page/Contacts/Roger.png"></li>
<li>Roger<br/>Director</li>
<li><img src="Landing page/Contacts/Sharyl.png"></li>
<li>Sharyl<br/>Employee</li>
</ul>
<hr/>
</div>
Here is my CSS for the above page:
.contact-img{
position: relative;
list-style:none;
display:table;
border:none;
padding:none;
margin:none;
}
.contact-img li
{
display:table-cell;
padding:10px 10px 10px 10px;
vertical-align:middle;
margin-left: 25px;
}
I was trying to display these images and its corresponding name in tabular format. The problem with this table is that width of the cell is getting resized as per the content of the cell. However, i want to fix the table cell width (no restrictions on height). Also I want to restrict the number of columns to 4. Any more entries should go to next row.
Any help on how to achieve would be highly appreciated. Thanks in advance.
My solution uses flexbox CSS3 properties to allow the boxes to be aligned and to wrap if the window gets to small. If you don't want this additional responsive behavior, you can change the max-width for width which in any case limits the number element to 4 per line.
I had to add boxing (div) inside to fix the cell size.
HTML:
<ul class="container">
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=1"></div>
<div class="description"><div>Cass Wade<br/>Project Manager</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=2"></div>
<div class="description"><div>Meredith<br/>HR Head</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=3"></div>
<div class="description"><div>Simon<br/>CEO</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=4"></div>
<div class="description"><div>Roger<br/>Director</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=5"></div>
<div class="description"><div>Sharyl<br/>Employee</div></div>
</div>
</li>
</ul>
CSS:
.container {
list-style: none;
-webkit-padding-start: 0px; /* fixing Chrome auto style */
display: flex;
flex-wrap: wrap;
max-width: 800px; /* max 4 items of 200px width per line */
}
/* the content as a bloc */
.inside-container {
width: 200px;
height: 100px;
display: flex; /* makes the description to stay next to the image */
}
.inside-container div {
width: 100px;
height: 100px;
}
.inside-container div.description {
text-align: center;
}
.inside-container div.description div {
display:table-cell;
vertical-align: middle;
}
Hope it helps!
edit:
To center your text horizontally you need the container to have text-align: center;.
To center horizontally, you need to put your text in a <div> and add these properties display: table-cell; vertical-align: middle;. It's not as beautiful as I would like, but it works well!
I'm having trouble by creating a responsive footer that always stay on the bottom of the page. The code I'm actually using is this:
body
{
margin: 0 0 200px; //Same height of the footer
}
footer
{
position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
I use:
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
Well, the problem is if I resize the screen and the content is larger than the resolution the footer lets a white space, like this:
I am trying to solve this problem. If I use position: fixed the problem disappears, but I don't want the footer following the scroll. I think the problem is in the 100 percent width. The footer of this site, Stack Overflow, works as I need. If I resize the window the footer remains the same, no white space. How to achieve this? How to make the footer cover all the width without let white space even if the resolution is lower than the page like occurs here, in Stack Overflow?
Try this code....
CSS
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
HTML
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
This jsfiddle I am creating based on your html.
This is work as responsive, I am not seen any issue as you tell.
I think may be the issue with height:200px , just remove and check.
Still you have issue , update the jsfiddle.
You should indeed use fixed positioning. This is what we do in our apps, running on browsers and Android/iOS devices:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin: 0;
/*
This height just to show that the footer stays at the
bottom of the page even when scrolling all the way down.
*/
height:2000px;
}
footer
{
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 200px;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
</style>
</head>
<body>
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
</body>
</html>
Of course, you are using HTML5 so this page will not work on older browsers (IE7, IE8).
I hope this helps :)
I like flexbox. CSS tricks - Guide to Flexbox
Try this:
main {
height: 95vh;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
align-items: center; }
header,
footer { flex: 0 1 auto; }
article { flex: 10 1 auto; }
<main>
<header>Title Here</header>
<article>Main Article</article>
<footer>Copyright and Contact Me</footer>
</main>
Thanks to Galen Gidman https://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ for this:
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
And the CSS:
html,
body {height: 100%;}
body {display: table; width: 100%;}
.page-row {display: table-row; height: 1px;}
.page-row-expanded {height: 100%;}
Galan: The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using display: table-row. Often padding, margin, etc. don’t behave as expected. This is easy enough to work around by adding a or something inside the .page-row and styling that.
I'm creating a navigation bar, in which there are five different links. Using div elements, I created the nav bar and then separated each link into its own container. By default, they all crush over to the left side, not centered in the nav bar. To get along without a totally misaligned nav bar, I added approximate widths to equally space out each link from one another; however, it's not perfectly aligned and I need a more professional way about centering them.
You can visually see what I'm talking about here: http://jsfiddle.net/W2Pez/2
You can see that they're not all equally spaced out from one another. I plan on removing the width attributes from each link, so how do I make it so that each link is the same number of pixels away from one another WITHOUT using widths? Please note each link's container cannot be the same width, since, for example, the amount of empty space left over from "Home" would be a lot more than "Rates & Packages".
CSS:
#nav {
background-color: #C08374;
height: 50px;
line-height: 50px;
width: 1000px;
margin: auto;
vertical-align: middle;
border: 1px solid #A76358;
}
.nav_button {
float: left;
text-align: center;
line-height: 50px;
}
HTML:
<div id="nav">
<div class="nav_button" style="width: 25px"></div>
<div class="nav_button" style="width: 175px">
Home
</div>
<div class="nav_button" style="width: 250px">
Rates & Packages
</div>
<div class="nav_button" style="width: 175px">
About Us
</div>
<div class="nav_button" style="width: 150px">
Menu
</div>
<div class="nav_button" style="width: 250px">
Nearby Attractions
</div>
<div class="nav_button" style="width: 25px">
</div>
The trick is to set the container to have text-align: center and then have the list (it should be a <ul> set to display: inline-block. That will center the whole list and you can then float the list elements and control how far apart they are from each other using margins.
Here's a stripped down version of your code:
HTML
<div id="nav">
<ul>
<li class="nav_button">
Home
</li>
<li class="nav_button">
Rates & Packages
</li>
<li class="nav_button">
About Us
</li>
<li class="nav_button">
Menu
</li>
<li class="nav_button">
Nearby Attractions
</li>
</ul>
</div>
CSS
#nav {
background-color: #C08374;
border: 1px solid #A76358;
text-align: center;
}
ul {
list-style: none;
display: inline-block;
}
ul li {
float: left;
margin: 0 20px;
}
ul li a {
color: white;
}
Here's a fiddle.
I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar. However, for some reason there is whitespace between this Navbar and the image. When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing . I have tried to fix this by using CSS to bottom-align the navbar, to no avail.
How can I eliminate this whitespace?
<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
<div class="span6 offset3" id="divTopLinkNavBar">
<div class="navbar" id="topLinkNavBar">
<div class="navbar-inner" style="font-size: 16px;">
<ul class="nav">
<li class="active">Home</li>
<li class="divider">PROJECTS</li>
<li class="divider">ABOUT US</li>
<li class="divider">THE TEAM</li>
<li class="divider">EVENTS</li>
<li class="divider">MEETINGS</li>
<li>RESOURCES</li>
</ul>
</div>
</div>
</div>
</div>
<!--Background Image-->
<div class="row" id="rowBackgroundImg">
<div class="span6 offset3" id="backgroundImg">
<!-- background image is set in CSS -->
</div>
</div>
Here is my desperate attempt at fixing this issue using CSS:
#backgroundImg
{
color: #ff0000;
background-color: #000000;
/*width: 709px;
height: 553px;*/
background: url('../images/someImage.jpg') no-repeat;
background-size: 100%;
height: 700px;
border-radius: 0px;
background-position: center;
vertical-align: top;
background-position: top;
}
#divTopLinkNavBar
{
vertical-align: bottom;
}
#topLinkNavBar
{
padding-bottom: 0px;
}
#rowBackgroundImg
{
padding-top: 0px;
}
.navbar
{
vertical-align: bottom;
}
You may want to override the margin-bottom: 20px from navbar :
.navbar {
margin-bottom: 0;
}
Something like that : http://jsfiddle.net/q4M2G/
(the !important is here just to override the style of the CDN version of bootstrap I'm using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap styles)
Why you put classes: span12 offset3 ?
Bootstrap has 12 columns default. so if you didn't changed it try to put:
span9 offset3 or just span12.