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.
Related
The yellow dot "gif1" has to go inside the black box "gif" but as you can see I somehow managed to did the opposite.
How many things did I do wrong?
Livewave Preview
I already tried overflow:auto or hidden and changing the position attributes from relative to absolute and vice versa.
<html>
<head>
<body>
<center>
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
</center>
<style>
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: relative;
float: left;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
</style>
</head>
</body>
</html>
You are facing a complex situation where the float property is creating the issue. Basically the yellow "image" is wrapping around the floated element and that's why it goes out of the black box and under the blue one (the float element). To avoid this you can use absolute instead of float.
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
margin: auto;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: absolute;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
This is the way to go:
.gif{
position: relative;
}
.gif1{
position:absolute;
}
Hope it helps.
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
}
.div2 {
height: 300px;
width: 300px;
margin-right: 0px;
margin-top: 0px;
}
.div3 {
height: 150px;
width: 150px;
margin-left: 0px;
margin-bottom: 0px;
}
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
In above code I have a confusion, because in above code the margin was not affected to the inner div tags. What might be the problem?
Image of output
and what I want to do is
Desired output
No need to use margin , just use position property.
Here is the Snippet.
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
position: relative;
margin: 30px auto;
}
.div2 {
height: 300px;
width: 300px;
position: absolute;
top: 0;
right: 0;
}
.div3 {
height: 150px;
width: 150px;
position: absolute;
bottom: 0;
left: 0;
}
<div class="div1">
<div class="div2">
<div class="div3"> </div>
</div>
</div>
To achieve the desired o/p with margin this should be your code
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
}
.div2 {
height: 300px;
width: 300px;
margin-left: 300px;
margin-top: 0px;
}
.div3 {
height: 150px;
width: 150px;
margin-left: 0px;
margin-top: 150px;
}
But, this would be a wrong approach, the right approach is to manipulate positioning the inner divs to left or right. This is because of the concept of box model. You learn more about box-model to better understand when to use margin-l/r/t/b and when to use positioning
Correct Code :
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
position : relative;
}
.div2 {
height: 300px;
width: 300px;
position : absolute;
right : 0;
}
.div3 {
height: 150px;
width: 150px;
position : absolute;
bottom : 0;
}
You can use a combination of float and position: relative/absolute settings in the combination and with the settings shown below to achieve the desired result shown in your image.
Note: All this has nothing to do with margins.
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
}
.div2 {
float: right;
position: relative;
height: 300px;
width: 300px;
}
.div3 {
height: 150px;
width: 150px;
position: absolute;
bottom: 0;
left: 0;
}
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
You can use position: absolute; and then in place of margin-left or margin-top use left or top or bottom
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
position: relative;
}
.div2 {
height: 300px;
width: 300px;
right: 0px;
top: 0px;
position: absolute;
}
.div3 {
height: 150px;
width: 150px;
left: 0px;
bottom: 0px;
position: absolute;
}
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
Hope this helps
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
I need to know how to cut that gray part from the blue box.
The red arrows on the image bellow show which part I would like to cut from the blue box. This is the code I have:
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
From what I understand you would like to cut off the grey part outside the blue area. If so, here's how you do it.
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
overflow: hidden;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
z-index: 1;
}
<div class="father">
<div class="border"></div>
</div>
Can you see this approach:
border-top-left-radius: 8px;
border-top-right-radius: 8px;
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 100%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
Are you looking for this?
.father {
height:400px;
width:400px;
margin:150px auto;
position:relative;
background:green;
}
.border {
position:relative;
bottom:50px;
margin:auto;
border-radius:50%;
width:96%;
height:30%;
background-color:#DDD;
z-index:-9;
}
<div class="father">
<div class="border"></div>
</div>
.father
{
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: #04aada;
border-radius: 50px 50px 0 0;
}
.border
{
position: relative;
bottom: 25px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #fff;
z-index: 1;
box-shadow: 0px -4px 0px #04aada;
}
<div class="father">
<div class="border"></div>
</div>
I have a page where I'm displaying the status of two websites -- as in if they're currently up and running, or not. If the site is up, I want the block to have a light green background, and if not, a light red one. And the site's name should be centered inside the block.
This is what I've tried so far:
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>
It works (see full screen output), but I feel like I'm way off. How do I do something simple as this using CSS, the correct way? I feel like my code is a hack. And how would you write the text exactly in the center of the block, vertically and horizontally?
And is it possible to have it such a way that it works across all desktop screen sizes? Maybe I should specify width and height in percentage as opposed to pixels?
You can use flexbox. support
HTML
<div id="container">
<div class="status"></div>
<div class="status"></div>
</div>
CSS
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
margin-left: 2px;
border: 1px solid #ccc;
}
http://jsfiddle.net/b9n3h1en/
Try this Fiddle, aligned text vertically and horizontally in center of the div.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
text-align: center;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
line-height: 100px;
}
Try this jsfiddle
body {
font-family: sans-serif;
}
#container {
width: 100%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position:relative;
}
#smallcontainer {
width: 208px;
height: 100px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
text-align:center;
}
Also see more about "display:flexbox"
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Here's how I'd do it:
HTML:
<div id="container">
<div id="smallcontainer">
<div class="status">
<div class="border">
<div class="txt">Text Here</div>
</div>
</div>
<div class="status">
<div class="border">
<div class="txt">More Text Here</div>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#container {
width: 95%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.status {
height: 100%;
width: 50%;
float: left;
text-align: center;
padding: 2px;
}
.border {
background: #efefef;
border: 1px solid #ccc;
width: 100%;
height: 100%;
position: relative;
}
.txt {
position: relative;
top: 50%;
transform: translateY(-50%);
}
See the fiddle here: http://jsfiddle.net/bootsified/kf7Lbq24/
You can add negative margins to each of the divs you want to put exactly in the center. Note that for this the width and height should be in pixels.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
#smallcontainer {
width: 208px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -104px;
margin-top: -50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>