Im trying to have 3 columns with lists horizontally with margin-right.
And Im almost get it, but Im having some problem aligning my #col3 at right.
Im trying with float:right, but dont works, but works with float:left, but I guess its not correct because when I do this #info #col3 {width:200px; float:left;} and then give background:color to my #info, my div dont contains what was supposed to. So there is some kind of conflict.
Do you know a correct way to do this??
here is my issue: http://jsfiddle.net/tvj4C/
Here is my code:
html:
<div id="page-content">
<h1>Title of the post</h1>
<img src="../image1.jpg" width="700px" height="360px" />
<div id="info">
<h2>Info</h2>
<ul id="col1">
<li>Adress 1</li>
<li>Adress 2</li>
</ul>
<ul id="col2">
<li>Phone 1</li>
<li>Phone 2</li>
</ul>
<ul id="col3">
<li>Email 1</li>
<li>Email 2</li>
</ul>
</div>
<div id="clear"></div>
<div id="content">
<h2>Subtitle of the post</h2>
<p>Content of the post.</p>
</div>
CSS:
#page-content
{
float:left;
width:700px;
font-size:16px;
}
#page-content h1
{
font-size:25px;
font-weight:100;
margin-bottom:10px;
}
#page-content ul
{
list-style:none;
}
#page-content ul li
{
font-size:17px; margin-top:7px; text-decoration:none;
}
#info
{
margin:10px auto;
background:yellow;
}
#page-content h2
{
font-size:22px; color:#444; font-family:'bariol_boldbold'; font-weight:100;
}
#info #col1
{
float:left;
width:200px;
margin-right:50px;
}
#info #col2
{
float:left;
width:200px;
margin-right:50px;
}
#info #col3
{
width:200px;
}
#info ul li a
{
text-decoration:none;
color:#000;
margin-left:10px;
}
#content
{
margin-top:5px;
background-color:red;
}
#content p
{
font-size:16px;
line-height:25px;
text-align:justify;
}
#clear
{
clear:both;
}
display: inline-block;
I think that no more comment is needed here ;).
http://jsfiddle.net/tvj4C/1/
You should also read about display: table, and display: table-cell. And if you will use display: table, remember about vertical-align property for each table-cell.
BTW: Question is a little bit complicated, so if this answer didn't hit the point, please update question and I will update answer ;).
different solution without inline-block
with the use of float:left;
http://jsfiddle.net/tvj4C/2/
The issue isn't
float: left vs display: inline-block.
You set
#page-content { width: 700px; }
which is too narrow because your ul's have a default left padding pushing them wider than the 200px you specified.
I updated your original code here: http://jsfiddle.net/97PHv/1/
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I have got a weird space in two elements on this page and it doesn't make any sense! There should be no white gap between the border on the ul on the left, and the div on the right. The blue sections should touch, load the page and it will make sense.
This is the HTML for that part:
<div class="messages">
<ul class="messageList">
<li style="background-color:#2e89e6;color:#FFF;">
<div>Martyn Ball</div>
<p>This is a brief mess...</p>
<span>07/12/2015</span>
</li>
<li>
<div>Martyn Ball</div>
<p>This is a brief mess...</p>
<span>07/12/2015</span>
</li>
<li>
<div>Martyn Ball</div>
<p>This is a brief mess...</p>
<span>07/12/2015</span>
</li>
</ul>
<div class="messageContent">
<div class="messageContentTitle">
<span class="name">Martyn Ball</span>
<span class="date">07/12/2015 02:24PM</span>
</div>
This is a brief message, more will be loaded here!
</div>
</div>
And here is the CSS:
/* Messages Styles */
.messageList {
list-style:none;
list-style-type:none;
margin:0; padding:0;
display:inline-block;
border:solid #2e89e6;
border-width:0px 5px 0px 0px;
width:20%;
}
.messageList li p {
font-size:14px;
margin:0px;
}
.messageList li div {
font-weight:bold;
}
.messageList li span {
font-size:12px;
}
.messageList li {
border:solid #e5e5e5;
border-width:0px 0px 1px 1px;
padding:8px;
cursor:pointer;
}
.messageList li:hover {
background-color:#2e89e6;
color:#FFF;
}
.messageContent {
vertical-align:top;
overflow: hidden;
display:inline-block;
text-align:left;
width:75%;
}
.messageContentTitle {
color:#FFF;
background-color:#2e89e6;
margin:0;
padding:5px;
width:100%;
}
.messageContentTitle name { float:left; }
.messageContentTitle date { float:right; }
This is because both the div and ul are inline-block elements, which means that they display the whitespace in between.
This is my favorite solution to such an issue. Set the font-size of the parent to 0, and then set the font-size of the inline-block elements to the size that you need [I set it using rems, but you can use whichever unit you need in your project].
.messages {
font-size: 0;
}
.messageList, .messageContent {
font-size: 1rem;
}
The other options are to comment out the whitespace between the elements.
<div class="messages">
<ul class="messageList">
...
</ul><!--
--><div class="messageContent">
...
</div>
</div>
Or, to remove all the whitespace, altogether.
<div class="messages">
<ul class="messageList">
...
</ul><div class="messageContent">
...
</div>
</div>
I prefer the first solution over the others, as it keeps the HTML more readable.
I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?
Also, I'd like to change the color of the font to white on hover of the li
JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/
CSS
.nav_container {
text-align: center;
width:100%;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
}
.nav_container ul li {
display: inline-block;
text-align: center;
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}
.nav_container a:hover {
color:#fff;
}
header {
width:100%;
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
z-index:99;
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.centerdiv {
margin:0 auto;
}
#media only screen and (min-width:700px) {
header {
max-width:1250px;
}
.container {
max-width:1250px;
}
.box2 {
width:32%;
height:300px;
float:left;
}
.box2left {
width:65%;
height:600px;
float:left;
}
}
div {
border:solid 1px #E6E6E6;
position:relative;
}
ul li {
border:solid 1px #E6E6E6;
}
HTML
<div class="navlogo floatleft">
<img src="images/logo.png" />
</div>
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li>Profile</li>
<li>Sign out</li>
</ul>
</div>
</div>
</header>
<div style="clear:both;"></div>
Answering your second question first as the answer is shorter: use the :hover pseudo class.
EXAMPLE
li:hover a{color:#fff;}
More information on pseudo classes
To answer your first question, then; setting an element's display property to inline or inline-block will cause the white space surrounding it to be treated just like the space surrounding any other inline element.
You can workaround it in a number of ways
Remove all line breaks from within your list:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Use comments to hide the line breaks from the browser:
<ul><!--
--><li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--></ul>
Use CSS to set the font-size of the parent element to 0 and then "reset" it for the child elements:
html{font-size:20px;}
ul{font-size:0;}
li{font-size:1rem;}
Alternatively, if you're not 100% set on using display:inline-block, you can use floats or flexbox instead.
To change the color of the links to white, use this css:
.nav_container ul li:hover a {
color:white;
}
However, only the text will be clickable, the li element won't be clickable. Another way to do the same thing is to apply all width/height/background styling to the link, instead of the li.
As Shaggy mentioned, to eliminate extra spacing when using inline-block you should remove all spaces in your html between your menu li items.
As for changing the link color on hover you should add the following to your css code:
.nav_container li:hover a {
color:#FFF;
}
I was attempting to vertical align some text in a li element, but the only way I could do it was applying display:table-cell; and vertical-align:middle; to the li element.
When I do this, it causes the entire navbar to lose its horizontal center. I have done very much Googling and have not found a solution.
HTML:
<div class="h_logo"><img src="http://dummyimage.com/800x200/000/fff.jpg"></div>
<div class="h_nav">
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Web Hosting</li>
<li>Web Design</li>
<li>Consulting</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
/** All code is written in chronological form as with the HTML code.
* h. = header.element
* b. = body.element
* sl./sr. = sidebarleft or right.element
**/
.h_logo{
background-repeat:no-repeat;
width:800px;
height:200px;
margin:auto;
position:static;
}
.h_nav{
position:inherit;
margin-top:10px;
}
.h_nav li{
list-style-type:none;
display:table-cell;
vertical-align:middle;
width:150px;
height:35px;
background-color:black;
}
.h_nav a{
text-decoration:none;
color:#FFFFFF;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
}
JSFiddle
You could add this to your CSS:
nav ul {
display: table;
margin: 0 auto;
padding: 0;
}
Question
I am trying to put every li at the bottom of the ul, making the bottom of every element (not the text, the actual block element of the ui, whether that's the image or the whole li of text) touching. This should be a simple problem with vertical-align:bottom and display:table-cell being the fix, but for some reason I haven't been able to get it to work. What is the best way to accomplish this?
Its likely there's a question that already answered this, but I've spent a lot of time searching. If there's one that applies, please just point me to it.
Example
Fiddle With It:
http://jsfiddle.net/rxg9m/
HTML
<head runat="server">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div id="outer">
<div id="inner">
<nav>
<ul>
<li>Home
</li>
<li>Product
</li>
<li><img src="logo.png" alt="Javid Logo"/>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
</nav>
</div>
</div>
</body>
CSS
* {
font-family:Calibri;
}
#outer {
text-align:center;
}
#inner {
display:inline-block;
}
nav ul {
margin:0px;
padding:0px;
bottom:0;
list-style:none;
}
nav li {
float:left;
display:table-cell;
vertical-align:bottom;
margin:0px;
padding:0px;
}
nav li a {
padding:16px 8px 16px 8px;
margin:0px;
width:120px;
display:block;
background-color:lightblue;
text-decoration:none;
text-emphasis:none;
color:black;
border:0px none black;
border-bottom:1px solid black;
}
nav li a.left {
text-align:left;
}
nav li a.right {
text-align:right;
}
#logo {
padding:0px;
width:auto;
height:auto;
line-height:0px;
border:0px none black;
}
Fiddle Here: http://jsfiddle.net/SinisterSystems/rxg9m/2/
nav li a {
padding:32px 8px 0px 8px;
You are setting a padding on the bottom. You should counteract that and double your padding on top and set your padding-bottom to 0.
Because you had padding applied, it WAS on the bottom technically. The only problem is it also expanded all the way to the top.
Edit: http://jsfiddle.net/SinisterSystems/rxg9m/4/
Aligning WITHIN the ul is very tricky, and your best bet would be to just align the ul inside of a wrapper of sorts. That way, you can use position:relative; on the wrapper and absolutely position your ul to the bottom. And yeah, style from there.
Basic Example:
<div class="wrapper">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
* {
margin:0;
padding:0;
}
.wrapper {
height:200px;
background:#CCC;
position:relative;
}
ul {
position:absolute;
bottom:0;
width:100%;
}
ul li {
list-style:none;
float:left;
display:inline-block;
min-width:25%;
text-align:center;
}
http://jsfiddle.net/rxg9m/1/
Your issue was with this
nav li a {
padding:16px 8px 16px 8px;
change it to
nav li a {
padding:16px 8px 0px 8px;
also, if you want the height to be the same, you can just do 32px instead of 16px for the first padding value, like Nicholas did in his answer.
Simply remove the float:left from nav li. Everything else is in order.
Fiddle
http://jsfiddle.net/mXTG6/
Im working on responsive code just now and for some reason i cant get 2 lists to display in the center of the div that's 100% width for mobile view. Is there something that im missing out in the css code below that might be causing this to not to display centered?
both lists have classes of .social-media and .top-nav
*** HTML ******
<div id="gezzamondo">
<div class="header">
<img class="logo" src="images/gezzamondo-logo.jpg" alt="Web designer Glasgow | Gezzamondo" title="Web designer Glasgow | Gezzamondo" />
<ul class="top-nav">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div><!-- close header -->
</div><!-- close gezzamondo -->
** CSS ****
body {
background-color:#C09;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
}
img{
max-width:100%:
}
#gezzamondo{
width:100%;
margin:0 auto;
}
.header{
background-color:#FFF;
height:215px;
width:100%;
text-align:center;
}
#gezzamondo .logo{
width:183px;
height:83px;
margin:0 auto;
margin-top:20px;
}
#gezzamondo .top-nav{
list-style: none;
font-size:20px;
font-weight:300;
margin:0 auto;
}
#gezzamondo ul.top-nav li{
float:left;
margin-right:30px;
}
#gezzamondo ul.top-nav li a{
text-decoration:none;
color:#333333;
}
#gezzamondo .social-media{
position: absolute;
list-style: none;
width:162px;
margin:0 auto;
background-color:#06F;
}
#gezzamondo .social-media li img{
height:44px;
width:44px;
}
#gezzamondo .social-media li{
float:left;
margin-right:15px;
}
#gezzamondo .social-media li.last{
float:left;
margin-right:0px;
}
#gezzamondo ul.top-nav li a:hover{
border-bottom:7px #FF0099 solid;
color:#333333;
}
you are setting the position to absolute in #gezzamondo .social-media, just remove the position and it should center.
I've used the code you supplied, it looks a mess to in jsfiddle (example code is not complete etc). I think this should do it for you, or at least get you closer. What I did was basically wrap the social ul in two divs. center-social spans the full width and center-s trys to provide an idea of a width so the uls can be centered. Try it out on your actual page and it should display correctly. It's only applied on the social ul in the example.
<div id="center-social">
<div id="center-s">
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div>
</div>