My navbar is based off an un-ordered list.
Each <li> is displayed as inline-block.
However I am unable to get rid of the white-space between the li's
nav-item li{
width: 123px;
height: 120px;
display: inline-block;
padding: 0;
margin: 0;
}
I have researched this item on stackoverflow/google but haven't found an solution yet.
Plnkr here:
http://plnkr.co/edit/7irazgvxqkpCeurnQ0Yv
Change display: inline-block; to float: left;:
nav-item li{
width: 123px;
height: 120px;
float: left;
padding: 0;
margin: 0;
}
Remove the white space and line breaks in your HTML between the LIs.
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li>
</ul>
Add white-space: normal; to your nav-item class
.nav-item li{
width: 123px;
height: 120px;
display: inline-block;
padding: 0;
margin: 0;
white-space: normal;
}
Related
I currently have two problems with a list of links.
First of all I need to display
| button | | text | | button |
side by side in the li. First button left hand side, then the text and the 2nd button on the right hand side of the li. Both buttons need to have the same height as the text in the middle has.
BUT they must not be as high as the whole li is, because the li can contain more elements, like a submenu, and then it would become much to high.
Any ideas (aside from a table per li)?
Thanks a lot for any help. It does look so simple (and I guess it is) but I am really getting frustrated meanwhile cause I didn't get it done...
button {
border: solid 1px #ccc;
}
a {
display: inline-block;
margin-right: 0;
background-color: #ffffff;
margin-left: 0;
}
.btn-left {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 100%;
border-right: solid 1px #333;
}
.btn-right {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
border-left: solid 1px #333;
}
ul {
border: solid 1px #333;
list-style-type: none;
padding: 0;
}
li {
background-color: #ccc;
position: relative;
}
li a {
display: inline-block;
}
.clearfix {
clear: both;
}
<ul>
<li>
<button class="btn-left">Btn 1</button>
<a href="#">
Lorem ipsum dolur sit Link Lorem ipsum dolur sit Lorem ipsum dolur sit Link Lorem ipsum dolur sit Lorem ipsum dolur sit Link Lorem ipsum dolur sit
</a>
<button class="btn-right">Btn 2</button>
<!-- here can be other content, e.g. a submenu:
<ul class="sub-menu">
<li>Lorem ipsum</li>
<li>dolor sit</li>
</ul>
-->
</li>
</ul>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
Applying width to an element that has been centered horizontally and vertically using flex loses the properties applied by flex
body {
margin: 0;
padding: 0;
height: 100vh;
}
header {
padding: 10px;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed lightblue;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 100vh;
width: 200px; /* if comment this line the properties assigned by flex work properly */
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
ul li {
padding: 10px;
}
<header>
<nav>
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</nav>
<button>Dark mode</button>
</header>
<main>
<h1>Lorem ipsum dolor.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
dolorem aliquam amet impedit.
</p>
</main>
What is the reason for this and how should this be implemented correctly?
Update
I get the desired result by modifying the html. I wrap the main content in a div and assign a fixed width to this div. Is it possible to do the same using only CSS?
body {
margin: 0;
padding: 0;
height: 100vh;
}
header {
padding: 10px;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed lightblue;
}
main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
border: 1px dashed tomato;
}
main div {
width: 200px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
ul li {
padding: 10px;
}
<header>
<nav>
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</nav>
<button>Dark mode</button>
</header>
<main>
<div>
<h1>Lorem ipsum dolor.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
dolorem aliquam amet impedit.
</p>
</div>
</main>
Thanks in advance
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 100vh;
width: 200px;
margin:auto; // Just need to add margin auto
}
Instead of using fixed width you should use flex property.
like
.parent-element .child-element{ flex: 0 0 20em; }
flex is a shorthand property for it's ability to alter it's dimensions based on space.
You can look here for more details https://developer.mozilla.org/en-US/docs/Web/CSS/flex
image
So I have a div full of main article content with a width of 600px and I would like to have these links as well at the side, I imagine it would be in the same div but I can't seem to get the right effect and need some help with this.
Thanks a lot.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="pagewrap">
<div id="logos">
<img id="logo" src="img/logo.png">
<h1 id="name">Company Name</h1>
<img class="socialmedia" src="img/facebook.png">
<img class="socialmedia" src="img/twitter.png">
<img class="socialmedia" src="img/googleplus.png">
</div>
<div id="header">
<div id="menu-outer">
<div class="table">
<ul id="horizontal-list">
<li>Home</li>
<li>eBooks</li>
<li>Magazines</li>
<li>Movies</li>
<li>Help</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div id="content">
<h2>Lorem Ipsum Dolor Sit</h2>
<p id="article-information">posted on 15 May 2015 by Author</p>
<img id="main-article-image" src="img/placeholder.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer
fringilla. Integer fringilla. Pellentesque acturpis. Sed elementum, felis quis porttitor
sollicitudin, augue nulla sodales sapien, amet posuere quam purus at lacus. Nam id neque. Morbipulvinar nulla sit amet nisl. Etiam pharetra lacus sed velit
imperdiet bibendum. ed quis elit. In hac habitasse platea dictumst. Maecenas
justo. Donec interdum vestibulum libero. Nam laoreet dui sed
magna. Nam consectetuer mollis dolor. Aenean ligula.
liquam sed erat. Donec interdum vestibulum libero. Mauriset dolor.</p>
<div id="more-links-list">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
</div>
<div id="sidebar">
<h3>A guide to snoopsetting</h3>
<img class="aside-images" src="img/placeholder.png">
<h3>Welcome to the Surveillance State</h3>
<img class="aside-images" src="img/placeholder.png">
</div>
<div id="footer">
</div>
</div>
</bo
dy>
CSS
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#logo {
width: 20%;
height: auto;
position: relative;
right: 25px;
top: 50px;
}
#name {
position: relative;
bottom: 60px;
left: 170px;
font-style: italic;
font-size: 55px;
height: 30px;
}
.socialmedia {
position: relative;
width: 8%;
bottom: 155px;
height: auto;
float: right;
}
#main-article-image {
width: 600px;
height: 450px;
}
.aside-images {
width: 340px;
height: 255px;
}
#more-links-list {
display: inline;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#logos {
height: 160px;
}
#header {
height: 50px;
}
#content {
position: relative;
width: 600px;
float: left;
text-align: justify;
}
#more-links-list {
float:right;
padding: 10px;
margin-left:10px;
margin-bottom:10px;
background:#ddd;
}
#sidebar {
width: 340px;
float: right;
position: relative;
bottom: 34px;
}
#footer {
clear: both;
width: auto;
height: 100px;
}
#article-information {
margin: 0px;
}
h2 {
margin: 0px;
padding-top: 56px;
}
h3 {
margin: 0px;
padding-top: 38px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
width: 16.65%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
#media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#header, #content, #sidebar {
margin-bottom: 5px;
}
#footer {
background-color: #eee;
border-style: solid;
border-width: 1px;
}
You can do this by placing a div with float:right; style inside the div that holds your content (article text), I created this example for you:
https://jsfiddle.net/davoscript/tjf56jLw/4/
<p>
<!-- The floating box -->
<div id="more-links-list" style="float:right;">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
<!-- The article content -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer...
</p>
Let me know if that works.
You should probably put the links into an <aside>. This could go below the code for the text in your div and then styled with either a float or positioning. It would then be a matter of getting your styling to allow the text to wrap under the links.
Using the following markup, I'm creating an image with two floated text overlays, one for the heading and one for the summary text. It's rendering how I wish and I'm able to use the entire image as well as the headline & summary to access the link except for the area immediately to the right of the 'headline' up to the end of the 'summary'. This happens in all browsers (except IE9 and lower). Any ideas why and how I can get around it?
HTML:
<div class="image">
<img src="Assets/Images/Picture.jpg" alt="Picture" />
<div class="overlay">
Headline
Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.
</div>
</div>
CSS:
body {
border: 0;
color: #5B6064;
font-family: Helvetica, Arial, Sans-Serif;
font-size: .75em;
line-height: 1.6em;
margin: 0;
padding: 0;
background-color: #a5a5a5;
}
a {
text-decoration: none;
color: #5B6064;
}
a:visited {
text-decoration: none;
}
img {
border: 0;
}
.image {
position: relative;
width: 100%;
/* For IE6 */
display: block;
overflow: hidden;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
display: block;
}
.headline {
color: #FFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary {
max-width: 350px;
margin-top: 3px;
color: #FFF;
font: 14px/14px Helvetica, Sans-Serif;
letter-spacing: 0;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary a {
color: #FFF;
}
I'd wrap the whole thing in an a tag (cleaner code). You would need to adjust a bit of your css.
EDIT
I changed the div elements to span so it is syntactically correct (thanks for the reminder Phrogz). Since your css already had display: block for the div elements, changing them to span is not an issue.
<a href="Default.aspx">
<span class="image">
<img src="Assets/Images/Picture.jpg" alt="Picture" />
<span class="overlay">
<span class="headline">Headline</span>
<span class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</span>
</span>
</span>
</a>
The headline is being floated left. If you remove the float and add display:block; to the anchor, it will take up the full image width.
i got a tricky situation here. im trying to center 3 divs inside my footer and they need to have dynamic width, like min-width.
[cotainer [first] [second] [third] /container]
my setup is this
<footer>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
</footer>
footer #container { width: 800px; margin: 0 auto; }
#container #first,#container #second,#container #third
{
float: left;
min-width: 200px;
height: 25px;
background: /* image url */
padding: 4px;
margin: 0 20px 0 0;
}
#container #third { margin-right: 0; }
You should use display: table; and table-cell.
#container {
display:table;
}
#first, #second, #third {
display: table-cell;
width: 200px;
height: 40px;
border: 1px dashed #000;
}
Demo available here.
set container to display as:table and set it's margin to 0 auto.
#container {
display:table;
margn:0 auto;
whitespace: nowrap;
}
#first, #second, #third {
min-width: 200px;
float:left
...
}
Demo: http://jsfiddle.net/AZ4yT/1/
Edit: It gets left aligned in IE. so you might wanna use a workaround for that
What about using display: inline-block? You can see a jsFiddle of it here:
http://jsfiddle.net/S7bKT/1/
HTML
<div id="container">
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam scelerisque euismod auctor. Sed pulvinar nulla eu
lorem iaculis ultrices. Mauris
</div>
<div id="second">Lorem ipsum dolor sit amet</div>
<div id="third">Sed pulvinar nulla eu lorem iaculis ultrices</div>
</div>
CSS
#container {
width: 500px;
background: #dedede;
margin: 0 auto;
text-align: center;
}
#first, #second, #third {
display: inline-block;
min-width: 50px;
max-width: 120px;
min-height: 100px;
zoom: 1; /* Fix for IE */
_display: inline; /* Hack for IE */
margin-right: 20px;
vertical-align: top;
}
#first {
background: #f00;
}
#second {
background: #0f0;
}
#third {
background: #00f;
}
#container div:last-child {
margin-right: 0;
}