I am new to HTML and CSS and have created a birthday card which I want to have a 50/50 split down the centre . I have inserted my image on the left however when I add text to the right and side it is too close to the centre line, so I have used some padding (padding-left: 50px;) to move it further across. The issue is when I do this the box on the right increases. I want the box on the right to remain the same size but just be able to adjust the text inside that box without it resizing.
.card {
box-sizing: border-box;
width: 600px;
height: 400px;
border: 5px solid;
display: flex;
}
.left {
flex: 1;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-royalty-free-image-506756303-1560962726.jpg");
border-style: solid;
background-size: cover;
background-position: 60% 5%;
width: auto;
height: auto;
max-width: 300px;
max-height: 600px;
}
.right {
flex: 1;
background-color: burlywood;
border: 5px solid;
padding-left: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Flex</title>
</head>
<body>
<div class="card">
<div class="left">
</div>
<div class="right">
<h1 class="title">Hello</h1>
<h2 class="birthday">Happy Birthday</h2>
<p class="message">We really miss you and are thinking about you</p>
<p class="bye"> Lots of love and see you soon x</p>
</div>
</div>
</body>
</html>
Try this
.card {
box-sizing: border-box;
width: 600px;
height: 400px;
border: 5px solid;
display: flex;
}
.left {
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-royalty-free-image-506756303-1560962726.jpg");
border-style: solid;
background-size: cover;
background-position: 60% 5%;
width: 50%;
height: auto;
max-width: 300px;
max-height: 600px;
}
.right {
width: 50%;
background-color: burlywood;
border: 5px solid;
padding: 0 25px;
box-sizing: border-box;
}
Here's my code. I'm a beginner so please let me know if I have any errors.
I need to have the text resize and move when the browser is scaled. As of now it just stays and doesn't move no matter the size. I've tried a media query's but they haven't worked.
html{
background-image: url(images/CBG1.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
h1{
text-align: -webkit-center;
color: #FF6633;
position: absolute;
margin: 0px;
margin-left: 650px;
margin-top: 314px;
width: auto;
height: auto;
}
<!doctype html>
<html lang="en">
<head>
<title>Hoax Studios</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="uft-8">
<link rel="stylesheet" href="work.css">
</head>
<body>
<div id="container">
<div class="header">
<h1>WORK</h1>
</div>
</div>
</body>
</html>
You need to change the alignment and width for h1 as below
h1 {
color: #FF6633;
position: absolute;
text-align: center;
margin-left: auto;
margin-top: 314px;
width: 100%;
height: auto;
}
I've decided to make a site about the current election(s) and I'm already having trouble with the intro page.
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
}
<div id="Wrapper">
<div id="repicon"></div>
</div>
HTML
<div id="Wrapper">
<div id="repicon">sdsdfsdsds</div>
CSS:
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
//background-size: 140px 140px;
height: 500px;
width: 500px;
}
DEMO LINK
you have a few typos(id="Wrapper" won't match the #wrapper in CSS) plus for a background-image to work it needs height
As your comment, you want the background-image centered, just apply center in background shorthand.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background: url(http://i.imgur.com/Ow7TR.png) no-repeat center / 140px 140px;
height:140px;
}
<div id="wrapper">
<div id="repicon"></div>
</div>
Its not working because your div has no content and that results that it has no height. To see your image you have to add content to the div or a min-height
#repicon {
min-height: 140px;
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
}
See this working Fiddle
You need to have content inside your div if you want the "background-image" to show up.
You need to define height and width for #repicon
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
width: 140px;
height: 140px;
}
<DOCTYPE html>
<html>
<head>
<title>2016 Election</title>
<meta name="keywords" content="Donald Trump, Bernie Sanders, Ted Cruz, Hillary Clinton, 2016 Elections, 2016 Primaries, Republican, Democrat">
<meta name="description" content="2016 Presidential Election, Primary Nominations">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="Wrapper">
<div id="repicon"></div>
</div>
</body>
</html>
Just add " " to your div and update your css for best result.
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
}
<DOCTYPE html>
<html>
<head>
<title>2016 Election</title>
<meta name="keywords" content="Donald Trump, Bernie Sanders, Ted Cruz, Hillary Clinton, 2016 Elections, 2016 Primaries, Republican, Democrat">
<meta name="description" content="2016 Presidential Election, Primary Nominations">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="Wrapper">
<div id="repicon"> </div>
</div>
</body>
</html>
I wrote an html page, with some css in a separate file and it worked fine. Then i realized that i should add a doctype declaration to my html. I did that and my page was completely messed up! I tried all types of declarations but all ended up the same!!!
This is my html (currently only working with Chrome, and without doctype):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Luca Rood - Home</title>
</head>
<body background="images\background.jpg">
<div id="header">
<div id="header-back"></div>
<div id="top-spacing"></div>
<div id="content">
<a href="index.html" title="Luca Rood - Home">
<img id="image" src="images\logo.png" alt="Luca Rood">
</a>
</div>
</div>
</body>
</html>
And this is my css:
body {
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
margin: 0px 0px 0px 0px;
}
#header {
position: relative;
height: 15%;
}
#header-back {
position: absolute;
width: 100%;
height: 100%;
background: #000000;
opacity: 0.3;
z-index:1;
}
#top-spacing {
height: 20%;
width: 100%;
}
#content {
position: relative;
width: 80%;
height: 60%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
z-index:2;
}
#image {
height: 100%;
}
Please help.
Thanks in advance,
Luca
You are having the classic percentage heights problem. To fix it, you must add height:100% to the body style and add an style on the html element that has height:100% as well:
<style>
body{
/*...*/
height:100%;
}
html{
height:100%;
}
</style>
Hope it works!
Try this above < html > tag
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
the Html is :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="wp-1-main.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="textArea"></div>
</div>
<div class="imageLine">
</div>
</body>
</html>
and the CSS is
.wrapper{
width: 100%;
height: 400px;
position: fixed;
top: 50%;
margin-top: -200px;
border-top: solid 1px black;
border-bottom: solid 1px black;
background-color: pink;
}
.imageLine{
width: 500px;
height: 1500px;
float: right;
margin-right: 60px;
background-color: grey;
}
my goal is to make the .imageLine cover some .wrapper , and the wrapper is centered vertically , and always be in the viewport.
but those code turn out that the .wrapper covers the .imageLine . any idea to fix that?
You could use z-index
Higher z-indices will come infront of lower z-indices.