I'm brand new to this. I'm trying to create my first webpage. I want three boxes placed inside my wrapper - it should look like this drawing: https://ibb.co/xGDCv2f
I basically want to place three boxes inside the wrapper. "Registrer Pant", "Nexus Fordele" and "Samlet Donation" I'm kinda clueless how to, though.
MY HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registrer Pant</title>
<link rel="stylesheet" type="text/css" href="Forside.css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="header">
<h1>Godmorgen, Mathias</h1>
</div>
<div id="wrapper">
</div>
<br/>
<br/>
<br/>
<div id="box1" class="Pant">
Registrer Pant
</div>
<br/>
<br/>
<br/>
<div id="box2" class="Nexus">
Nexus fordele
</div>
<br/>
<br/>
<div id="box3" class="Samlet">
Samlet donation
</div>
</body>
</html>
MY CSS:
.header {
padding: 40px;
text-align: center;
background: #4968aa;
color: white;
}
.header h1 {
font-size: 40px;
}
#wrapper {
width: 1260px;
height: 500px;
border: 2px solid black;
}
.Pant {
background-color: #BCBCBA;
width: 800px;
height: 300px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
line-height: 300px;
font-size: 100px;
#box2 {
background-color: lime;
width: 200px;
height: 100px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
#box3 {
background-color: dodgerblue;
width: 200px;
height: 100px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
Much appreciated.
If you want the boxes in the wrapper don't close the wrapper div (with </div>) until after the boxes' HTML.
Then just some minor adjustments in the CSS.
.header {
padding: 40px;
text-align: center;
background: #4968aa;
color: white;
}
.header h1 {
font-size: 40px;
}
#wrapper {
width: 1260px;
height: 500px;
border: 2px solid black;
text-align: center;
}
.Pant {
background-color: #BCBCBA;
width: 800px;
height: 300px;
text-align: center;
vertical-align: middle;
line-height: 300px;
font-size: 100px;
margin: auto;
}
#box2 {
background-color: lime;
width: 200px;
height: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
display: inline-block;
}
#box3 {
background-color: dodgerblue;
width: 200px;
height: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
display: inline-block;
}
<div class="header">
<h1>Godmorgen, Mathias</h1>
</div>
<div id="wrapper">
<div id="box1" class="Pant">
Registrer Pant
</div>
<div id="box2" class="Nexus">
Nexus fordele
</div>
<div id="box3" class="Samlet">
Samlet donation
</div>
</div>
Related
body {
background-color: black;
}
div.div1 {
width: 100%;
height: 80px;
background-color: white;
color: black;
float: left;
}
div.div2 {
width: 100%;
height: 60px;
background-color: green;
color: black;
float: left;
}
div.div3 {
margin-top: 350px;
margin-left: 50%;
position: absolute;
background-color: white;
}
div.parent {
margin-top: 200px;
position: relative;
background-color: white;
}
p.one {
float: left;
padding-left: 10px;
font-size: 20px;
font-family: 'Courier New', Courier, monospace;
}
p.two {
float: left;
padding-left: 10px;
font-size: 20px;
font-family: 'Times New Roman', Times, serif;
}
img.haus {
float: left;
height: 50px;
width: 50px;
}
img.head {
width: 90%;
height: 800px;
position: absolute;
}
<!DOCTYPE html>
<html>
<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="vorbereitung.css" type="text/css">
<title>Document</title>
</head>
<body>
<section>
<div class="div1">
<p class="one">Willkommen</p>
<p class="one">Jordan 1</p>
<p class="one">Jordan 3</p>
<p class="one">Jordan 4</p>
</div>
<div class="div2">
<img class="haus" src="https://cdn.pixabay.com/photo/2014/11/04/06/21/drawing-516251_960_720.png">
<p class="two">Neue Modelle</p>
<p class="two">Reduziert</p>
<p class="two">Shop all</p>
</div>
<div class="parent">
<img class="head" src="https://www.kicksonfire.com/wp-content/uploads/2019/11/Air-Jordan-4-What-The-1-1.jpg?x27993">
<div class="div3">Shop Jordan 4</div>
</div>
</section>
</body>
</html>
I have a problem with div .parent, image img.head, and div .div3. I want to stack img and div3 on top of each other and put them in .parent div. There is no error, but the img is outside of the div right next to the other elements. I've tried to position absolute and relative but its not working, please help.
img.head {
width: 90%;
height: 800px;
}
div.div3 {
margin-top: 350px;
position: absolute;
background-color: white;
top: 10px;
left:10px;
}
(you can use top and left to keep the elements at the required place)
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
I would like it so that when you resize the screen it cuts off the image from the edges so that the text stays in the same spot on the image.
HTML
<!DOCTYPE html>
<title>TapeKings</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<body>
<div id="home" class="banner">
<div class="container">
<div class="nav">
</div>
<div class="head-logo">
<img src="http://s32.postimg.org/ndpqab5l1/logo.png">
</div>
<div class="banner-info">
<h3>Custom tape designs taken<br/>to the next level</h3>
</div>
</div>
</div>
</body>
CSS
body,html {
padding: 0px;
margin: 0px;
font-family: 'Open Sans', sans-serif;
}
.nav {
width: 100%;
height: 70px;
background-color: #000000;
}
.banner {
text-align: center;
background: url(http://s32.postimg.org/yhfqblzid/img1.jpg) no-repeat 0px 0px;
background-size: 1920px;
width: 100%;
min-height: 959px;
}
.head-logo {
margin-top: 250px;
text-align: center;
}
.head-logo img {
height: 140px;
width: 140px;
}
.banner-info {
margin-top: 25px;
text-align: center;
}
.banner-info h3 {
color: #000000;
margin: 16px 0;
font-size: 40px;
font-family: 'Montserrat', sans-serif;
}
Here is the JSFiddle for my site: https://jsfiddle.net/bnhvnnL7/
Thanks!
You can add background-position: center; to your .banner div:
.banner {
text-align: center;
background: url(http://s32.postimg.org/yhfqblzid/img1.jpg) no-repeat 0px 0px;
background-size: 1920px;
width: 100%;
min-height: 959px;
background-position:center;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Maybe this can help you.
I put all thinks to the vertical center div.
In max-width you can set the size of max width you wonna.
Div is always in center of vertical and horizontal position.
It will look good on phone or other small screen.
Regards.
body,
html {
padding: 0px;
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url('http://s32.postimg.org/yhfqblzid/img1.jpg');
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
max-width: 600px;
text-align: center;
}
.inner img
{
height: 140px;
}
.inner h3 {
color: #000000;
margin: 16px 0;
font-size: 40px;
font-family: 'Montserrat', sans-serif;
}
<body>
<div class="outer">
<div class="middle">
<div class="inner">
<img src="http://s32.postimg.org/ndpqab5l1/logo.png">
<h3>Custom tape designs taken<br/>to the next level</h3>
</div>
</div>
</div>
</body>
I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
I'm trying to build a 3 column div and center all of them inside a wrapper but the div.left and div.right wont stay at the top when the div.middle has text in & when i replace display: inline-block to float: left they stop centering, what could i do so they all center and stay at the top?
example
the html:
<div class="left">
</div>
<div class="middle">
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
</div>
<div class="right">
</div>
</div>
</body>
the css:
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
Try using vertical-align
Working Example
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
vertical-align: top; /* see here */
}
MDN documentation for vertical-align
Just do vertical-align: top; on the left/right like this:
http://jsfiddle.net/RJR2V/2/
But if you want them to be even in heights than I suggest display: table-cell;
Like this:
http://jsfiddle.net/RJR2V/1/
under .wrapper all div should be vertical-aligned to top
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;
}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
.wrapper div{
vertical-align:top;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="middle">
example <p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
</div>
<div class="right">
</div>
</div>
</body>
</html>