I need to display a logo in the middle of a header, so I put it inside a div with following properties:
header {
background:#840CFF;
width:100%;
padding: 30px;
text-align: center;
}
div.logo-main{
display: inline-block;
padding: 0px;
}
body {
margin:0;
padding: 0;
border: 0;
}
But log is actually shifted a bit to the left. Why?
UPD: HTML code:
<body>
<header>
<div class = "logo-main">
<img src="logo_forest.png">
</div>
</header>
</body>
Remove the padding on the left and right. Use padding: 30px 0 instead of padding: 30px
header {
background: #840CFF;
width: 100%;
padding: 30px 0;
text-align: center;
}
div.logo-main {
display: inline-block;
padding: 0px;
}
body {
margin: 0;
padding: 0;
border: 0;
}
<header>
<div class="logo-main">
<img src="http://placehold.it/300x300">
</div>
</header>
There's a few different methods in which to achieve this.
The method you're trying to do seems to be the simple text-align method.
Which makes an element 'flow' with the text and center itself in the middle.
The other is a little complicated (well I did when I first started using this method). You want to make the element have 'automatic' margins so that it positions itself in the center. Here's the simple method first
header{width:100%;padding:0;text-align:center;/*remove your 30px padding. It's what's causing the positioning error*/}
.logo-main{display:inline-block;}
Now for the slightly more complicated method :
header{position:relative;width:/*not sure you need to set a block element 100%?*/}
.logo-main{position:absolute;top:30px;/*what you set with padding*/left:0;right:0;margin:0px;auto;}
But back to the reason why you have a position error is because you're setting header at 100%. Then adding 30px to all sides. so that's 100% + (30px + 30px) meaning header would probably actually be larger than it's parent container by 60px. Making your .logo-main off center by 30px.
Related
I have an issue with overlapping DIVS. Tried a few things but none have provided the desired outcome. I suspect this is quite easy but i'm missing the key element.
Currently the bingo div overlaps the numbers div. On many screens the numbers div is not even visible as the bingo div takes up the entire screen
HTML:
<body>
<div class="numbers" style="height:100%">
<h2>
What sort of number do you want?
</h2>
Evens
Odds
Primes
</div>
<div class="bingo">
</div>
</body>
CSS:
html{
font-size: 100%;
font-family: sans-serif;
}
h2{
margin:2rem;
}
h1{
margin:-2rem 0 2rem 2rem;
font-size: 4rem;
}
a{
margin: 0 0 0 2rem;
border:solid black 1px;
padding: 0.618rem 1rem;
text-decoration: none;
color:black;
}
a:hover{
color: white;
background-color: black;
}
img{
position: absolute;
bottom:0;
}
.bingo{
bottom:0;
margin: 4rem 0 0 0;
width: 100%;
height: auto;
overflow: hidden;
}
Thanks!
The "number" <div> takes the height from the contained elements, texts and <a>; the point is that the <a> elements are inline whose CSS height is just the height of the text lines. If they appear to be rectangular on the screen it's just cause you set a padding (that's not added to the parent <div> height).
That's causing the overlapping of the rectangles on the "bingo ", but for CSS height there is no overlapping.
The solution is that the "number" <div> takes the whole height of the elemets inside it in order to "push down" the "bingo" <div> using:
a {
...
display: inline-block;
margin-bottom: 2rem;
}
I added a bottom margin just to prevent they touch eachother when in a single column at the resize of the screen.
https://jsfiddle.net/hoq97sj5/1/
I'm trying to create a div (gray background) at the top of my div-container and I can not make it match with the background-width size since there is a gap in the left side of the block.
Could someone explain me why?
body {
background-color: #a71930;
}
.container {
height: 1200px;
width: 1200px;
background-color: white;
margin-top: 50px;
}
div#about {
height: 400px;
width: 1200px;
background-color: #a5acaf;
margin-left: 0px;
}
<body>
<div class="container">
<div id="about"></div>
</div>
</body>
codepan
I couldn't reproduce your problem in codepen but there are couple of things that you can try here to fix this problem.
1- Reset the margin and padding of each html element to 0. Add following code to your CSS file.
*{
margin: 0;
padding: 0;
}
2- Set the width of second div to 100%
use the css code
.container{padding:0px}
I believe the 'gap' you mentioned is just because you didn't reset the margins of your <body> tag.
Just set it to 0 like so:
body{margin: 0;}
I am having a difficult time with a margin issue. Basically I have 4 boxes displayed inline.
I have the boxes themselves and then an internal container .connect-box-wrap. What I am trying to do is to get the horizontal margin for the .connect-box-wrap to be auto, so the start of the content is around the middle point of the box, making the #contact-connect appear more centered. Right now it looks as if the internal container is aligned left and not taking the margin: 0 auto;.
I am wanting the text to still be aligned left...I just want the internal container to have the horizontal auto margin.
Any ideas?
Fiddle
Here is what it looks like now (paint image showing borders, if it had them).
What I want this to look like is this:
This is a summary of the code, see the fiddle for the full code for all four boxes.
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
#contact-connect-box-container {
margin: 0 auto;
width: auto;
}
.contact-connect-box {
width: 25%;
margin: 60px 0 0 0;
display: inline-block;
/*border: 1px solid black;*/
vertical-align: top;
opacity: 0;
transition:1s; -webkit-transition:1s;
}
.connect-box-wrap {
margin: 0 auto;
}
<div id="contact-connect">
<div id="contact-connect-box-container">
<div class="contact-connect-box">
<div class="connect-box-wrap">
<h2 class="contact-connect-title">A</h2>
<div class="contact-connect-description">555.555.5555</div>
</div>
</div>
</div>
</div>
</div>
</div>
To use margin: 0 auto; when centering elements, there are a few things that are required as outlined in this answer:
https://stackoverflow.com/a/4955135/2106563
The element must display: block
The element must not float
The element must not have a fixed or absolute position
The element must have a width that is not auto
So the only thing missing in your implementation is setting the width. You can set it to a percentage less than 100% and you should notice a change that you're looking for. https://jsfiddle.net/bm4jpwh1/2/
Add a width to the .connect-box-wrap, such as width:80%. Otherwise it will default to 100% width and the margin:0 auto won't do anything.
Margin: 0 auto only works if the element has the width set. Plus the element can't be display: inline or display:block.
An alternative would be to set the element to display: inline-block and set the parent with text-align: center.
add to #contact-connect text align center and give to .contact-connect-box text align left.
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
text-align: center;
}
.contact-connect-box {
width: 20%;
margin: 60px 0 0 0;
display: inline-block;
/*border: 1px solid black;*/
vertical-align: top;
opacity: 1;
transition:1s; -webkit-transition:1s;
text-align: left;
}
Fiddle Example
I have a menu bar the is centered on the screen. To the left I have a element as well as one to the right. These have background images that tie the menu bar to the rest of the graphical layout.
The problem is that there are white spaces between the tags. Here is the CSS:
#menu_items {
display: inline-block;
position: relative;
margin: 0;
padding: 6px;
top: -9px;
height: 15px;
background-color: #75784D;
}
#swoop_left {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_l.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
font-size: 0px;
border: solid red 1px;
}
#swoop_right {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_r.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
border: solid red 1px;
}
The images themselves are 140px x 21px (w x h).
I can't float them because the menu won't center. I can't use
font-size: 0px;
on the parent container because it won't display the menu items, and setting the menu-items to
font-size: 1em;
afterwards doesn't fix the issue.
Anyone have a solution that will work in all browsers and doesn't rely upon JS?
NOTE: The borders of the two elements are for layout purposes only and won't be in the final code.
How exactly are the items in the menu generated? In the div that contains the menu are you using an unordered list?
If you are then one possible solution would be to add the left and right images to the :first-child and :last-child elements of the list using css. You would no longer need the two extra div elements and so could just concentrate on the single menu container.
There are four ways which i know & which you can use to remove the whit space.
1) as you said give font-size:0; to your parent DIV & define the font-size:15px; to your child divs.
2)You have to write your mark up in a single line like this:
<div class="parent">
<div>1</div><div>2</div><div>3</div>
<div>
Instead of this
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
3) Not that good solution but some time effective. Give margin-letf:-5px in your div. Like this:
div + div{margin-left:-5px}
4) At last you can use float instead of inline-block;
set background color to check your div width and height and you can use margin-left: with negative value to stand your div perfectly.
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}