I got a problem with h1 and p element inside a couple of inline-blocked divs.
Here's the code:
#map-canvas {
width: 69%;
height: 1000px;
display: inline-block;
}
#filter-manager{
display: inline-block;
width: 30%;
height: 1000px;
background-color: #000000;
margin: 0;
padding: 0;
}
#filter-manager h1{
font-size: 20px;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 0;
display: block;
}
<div id="filter-manager">
<h1>Filtri</h1>
</div><!-- #filter-manager -->
<div id="map-canvas"></div><!-- #map-canvas -->
The divs keep their inline status but #filter-manager goes on the bottom when I put a h1 or p element. If I don't put anything inside the divs are aligned perfectly.
Why h1 and p elements do behave like that?
In this case you have 2 solutions. First is to add this:
#filter-manager {
float: left;
}
Second is to make h1 table :
#filter-manager h1 {
display: table;
}
You should add vertical-align:top in the div with display:inline-block; Also , you dont need display:block in h1 because is by default in h1,h2,h3 etc..
#map-canvas {
width: 69%;
height: 100px;
display: inline-block;
background-color:red;
vertical-align:top
}
#filter-manager{
display: inline-block;
width: 30%;
height: 100px;
background-color: #000000;
margin: 0;
padding: 0;
vertical-align:top
}
#filter-manager h1{
font-size: 20px;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 0;
display:block
}
<div id="filter-manager">
<h1>Filtri</h1>
</div><!-- #filter-manager -->
<div id="map-canvas"></div><!-- #map-canvas -->
Try changing the display of the h1 in the css file.
If that does not work try and check the width:30% and margin:0 parameters your problem is definitely in there.
Related
In the bellow code the blue block has a green overline that should be the same width as the text and not overflow. Similar to the pink blocks notice how the green border is the same width as the text.
I've tried using display: inline as well with no luck. Is there maybe some hack to get this to work properly?
Fiddle: https://jsfiddle.net/xq10dnb9/
CSS:
html {
font-size: 50px;
}
.blue {
background-color: #a9f4f4;
}
.blocks {
background-color: pink;
width: 700px;
display:flex;
justify-content: space-between;
}
.block {
padding: 5px;
white-space: normal;
}
.block span {
position: relative;
display:inline-block;
/* display:inline; */
}
.block span:before {
content: '';
height: 4px;
background-color: green;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
HTML:
<div class="blocks">
<div class="block"><span>1 Test</span></div>
<div class="block blue"><span>Test123 Test</span></div>
<div class="block"><span>Testi</span></div>
<div class="block"><span>T asd</span></div>
<div class="block"><span>Testing 5</span></div>
</div>
Add width: min-content in:
.block span{
position: relative;
display: inline-block;
border: 1px solid black;
width: min-content;
}
.block {
padding: 5px;
white-space: normal;
}
When you are using padding,you might want to specify where you want to add padding to like padding-top, padding-bottom, padding-right or padding-left. If you just type padding it will just add space to all side.
So, change it to
.block {
padding-top: 5px;
white-space: normal;
}
Is should solve the issue.
And you add this to your code
*{
padding: 0;
margin: 0;
}
When I increase or decrease margin-top of #nav it affects #header, but when increasing margin-top of #header it doesn't affect #nav.
How to correct this to when I change whether nav or header it shouldnt affect other?
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
You are facing a margin-collapsing issue. Since you made the header to be a float element, the #nav become the first in-flow element thus its margin will collapse with body margin.
top margin of a box and top margin of its first in-flow child
So when you increase the margin of the nav you increase the collapsed margin which is the margin of the body and you push all the content down including the #header.
To fix this you need to avoid the margin collapsing by adding (for example) a padding-top to the body.
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
padding-top: 1px;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
animation: ani1 2s;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
I have an HTML code that can be simplified as:
<body>
<div class='header'>
</div>
<div class='main'>
<nav class='menu'>
<a>a</a><a>b</a>
</nav>
<div class='content'>Here be dragons!</div>
</div>
</body>
It uses the following CSS:
html, body
{
margin: 0;
padding: 0;
background-color: #7effad;
}
.header
{
background-color: black;
position: relative;
height: 20px;
}
.main
{
position: relative;
}
.main .menu
{
background-color: white;
}
.main .menu a,
.main .menu a:visited,
.main .menu a:active
{
display: block;
float: left;
background-color: blue;
border-radius: 2px;
margin: 5px;
}
.main .menu:after
{
display: block;
content: "";
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.main .content
{
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin-left: 21px;
margin-right: 21px;
margin-top: 15px;
margin-bottom: 0;
min-height: 1500px;
background-color: #d4b074;
}
As you can see here this generates some sort of a margin between the header and the menu. However, if i remove the content tag all together this margin magically disappears.
I don't understand how it can alter the appearance, since it is a normal block that follows the menu.
Edit: The problem only occurs in Firefox, Chromium does everything just fine.
The problem goes away if i set margin-top for .main .content to 0; however if margin-bottom of .main .menu is non-zero the problem returns.
In my project here, I am not able to vertically center align the floated undo/redo elements on the top bar.
I tried vertical-align: middle also played with the line-height but I did not get the desired effect.
What am I missing?
jsFiddle
One solution is to use display: table and display: table-cell in place of the float and then use vertical-align: middle;
Have a fiddle!
#bar has display: table
h4 and #actions are treated as "table cells"
HTML
<div id="bar">
<h4>Tasks</h4>
<span id="actions">
<input type="image" id="undo" src="http://i.imgur.com/fyCSlvW.png" disabled />
<input type="image" id="redo" src="http://i.imgur.com/BshzaCg.png" disabled />
</span>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body {
font-family:"Arial";
font-size: 62.5%;
}
#actions button {
background: none;
border: 0rem;
}
#actions button input {
outline: none;
}
#bar {
background-color: #4196C2;
display: table;
width: 100%;
}
h4 {
text-decoration: none;
display: table-cell;
vertical-align: middle;
margin-top: 2rem;
/* = 20px */
color: white;
padding: 20px;
font-size: 1.8rem;
}
#actions {
display: table-cell;
vertical-align: middle;
text-align: right;
}
You have not styled the span which contains the two buttons.
Add the following:
#actions {
display: block;
margin: 0 0 0 0;
padding: 15px 0 0 0
}
Here you go: http://jsfiddle.net/csTS7/151/
Add in the div a margin-top and do it with percent for example
#bar
{
margin-top: 5%;
}
Here's the JsFiddle
h4{
text-decoration: none;
display: inline-block;
/* margin-top: 2rem; = 20px */
color: white;
margin-left: 1.5rem;
font-size: 1.8rem;
line-height: 15px;
}
I have given the element bar a minimum height and removed margin top for h4 and added line-height
Here is the relevant html code:
<div id="something"><img src="Images/guysonlycopy.jpg" alt="image" width="1200" height="300" /></div>
<header>
<div id="title"><img src="http://blog.flamingtext.com/blog/2013/08/29/flamingtext_com_1377801873_445376518.jpg" padding="15px" /></div>
My first div is the"something" and the second is "title" but they have a gap of about 5px between them which i don't want.
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 1200px;
margin: 100px auto;
color: #666;
}
#wrapper {
background-color: #ccc;
margin: 0;
width: 1200px;
}
/* Header
--------------------------------------------*/
header {
background-color: #170a6e;
height: 100px;
width: 1200px;
margin: 0;
padding: 0;
}
header h1 {
font-size: 4.5em;
float: left;
margin: 20px;
padding: 5px;
}
#something {
text-align: center;
padding: 0;
margin: 0;
}
#title {
float: left;
margin-left: 25px;
margin-top: 11px;
}
That is the css. I want there to be no gap between the image and the second div.
Images are inline elements by default, which means they leave descender space. To get rid of this and use them as block level elements, set display: block; on the image itself.