This should work. I just want that the nested div is in the center of the parent div.
Is this at least the correct approach to center something, or am I way off the standards?
I'm just beginning to build my websites.
#container {
position:relative;
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
#logo {
width:960px;
height:305;
margin: 0 auto;
position:absolute;
}
and the markup
<body>
<div id = "container">
<div id = logo><img src="img/johndoe.jpg" width="960" height="305"/></div>
</div><!-- end of container -->
</body>
Actually, the nested div is at the leftmost of the container.
Remove position:absolute; for the logo.
remove possition:absolute; from .logo
#container {
position:relative;
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
#logo {
width:960px;
height:305;
margin: 0 auto;
/*position:absolute;*/
}
Try checking out http://codepen.io/skeep/pen/nGupC
html
<div class="container">
<div class="logo"><img src="http://placehold.it/350x150" alt="" /></div>
</div>
css
.container {
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
.logo {
width:350px;
height:150px;
margin: 0 auto;
}
Related
Can someone plz show me how to center this image in its div while keeping the image overlapping its div top.
jsfiddle.net/MalcollmS/0ees82hc
<body>
<div id="outerdiv">
<div id="innerdiv">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
<div id="body">
</div>
</div>
</div>
</body>
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin-left:auto;
margin-right:auto;
margin-top:-90px;
}
Malcolm
Just text-align:center; add to #innerdiv
jsFiddle example
img tags are display: inline-block by default which can be centered with text-align: center; on the parent element:
#innerdiv {
...
text-align: center;
}
JSFIDDLE
Try using % for margin or assign it to a div here
<body>
<div id="outerdiv">
<div id="innerdiv">
<!-- assign div --><div class="img_holder">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
</div>
<div id="body">
</div>
</div>
</div>
</body>
Css
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:100%;
}
.img_holder{
position: relative;
width:300px;
margin: 0 auto;
top: -30px;
}
#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin:-2% 0 0 42%;
}
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;
}
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
I have this HTML:
<div id="cont">
<div class="chatarea">
<div class="row">
<div class="message">
<div class="nick">
<p>Some Nick</p>
</div>
<p>Some Message</p>
<div class="timestamp"><p>Some Timestamp</p></div>
</div>
</div>
</div>
</div>
and this CSS:
#cont {
width:100%;
text-align:center;
}
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px;
width:80%;
}
.nick
{
width: 400px;
border-right-style: solid;
text-align: center;
height:100%; position:absolute; top:0; left:0;
}
.timestamp
{
width: 400px;
border-left-style: solid;
position:absolute; top:0; right:0; height:100%;
}
.message
{
border-style: solid;
padding:0 50px 0 140px;
overflow:hidden;
position:relative;
}
im trying to display 3 divs (left and right smaller than the centre one) in the centre of the page. 80% of the browser width.
i have made a fiddle here: http://jsfiddle.net/zQ9pu/
im having a bit of trouble with it - what would be the best way to do this?
Just add
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px auto;
width:80%;
}
It works fine !! here is ur new fiddle http://jsfiddle.net/zQ9pu/2/
Contain those divs in a parent block level element which has a specified width and then apply CSS margin-left: auto; margin-right: auto; on it.
I am having a left div width a fixed width of 200 px, then I want the content area to take the space that is left. How can I solve that? I have done this...but it doesn't work.
#sidebar {
float:left;
width:200px;
height:100%;
background-color: blue;
}
#mainContent {
float:left;
width: // USE WHATEVER SPACE IS LEFT;
height:100%;
background-color: red;
}
Have a look at this code:
http://jsfiddle.net/Ffx8R/
CSS:
#sidebar {
float:left;
width:200px;
height:100%;
}
#mainContent {
padding-left:200px;
height:100%;
border:1px blue solid;
}
#container
{
height:200px;
clear:both;
}
HTML:
<div id="container">
<div id="sidebar">here is sidebar info</div>
<div id="mainContent">main Content info</div>
</div>