Margin not giving any results on divs - css

I'm not any kind of CSS pro. But margin doesn't seem to work in any other parts than the ul/li list provided below.
I have played with positions and other divs.
html, body {
margin: 0;
padding: 0;
}
body {
background-color: rgb(184, 184, 184);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('/images/landing.jpg');
font-family: Montserrat;
}
.header {
top: 0;
position: fixed;
background-color: gray;
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
display: flex;
}
.menu {
position: fixed;
top: 6px;
right: 0;
}
.menu ul li {
display: inline;
}
.menu ul li a {
color: white;
text-decoration: none;
font-size: 16px;
font-weight: lighter;
padding: 0 20px;
}
.welcome {
position: absolute;
color: white;
font-size: 50px;
top: 459px;
margin: auto;
}
HTML:
<div class='welcome'>
<span>Hello!</span>
</div>
Trying to get welcome div to center

You are setting margin: auto on an absolute positioned element. I suppose you are trying to center the 'welcome' element (as per your question, this fact is not clear). An absolute positioned element is dependent on its ancestors positioning and size.
One of the many solutions to center an absolute positioned element if to move it to 50% from the top and left of it's parent, and than apply translate to nudge it to the center: top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%).

welcome class position is absolute so welcome class parent should be relative to center the welcome div. And also if you want to horizontally center the div you should change margin: auto; to margin: 0 auto;
Or you can make the parent div display to flex, then use align-items, justify-content to center.
.parent { display: flex, align-items: center, justify-content: center }

Try changing your welcome css class to this:
.welcome {
position: absolute;
left: 50%;
transform: translate(-50%);
}

Replace your .welcome css class with this css code :
html, body {
margin: 0;
padding: 0;
}
body {
background-color: rgb(184, 184, 184);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('/images/landing.jpg');
font-family: Montserrat;
}
.header {
top: 0;
position: fixed;
background-color: gray;
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
display: flex;
}
.menu {
position: fixed;
top: 6px;
right: 0;
}
.menu ul li {
display: inline;
}
.menu ul li a {
color: white;
text-decoration: none;
font-size: 16px;
font-weight: lighter;
padding: 0 20px;
}
.welcome {
left:50%; right:50%;
top:50%; bottom:50%;
position: absolute;
}
<div class='welcome'>
<span>Hello!</span>
</div>

Related

Annoying whitespace for inline-block element [duplicate]

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Inline block adding bottom space
(3 answers)
Closed 4 years ago.
So, there seems to be some whitespace added to an element on my page when I set the display to be inline-block. Is there a way to get rid of this white space without changing the line-height to 0px or changing the display type to block and manually setting a width? I may want the red element below to expand dynamically based upon the content in the future.
This is what I want (no green below the red):
This is what I am getting (green below the red):
Here's a JSFiddle of the issue: https://jsfiddle.net/rstL6omk/5/
The additional space is from the box model for laying out the "inline" elements including all inline-block or inline element. It seems like voodoo because you don't see it in the box-model for the elements involved. If you set font-size: 0; on .nav_container it goes away.
The problem is that you have overflow: hidden on your .logo_container. Removing this will get rid of the 4 pixels at the bottom of the element.
Then you simply need to make use of height: auto (the default for height) on .brand_logo_icon in order for it to expand based on its content.
This can be seen in the following:
body {
background: rgb(40, 40, 40);
font-family: Helvetica, Arial, sans-serif;
font-weight: lighter;
user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
margin: 0;
cursor: default;
color: rgb(60, 60, 60);
}
div {
box-sizing: border-box;
}
#supports(padding: max(0px)) {
.container {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
#nav .nav_container {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
}
#nav {
padding: 0px;
display: block;
background: rgb(55, 155, 55);
}
.brand_logo_icon {
display: block;
background-color: rgb(200, 30, 30);
width: 60px;
}
#nav .logo_link {
position: relative;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 45px;
}
#nav .nav_container {
display: block;
max-width: 1300px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#nav .nav_container .logo_container {
display: inline-block;
padding: 0px;
background: rgb(80, 80, 80);
border-radius: 0px 0px 5px 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
}
#nav .nav_container .brand_logo_icon {
width: 70px;
}
.container {
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
transition: margin 225ms linear;
}
.container .splash:before {
content: "";
display: block;
padding-top: 56.2%;
}
.container .splash {
position: relative;
display: block;
width: 90vw;
max-width: 1300px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
text-align: center;
}
.container .splash .splashimg {
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-size: 100%;
background-repeat: no-repeat;
opacity: 0;
}
.container .content {
display: block;
position: relative;
left: 0;
richness: 0;
margin-left: auto;
margin-right: auto;
max-width: 1300px;
opacity: 1;
animation: introAnimation 400ms ease-in-out 0ms forwards;
vertical-align: top;
white-space: 0;
font-size: 0px;
}
.container .content.c {
text-align: center;
}
.container .content .home_img:before {
content: '';
display: block;
padding-top: 56%;
}
.container .content .home_img {
display: block;
background-color: rgb(30, 30, 90);
}
.container .content .item_block {
display: inline-block;
width: 50%;
padding: 10px;
vertical-align: top;
box-sizing: border-box;
text-align: center;
}
.container .content .item_block .poster:before {
content: '';
display: block;
padding-top: 151%;
}
.container .content .item_block .poster.sqr:before {
padding-top: 100%;
}
.container .content .item_block .poster {
display: block;
max-width: 550px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-image: url('/assets/no_poster.png');
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div id="nav">
<div class="nav_container">
<div class="logo_container">
<div class="brand_logo_icon">ABC ABC ABC ABC ABC ABC ABC ABC</div>
</div>
</div>
</div>
<div id="container" class="container">
<div class="content">
<div class="home_img"></div>
</div>
</div>

How to get logo, header and button in line without using margin hack.

I want a heading, a logo and a button to all be in line where the heading is centered, the logo is offset to it's right and the button is small on the right hand side.
I can hack this together if I fix the margins but this is not scalable and therefore don't want it as a final solution. What's a better way to do this?
My code is below and I also have it posted here as well: http://codepen.io/blueduckyy/pen/RpKoMJ .
HTML:
<div class="top-bar username-heading">
<img src="http://www.wonko.info/ipt/xfiles/interfaces/target.bmp" alt="Missing">
<h1>blueduckyy</h1>
<a class="button user-edit-button" href="/users/edit">Edit</a>
</div>
CSS:
.username-heading img {
float: right;
width: 100px;
height: 100px;
margin-left:-250px;
margin-right:150px;
}
.username-heading h1 {
position: relative;
top: 18px;
left: 10px;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
float: right;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
You can place the items with 'position: absolute' inside the container:
.username-heading {
vertical-align: top;
position: static;
}
.username-heading img {
position: absolute;
right: 0;
width: 100px;
height: 100px;
}
.username-heading h1 {
position: absolute;
top: 18px;
margin: 0 auto;
width: 100%;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
display: inline-block;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
position: absolute;
right: 0;
top: 120px;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
}
Keep in mind that the '.username-heading' position must be other than 'static'.
Just use positioning,
position: relative;
top: 25px;
This is the only css youll need.... Here is the pen
.top-bar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: orangered;
}
img{
height: 40px;
border-radius: 50%;
}

Responsive / Relative Positioning Background Image

Issue I'm having is the background image on the anchor as a before element needs to move with the text as you resize your screen.
I need the background image to maintain it's position ( e.g left: 20px;) with the text as you resize your screen.
Here is my CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
width: 50%;
}
ul li a {
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
position: relative;
color: #717171;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
top: 10px;
}
.link-1:before {
left: 20px;
}
.link-2:before {
left: 0px;
}
Here is a working example: http://jsfiddle.net/2KHS6/
All suggestions welcome
New version:
http://jsfiddle.net/2KHS6/5/
Hope it fills your needs. You might want to set a min-width to avoid problems with small screens though. I did this basically:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
width: 50%;
margin: 10px 0;
/* So things don't get crazy */
min-width: 160px;
/* center the child, the <a> */
text-align: center;
}
ul li a {
display: inline-block;
text-decoration: none;
font-weight: bold;
color: #717171;
/* Should be the same height as the img so it stays centered */
line-height: 33px;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
/* position the image at the left of the a. There are many methods to do this actually */
margin: 0 0 0 -50px;
}

Yet Another Situation with Vertical Centering but Nested in Anchor and Span

Searched high and low and every situation out there does not work for me. How can I vertically center the text within each list item? I do need to keep the link (clickable area) covering the background image.
HTML
<section>
<ul>
<li><a id="monday" href="_monday.html"><span>Monday</span></a></li>
<li><a id="tuesday" href="_tuesday.html"><span>Tuesday</span></a></li>
<li><a id="wednesday" href="_wednesday.html"><span>Wednesday</span></a></li>
<li><a id="thursday" href="_thursday.html"><span>Thursday</span></a></li>
<li><a id="friday" href="_friday.html"><span>Friday</span></a></li>
<li><a id="saturday" href="_saturday.html"><span>Saturday</span></a></li>
<li><a id="sunday" href="_sunday.html"><span>Sunday</span></a></li>
<li><a id="printAll" href="_week.html"><span>Print All Specials</span></a></li>
</ul>
CSS (some version of it - I'm still learning lots :)
section {
max-width:86.029411764%;
margin: -6px auto auto auto;
overflow: hidden;
}
section ul {
display: inline-block;
width: 35%;
height: 100%;
min-width: 320px;
margin-left: 1rem;
margin-right: 1rem;
}
section li {
position: relative;
display: block;
background: url(_images/daybg_06.png) center center no-repeat;
background-size: contain;
padding-top: 14.95%;
margin: 20px auto 20px auto;
}
section ul li a {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 1.3rem;
color: white;
text-decoration: none;
text-align: center;
}
section ul li a span {
}
Here is updated link - http://jsbin.com/ExEHAL/1/edit?html,css,output
use :
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Personally I don't like my own answer )) But I find it the best in the current situation.
section ul li a span {
position: relative;
top: 12px;
}
EDIT:
section ul li a span {
display: block;
width: 100%;
position: absolute;
text-align: center;
left: 0;
top: 50%;
margin-top: -10px;
}
The first example is not centered. The second example is a bit closer to what is needed. The only this to note that margin-top: -10px means the element's height / 2
This is what I came up with, I haven't validated or anything but this does keep the text centered exactly like I needed. Thanks again for previous help, it is all greatly appreciated!
Same HTML
CSS
section {
position: relative;
width: 86.029411764%;
height: 100%;
margin: -6px auto 0 auto;
overflow: hidden;
}
section ul {
list-style-type: none;
display: block;
width: 100%;
min-width: 200px;
margin: .6rem auto 1.2rem auto;
height: 100%;
font-size: 0;
}
section ul li {
position: relative;
width: 45%;
max-width: 481px;
display: inline-block;
background: url(_images/daybg.png) center center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
margin: auto 2.5% auto 2.5%;
list-style: none;
text-align: center;
padding-top: 9%;
}
section ul li a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
text-decoration: none;
text-align: center;
}
section ul li a span {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
line-height: 0;
font-size: 1.1rem;
color: white;
text-align: center;
}

Overflowing issues

I am working on a HTML/CSS website, with mainly 4 divs (wrapping, top, menu and content), using a centered layout.
The problem is that the text inside my #content overlaps and I can't force it inside the div. Also, when I enable scrolling on the div and disable it on HTML, the scrolling just won't work for the div. So I get stuck with the overlapping content and no option to scroll down.
So, resuming it, I want to use 3 fixed divs, centered, leaving two side-borders and want my background-image to not move. Only the content should scroll inside of it.
Here's my CSS code:
<style type=text/css>
html
{
overflow: none;
}
head
{
}
body
{
background-color: #030B12;
}
p
{
font-family: verdana;
font-size: 12px;
color: #FFFFFF;
text-align: left;
}
h1
{
margin-top: 25px;
font-family: verdana;
font-size: 16px;
color: #FFFFFF;
text-align: center;
}
bg2
{
position: fixed;
top: 0;
left: 0;
}
#wrapper
{
height: 100%;
width: 70%;
margin: auto;
background-image: url('bg2.jpg');
background-position: fixed;
background-repeat: no-repeat;
}
#top
{
background-image:url('top.jpg');
background-repeat: no-repeat;
background-position: fixed;
height: 15%;
width: 100%;
margin: auto;
}
#menu
{
height: 60px;
width: 100%;
background-image: url('navi_bg.png');
}
#content
{
overflow: auto;
display: block;
}
ul
{
list-style-type: none;
height: 60px;
width: 663px;
margin: auto;
}
ul a
{
background-image: url(navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 22px;
padding-left: 16px;
display: block;
line-height: 60px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #FFFFFF;
}
ul li
{
list-style-type: none;
float: left;
}
ul a:hover
{
color: #3F5F7B;
}
Based on what is available, I've created a layout that I think is what you are looking for. There are some issues with getting the top li menu items to center, but I am sure you could work that out pretty easily. You should specify the height of the content area if you want to scroll just that area, and keep the wrapper's background static.
div#content{
max-height:300px;
overflow-y:scroll;
}
Here is the fiddle

Resources