I just started learning HTML and CSS. And I got a problem. Perhaps she is not worth attention, but still I ask for help. The problem is that the word "Hi" stubbornly does not want to be displayed in its block. And I don’t know how to remove the gap over the header. And sorry for the poor code architecture.
HTML:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
CSS:
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
I slightly cleaned your code and needs good attention, no need to use p within h2 tags:
body {
margin: 0;
}
.header {
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer {
width: 1928px;
height: 534px;
background-color: #202326;
}
.body {
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all {
width: 1170px;
height: 700px;
}
.categ {
width: 273px;
height: 514px;
}
.cat {
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
font-weight: 900;
text-align: center;
font-size: 40px;
vertical-align: center;
}
.mycat {
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com {
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color {
color: #000000;
}
h1 .acolor {
color: red;
}
.come {
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
Hi
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"></p>
</div>
<div class="com">
<p class="color"></p>
</div>
<div class="come">
<p class="color">
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
<main>
</main>
<footer>
<div class="footer"></div>
</footer>
You can remove height for .cat class and remove margin for h1 tag as
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.cat h1{
margin: 0;
}
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
.cat h1{
margin: 0;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
Related
I have an image that I am trying to scale as the screen size reduces. On desktop it work fine for resolution 1336 x 625 but as soon as the screen reduces to 500 X 625 the image does not scale properly and edges are cut down. I tried putting max-width and the position. Still it doesn't work. What I need to change to make it work.
Css code
* {
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat",sans-serif;
background-color: #CCC;
}
.card-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}
.card {
width: 650px;
height: 400px;
background-color: #fff;
transform-style: preserve-3d;
position: relative;
border-radius: 15px;
transition: transform 1s;
}
.card-wrapper:hover .card {
transform: rotateY(180deg);
box-shadow: 1 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card-front{
width: 100%;
height: 100%;
border-radius: 15px;
backface-visibility: hidden;
background: linear-gradient(white,white);
}
.up {
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: right;
}
.up img {
position: absolute;
width: 60%;
height: 60%;
top: 5px;
right: 5px;
}
.up span {
text-transform: uppercase;
color: #0d5692;
}
.down {
position: absolute;
width: 70%;
height: 30%;
color: black;
top: 170px;
left: 5px;
}
.down-content {
display: flex;
align-items: center;
margin: 10px 0;
}
.person {
font-family: "Yu Gothic",UI-Semibold;
font-size: 12px;
color: rgb(102, 0, 51);
padding-left: 20px;
}
.designation {
font-family: "Yu Gothic",UI-Semibold;
font-size: 10px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.address {
font-family: "Arial Nova Light";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.phone {
font-family: "Arial Nova Light";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.card-back {
transform: rotateY(180deg);
position: absolute;
top:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
background: linear-gradient(white,white);
}
.back-up {
width: 40%;
height: 40%;
}
.back-up img {
position: absolute;
width: 60%;
height: 60%;
top: 5px;
right: 5px;
}
.back-down {
position: absolute;
width: 100%;
height: 60%;
color: black;
top: 140px;
left: 5px;
}
.back-designation {
font-family: "Meiryo";
font-size: 10px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-person {
font-family: "Meiryo UI";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-address {
font-family: "Meiryo";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-phone {
font-family: "Meiryo";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet"
/>
<link rel="stylesheet" href="style-Origional.css" />
<title>Business Card</title>
</head>
<body>
<div class="card-wrapper">
<div class="card">
<div class="card-front">
<div class="up">
<img src="images/logo.png" />
<!-- <h4><span>AWS Architect</span></h4> -->
</div>
<div class="down">
<div class="person down-content">
<div>
<h2> Jarich Vansteenberge </h2>
</div>
</div>
<div class="designation down-content">
<div>
<h2> Manager </h2>
<h2> Technology & Innovation </h2>
<h2> Information & Digital Solutions </h2>
</div>
</div>
<div class="address down-content">
<div>
<p> Astrazeneca K.K. </p>
<p> Grand Front Osaka Tower B 3-1,</p>
<p> Ofuka-chu, Kita-ku, Osaka 530-0011, Japan </p>
</div>
</div>
<div class="phone down-content">
<div>
<p> Mobile +81-80-6222-4967 </p>
<p> E-mail jarich.vansteenberge#astrazeneca.com </p>
</div>
</div>
</div>
</div>
<div class="card-back" >
<div class="back-up">
<img src="images/logo.png" width="150"/>
<!-- <h4><span>AWS Architect</span></h4> -->
</div>
<div class="back-down">
<div class="back-designation down-content">
<div>
<h2> インフォメーション＆デジタルソリューションズ本部 </h2>
<h2> テクノロジーとイノベーション </h2>
<h2> マネージャー </h2>
</div>
</div>
<div class="back-person down-content">
<div>
<h2> バンステーンベルグ ジャリコ </h2>
</div>
</div>
<div class="back-address down-content">
<div>
<p> アストラゼネカ </p>
<p> グランフロント大阪タワーB 3-1,</p>
<p> 大阪市北区大深法律事務所530-0011 </p>
</div>
</div>
<div class="back-phone down-content">
<div>
<p> 携帯電話番号 +81-80-6222-4967 </p>
<p> E-mail jarich.vansteenberge#astrazeneca.com </p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.responsive {
width:100%;
height:auto;
}
you can add these class to the image and it will work fine
Trying to reach criteria:
have the text to the left of the circle, vertically aligned; circles to the right (in-line) with the text; the circles themselves will also have text/numbers inside.
I am trying to code sample text and circles with numbers for what I have in the image below. However, I can not figure out the alignments:
Below is the code I currently have:
#feedbox-left {
margin-left: 2vh;
margin-top: 5vh;
width: 19vw;
height: 80vh;
background: transparent;
border: 1px solid black;
border-radius: 1%;
}
.fb-hr {
margin-top: 40vh;
height: 0.15vh;
background-color: hsla(0, 0%, 64%, 0.227);
}
.trackcircle {
/* display: inline; */
height: 60px;
width: 60px;
background-color: transparent;
border: 1px solid black;
border-radius: 50%;
margin-top: 50%;
}
.trackcircle:first-child {
margin-top: 40%;
}
.tracktext {
display: flex;
justify-content: space-evenly;
}
<section class="feedbox">
<div id="feedbox-left">
<div></div>
<hr class="fb-hr" />
<div id="trackers">
<div class="trackdiv">
<p class="tracktext">Test <span class="trackcircle"></span></p>
</div>
<div class="trackdiv">
<p class="tracktext">Test <span class="trackcircle"></span></p>
</div>
<div class="trackdiv">
<p class="tracktext">Test <span class="trackcircle"></span></p>
</div>
</div>
</section>
How can I align the items like I have in the picture?
Output
.parent{
border:2px solid #aaa;
width: 400px;
padding: 20px;
}
h1{text-align: center;text-decoration: underline;}
.row{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.text{width: 80%;}
.circle{
border:4px solid #aaa;
width: 40px;
text-align: center;
height: 40px;
border-radius: 50%;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<div class="parent">
<h1>Current tracks</h1>
<div class="row">
<div class="text">Lorem ipsum dolor sit amet </div>
<div class="circle">1</div>
</div>
<div class="row">
<div class="text">Second row and text here</div>
<div class="circle">2</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.circle {
border-radius: 50%;
width: 34px;
height: 34px;
padding: 10px;
background: #fff;
border: 3px solid #000;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
}
</style>
</head>
<body>
<div class="circle">1</div>
</body>
</html>
This is NetBeans. I have tried to include an external CSS file but when used externally the images all get really enlarged. Whereas my I use the same styling within the html file using internal styling the images are of correct ratio.
body {
width: 100%;
height: 100%;
margin: 0;
}
.header {
background-color: #000;
color: #fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner header {
width: 80%;
margin: auto;
}
.logo {
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
padding-left: 90px;
}
a {
text-decoration: none;
background-color: transparent;
color: #ededed;
}
.header link {
float: right;
font-size: 14px;
height: 50px;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
}
#su {
float: right;
height: 50px;
padding: 15px 90px;
}
#l {
float: right;
height: 50px;
padding: 15px 0px;
}
.content {
min-height: 600px;
}
.banner-image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(image/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
.banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
margin-left: 200px;
}
.button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
.items {
width: 30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
margin-left: 1%;
}
.thumbnail {
display: block;
max-width: 100%;
height: auto;
}
.caption {
color: #000;
padding: 0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer {
background-color: #000;
color: #fff;
font-size: 14px;
text-align: center;
}
<html>
<head>
<title>Lifestyle Store</title>
</head>
<body>
<div class="header">
<div class="inner header">
<div class="logo">
Lifestyle Store
</div>
<div class="header link">
<div id="su">
Sign Up
</div>
<div id="l">
Login
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image ">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands</p>
<form>
Shop Now
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="image/camera.jpg" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best from the world</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/watch.jpg" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/shirt.jpg" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
Have you linked the CSS file correctly in this line? Try dragging and dropping the file directly into the HTML to ensure the location and name is correct.
href="assignment1/public_html/style.css"
Edit:
The current link you have is saying that you have the index.html file outside of the 'assignment1' folder. If you have your HTML file inside 'public_html' then the stylesheet link should be the following.
href="style.css"
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.bluebox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: blue;
}
.greenbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: green;
}
.yellowbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: yellow;
}
.orangebox {
float: left;
width: 200px;
height: 800px;
margin: 1em;
border: solid black 1px;
background-color: orange;
}
p {
display: inline-block;
text-align: center;
width: 600px;
border: solid 1px red;
margin-top: -50px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
}
</style>
<body>
<section>
<section>
<section>
<div class="bluebox"></div>
<div class="greenbox"></div>
</section>
<section>
</section>
</section>
<div class="yellowbox"></div>
</section>
<section>
<div class="orangebox"></div>
</section>
<p>Hello World! how r <strong>u?</strong></p>
</body>
</html>
enter code here
I have started working on creating this image and hit a bump on the middle portion. I can recreate in bootstrap but am trying to go at it the old fashion way. any help would be appreciated.
Try this code. Hope you want like this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.outerdiv{
background-color:white;
height:450px;width:450px;
display:block;
border:1px solid black;
}
.outerdiv div{position:relative;margin:3px;padding:1px;}
.blue, .green, .yellow, .black{height:100px;width:100px;display:inline-block;}
.blue{background-color:blue;}
.green{background-color:green;}
.yellow{background-color:yellow;}
.orange{background-color:orange;height:430px;width:100px;display:inline-block;vertical-align:top;float:right;}
.cyan, .green1, .green2{width:100px;}
.cyan{background-color:cyan;height:50px;}
.green1{background-color:lightgreen;height:50px;}
.green2{background-color:green;height:100px;}
.black{background-color:black;border:54px solid red;}
.inner_container1{display:inline-block;padding:0;}
.white{border:1px solid brown;height:85px;width:320px;}
</style>
</head>
<body>
<div class="outerdiv">
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="orange"></div>
<div class="black"></div>
<div class="inner_container1">
<div class="cyan"></div>
<div class="green1"></div>
<div class="green2"></div>
</div>
<div class="white"></div>
</div>
</body>
</html>
Well, I have a problem. I have my layout exactly as I want it, but when I add text in, the layout changes. It's kind of hard to explain, so I'm going to show pictures.
Layout Before Text:
Layout After Text:
Any help is greatly appreciated
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.header {
color: #AEC6CF;
font-family: gabriola;
font-weight: 900;
font-size: 50px;
position: relative;
}
/* ID */
#row1 {
width: 100%;
height: 15%;
}
#row2 {
width: 100%;
height: 2.5%;
}
#row3 {
width: 100%;
height: 70%;
}
#row4 {
width: 100%;
height: 2.5%;
}
#row5 {
width: 100%;
height: 9.7%;
}
#column1 {
border-bottom: 3px solid black;
border-right: 3px solid black;
width: 20%;
height: 100%;
left: 0;
display: inline-block;
margin-right: -0.25%;
}
#column2 {
border-bottom: 3px solid black;
border-left: 3px solid black;
width: 79%;
height: 100%;
right: 0;
display: inline-block;
margin-left: -0.25%;
}
/* Misc. */
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.clearfix {
float: clear;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Test</title>
</head>
<body>
<div id="row1">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
<h1 class="header center">See The Problem?</h1>
</div>
</div>
<div id="row2">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
</div>
</div>
<div id="row3">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row4">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row5">
<div id="column1" class="clearfix" style="border-bottom: 0px;">
</div>
<div id="column2" class="clearfix" style="border-bottom: 0px;">
</div>
</div>
</body>
</html>