Im trying to get an image to appear on the far right side of the div beside the text but it keeps appearing outside that area. i dont want to hardcode the margins in to force it to appear there. is there a property that will make it appear alongside the text that im missing?
<!DOCTYPE html>
<html>
<head>
<style>
.box{
height: 80px;
width: 400px;
font-size: 14px;
line-height: 45px;
font-family: Georgia;
font-size: 16px;
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<p style="max-width: 50%">Image<p>
<img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" alt="imagedownload" width="15%">
</div>
</body>
</html>
make .box div display: flex; justify-content: space-between; width: 100%;
make img width 50px
So your code will be like this:
<!DOCTYPE html>
<html>
<head>
<style>
.box{
height: 80px;
width: 100%;
font-size: 14px;
line-height: 45px;
font-family: Georgia;
font-size: 16px;
background-color: white;
border: 1px solid black;
display: flex;
justify-content: space-between;
}
img {
width: 50px;
}
</style>
</head>
<body>
<div class="box">
<p>Image<p>
<img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" alt="imagedownload">
</div>
</body>
</html>
You can use Flexbox:
<!DOCTYPE html>
<html>
<head>
<style>
.box{
height: 80px;
width: 400px;
font-size: 14px;
line-height: 45px;
font-family: Georgia;
font-size: 16px;
background-color: white;
border: 1px solid black;
display:flex;
}
</style>
</head>
<body>
<div class="box">
<p style="max-width: 50%">Image<p>
<img style="float:right" src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" alt="imagedownload" width="15%">
</div>
</body>
</html>
Related
So I'm trying to design my very first website using CSS and HTML. But I have run into a bit of an issue.
I'm trying to make a simple sidebar with just a profile picture next to the content container. But, the div pushes down the other div instead of going behind it. I've used position relative and z index but nothing seems to work.
This is how the code looks like now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="sidebar">
<img src="./Img/pepe.png" alt="" />
</div>
<div class="contentbox"></div>
<div class="Wrapper">
<header>
<h1>Welcome To My Site</h1>
<h2>First CSS Site</h2>
</header>
<nav>
<ul class="meny">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: "Roboto";
}
body {
background-color: #E0F2E9;
}
#sidebar{
border: 2px solid brown;
text-align: right;
margin-top: 50%;
margin-left: 0%
}
.contentbox{
border: solid 2px red;
width: 60vw;
margin: 0 auto;
background-color: white;
height: 100vh;
margin-top: 300px;
}
.Wrapper {
border: 2px solid green;
height: 250px;
background-color: #5B7B7A;
margin: auto;
width: 95vw;
position: absolute;
top: 30px;
right: 30px;
left: 30px;
border-radius: 5px;
}
.meny{
text-align: center;
line-height: 32px;
border: 2px solid purple;
padding: 10px 10px;
}
ul.meny{
margin: 15px 10px;
text-decoration: none;
}
.meny li{
display: inline;
padding: 0px 10px;
}
.meny a{
text-decoration: none;
color: white;
font-size: 1em;
}
.Wrapper h1, h2 {
margin: 10px;
border: 2px solid blue;
display: flex;
text-align: center;
justify-content: center;
text-transform: uppercase;
color: #ffffff;
}
.Wrapper h1 {
padding: 30px;
}
.Wrapper h2 {
padding: 4px;
z-index values are relative and it depend to you, for instance : i write z-index: 50 for my div and z-index : 51 for my another element . Element has z-index 51 comes above div has less value of z-index . i hope this is help .
I'm wanting to essentially take an image and crop a section of it with CSS.
Here's the picture I'd like to use.
Here's how I'd like to crop it
So, here's the code that I'm using right now.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
Here's what comes out
If you could please help me, I'd appreciate it!
All you have to do is set your image to width: 100% and height to auto to prevent distortion.
This way, if you change the overall size of .staffpfp class in the future, the img inside will adapt accordingly.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
.staffpfp img{width: 100%; height: auto;}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
Hi I would like to know how to set a position of h1 and p inside jumbotron. Lets say I would like to place my h1 in left corner of jumbotron and under h1 I would like to have p but with a little left-padding.
.jumbotron {
max-width: 100%;
padding-top: 80px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
position: relative;
display: block;
font-weight: bold;
font-size: 30px;
color: white;
padding-left: 40px;
padding-bottom: 80px;
}
.jumbotron p {
position: absolute;
display: block;
color: white;
font-size: 20px;
}
<div class="jumbotron">
<h1> Reserve your place </h1>
<p>..before somebody will overtake you</p>
</div>
Hope this helps you!
.jumbotron {
max-width: 100%;
padding-top: 40px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
position: relative;
display: block;
font-weight: bold;
font-size: 30px;
color: white;
padding-left: 40px;
}
.jumbotron p {
position: absolute;
display: block;
color: white;
font-size: 20px;
padding-left:40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="jumbotron">
<h1> Reserve your place </h1>
<p>..before somebody will overtake you</p>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>
You had some unnecessary positioning being set. There is absolutely no reason to give h1 the relative positioning, and absolute to p.
Honestly, judging by the way you were using it I'd say you should do a little bit of learning and experimentation to fully understand the mechanics.
.jumbotron {
max-width: 100%;
padding-top: 80px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
display: block;
font-weight: bold;
font-size: 30px;
color: white;
padding-left: 40px;
}
.jumbotron p {
display: block;
color: white;
font-size: 20px;
padding-left: 40px;
}
<div class="jumbotron">
<h1> Reserve your place </h1>
<p>..before somebody will overtake you</p>
</div>
I have done something like this and its working my text is getting aligned to center, left or right.
<div class="jumbotron text-center container">
<h1>This is demo</h1>
</div>
Hope it will help.
I am trying to add a button to my simple web page. The button itself looks great, but I am not quite sure how to position it. I would like for it to be centered and positioned below the main text. It currently sits off to the left side. Any idea on how to do so?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
Learn More
</body>
</html>
Any help would be greatly appreciated. Thanks!
You don't necessarily need a container. Try the following:
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
width: 62px;
}
Auto margins don't apply to inline-block elements.
You can add a container to the buttons and align them to center . see example below
also when you are trying to create a style . try to make them reusable as they can be. One advantage of this is you can write lesser css.
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
.text-center {
text-align: center;
}
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class="text-center">
Learn More
</div>
Try putting the Button in a <div> and make text-align:center
<div class="btnContainer ">
Learn More
</div>
<style>
.btnContainer {
text-align:center;
}
</style>
Without extra markup adding the following rules to .button will do the trick
left: 50%;
position: absolute;
transform: translate(-50%, 0);
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
}
.button:hover {
background-color: #707488;
}
#button {
text-align: center;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class id="button">
Learn More
</div>
</body>
</html>
how do you think this way?
I have created this template for an eBay listing. When I open it in any browser I can see the borders perfectly. However when I paste the code into eBays HTML description and preview it, I see nothing. If I add text and images into the code they will show within the confines of the borders but the border will still be invisible.
Any ideas?
#pdcontainer {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
.holder {
margin: 0 auto;
width: 1100px;
}
.body {
border: 5px solid #66CCFF;
float: left;
width: 780px;
height: 2700px;
border-right-width: 2px;
}
.sidebar {
border: 5px solid #66CCFF;
float: left;
width: 215px;
height: 2700px;
border-left-width: 3px;
}
.header {
border: 5px solid #66CCFF;
float: left;
width: 1000px;
height: 132px;
}
<!DOCTYPE html>
<html lang="en">
<div id="pdcontainer">
<head>
</head>
<html>
<body>
<div class="header">
</div>
<div class="holder">
<div class="body">
</div>
<div class="sidebar">
</div>
</div>
</body>
</html>
</body>
Try change names of divs - if ebay use same name, it can replace your CSS.