Newbie question here. Trying to learn the basics. I have a simple page with a header a footer and a container. In that container I want an image, and I want it centered. Using margin: 0 auto is not doing it. I have tried explicitly giving the container a width, still no good. Thanks.
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
jsfiddle
remove position: absolute; and add width to imagewrap class .like width: 300px;
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
width: 300px;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer">
</div>
You can add text-align: center; instead of margin: 0 auto; to imagewrap
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
display: block;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
width: 100%;
text-align: center;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer">
</div>
Try background image for that container and position it center.
Please change background url as per your requirement
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
background-image: url(http://clockworkmoggy.com/wp-content/uploads/image00.png);
background-repeat: no-repeat;
background-position: center;
}
#imagewrap{
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
</div>
</div>
<div id="footer">
</div>
Just remove margin:0 auto; and replace text-align: center; in #imagewrap. It will work!!
Check the below JSFiddle code for reference.
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
text-align: center;
}
<body>
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/29708" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
</body>
JSFiddle Demo
Related
I am making my first webpage and am having trouble positioning elements. They keep overlapping each other when I resize the browser. The title is positioned absolute, but this means it overlaps the image at the top. I cant get it into position by any other means. Can anyone help?
My question wasn't answered properly the first time.
.wrapper {
margin: 0 auto;
max-width: 1024px;
min-width: 1024px;
min-height: 760px;
max-height: 760px;
padding-right: 15px;
padding-left: 15px;
border: 5px solid red;
}
.header img {
min-width: 77%;
max-width: 77%;
min-height: 200px;
max-height: 200px;
position: relative;
left: 23%;
}
#cont {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
#cont .header {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
.top-left {
position: absolute;
top: 11px;
left: 23%;
color: teal;
font-size: 63px;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
font-family: Helvetica;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="./new 1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" alt="Dunc's guitar lessons in Isleworth" />
<div id="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
</div>
</div>
</body>
</html>
Thanks
Did you try something like this ? please tell me if i wrong.
Here your css code.
.wrapper {
margin: 0 auto;
max-width: 1024px;
min-width: 1024px;
min-height: 760px;
max-height: 760px;
padding-right: 15px;
padding-left: 15px;
border: 5px solid red;
}
.header img {
min-width: 77%;
max-width: 77%;
min-height: 200px;
max-height: 200px;
position: relative;
left: 23%;
}
#cont {
position: absolute;
z-index:1000;
width: 200px;
height: 200px;
border: 5px solid red;
}
#cont .header {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
.top-left {
position: absolute;
top: 11px;
left: 23%;
color: teal;
font-size: 63px;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
font-family: Helvetica;
text-align: center;
}
And here your html code.
<div class="wrapper">
<div class="header">
<div id="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" />
</div>
</div>
Hope this help you.
Good luck.
Inner divs need to resize related to the outer. But in the result, outer div's border is smaller than the inners total height. Also scroll middles are expected to resize 100% auto related to left, right, top and bottom. But they are resizing related to the outer div. What is the problem here? And do you think there is a better solution for this implementation?
body {
background-color: green;
}
.window {
width: 550px;
height: 400px;
background-color: yellow;
position: relative;
border: 2px solid white;
}
.titlebar {
top: 0;
background-color: black;
height: 20px;
width: 100%;
display: flex;
align-items: center;
}
.title {
color: white;
}
.scroll_right {
float: right;
width: 20px;
height: 100%;
background-color: blue;
}
.window_inner {
background-color: red;
width: 100%;
height: 100%;
}
.scroll_bottom {
background-color: black;
bottom: 0;
height: 20px;
width: 100%;
}
.rtop {
width: 20px;
height: 20px;
background-color: blue;
}
.rmid {
height: 100%;
width: 20px;
background-color: yellowgreen;
}
.rbot {
width: 20px;
height: 20px;
background-color: blue;
}
.bleft {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
.bmid {
height: 20px;
width: 100%;
background-color: yellowgreen;
float: left;
}
.bright {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
<div class="window">
<div class="titlebar">
<div class="title">Text</div>
</div>
<div class="scroll_right">
<div class="rtop"></div>
<div class="rmid"> </div>
<div class="rbot"></div>
</div>
<div class="window_inner"></div>
<div class="scroll_bottom">
<div class="bleft"></div>
<div class="bmid"> </div>
<div class="bright"></div>
</div>
</div>
Although, I could not completely understand your question but if I am right, you need some logic with css3 calc() rule in your middle divs. Please check my below code for reference.
body {
background-color: green;
}
.window {
width: 550px;
height: 400px;
background-color: yellow;
position: relative;
border: 2px solid white;
}
.titlebar {
top: 0;
background-color: black;
height: 20px;
width: 100%;
display: flex;
align-items: center;
}
.title {
color: white;
}
.scroll_right {
float: right;
width: 20px;
height: calc(100% - 40px);
background-color: blue;
}
.window_inner {
background-color: red;
width: calc(100% - 20px);
height: calc(100% - 40px);
}
.scroll_bottom {
background-color: black;
bottom: 0;
height: 20px;
width: 100%;
}
.rtop {
width: 20px;
height: 20px;
background-color: blue;
}
.rmid {
height: calc(100% - 40px);
width: 20px;
background-color: yellowgreen;
}
.rbot {
width: 20px;
height: 20px;
background-color: blue;
}
.bleft {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
.bmid {
height: 20px;
width: calc(100% - 40px);
background-color: yellowgreen;
float: left;
}
.bright {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
<div class="window">
<div class="titlebar">
<div class="title">Text</div>
</div>
<div class="scroll_right">
<div class="rtop"></div>
<div class="rmid"> </div>
<div class="rbot"></div>
</div>
<div class="window_inner"></div>
<div class="scroll_bottom">
<div class="bleft"></div>
<div class="bmid"> </div>
<div class="bright"></div>
</div>
</div>
Hope this help
I want to make the child div .status be at the height of 100% the .container.
The problem is that that I can't specify an exact height for the .container div, because it must have a dynamic height.
Here is the JSFiddle
Here is the code:
.container {
width: 100%;
background-color: red;
float: left;
box-sizing: border-box;
}
.progress {
float: left;
width: 5%;
background-color: green;
height: 100%;
box-sizing: border-box;
margin: 5px;
}
.content {
float: left;
width: 80%;
background-color: #f2f2f2;
height: 100%;
box-sizing: border-box;
margin: 5px;
}
.status {
position: relative;
float: left;
width: 10%;
background-color: #c2c2c2;
height: 100%;
box-sizing: border-box;
margin: 5px;
}
.priority {
position: relative;
height: 20px;
top: 5%;
background-color: #a2a2a2;
}
.prog {
position: absolute;
width: 100%;
height: 20px;
bottom: 5px;
background-color: #d2d2d2;
}
<div class="container">
<div class="progress">
</div>
<div class="content">
<h2>
Some Content Text.... Some Content Text....Some Content Text....
Some Content Text....Some Content Text....
</h2>
</div>
<div class="status">
<div class="priority">
</div>
<div class="prog">
</div>
</div>
</div>
Flexbox can do that.
* {
box-sizing: border-box;
}
.container {
width: 100%;
background-color: red;
display: flex;
}
.progress {
width: 5%;
background-color: green;
margin: 5px;
}
.content {
width: 80%;
background-color: #f2f2f2;
margin: 5px;
}
.status {
position: relative;
width: 10%;
background-color: #c2c2c2;
margin: 5px;
display: flex;
flex-direction: column;
}
.priority {
position: relative;
height: 20px;
width: 100%;
background-color: blue;
}
.prog {
margin-top: auto;
width: 100%;
height: 20px;
background-color: pink;
}
<div class="container">
<div class="progress"></div>
<div class="content">
<h2>
Some Content Text.... Some Content Text....Some Content Text....
Some Content Text....Some Content Text....
</h2>
</div>
<div class="status">
<div class="priority"></div>
<div class="prog"></div>
</div>
</div>
Ii's been a while since I programmed a website and it seems that I have forgot some basic concepts about FLOAT!
Can anyone help making this (on picture) layout using 4 divs and FLOAT?
I have tried this:
<header>
<div id="fill_left"></div>
<div id="top"></div>
<div id="fill_right"></div>
<div id="bottom"></div>
</header>
And CSS:
header {
width: 100%;
height: 9em;
background-color: lightblue;
}
#fill_left{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}
#top{
width:80%;
height: 50%;
background-color: lightgray;
float: left;
}
#bottom{
width:80%;
height: 50%;
background-color: lightseagreen;
float: left;
}
#fill_right{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}
And of course they're all inside a wrapper{ width: 100%, height: 138px}
Thanks
You could do it by using an extra div to warp div-2 and div-3 by set float: left;
JSFiddle - DEMO or Full Screen View
HTML:
<div id="div-p">
<div id="div-1"></div>
<div id="div-c">
<div id="div-2"></div>
<div id="div-3"></div>
</div>
<div id="div-4"></div>
</div>
CSS:
body {
margin:0;
}
#div-p {
width: 100%;
height: 138px;
}
#div-c {
width: 90%;
height: 138px;
float: left;
}
#div-1 {
width: 5%;
float: left;
height: 100%;
background: red;
}
#div-2 {
width: 100%;
height: 50%;
background: green;
}
#div-3 {
width: 100%;
height: 50%;
background: blue;
}
#div-4 {
width: 5%;
float: left;
height: 100%;
background: black;
}
Solution 2:
You could also do it by using display: inline-block; and set font-size:0px; to #div-p for remove the white-space and then set font-size: 16px; (i.e 16px = 1em) to child elements.
JSFiddle - DEMO or Full Screen View
body {
margin:0;
}
#div-p {
width: 100%;
height: 138px;
font-size: 0px;
}
#div-c {
width: 90%;
height: 138px;
display: inline-block;
font-size: 16px;
}
#div-1 {
width: 5%;
display: inline-block;
height: 100%;
background: red;
font-size: 16px;
}
#div-2 {
width: 100%;
height: 50%;
background: green;
}
#div-3 {
width: 100%;
height: 50%;
background: blue;
}
#div-4 {
width: 5%;
display: inline-block;
height: 100%;
background: black;
font-size: 16px;
}
That simple Notice the order: http://jsbin.com/liqulo/1/edit
<div id="fill_left"></div>
<div id="fill_right"></div>
<div id="top"></div>
<div id="bottom"></div>
CSS:
#fill_left,
#fill_right{
width: 5%;
height: 100%;
background-color: lightcoral;
}
#fill_left{ float: left; }
#fill_right{ float: right; } /* and notice Float Right */
But if I were you I would do it even simpler: http://jsbin.com/liqulo/2/edit
<header>
<div class="cont" id="top"></div>
<div class="cont" id="bottom"></div>
</header>
header {
width: 100%;
height: 9em;
background-color: lightcoral;
}
.cont{
width:90%;
height: 50%;
margin:0 auto;
}
For some reason, I can't figure out why there is like an 8px spacing below this image within a div. check it out:
If you look at the bottom of the image, there's about an 8px space, how can i get rid of it?
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
<!----HTML BELOW---->
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
Here's the entire code, if anyone needs it:
body {
background-image: url('images/bg.png');
background-color: #5a6a7a;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
.wrap {
width: 960px;
margin: auto;
}
.head {
width: 960px;
height: 60px;
margin-top: 33px;
}
.head img {
float: left;
}
.head .home img { background: url('images/home.jpg'); width: 116px; height: 60px; }
.head .register img { background: url('images/register.jpg'); width: 116px; height: 60px; }
.head .forum img { background: url('images/forum.jpg'); width: 116px; height: 60px; }
.head .banner img { background: url('images/banner.jpg'); width: 263px; height: 60px; }
.head .chat img { background: url('images/chat.jpg'); width: 116px; height: 60px; }
.head .downloads img { background: url('images/downloads.jpg'); width: 116px; height: 60px; }
.head .donate img { background: url('images/donate.jpg'); width: 117px; height: 60px; }
.head .home img:hover { background: url('images/homehover.jpg'); width: 116px; height: 60px; }
.head .register img:hover { background: url('images/registerhover.jpg'); width: 116px; height: 60px; }
.head .forum img:hover { background: url('images/forumhover.jpg'); width: 116px; height: 60px; }
.head .chat img:hover { background: url('images/chathover.jpg'); width: 116px; height: 60px; }
.head .downloads img:hover { background: url('images/downloadshover.jpg'); width: 116px; height: 60px; }
.head .donate img:hover { background: url('images/donatehover.jpg'); width: 117px; height: 60px; }
.logo {
background-image: url('images/logo.png');
width:250px;
height: 110px;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin: -85px auto;
z-index: 1;
}
.main {
margin-top: 40px;
float: left;
clear: both;
}
* {
margin: 0;
padding: 0;
}
.mainhead {
background-image: url('images/content.jpg');
height: 27px;
width: 680px;
}
.maincont {
background-color: #394d49;
width: 668px;
border: 1px solid #6b958b;
margin-top: -1px;
height: auto;
word-wrap: break-word;
padding: 5px;
}
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
.footer {
background-image: url('images/footer.jpg');
width: 960px;
height: 19px;
margin-top: 20px;
font-size: 11.6px;
font-family: 'MS Serif';
text-align: center;
color: #dfd591;
text-shadow: 0 1px 2px black;
line-height: 19px;
}
__
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrap">
<div style="position:relative;">
<div class="logo"></div>
</div>
<div class="head">
<div class="home"><img></div>
<div class="register"><img></div>
<div class="forum"><img></div>
<div class="banner"><img></div>
<div class="chat"><img></div>
<div class="downloads"><img></div>
<div class="donate"><img></div>
</div>
<div class="main">
<div class="mainhead"></div>
<div class="maincont">
</div>
</div>
<div class="side">
<div class="sidehead"><img src="images/servinfo.jpg"></div>
<div class="sidecont">asdf</div>
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
<div class="sidehead"><img src="images/partners.jpg"></div>
<div class="sidecont">
<center><img src="images/epvp.jpg"></center>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer"></div>
</div>
</body>
An image is an inline element, which means that it is placed on the baseline of the text. There is space below the baseline in a text block, for characters with descenders like p and g. It's that space that creates the spacing below the image.
You can make the image a block element to avoid that space, and don't use the deprecated center tag, use margins to center the image:
HTML:
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
Add to the CSS:
.sidecont img { display: block; margin: 0 auto; }
no tag center <!doctype html> html5
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
.sidecont {
margin: 0 auto;
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
}