I can't seem to get a image to align vertically in the header. It aligns horizontally but It is a little too far towards the top of the header.
The html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home_style.css">
</head>
<body>
<div class="header">
<div class="search_bar">
<input type="text" name="search" placeholder="Search magical instruments, tricks, books and more">
</div>
<div class="user_settings">
<img src="onebit_09.png" width="48px" height="48px">
</div>
</body>
</html>
The css:
html,body{
height:100%;
min-height:100%;
width:100%
min-width:100%;
}
.header{
margin-top:0;
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"]{
position:absolute;
left:20%;
top:4%;
width:27%;
padding:5px;
padding-right:50px;
outline:none;
border: 2px solid #9C4B8F;
border-radius: 5px;
background-color:#FBFBFB;
font-family: Cambria, Cochin, Georgia, serif;
font-size: 16px;
color:grey;
background-image: url('search.png');
background-position: 100% -10px;
background-repeat:no-repeat;
}
.search_bar input[type="text"]:focus{
background-color:#FFFFFF;
border-color:#333333;
}
.user_settings img
{
position:absolute;
top:5%;
left:95%;
height:48px;
width:48px;
margin:-24px 0 0 -24px;
}
The image that I'm trying to position is a little settings cog(user_settings) that is 48px wide and 48px high.
Here is a workaround:
#elementToAlignVertically
{
margin-top:50%;
transform:translate(0px,-50%);
-ms-transform:translate(0px,-50%);
-moz-transform:translate(0px,-50%);
-webkit-transform:translate(0px,-50%);
}
Basicaly you align the element 50% from the top and then use the translate to move it -50% of it's hight so it will center it self.
Probably you'll also have to set the height of the element for it to work or instead of percent use pixels that you want to move the element upwards.
there is a property vertical-align in css which can be valued at varied contents. Check this w3schools tuts.
Vertical-align property
I fixed the problem, I had forgotten to set the padding and margin of the html,body elements to 0. This caused a small white gap at the top of the screen that made it seem like the image was not positioned correctly. Sorry for the inconvenience the corrected code should look like:
html,body{
height:100%;
min-height:100%;
width:100%
min-width:100%;
margin:0;
padding:0;
}
Try using calc for that it will not work in all browser but in some of them will do:
.user_settings img
{
position:absolute;
top:5%;
left:95%;
height:48px;
width:48px;
margin-top: calc(50% - 24px);
margin-top: -webkit-calc(50% - 24px);
margin-top: -moz-calc(50% - 24px);
}
or you can try the margin auto:
.user_settings img
{
position:absolute;
top:0;
bottom:0;
left:95%;
height:48px;
width:48px;
margin-top: auto;
}
Or still my favorite and most reliable is to use some javascript to manipulate the position.
For example jQuery something like:
$(".user_settings img").css('top',$(".user_settings).height()/2-24);
Then make sure you also add a resize watcher like this:
$(window).on('resize', function(){
$(".user_settings img").css('top',$(".user_settings).height()/2-24);
});
In the near future (right now has like the 70% of the browser support) you can do this, a much simpler and elegant solution:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
Related
I have a div. Inside this div are 2 smaller divs. I want one of the smaller divs to have overflow:visible, and the other to have overflow:hidden. Can't figure out what selectors allow me to do this, I think I'm missing something super simple.
edit Sorry, let me rephrase that: I want the main div to have the style overflow:visible only applied to one of the child divs, while the main div also has the style overflow:hidden apply to the other.
Example:
http://jsfiddle.net/3fQBt/
<div id="body">
<div id="visible">This div should be visible.</div>
<div id="hidden">This div should be hidden.</div>
</div>
#body{
width:300px;
height:300px;
margin:20px;
position:relative;
float:left;
overflow:visible;
}
#visible{
width:100%;
height:100px;
margin-left:-20px; //this should overflow visibly
position:relative;
float:left;
}
#hidden{
width:100%;
height:100px;
margin-left:-20px; //this should be hidden
position:relative;
float:left;
}
something like this should get you going in the right direction.
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden-box">
<div id="hidden">This div shouldn't.</div>
</div>
</div>
#hidden-box {position:relative;overflow:hidden;height:100%;width:100%;}
Here's a couple of solutions:
HTML:
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden1">This div shouldn't.</div>
<div id="clip">
<div id="hidden2">This div shouldn't.</div>
</div>
</div>
CSS:
/* solution 1 uses text-indent to create the clipping and a red block to cover the excess background blue on the right */
#hidden1 {
width:100%;
height:100px;
background-color:#00f;
color:#fff;
text-indent: -20px;
position:relative;
float:left;
}
#hidden1:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 100%;
background-color: red;
}
/* solution 2 uses a second div with overflow: hidden to clip the text to get around the parent div's overflow: visible */
#clip {
overflow: hidden;
position:relative;
float:left;
width: 100%;
}
#hidden2{
width:100%;
height:100px;
background-color:#00f;
color:#fff;
margin-left:-20px;
position:relative;
float:left;
}
Fiddle here
Can't you reduce de width of the second div and remove the negative margin-left like this:
#hidden{
width: calc(100% - 20px);
height:100px;
position:relative;
float:left;
}
Demo
EDIT: Added calc() on CSS
You could do something like this, although it's pretty brittle, so not much use in the real world:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {margin: 0;}
#body{
width:300px;
height:300px;
background-color:#f00;
margin:20px;
position:relative;
overflow:hidden;
border:solid 1px #000;
}
#visible{
width:300px;
height:100px;
background-color:#0f0;
position:fixed;
left: 0;
}
#hidden{
width:300px;
height:100px;
background-color:#00f;
color:#fff;
position:absolute;
top: 100px;
left: -20px;
}
</style>
</head>
<body>
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden">This div shouldn't.</div>
</div>
</body>
</html>
TRY this,
#hidden {
width: 100%;
height: 100px;
background-color: #00F;
color: #FFF;
/*margin-left: -20px; <--- remove this*/
position: relative;
float: left;
overflow: hidden !important;/*add this*/
}
How can I set the div #gallery in the center of the div #warp? Here is a demo JS Fiddle.
HTML:
<div id="warp">
<div id="header">
<img id="logo_l" src="images/centerwow-logo.png" alt="Centerwow - Web Design - Logo" />
<img id="Logo_r" src="images/web-design-logo.png" alt="centerwow.com - Portfolio" title="Portfolio" >
<div id="menu">
<li>About Us
<li><a href="#" name="aboutus" title="About Us" >Company Info</a></li>
<li><a href="#" name="profile" title="Profile" > Profile</a></li>
</div>
</div>
<div id="gallery"></div>
</div>
CSS:
html body{
margin:0;
padding:0;
}
body{
background:#F7F7F7;
}
#warp{
position:relative;
margin:0 auto;
}
#header {
position:relative;
background:#DEEAF4;
width:80%;
height: 100px;
margin:0 auto;
}
#logo_l{
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
#Logo_r{
position:absolute;
width:272px ;
height:100px;
right:0;
top:0;
margin:0;
padding:0;
}
#menu li {
display: block;
vertical-align: top;
float:left;
margin: 0 5px;
}
#menu {
position:relative;
width:250px;
top: 35px;
margin: 0 auto;
}
#gallery{
position:absolute;
background:#EBF0F5;
width:80%;
height:70%;
margin:10px auto;
padding:10px;
}
You do not need to include position: absolute to center #gallery. This will already be achieved with margin: 10px auto.
Further, to set a percentage height to #gallery, its parent element must have a specific height. In this case, I assume you want it to be based on viewport height. To do so, every ancestor div must have a height of 100%:
*, html, body, #warp {
height: 100%;
}
JS Fiddle: http://jsfiddle.net/qc9WL/1/
NOTE: I also noticed that there are some bugs in your HTML and CSS.
You need a comma between body and html in line one of your style sheet
You should use <ul> or <ol> tags when making lists
Lastly, don't forget to close your <li> in line six
I'm not sure what you are trying to achieve here - position: absolute on the #gallery is exactly what's causing the problem (that's why margin: 10px auto is not working). If you remove it, the #gallery element will be in the centre.
Also, you could center horizontally an absolutely positioned element of known width by setting left: 50%; and margin-left: -40%; (-40% in this case, because you have the width for #gallery set to 80%)
Since you are specifying gallery width in percentage, why don't you try setting the left and right margin in percentage?
margin: 10px 10%;
places the division at center
I have the following issue with css and was wondering whether there is a way to solve it by setting an absolute height value. The code I have is as follows,
<style type="text/css" media="screen">
html { height:100%; }
body { background: black; height:100%; }
#menud {
position:absolute;
padding:1em;
height:300px;
background-color:#eaeaea;
width:184px;
}
#menue {
position:absolute;
margin-top:300px;
padding:1em;
height:900px;
width:184px;
background-color:red;
}
#data {
position:absolute;
margin-top:0px;
margin-left: 184px;
width:630px;
height:600px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
}
#ad {
position:absolute;
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
#content {
width:1000px;
background-color:white;
height:100%;
}
#info {
margin-top:0px;
width:1000px;
}
</style>
<html>
<body>
<div id='content'>
<div id='info'>
<div id='menua'>test</div>
<div id='menub'>test</div>
<div id='data'>test</div>
<div id='ad'>test</div>
</div>
</div>
</body>
</html>
I have set the height property to 100% but this does not cover the whole background white as one would expect it to. Any help on this would be appreciated.
Thanx.
Setting the height to 100% means 100% of the current viewport height. If your page is longer than the browser viewport, the div is too short. Use auto height to let the height get calculated correctly for you.
Set the height of content back to auto (remove height: 100%):
#content {
width:1000px;
background-color:white;
}
and remove the position: absolute from your ad (or replace with position: relative), so that the ad's height is respected when calculating the parent's (#content's) height:
#ad {
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
now your content is as long as you would expect.
100% height is relative to the container. To cover the whole background, you will have to use javascript. On page load you set the height to the window height.
You can use jQuery, to do this: in that case
$("#content").css('height', $(window).height());
You might have to remove paddings and margins from the body, like body { margin: 0; padding: 0; }, for the relative-positioned container div to cover the whole height.
I want to know how to center a div with CSS. I googled some stuff & checked on stackoverflow but it was conflicting with my CSS code.
Here's my code (just in case):
body, p, span, div {
font-family: 'Droid Sans', arial, serif;
font-size:12px;
line-height:18px;
color:#6d6d6d; }
.countdown {
padding-top:15px; width: 100%;
height: 68px;
margin:0 auto 0 auto;
bottom:0;
position:absolute;
}
.countdown .countdown_section{
background:url('images/backcountdown.png') no-repeat 1px top;
float:left;
height:100%;
width:54px;
margin:0 5px;
text-align:center;
line-height:6px;
}
.countdown .countdown_amount {
font-size:15px;
color:#ab7100;
text-shadow:0 0.8px #fedd98;
line-height:52px;
font-weight:bold;
text-align: left;
}
.countdown span {
font-size:8px;
color:#999999;
text-transform:uppercase;
line-height:26px;
}
<body>
<div class="countdown clearfix">
</div>
</body>
The following automatically centers the element horizontally:
margin: 0 auto;
You can center a div with a specific width using the following css:
#yourDiv {
width: 400px;
margin: 0 auto;
}
Provided fixed width is set, and you put a proper DOCTYPE,
Do this:
Margin-left: auto;
Margin-right: auto;
Hope this helps
To center a div use:
#content{
margin: 0 auto;
}
<div id="content">This will be centered horizontally</div>
<div style="margin:auto; width: 100px;">lorem</div>
The above answers will work for divs with relative or static positioning. For absolutely positioned elements (like your .countdown element, you'll need to set left: 50% and margin-left: -XXXpx where XXX represents half of the div's width (including padding and border).
(example: http://jsfiddle.net/7dhwG/)
This will center your page it works great.
#yourdiv {
width: width you want px;
margin: 0 auto;
}
You can also center an absolute position div by setting left to 50% and margin-left to -half of the full width in px.
div {
position: absolute;
width: 500px;
left: 50%;
margin-left: -251px;
}
Stop using margin: 0 auto, Cross browser way of doing this is Here I have tested it and it works perfectly on all browsers
I'm trying to create a very simple page that contains a container, a header, a left column and a footer:
<containter>
<header />
<content />
<leftBar />
<footer />
</containter>
I want to use the 100% of the height, as I can do with the width, but I simply dont get it work.At his moment I'm using min-height, but how could I use the height:100%` ? What I like is that the footer is always visible, and you scroll the content.
Current CSS
body
{
font-family: Verdana;
font-size: 0.8em;
background-color:#f1f1f1;
}
#container {
border:solid 2px Black;
position:absolute;
left:10%;
width:80%;
margin:auto;
}
#header {
height:20px;
background: #DDDDDD;
}
#leftBar {
width: 20%;
background: #669966;
min-height:600px;
postion:absolute;
top:20px;
bottom:20px;
}
#content {
float:right;
background-color: #cdcde6;
position:absolute;
left:20%;
right:0px;
bottom:20px;
top:20px;
padding:5px;
}
#footer {
position:absolute;
height:20px;
}
/**
* The following allows the usage of height=100% in body tag.
* Creds to: http://apptools.com/examples/tableheight.php
*/
html,body
{
margin : 0;
padding : 0;
height : 100%;
border : none;
}
You need to make it so html and body take 100% of the browser viewport.
I´m not sure if this is exactly what you are asking for, but it is a good resource when it comes to css layout http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts. It also has an article explaining how to add it into a container: http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
html, body { margin: 0 auto; height: 100%; }
#container { height: 100%; width: 80%; background: #e0e0e0; margin: 0 auto;}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
http://jsbin.com/uyezu
Trick is to expand html,body to 100%
I've actually just fixed a similar problem myself this evening, and the following link provided the perfect solution:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Hope it helps.
I've been using this for years, still works great:
footerStickAlt: A more robust method of positioning a footer
http://www.themaninblue.com/writing/perspective/2005/08/29/