I am designing a page which required a horizontal Bar with Plus image at center. Lke this,
I have tried this,
<div><img src="http://s7.postimage.org/z6jiogw6f/add_icon.png" /></div>
div{
background: #ced8e7;
padding: 1px 0;
position: relative;
text-align: center;
overflow-x: hidden;
}
But the bar is not circular and plus image is completely inside of Bar. Can anyone help? Sample, http://jsfiddle.net/PSAEJ/
Try this, it will work tested :
Updated :
jsbin demo
This should work for you: You just needed to wrap your img tag into another <div>
http://jsfiddle.net/ZkDXA/2
Edit:
You really don't need an extra div if you prefer not to. Another example http://jsfiddle.net/ESt84/
set overflow property to visible or remove (default overflow: visible) and give -ve margin to your image
div {
background: #ced8e7;
padding: 1px 0;
position: relative;
text-align: center;
height: 7px;
margin-top: 5px; }
img {
margin-top: -7px; }
Updated jsfiddle : http://jsfiddle.net/PSAEJ/10/
Related
There seems to be random white space after the footer at the bottom of the site. When I try to use inspect element, the white space doesn't seem to fall under any tags. It doesn't seem tied to any footer tags either as removing them didn't change anything.
I'm using Ryan Fait's Sticky Footer solution for my footer.
You can test it at: http://www.edmhunters.com/martin-garrix/
Any ideas what I'm doing wrong?
try to include display:none instead of visibility:hidden to the id _atssh to get this fixed
This should fix it, it will eliminate the white space at the bottom.
Change
footer {
width: 100%;
/* height: 150px; */
padding: 10px;
background-color: black;
color: white;
height: 100%;
}
To
footer {
width: 100%;
height: 100%;
padding: 10px;
background-color: black;
color: white;
height: 100%;
}
I don't know if you have to keep the visibility property but you should use display none here:
<div id="_atssh" style="visibility: hidden; display: none;">
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
I'm having a little trouble centering a div both horizontally and vertically. I've had a quick look around and can't really make much sense of other answers, so I thought I would post my own question.
What I am looking to do is center my div with text horizontally and vertically however I need the container div to stay perfectly sized to the window.
Here is the css I'm having trouble with.
body{margin:0 auto;}
div#section1 {height: 100vh;background: black;}
Also, here's a link to JSFiddle, I couldn't post HTML in here for some reason, the "Post" button would grey out.
Thanks
same: use vertical-align: middle.
body {
margin:0 auto;
color:white;
width: 100%;
display: table;
}
div#section1 {
height: 100vh;
background: black;
display: table-cell;
vertical-align: middle;
}
.center {
text-align: center;
}
Working Fiddle
All you need to do is to use the block of code below with margin: auto; which is important there.. Rest, playing with CSS positioning will do the job for you.
I don't think there's much to explain here, just make sure you use position: relative; for the container element so that your absolute positioned element stays correctly
div#section1 {
height: 20vh;
background: black;
width: 20vh;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
Demo
You can refer my other answer here which will explain you some other techniques to achieve vertical alignment, because horizontal is quiet easy using margin: auto;
JSFIDDLE DEMO
.btn {
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #000;
padding: 25px 80px 25px 80px;
font-size: 18px; }
So I have this image, which is responsive and button over it which should be always centered.
If you move the window width, you'll see that image changes size quite a bit and I would like to know what is the best way to set button so it will change size automatically with image as well so it gets bigger/smaller?
Is there a better solution for this besides setting a lot of #media queries here?
Since you're using absolute positioning you can't currently use margins to achieve this.
However, if you use a new div that wraps the anchor, set it to position: absolute and then center the anchor inside that, it'll work.
<div class="logo">
<img src="http://s13.postimg.org/9y14o777r/imgholder.png" />
<div>Register</div>
</div>
.logo div {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 25%
}
.logo a {
display: block;
margin: 0 auto;
width: 250px;
}
Fiddle
You can adjust the sizing and vertical centering as you need, and add some responsive css or min-width to control too-small sizes.
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.