im very new to learning web development, and i'm going through the hills and valleys of trying to improve. So far I just know HTML and CSS so this should be very simpy to answer.
I'm on a website that does web challenges to help you improve and this is what it SHOULD look like:
The goal
However this is what i currently have: (I color coded the divs so you could better see what's going on. Blue is the first div that holds the text, green is the 2nd that should hold the image, and the "binding-div" is purple which was supposed put the two divs inside) The Current State
My problem is the image isn't going into the "second-div", and i dont know why.
body {
background-color: black;
}
.container-div {
background-color: rgb(133, 63, 208);
}
.binding-div {
margin: 130px 205px;
background-color: rgb(27, 134, 88);
width: 1080px;
height: 446px;
}
.first-div {
display: inline-block;
background-color: rgb(29, 26, 232);
width: 540px;
height: 446px;
text-align: center;
}
.second-div {
display: inline-block;
}
h1 {
color: white;
width: 60%;
margin: 60px auto 20px auto;
}
p {
color: white;
width: 60%;
margin: 0 auto;
}
.bottom-p {
margin: 140px auto 40px auto;
}
<!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" />
<title>Stat Card</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container-div">
<div class="binding-div">
<div class="first-div">
<h1>Get insights that help your business grow.</h1>
<p>
Discover the benefits of data analytics and make better decisions regarding
revenue, customer experience, and overall efficiency.
</p>
<p class="bottom-p">Challenge by Frontend Mentor. Coded by (insert name)</p>
</div>
<div class="second-div">
<img src="Images\image-header-desktop.jpg" />
</div>
</div>
</div>
</body>
</html>
It's almost like the image doesn't recogize the div. Any help is appreciated.
You don't need to change your div in a inline -block. A div is a block.
To get the two div in the same line the easier way is to use display: flex. In your parents container of your div so in binding-div.
If you want to show two div in same line, just use this:
.binding-div {
margin: auto;
background-color: rgb(27, 134, 88);
width: 1080px;
height: 446px;
}
.first-div {
display: inline-block;
background-color: rgb(29, 26, 232);
width: 50%;
height: 446px;
text-align: center;
float: left;
}
.second-div {
display: inline-block;
float: left;
}
.binding-div:after{
content: "";
clear:both;
display: table;
}
I hope it will work.
Here's your complete code. I've made Have some simple changes,
<!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" />
<title>Stat Card</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container-div">
<div class="binding-div">
<div class="first-div">
<h1>Get insights that help your business grow.</h1>
<p>
Discover the benefits of data analytics and make better decisions regarding
revenue, customer experience, and overall efficiency.
</p>
<p class="bottom-p">Challenge by Frontend Mentor. Coded by (insert name)</p>
</div>
<div class="second-div">
<img src="https://images.pexels.com/photos/38568/apple-imac-ipad-workplace-38568.jpeg?auto=compress&cs=tinysrgb&w=1260" />
</div>
</div>
</div>
</body>
</html>
The updated CSS:
body {
background-color: black;
}
.container-div {
background-color: rgb(133, 63, 208);
}
.binding-div {
margin: 130px auto;
background-color: rgb(27, 134, 88);
width:100%;
max-width: 1080px;
height: 446px;
}
.first-div {
display: inline-block;
background-color: rgb(29, 26, 232);
width:50%;
height: 446px;
text-align: center;
float:left;
}
.second-div {
display: inline-block;
float:left;
width:50%;
}
.binding-div:after{
display:table;
clear:both;
content:";
}
.second-div img{
width:100%;
}
h1 {
color: white;
width: 60%;
margin: 60px auto 20px auto;
}
p {
color: white;
width: 60%;
margin: 0 auto;
}
.bottom-p {
margin: 140px auto 40px auto;
}
Your image size: 100%;
Your width to max-width
Related
I have made a sticky header using flexbox then using a grid for the body. But applying height to grid items makes the page overflow which I don't want. I have figured I can solve this overflowing by calc(100vh - the height of header) but eventually the height of the header will change if I change the resolution to that of mobile making the new height useless.
The other solution I can think of is by explicitly adding a height to the header but I think that is not the right solution to my problem
https://codepen.io/iwantroca-the-flexboxer/pen/ZEayyqp
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 17px;
font-family: poppins;
}
body {
min-height: 100vh;
}
header {
display: flex;
align-items: center;
padding: 20px;
background: rgb(139, 48, 48);
color: white;
}
header>h2 {
font-style: italic;
font-weight: lighter;
margin-left: 3em;
}
.app_logo {
font-size: 2.3em;
margin-right: 10px;
color: rgba(187, 190, 136, 0.774);
}
/* MAIN */
main {
display: grid;
grid-template-columns: 1fr 4fr;
}
#projects_bar {
background: red;
height: 100vh;
}
#tasks_bar {
background: yellow;
}
<!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" />
<title>Todo-App</title>
</head>
<body>
<header>
<i class="fa-solid fa-check-double app_logo"></i>
<h1>Todo App</h1>
<h2>Get things done</h2>
</header>
<main>
<nav id="projects_bar">
<h2>Projects</h2>
</nav>
<div id="tasks_bar">
<h2>Tasks</h2>
</div>
</main>
</body>
</html>
With your current structure why not just make header 10vh and main 90vh. This means that #projects_bar and #tasks_bar will also be 90vh also because 100vh (what you previously had) will cause overflow on the y-axis.
You can also add overflow-y: hidden; on the body to make it not scroll when switching device types.
Edit ~ mentioned in comments, same result without setting a height to the header. Remove all heights, and set height on body to 100vh. min-height: 100vh; is not the same as height: 100vh; so you need to establish that first. Then you can just set height: 100%; to main, and it will fill the remaining viewport.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 17px;
font-family: poppins;
}
body {
height: 100vh;
min-height: 100vh;
overflow-y: hidden;
}
header {
display: flex;
align-items: center;
padding: 20px;
background: rgb(139, 48, 48);
color: white;
}
header>h2 {
font-style: italic;
font-weight: lighter;
margin-left: 3em;
}
.app_logo {
font-size: 2.3em;
margin-right: 10px;
color: rgba(187, 190, 136, 0.774);
}
/* MAIN */
main {
display: grid;
grid-template-columns: 1fr 4fr;
height: 100%;
}
#projects_bar {
background: red;
}
#tasks_bar {
background: yellow;
}
<!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" />
<title>Todo-App</title>
</head>
<body>
<header>
<i class="fa-solid fa-check-double app_logo"></i>
<h1>Todo App</h1>
<h2>Get things done</h2>
</header>
<main>
<nav id="projects_bar">
<h2>Projects</h2>
</nav>
<div id="tasks_bar">
<h2>Tasks</h2>
</div>
</main>
</body>
</html>
When I attempt to alter the browser size, the navigation menu sort of "falls" into itself, if that makes sense. I'm not entirely sure what is causing this.
I've tried max-width and sometimes even adding the ="wrapper" in a div messes this up.
#font-face {
src: url(fonts/Modric.ttf);
font-family: Modric;
}
#font-face {
src: url(fonts/Orkney-Regular.ttf);
font-family: Orkney;
}
#font-face {
src: url(fonts/Made-Bon-Voyage.otf);
font-family: Made-Bon-Voyage;
}
* {
box-sizing: border-box;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 75%;
height: 100px;
margin-right: auto;
margin-left: auto;
}
.navbar a {
float: left;
padding: 40px;
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
width: 25%;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
font-family: Orkney;
}
h1 {
text-align: center;
font-family: Orkney;
}
img {
max-width: 100%;
height: auto;
display: block;
opacity: 50%;
margin-left: auto;
margin-right: auto;
}
#wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
padding-left: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
<img src="images/top-image.jpg" alt="plants">
<img src="images/second-image.jpg" alt="benches">
<img src="images/third-image.jpg" alt="cactus">
<img src="images/last-image.jpg" alt="more cactus">
<img src="images/pasetta-studios" alt="pasetta studios">
<code>Designed by Pasetta Studios. Built by Abraham.</code>
</div>
</body>
</html>
As you said in a comment, removing the padding on the links fixed the problem. What happened is that once the element became smaller than 100px (2x50px padding) it stopped getting smaller and wrapped (what you're describing is called wrapping in CSS) to the next line. A padding is redundant anyway since you're centering the text.
I added an overflow: hidden to .navbar to make it wrap around the floated links.
I also added an outline to everything inside body to make the elements easier to see for demonstration/development purposes. This can also be achieved by using the F12 developer tools in your browser.
body * {
outline: 1px solid red;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 75%;
height: 100px;
margin: auto;
overflow: hidden;
}
.navbar a {
float: left;
padding: 40px 0;
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
width: 25%;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
}
#wrapper {
max-width: 1000px;
margin: auto;
padding: 0 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
</div>
</body>
</html>
If you're learning, this is a great start if not a tiny bit outdated. Most people would use a flexbox nowadays which looks like this:
body * {
outline: 1px solid red;
}
body {
background-color: #262c2c;
}
.navbar {
margin: auto;
max-width: 75%;
/* Added: */
display: flex;
}
.navbar a {
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
/* Added: */
line-height: 100px; /* Effectively centers the text vertically. */
flex: 1; /* Tells the links to expand horizontally. */
}
#wrapper {
max-width: 1000px;
margin: auto;
padding: 0 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
</div>
</body>
</html>
I have HTML and CSS code like this:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="example.css"/>
</head>
<body>
<div id="main">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
</body>
</html>
CSS:
html {
overflow-y: scroll;
max-width: 800px;
margin: auto;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
#main {
margin: 0;
max-width: 50em;
padding: 1.5em;
}
span.alignleft {
float: left;
width:80%;
text-align:left;
}
span.alignright {
float: left;
width:20%;
text-align:right;
}
On a large window/viewport, this produces text in a two-column layout like this (which is what I want):
On a smaller window/viewport, e.g. a mobile browser, this produces text like this:
There isn't a lot of text here, so I'd like the font to scale according to the viewport instead of wrapping, as much as possible (and this should be possible on most viewports because, again, there isn't a lot of text here).
However, if I add font-size:2vw elements to the CSS, e.g.
html {
overflow-y: scroll;
max-width: 800px;
margin: auto;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
#main {
margin: 0;
max-width: 50em;
padding: 1.5em;
}
span.alignleft {
float: left;
width: 80%;
text-align: left;
font-size: 8vw;
}
span.alignright {
float: left;
width: 20%;
text-align: right;
font-size: 2vw;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<div id="main">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
</body>
</html>
This kills the two-column layout and the rest of the formatting. How do I fix this?
You can use the fw unit for font-size as you did, but you simply have to use smaller values. Start with font-size: 0.5vw and change the value slowly trying different values to get the desired result.
Keep in mind: One vw is one percent of the screen width, so for a 1000px wide screen, 8vw means 80px fontsize!
You can add your desired font-size:2vw to scale with viewport along with a couple of other rules:
Setting the wrapper and spans to render as table and cells
Setting white-space on the spans to nowrap
This seems to do what you want but renders a bit odd on a large viewport. An improved approach would probably be to use at least one media query and to set the dynamic font size only on smaller screens.
html {
overflow-y: scroll;
max-width: 800px;
margin: auto;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
#main {
margin: 0;
max-width: 50em;
padding: 1.5em;
display: table;
width: 100%;
box-sizing: border-box;
}
#main>div.row {
display: table-row;
}
span.alignleft {
text-align: left;
}
span.alignright {
text-align: right;
}
span.alignleft,
span.alignright {
white-space: nowrap;
display: table-cell;
padding: 0 5px;
}
#media only screen and (max-width: 768px) {
#main {
padding: .5em;
}
span.alignleft,
span.alignright {
white-space: nowrap;
display: table-cell;
font-size: calc(6px + 1.5vw);
}
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<div id="main">
<div class="row">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
<div class="row">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
</div>
</body>
</html>
I want to the two span center in the div but i'm failed,how to fix it? Code as below don't effective but when i put a div out of the two span it become effective while display property change to inline-block, how could this happen?
body{
margin: 0;
padding: 0;
}
.topbar{
border: 1px solid;
max-width: 800px;
height: 20px;
}
.inner1{
float: left;
border: 1px solid red;
}
.inner2{
float: left;
border: 1px solid red;
}
.clearfix::after{
content: "";
clear: both;
display: block;
}
.topbar{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>
You have float: left in your inner1 and inner2 classes and they move the spans into left. Just removing them works fine. Below is the updated code.
body{
margin: 0;
padding: 0;
}
.topbar{
border: 1px solid;
max-width: 800px;
height: 20px;
}
.inner1{
border: 1px solid red;
}
.inner2{
border: 1px solid red;
}
.clearfix::after{
content: "";
clear: both;
display: block;
}
.topbar{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>
You can't center it because of float: left; on both spans. Just remove the float: left; and it will go to center.
You say it works when you wrap the spans inside a div with display inline-block. That is because that div will go to center since it doesn't have float: left, and then the spans will float: left inside the centered div. Hope you got it :)
Another approach could be just using the flexbox model. It's easier and code is short too.
body {
margin: 0;
padding: 0;
}
.topbar {
border: 1px solid;
max-width: 800px;
height: 20px;
display: flex;
justify-content: center;
}
.topbar span {
border: 1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>
PS: Also to make the code shorter, instead of using inner1 and inner2, I used .topbar span in css since both share the same property.
I'm looking to align my logo with my header title and subtitle.
I've attempted to do this using display: inline-block. I didn't manage to,
and I also attempted with floats, but everything messed up.
I've then put a hr (line) under the header, but it's too thin, so I want to add thickness to it, but I can't manage to.
I've looked up this question but couldn't use answers to help me as most of them used tables.
How can do this?
http://codepen.io/anon/pen/BjmMdM
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<main>
<header>
<img class="logo" src="hidden.jpg" alt="Logo">
<div id="title">
<h1>Lorem Epsum</h1>
<h3>Front Ninja</h3>
</div>
</header>
<hr id="line">
<section>
</section>
</main>
</body>
</html>
File style.css
html, body {
padding: 0;
margin: 20px;
height: 100%;
font-family: 'Quicksand', sans-serif;
}
header {
padding: 25px;
background-color: whitesmoke;
display: inline-block;
}
.logo {
height: 80px;
width: 80px;
margin-left: 300px;
border: #F8981C solid 5px;
border-radius: 99px;
}
#title {
text-transform: uppercase;
}
#line {
height: 100px;
background-color: blanchedalmond;
border: none;
}
So. I think the issue is that you needed vertical alignments. You have all of the html markup you need. I made a jsFiddle to help you out. Let me know if this is what you're looking for. There are a couple of ways to position the elements; I just added hard left margins to achieve the effect in your wireframe.
Fiddle: https://jsfiddle.net/legendarylionwebdesign/b570pyo9/
hr {
border: 0px;
height: 2px;
width: 100%;
background: black;
}
.logo {
display: inline-block;
height: 100px;
width: 100px;
vertical-align: middle;
margin-left: 100px;
}
#title {
width: 200px;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-left: 200px;
}
For the title, you can just change it like this:
#title {
margin-right: 300px;
text-transform: uppercase;
z-index: 100;
position: absolute;
right: 0;
top: 20px;
}
And play with top or put width and so on example.