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;
}
Related
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:10%;
top:10%;
position:relative;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
I am trying to create a filled circle with border, but getting not the fill properly centered. how to fix this?
Another way to do this is by using Flexbox.
If you add the following to your parent:
display: flex;
align-items: center;
justify-content: center;
And remove the relative positioning from the child element, the child element will be centered inside the parent.
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display: flex;
align-items: center;
justify-content: center;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
Edit: If you encounter a problem with flexbox circles being squashed on smaller resolutions, try using min-height and min-width, and using margin: auto for centering instead of display: flex.
Give left:0; to span.child class.
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:0;
top:10%;
position:relative;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
Just Change the position to position:absolute in place of position:relative for child span span.child.
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:10%;
top:10%;
align:center;
position:absolute;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
You can use position: absolute in child instead to center it
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
I also changed the value of left and top, and added transform:translate() to make sure it is always centered regardless of browser size
div.container {
border: 1px solid red;
position: relative;
}
span.parent {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid gray;
border-radius: 50%;
text-align: center;
position: absolute;
right: 20px;
top: 10px;
}
span.child {
background: green;
width: 80%;
height: 80%;
display: inline-block;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
Just Changed the position:relative to position:absolute of span.child
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:10%;
top:10%;
position:absolute;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
So I have been looking around on the internet to find a solution in order to make the footer stay at the very bottom on the page regardless of the length of the content of the page. I have followed the CSS from tutorials, the footer is only at the bottom of the page if the content is not long enough, if the content is much longer, the page will get the scroll bar and the footer will get stuck in the middle of the page as you scroll down for more content. Below is my CSS and HTML.
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
<html>
<body>
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Try to use this above in Css code
<div style="width: 100%;height: auto;border:1px solid red;float:left;">
<div style="width: 100%;height: auto;border:1px solid green;float:left;">
</div>
<div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">
</div>
</div>
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:fixed;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
change #footer to
position:fixed;
Please try this css and see fiddle link:
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
background: #0000ff none repeat scroll 0 0;
height: 1300px;
left: 20%;
position: relative;
width: 1024px;
}
.container {
background: #0000ff none repeat scroll 0 0;
height: 86px;
left: 20%;
margin-bottom: 3%;
max-height: 300px;
position: relative;
top: 0;
width: 1024px;
}
#footer {
background: #f2f2f2 none repeat scroll 0 0;
bottom: 0;
color: #000099;
height: 100px;
left: 0;
max-height: 900px;
position: absolute;
width: 100%;
}
https://jsfiddle.net/tn30t1k7/2/
Otherwise you can reffer this link:
http://www.cssstickyfooter.com/
<body>
<section class="wrapper">
<main class="content">
content
</main>
<footer class="footer">
footer
</footer>
</section>
</body>
html {
position: relative;
min-height: 100%;
}
body{
margin: 0 0 60px 0;
}
/* don't do that */
/* .wrapper {
position: relative;
} */
.content {
background: green;
height: 200px;
/* height: 700px; */
}
footer{
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 60px;
background-color: orange;
}
How about this https://jsfiddle.net/zkto8o88/2/.
.footer class will search for the nearest parent with relative position which in this case is html tag.
If the .wrapper class would have the position relative property then it would not work.
Will i need javascript? or html css is enough, if so, should i use position or what properties to do that?
If I did not describe clearly then the picture may help to demonstrate
Use position relative on the top div and Position absolute on the img
DEMO:
MARKUP:
<section>
<article>
<figure></figure>
</article>
<article></article>
</section>
STYLE:
*{box-sizing:border-box; padding: 0; margin:0;}
section{
width:480px;
border:2px solid #ccc;
margin:0 auto;
padding: 20px 0;
}
article{
min-height:320px;
width:100%;
display:block;
clear:both;
border-bottom:2px solid #ccc;
position:relative;
}
figure{
position:absolute;
bottom:-40px;
right:10px;
width:80px;
height:80px;
background:#ccc;
}
do further demonstrate kougiland's point, here is a fiddle that has what you want:
.header{
height: 200px;
width: 100%;
background: #000;
position: relative;
}
.image{
height: 100px;
width: 100px;
background: red;
position: absolute;
right: 50px;
bottom: -50px;
}
JSFIDDLE
Hello I'm trying to align the "container2" div to bottom of "cointainer" but I'm having troubles and I dont know where, any help?
HTML
<div id="container">
<div id="container2">
<p>Text</p>
</div>
</div>
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto; }
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto; }
http://jsfiddle.net/G4GT4/1/
With the current structure you would have to position the child with position:absolute.
JSfiddle Demo
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
position: relative;
}
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
position: absolute;
bottom:0;
left:50%;
margin-left: -25%;
}
Add
#container { position: relative; }
#container2 { position: absolute; bottom: 0; }
Or simply use tables
Demo
#container {
background-color:rgb(129, 159, 255);
display: table-cell;
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
text-align: center;
vertical-align: bottom;
}
#container2 {
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
display: inline-block;
}
You have to set margin-top (you know both heights) or using positioning, I´ve chosen second variant.
#container {postition: relative}
#container2 {position: absolute; bottom: 0; left: 25%;}
http://jsfiddle.net/G4GT4/2/
You can set position relative to container2
Working fiddle here
#container2{
/*Colors*/
position: relative;
top: 15%;
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
}
If you don't want to use position absolute; you can do this:
fiddle
css
#container{
text-align:center;
}
#container:before {
content:"";
height:100%;
display:inline-block;
vertical-align:bottom;
}
#container2{
display:inline-block;
vertical-align:bottom;
}
Can't figure out why it's too tall, sorry:
html {
min-height:100%;
position:relative;
}
body {
height:100%;
background-color:darkblue;
background-image:url(background.png);
background-repeat:repeat-y;
background-position:center center;
background-size:100% 100%;
padding:0;
margin:0;
}
#wrapper {
width:65%;
top:0; bottom:0; right:0; left:0;
background-color:#bad6e8;
border:2px solid black;
padding:0;
margin: 0 auto;
}
#header {
width:100%;
height:10%;
background-color:#bad6e8;
border-bottom:2px solid black;
padding:2px;
}
#user {
width:25%;
height:250px;
background-color:#bad6e8;
border-right:2px solid black;
border-bottom:2px solid black;
float:left;
padding:2px;
}
#menu {
width:100%;
height:35px;
background-color:#bad6e8;
border-bottom:2px solid black;
padding:2px;
margin-bottom:2px;
}
#content {
width:100%;
height:100%;
background-color:lightblue;
}
and:
<html>
<head>
<title>Playdux</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="content">
<div id="user">
Usermenu
</div>
<div id="menu">
Menü
</div>
Content
</div>
</div>
</body>
</html>
The "wrapper" div should go all the way from the top of the page to the bottom. Stopping there, unless it has enough content to go beyond that.
But, without enough content, it's just way over the limit. My CSS is kinda messed up now because I tried to figure it out all the time.
To extend the wrapper from top to bottom, you must position: absolute or position: fixed
#wrapper {
width:65%;
position: absolute;
top:0; bottom:0; right:0; left:0;
background-color:#bad6e8;
border:2px solid black;
padding:0;
margin: 0 auto;
}
You must also remove height: 100% from content. Because this is interpreted as 100% of the containing block, which is wrapper in this case
#content {
width:100%;
background-color:lightblue;
}
See full JSFiddle
Another way to do this, would be dropping top:0; bottom:0; right:0; left:0;
and do just height: 100%
html, body {
height: 100%;
}
#wrapper {
height: 100%;
}
See another JSFiddle