This question already has answers here:
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 8 years ago.
Im trying to give some margin-top to my .links li a, but its not working, I give this margin but the links stay also without margin.
Do you see why this can be happening?
Here I have my problem:
http://jsfiddle.net/dG6wn/2/
My html:
<div id="content">
<h2>Title</h2>
<span id="date">22/05/2014</span> <br />
<img class="img" src="../image1.jpg"/>
<p>
Paragraph text
</p>
<div id="downloads">
<h3>Links:</h3>
<ul class="links">
<li>Link bigger</li>
<li>Link</li>
<li>Link 3</li>
</ul>
</div>
<span class="back">Back</span>
</div>
My css:
.links li a
{
text-decoration:none;
background:red;
color:#000;
margin-top:20px;
margin:0 auto;
}
try adding
position: relative;
display: inline-block; /* might need this too */
reorder the margin styles. set display to inline-block.
.links li a
{
text-decoration:none;
background:red;
color:#000;
margin:0 auto;
margin-top:20px;
display: inline-block;
}
updated http://jsfiddle.net/dG6wn/3/
Related
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 3 years ago.
I have a navigation item in a div, I just want to target this one with an attribute value, But my CSS does not work so far. Code so far below is:
I am trying to target the navDepts class
HTML
<div class="primary-nav" data-name="about">
<div class="subNav">
<ul class="navDepts">
<!-- <li></li>-->
</ul>
</div>
</div>
CSS
.primary-nav [data-name="about"] .subNav ul .navDepts {
display: none!important;
}
Try removing ul from your CSS. Because ul and .navDepts are on the same level.
.primary-nav[data-name="about"] .subNav .navDepts {
display: none!important;
}
Your CSS inheritance is not proper:
.primary-nav[data-name="about"] .subNav ul.navDepts {
background: red;
}
<div class="primary-nav" data-name="about">
<div class="subNav">
<ul class="navDepts">
<!-- <li></li>-->sadsadsad
</ul>
</div>
</div>
I found two mistakes in your code.
First one is that there should not be any space between attribute selector and related class.
Second, I presume that you mean to select ul with .navDepts class. So I removed the space between them.
So here is the corrected css:
.primary-nav[data-name="about"] .subNav ul.navDepts {
background: red;
width: 100px;
height: 100px;
}
.primary-nav[data-name="about"] .subNav ul.navDepts li{
background: yellow;
}
<div class="primary-nav" data-name="about">
<div class="subNav">
<ul class="navDepts">
<li>list item</li>
</ul>
</div>
</div>
Add this CSS . May it will help you out.
.primary-nav [data-name="about"] >.subNav ul.navDepts {
display: none;
}
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How to vertically align an image inside a div
(37 answers)
Vertically align text next to an image?
(26 answers)
Why doesn't vertical-align work properly when using float in CSS?
(3 answers)
Closed 4 years ago.
I have the following structure/code:
.navbar__brand, .navcontainer {
float:left;
}
.navbar__brand img {
vertical-align:middle;}
.navbar__menu {
display:inline-block;
}
.navbar__menu li {
display:inline-block;
list-style: none;
}
<div class="header">
<div class="navbar">
<div class="navbar__brand">
</div>
<div class="navcontainer">
<ul class="navbar__menu">
<li><a href=#>Item 1</a></li>
<li><a href=#>Item 2</a></li>
</ul>
</div>
</div>
</div>
I want the image in navbar__brand to be vertical align in the middle;
At this moment is align at the top of the div.
I need to support old IE browser so please no flex.
The easiest way to achive this is simulating a table
.asTable{
display:table;
}
.asTR{
display:table-row;
}
.asTD{
display:table-cell;
vertical-align:middle;
border:1px solid;
}
.asTD ul{
list-style:none;
}
.asTD ul li {
display:inline-block;
}
<div class="asTable">
<div class="asTR">
<div class="asTD">
</div>
<div class="asTD">
<ul class="">
<li><a href=#>Item 1</a></li>
<li><a href=#>Item 2</a></li>
</ul>
</div>
</div>
</div>
(Edit)
Thanks #TemaniAfif for pointing out that you need to support old IE browsers. This answer won't work in old browsers.
As usual, what is a pain to achieve with classic CSS (floats, inline-block, clearfix, etc.) is a breeze with Flex :
.navbar {
display: flex;
align-items: center;
border: blue dashed 2px;
}
ul.navbar__menu {
display: flex;
}
.navbar__menu li {
list-style: none;
padding: 10px;
}
<div class="navbar">
<div class="navbar__brand">
</div>
<ul class="navbar__menu">
<li><a href=#>Item 1</a></li>
<li><a href=#>Item 2</a></li>
</ul>
</div>
I'm trying to make a horizontal list where each of the <li>s in the list have a height of 385px and a width of 400px.
I tried making the list horizontal by using inline-block, but that doesn't seem to be working.
By which, I mean the list is still vertical. The <li>s are the right size, but the list is not horizontal.
How can I make this list horizontal? (Preferably without flexbox)
Here is my CSS:
html, body{
margin:0;
padding:0;
font-family:'Open Sans', sans-serif;
font-size:16px;
}
#slides{
list-style:none;
list-style-type:none;
}
#slides li{
height:385px;
width:400px;
display:inline-block;
}
and my HTML:
<form action="" method="get">
<fieldset>
<ul id="slides">
<div id="first">
<li>
1
</li>
</div>
<div id="second">
<li>
2
</li>
</div>
<div id="last">
<li>
3
</li>
</div>
</ul>
</fieldset>
</form>
You are making it totally wrong, you are using div which are block level element, also you cannot use any other element except li inside ul, so your markup is invalid, instead do it like this
<ul>
<li><div>A</div></li>
<li><div>B</div></li>
</ul>
<style>
ul li {
display: inline-block;
}
</style>
Add a float:left to #slides li
#slides li{float:left;}
Hope this helps.
Remove the divs and float the lis to the left:
HTML
<form action="" method="get">
<fieldset>
<ul id="slides">
<li id="first">1</li>
<li id="second">2</li>
<li id="third">3</li>
</ul>
</fieldset>
</form>
CSS
html, body{
margin:0;
padding:0;
font-family:'Open Sans', sans-serif;
font-size:16px;
}
#slides{
list-style:none;
list-style-type:none;
}
#slides li{
height:385px;
width:40px;
display:inline-block;
float: left;
}
http://jsfiddle.net/X6LkZ/1/
I am prototyping a Wordpress template and I'm trying to place the same elements on the header like this: http://dl.dropbox.com/u/768097/about.pdf
Here are the HTML and CSS files: http://acreedy.oliveandpickle.com/
I need 4 columns in the header and everything should be placed under the images.
HTML:
<div id="header">
<h1>Alan Creedy</h1>
<ul id="quickInfo">
<li class="mission">Mission Statement</li>
<li>Helping People Think for Themselves</li>
<li>1.919.926.0688</li>
<li>Email Me</li>
</ul>
<ul id="menu">
<li class="current">Home</li>
<li>About</li>
<li>Best Practice Ideas</li>
<li>Management Tools</li>
<li>Preneed</li>
<li>Case Studies</li>
<li>Recommended Resources</li>
<li>Think Tank Forum</li>
</ul>
</div>
CSS:
#header {
border-bottom:3px solid #1582AB;
height:200px;
margin:0 auto;
padding:46px 0 0;
width:1000px;
position:relative;
}
#header h1 {
background:url("images/alan_creedy_headshot_transparent.png") no-repeat left top;
font-size:40px;
height:140px;
padding:8px 0 0 215px;
margin:0;
}
#quickInfo {
position:absolute;
right:10px;
top:10px;
width:400px;
}
#quickInfo li {
list-style-type:none;
}
.mission {
font-size:18px;
}
#menu {
margin:0 auto;
padding:0;
width:1000px;
}
Floating left will most certainly fix your issue, though keep in mind whenever you add padding or margin to your floated element that you will have to adjust your width as well. I checked out your page and you didn't compensate that change. Fix the width accordingly and you should be good to go :D
~ Chris
http://twitter.com/TheCSSGuru
If you're using html5 then you could use aside or section elements instead of div's.
<style>
.column {
float: left;
width: 200px;}
</style>
<aside class="column">
Column1
</aside>
<section class="column">
Column2
</section>
<section class="column">
Column3
</section>
<section class="column">
Column4
</section>
I have a menu div which has a dark background. Inside it, I have several menu item divs with 1px margins on the right and the left. This way I've got separators between them. Obviously these appear on the very left and very right side of the menu which I don't want. Is there a way to accomplish this without inserting 1-pixel divs as separators?
Thank you
edit: sorry, I thought it was descriptive enough. Here is the code:
<div id="menu">
<div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div>
<div class="menu_item"><img src="imgs/menu/profil.png" /></div>
<div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div>
<div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div>
<div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div>
<div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div>
</div>
IE6 incompatibility is OK (thankfully).
The following rule will apply to all .menu_item elements that follow another .menu_item element:
.menu_item + .menu_item {
border-left: 2px solid black;
}
The simplest way yo achieve it is to mark your first and last elements with custom classes and remove that margins from them.
<ul class="menu">
<li class="first">One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin: 0 1px; }
.menu .first { margin-left: 0; }
.menu .last { margin-right: 0; }
</style>
You can also try using complex css selectors, like :first-child, but they do not work in older versions of MSIE.
OR, you can use 2px margins on the right side instead and go with only one additional class:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin-right: 2px; }
.menu .last { margin-right: 0; }
</style>
If a high percentage of your audience's browsers support CSS3, you can use the :first-child and :last-child pseudo-classes:
div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}
Can't you have 2px left-margin instead of 1px on each side and then use the css pseudo class :first-child to remove these margin for the first item ?
EDIT: I agree with the fact that you should use border as separator rather than background but in case you do this that way for some good reasons, my answer's still valid :-)