Having Following code, M trying to bring the second div in the center, somehow it is not coming, i do not want to use margin in minus:
Here is html and css
<div id="headerLeft">
<div id="imgsection">
<div class="logo"></div>
</div>
<div id="usersection">
<div class="user">Sign</div>
<div class="location">Find</div>
</div>
</div>
my CSS
#headerLeft {
width:45%;
}
#headerLeft #imgsection {
width:150px;
}
#headerLeft #imgsection .logo {
background: url('../img/logo.png') no-repeat;
background-size: cover;
width:88px;
height:71px;
width:100px;
}
#headerLeft #usersection {
float:right;
width:200px;
margin: auto;
}
#headerLeft #usersection .user {
width:80px;
float:left;
}
#headerLeft #usersection .location {
width:80px;
float:left;
}
check this fiddle
http://jsfiddle.net/CF6kX/
the second one which is covered with id: usersection needs to be in between, currently it is appearing at the bottom
In the image section add property float:left ,increase headerleft width below is the code
#headerLeft {
width: 58%;
}
#headerLeft #imgsection {
width:150px;
float: left;
}
#headerLeft #imgsection .logo {
background: url('../img/logo.png') no-repeat;
background-size: cover;
width:88px;
height:71px;
width:100px;
}
#headerLeft #usersection {
float:right;
width:200px;
margin: auto;
}
#headerLeft #usersection .user {
width:80px;
float:left;
}
#headerLeft #usersection .location {
width:80px;
float:left;
}
remove float:right from This CSS
#headerLeft #usersection
{
float:right;
width:200px;
margin: auto;
}
FIDDLE
Related
I try to center image inside this absolute position div I try margin: 0 auto but it can't work. what I am doing wrong?
<div class="support"> <img src="../image/contact.jpg" /></div>
.support {
position:absolute;
left:30px;
top:50px;
width:300px;
height:450px;
}
.support img {
width:243px;
height:350px;
margin:0 auto;
}
add display:block to image:
.support img {
width:243px;
height:350px;
margin:0 auto;
display: block; /* add this */
}
You can also use display: block; like this:
.support {
left:30px;
top:50px;
width:300px;
height:450px;
}
.support img {
width:100px;
height:100px;
margin:0 auto;
display: block;
}
<div class="support"> <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAFoAtAMBIgACEQEDEQH/xAAbAAACAgMBAAAAAAAAAAAAAAADBAIFAAEGB//EAD4QAAIBAwIDBQQGCQMFAAAAAAECAwAEERIhBTFBEyJRYXEGMoGRFEJSobHBBxUjM1OSotHwg+HxFiQ0Q2L/xAAaAQADAQEBAQAAAAAAAAAAAAABAgMABAUG/8QAKREAAgIBBAIBAgcBAAAAAAAAAAECEQMSEyFRBDFBBWEiMkJScYGRBv/aAAwDAQACEQMRAD8A9He3PhWkhIFXjWeeVQ+gt4VCmWtFMYj4UJ4vKrw2DnpQm4fJ4UysFoo2i9RQXh/zFXx4fJ/DoL8PfrGflVFIVnPvEw5AGh4x7ykeYq+fh5+z/SaH+rGbkn9NUUyTiUjtIRjZh5igtkHYCr5uDuP/AFtnyFCfhMv8A/y06mhHEon0t7yKD5GhGNPsVdtwS4blD9+KE3AbrGOzA9WFOpom4srBEgGQh+GKi0Mkg/Zq5+FOj2duBcNMqorsApJc7gcvxoycBueZnhU+pNNqXYpRtbsD31b5Vo24IJOwHVhir79RMNzcKfDEZ/vXn/6TYPonELOEOzJ2atg8s6t9vlReShKOg+jMy6ogCPEHIqOi4UaQgx6VxnsHDNce0Vtbwl1jdZDNo+yM4z8a9VXgqLk/SrgeAxn86KnasU5sWrEZdd/WhyRCMYWP+qupHDArZ7Z38mAFGPDbNie0Dnbl5/OjrZqicSVLclyfAHNDNtI5x2TfGu2ksYW7qxBQOozn8aXk4TAwx3z60VkfQJQj2ciLHbvYB+FZXT/qWLzrKfWyemJ6YRWsGlE4rZycpgD4Haprf27DuyA+m9eVuQ7PX0PoORWsUA30P2j8jUDxCEfWrbkezaGMGtbjkaVPEoPEVA8Ut/GtuI2hjZB+0fnUSnmaTbisP2jVB7Qe3VnwhSiI1xcD6gwoHqf86Z5imjLVwgOB1Jj8TUTGDXlF5+k/i8ndt7a1h8Ni5/H8qQk/ST7Qg4E0C/6ANUUZGeLiz2Tsx5VExDntXklv+lbi8Uim7s7SZB7wXUhPockV1PCva234rwyVorqQFy2rUdMkOeQ28OhpZNwVv0LtHYGEeAqJh8qoD7SJ0dD6VA+1Sh9OFA051flQ3BNtF+0QG5wPWuV9v/ZdOPcKZ7Zo1v7YF4SzAahzKk9B+dEl9qYyc90mlpPactsHQbcmyc1tywbSPN+Hy8T9lr+eK1lj+mHCOY1EgfqACRkg/DO3lXtcZBhjM5RJSgLpn3TjcfOuDubqxn4tDxOSKJriKMqp3x5HHiBnH+wpqTj6HdsDPXc1oZK9sv5DxzhGOOFV7OyJg/ix/wAwqOYf4sf8wrim40n1gB1900F+MrrZS6oVGd15jGdvnT7sOzk25dHbtJbgnM0e3/1WtUJ3EqY9a4Me0WqMEXD+Y00u/tIvW4Ph7tbdh2Dbl0ehFoc/vE+dZXm3/UsfWaT4JWqO5D9wNuXR3ZbKKcjcUIzyJtGzZ6gU3J7QWxiVordiNO2cCqu69oJtZaJEiOMeNeG4Rv2e0m+g7XN4DgCf+U0Ca4vFzr7VcfaGPxqsm4xfS5Anf0WkJLicnLuo8c9aosUvgzfZaS37j3pjnyblVdNfSI2pWYb95gdzSpmLHTqyT9kAUoxMpT9ruzYO3KnWqHsm2mW1hxOdrg6neREV30E7nC5x8cY+Nczxx3+nzhn7TsnMer7TA95vi2T/AMVbcOuorbiI0jK6TgHq3h8eVU/FTm7nRiCRcNk+PeNex9MyQalaPL8/di4yinp+3xQp2JYaiwHXeln5DumnrkK1uN8YdT99HbBU16aSj+TgjinHOm27r+ijfYbijcJu5LS8BifHad1hRLuBW7xJBxVfErfSF0hjz2HOubNiahKTVo6lkTcY2dSOJhpQis4ODupG/pnaox8SlM3Z28bzyAHAZhjHn0NJ2ltDMH13A2XCxKBqzjfBzU+HQRRSyW6SXCzyDAzgYHPOa+TnOKumztoJpvz9YIpGo/thgfM0Ce5lV5DI6EJhcxufu5eFbuLY2za9ZIUgAy5xnFKXMd5LHIJbMMxbOtRy50Y5ZS+RWjP1g2vMUjYwcZzn8aeAuLmxhEdtJKzS5yCwzyGNiM8uXnUIL4Jwr6KbWIyF1KOI+8cbEHrVfd3PIjCkHcKTVv1exla5Qxci5ik0ypNDJjBEqFcn4jPjVvf8G4pw3h8NxPDEsbYBkjcEDI2Bxuc097MXHEuIWkunEsaYWNpWPfYnAU74JyRz8aS4jxyxkjuLabh7E7gAaVCsAQD3ccjv1qbuTr2PUauyjkeftFXtS6hScKcZ8qEr3LSkSSaNtteNuXjT8d9wJrZEu+G3Pb8u1guNOrzIbO/yqikEUmWJOBzwMY++qqDZJljJqTTouJ21KCdKjY+FZVayxrjUZBttuP71lNtvsHJ6dHdgW8R07FQKHLcDog+NVon/AOxtz17lSkm5Ac8U0cXJbXwHeVm5n4Chs4pdphufOgPdAZxXTGNexHKxxXOoY2/5oV4gwHKCEEY3fAb4VWtekMSoPrS8l25lMhJ1n62N6WdP0LyMpDdSzRBCFZ2AVwfdPjROKQdrN9It1xHL7y5GUcdD67H5+Fa4VxHN7FC2rBzpBHXBxVdFeQxTuU1GFzllYgHH4ZrnjLJGX4Dv8Lyl47/GrjLhr7E8l10MNuvjRnkIGUKtjp407HbW87K1nicMurkM0CWwMcrh2K4Pu45U8Pq7Tal7PVyf879K8uMXBaa54+f9sVd0lUH3gaVjhiMrvqGV3GDjR686nc67diMYZhnGefhQbYERNI4wzFjvyHTH3VfP58smHQvk+d8j6QvA8nTHJqXwuhsX/ZRL2DowbOcrgluRx6jB+NKX3EpjIskLtH3caPDbekLiIxS4ZlzzIOxHwoUOh5VWVyqE9Fzny51wLDG7NKVuy7hvpBYIG7J5F375I0g9Rj/DmtxT8TuppLVIlXWdblhgBeW2arbKZIp3Z3LhCAmds4Oxx+VWEfEIpGZnJR22DA+7U5w0t0gBpbVYQshvC8eohcgjOD5cqDcQ2P0ZRGHuJSd3AIpCWVZJsSzYVfd7uc0SWZZWYLlWzhQ3LGfu6UVCXHIS99m+KXPBIndv2kDFHjjZvc0tq6eOMVRzTpPeSSSa41ckk4zjNKSTSah7pHLbrS7zMTv+FUjBp2BsuOMNZ/rJEsGjMKKgzGcqTjc5qrJBjcHxHM+tQgde1UHPPbAo08EkcIcOoDchgb4q8I1FInFaVRC5ZcQ6Tt2Y5HzNZQZFZQgYBjp9ceVZRGs6+O6JtEHdLDTtpGNqlNdfs17x689vuqrW5CxKEXTsNyaHLOrHLNyp9aRht70E41VAXKZ3bakDOM93HyrYuB1G/lS62axxpoPtn4GgtMjZCFs+JNC+kJjeom4j05UDNHWI2w0cywTRSkklHDDHlSscvZ5caTgY3qGWdS+dWOYoJmKKSDvnlgYrfNh1cUWvD+OTWV5q7vYscFWHu+dX/E+LGGzWWaOHM4IQoO8wGM/DpmuBeQltR505NdzScNht3uS0SHKxlidJJ6DpXJl8WGSam/Z2YPMyYYtRf8DLcRZ9byKTJ0IGRS5dpowxLMR7xJzgUoLp9JwQBjGF2qUbFGB1aVbZt966JRXC6ObU5NuT5ZqQgHY79KLajE8TNyO9C7JZ5W0yYx9rarCztwIz2oOpT3cDzopK6AyMyhlVgBqAwaVfUhBY03GQx0A7kbdMGtFcHvrkeDHlTyhYLEZMhgW5c/WsaZg7YJ25Z9auTb2xjyH0jOdJYbUo9pBI+iN2dzzCr8980rhS5GUkyvR2blj400tkxj7WZ9G+AoGc8v71t7a3tZR20yt10KD99CuLgMx0tqQjAJ50l2+Ak1/erHAhdzhRgbmmyeyt9Nwco25Crq0H1pfhttIR9JMmhV2GfredGnjJj/aJKWO+5OMActvSlcuaTNQjIkOo6Wdx44xWURVQfvFyT67fKt0+oFG45squTtitNJg70qh7oqT8hQoUKZt8Y2rRloFY1MkAMZMcq0r6uZPwoNEi50aFY3G4EDR97flnp8qVZQDg5PnVhZqrGPUoOXwcim+IbSyoNkEZwvQd0VN5adGRz0gPTPzoOrxpxuR9KXIGobdasmGzUYGd9/Km1gkkHdiOMeH96NAAqZUAHHMVgJY945586dY0/YG6IrZsPfkCde7lj91OQ5gVuwDN2i7u2/3cqnaqpiOVBw3UUtcyOWjUu2krkjPnVViSVi6+Q57A7HKnxU1CVTISyhSMYwDSzbMcbb0VNgcf5zpKop7Ik6TjkRTEMiK80MRJbQTr28NwP96negBmwBypDhH/AJJ9PzFRy/lGiMNbRjM10zQR57oxl3NbitbaVQbWNpZMgZMmACR1J51rixOXGdhIcDw71NcK7qHTtp7QjHQ451zuTUbGF7wXyXMdvE8OoppK6+fPckgUjeTXTXJaTCsvd1RtlfTPKgcRZtb948/GsnJW9dFOFyO6OVWhGkmBskty6jAZfjvWUoedZVNCCf/Z" /></div>
Hey try this text-align center in image parent div
.support {
position:absolute;
left:30px;
top:50px;
width:300px;
height:450px;
text-align: center;
}
.support img {
width:243px;
height:350px;
margin:0 auto;
}
<div class="support"> <img src="../image/contact.jpg" /></div>
<style>
.support {
left:30px;
top:50px;
width:300px;
height:450px;
margin:0 auto;
}
.support img {
width:243px;
height:350px;
margin:0 auto;
}
</style>
<div class="support"> <img src="../image/contact.jpg" /></div>
try this.
I try to vertically center an image in the middle of the body but nothing seems to work. I've tried different tricks found here (height 100%, table-cell, position:relative...), but with no luck until now. My code is
html:
<div id="container">
<div id="header">Header</div>
<div id="body">
<div class="image"></div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height: 200px;
width: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I made a fiddle here: http://jsfiddle.net/dragoeco/hjcz6j0r/1/
I looking for a working solution with IE8+ so maybe there is a jQuery way to do that job? What is important for me is to keep the footer at the bottom of the viewport so that's why I used a obsolute position for footer. Thanks.
Something like this maybe :
LIVE EXAMPLE
html, body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
display: table;
margin-top:-60px; //height of the footer
}
#body {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height:200px;
}
#header {
background:#ccc;
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I had success with the following CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
position: relative;
}
#body {
padding:10px;
padding-bottom:60px;
position: relative;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center ;
position: absolute;
height: 200px;
width: 100%;
top: 50%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html#vertical
Add this:
.image{
position: absolute;
top: 50%;
margin-top: -100px;
}
It works everywhere (except IE6-7, position relative may be needed there). You can do the same for horizontal centering.
Here is the fiddle: http://jsfiddle.net/hjcz6j0r/7/
For the first time i'm doing some responsive DIV'S and now i have made my responsive background and i wanted to my content look like this:
But it looks like this:
If someone could help me it would be great.. Here is my code that you see what i was doing
jsFiddle
HTML:
<div class="container">
<div class="leftColumn"><img src="projekt.png" width="400" height="400"></div>
<div class="rightColumn"><img src="projekt2.png" width="400" height="400"></div>
</div>
CSS:
.container {width:100%;}
.leftColumn {width:50%; float:left;}
.rightColumn {width:50%; float:left;}
#media(max-width:400px)
{
.leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; }
.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }
}
Images are 400 x 400 pixels and background image is 1920 x 1080
For background, use background-size property (CSS3).
.container {width:100%;}
.leftColumn {width:50%; float:left;}
.rightColumn {width:50%; float:left;}
#media(max-width:400px)
{
.container {
width: 400px;
height: 400px;
background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
background-size: 400px;
}
.leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; }
.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }
}
#media (min-width:401px) and (max-width:800px)
{
.container {
width: 800px;
height: 800px;
background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
background-size: 800px;
}
.leftColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:red; }
.rightColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:blue; }
}
http://jsfiddle.net/XmqNy/235/
try it in your css file:
#media(max-width:400px)
{
.leftColumn { width:100px; position:relative; background-color:red; }
.rightColumn { width:100px; position:relative; background-color:blue; }
}
You don't need to write display:none.
I am trying to place my logo above a menubar i created in css, but what ever i try the logo always goes below the menu bar, i am trying to achieve a manubar the width of the page with a logo in the centre of the menubar.
My CSS code is ;
#bar {
margin-top:50px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3px groove #FFD700;
}
#logo {
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
}
and html is;
</head>
<body>
<div id="bar">
</div>
<div id="logo">
</div>
</body>
</html>
Thankyou for any help
Z:index is your friend
http://jsfiddle.net/BrvL2/1/
#logo {
position:absolute;
background-image:url(http://placehold.it/150x150/f16b20/ffffff);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:999;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#bar {
margin-top:50px;
width: 1920px;
height: 30px;
background-color: #2E2E2E;
border: 3px groove #FFD700;
text-align: center;
}
#logo {
position:relative;
background-image:url(http://placehold.it/150x150/f16b20/ffffff);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:999;
top:0px;
}
<div id="bar">
<div id="logo">
</div>
</div>
Hope this works for you.
Here's the CSS:
#wrap {
position:relative;
width:100%;
}
#bar {
position:relative;
margin-top:50px;
width: 100%;
height: 30px;
background-color: #2E2E2E;
border: 3px groove #FFD700;
}
#logo {
position:absolute;
background-image:url(http://placehold.it/150x150/f16b20/ffffff);
background-size:150px;
width:150px;
height:150px;
left:50%;
margin-left:-75px;
margin-top:-50px;
z-index:999;
top:0px;
}
I put in a wrap, so the #logo would have a parent container to reference when positioning. This will float the logo in the middle of the menu bar.
Here's the fiddle: http://jsfiddle.net/BrvL2/3/
alter the 'left:' attribute until it is centered
#logo {
position:absolute;
top:0;
left:45%;
right:0;
z-index:1000;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
}
I am working on a structure to have a top navigation fixed, a left nav to be scrollable and a right nav to be fixed.
I have created a fiddle here. just need help with the css.
http://jsfiddle.net/PxbX9/
#header {
position:fixed;
background:red;
width:700px;
height:30px;
}
#left-block {
float:left;
width:350px;
background:blue;
height:1000px;
margin-top:30px;
}
#right-block {
float:left;
width:350px;
height:1000px;
background:pink;
margin-top:30px;
.fixed-block {
postion:fixed;
height:1000px;
}
This can be achieved by restructuring your CSS to this:
#header {
position:fixed;
background:red;
width:700px;
height:30px;
}
#left-block {
float:left;
width:350px;
background:blue;
height:1000px;
margin-top:30px;
}
#right-block {
display: inline-block;
float:right;
width:350px;
height:1000px;
background:pink;
margin-top:30px;
position:fixed;
}
I've only made CSS changes to the #right-block selector.
Removed the class .fixed-block, which had a typo in the form of postion (should be position).
position: fixed; has been added to the #right-block selector.
display: inline-block; and float: right; have been added also.
DEMO
Hope this helps.
Take a look at that Working Fiddle
Pure CSS solution, Very Dynamic, Totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="RightContent">
</div>
<div class="LeftContent">
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Wrapper > div
{
height: 100%;
overflow: auto;
}
.LeftContent
{
/*for demonstration only*/
background-color: #90adc1;
}
.RightContent
{
float: right;
width: 500px;
/*for demonstration only*/
background-color: #77578a;
}