How do I Align Header on the same line using display? - html

I aligned the objects using display: flex; Now I have tried to put the header on the same line using text-align: justify; and display: block;, but it still doesn't work. What am I doing wrong. Can someone please help with this?
.pos-container {
list-style: none;
padding-top: 40px;
padding-bottom: 60px;
display: block;
}
.pos-info {
display: inline-flex;
float: left;
}
.pos-info: before {
display: block;
height: 1px;
background-color: #045d71;
content: " ";
width: 90%;
margin: 0 auto;
}
.pos-image {
border-radius: 3px;
width: 47%;
height: 50%;
}
.pos-container i {
font-size: 180%;
color: #07a0c3;
margin-top: 150px;
margin-left: 40px;
display: block;
}
.pos-info h3 {
display: inline-block;
font-size: 110%;
text-align: left;
margin-left: 40px;
float: left;
column-width: auto;
}
.pos-content {
display: flex;
text-align: justify;
margin-top: 69px;
float: right;
margin-left: -118px;
margin-bottom: 80px;
}
.pos-content: after {
display: block;
height: 0.1px;
background-color: #045d71;
content: " ";
width: 90%;
margin: 0 auto;
}
<div class="row">
<ul class="pos-container">
<li class="pos-info">
<img class="pos-image" src="resources/img/cashier2.jpg" alt="pos picture">
<i class="ion-arrow-left-b"></i>
<h3>POS Software</h3>
<p class="pos-content">We offer a payment solution which functions on the cloud. It gives you access to your inventory, expenses, sales and operations from wherever you are located. It is designed for simplicity, so your employees won’t need any special training to use
the software. In case of a bad connection to the internet, the payment system will still work normally and would update every captured payment and transaction, once the connection is restored. A cheap and affordable solution for any type of restaurant,
bar or lounge with available payment plans.
</p>
</li>
</ul>
</div>

.wrapper {
display: flex;
}
.content {
margin-left: 40px;
}
h2 {
margin: 0;
}
<div class="wrapper">
<img src="http://via.placeholder.com/400x400" />
<div class="content">
<h2>Title</h2>
<p>Text</p>
</div>
</div>

Related

Flexbox alignment

I'm trying to align the Modern Art Gallery and the text using flexbox but when I do that the whole container moves left and right. Even more so I want to change the width of the h1 but I'm not sure how to do that.
Some code may be missing as I'm working on multiple devices but I only need help with the desktop version which is what's shown.
Here's what I want it to look like:
.container-content {
border: 2px solid blue;
position: relative;
display: flex;
justify-content: space-between;
gap: 2rem;
}
.container-content h1 {
font-size: 96px;
padding: 0;
}
#tablet-img {
display: none;
}
#desktop-img {
display: block;
background-color: grey;
padding-left: 450px;
}
.desktop-text-button {
border: 2px solid red;
position: absolute;
margin-left: 1%;
}
}
<div class="container-flex">
<img id="desktop-img" src="../art-gallery-website/starter-code/assets/desktop/image-hero.jpg" alt="desktop-image">
<div class="container">
<div class="container-content">
<h1>MODERN ART GALLERY</h1>
<div class="desktop-text-button">
<p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p>
<div class="button-1">
<button>Our Location</button>
<span class="right-arrow"></span>
</div>
</div>
</div>
</div>
</div>
Your code was messy so I just recoded it. Is this what you want?
.wrapper {
display: flex;
flex-direction: row;
width: 100%;
height: 90vh;
}
.wrapper .left {
width: 70%;
height: 100%;
background-image: url('https://wallpaperaccess.com/full/4707236.jpg');
background-size: cover;
border: 1.2px solid #000000;
}
.wrapper .left p {
font-size: 6vw;
font-weight: 700;
margin-top: 15%;
margin-left: 10%;
color: #ffffff;
}
.wrapper .left p span {
color: #000000;
}
.wrapper .right {
display: flex;
flex-direction: column;
column-gap: 2vh;
position: relative;
right: 7%;
width: 30%;
height: 40%;
margin-top: 10%;
}
.wrapper .right p {
font-size: 2vw;
}
.wrapper .right button {
font-size: 1.6vw;
width: 45%;
margin-left: auto;
margin-right: auto;
}
<div class="wrapper">
<div class="left">
<p>MODERN <br /> ART GAL<span>LERY</span></p>
</div>
<div class="right">
<p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p>
<button>OUR LOCATION</button>
</div>
</div>

Im unable to use position relative

Expected result - the third blue box should be a little towards the right
i am unable to use left functon after doing position relative in the userated div . im trying to say that instead of moving right, it is just increasing in size . Below is a picture to help you understand what i am saying . after that i wrote all the html and css code.
Code Snippet:
* {
margin: 0px;
padding: 0px;
}
ul.navlist {
list-style: none;
display: flex;
padding: 0px;
margin: 0px auto;
width: 100%;
top: 30px;
align-items: center
}
.bar {
height: 100px;
width: 100%;
justify-content: left;
box-shadow: 0px 2px 5px;
display: grid;
grid-template-columns: 100px auto 80px;
}
.link1 {
margin-left: 30px;
text-decoration: none;
color: black;
font-size: 20px
}
.signin {
background: linear-gradient(to right, blue, rgb(20, 196, 255));
height: 38px;
width: 120px;
position: relative;
text-align: center;
font-size: 18px;
border-radius: 20%;
;
left: 200px;
top: -10px
}
.sign {
top: 15%;
position: relative;
color: white;
text-decoration: none
}
.introbox {
width: 700px;
height: 200px;
background-image: url('wal.jpg');
opacity: 0.75;
left: 25%;
position: relative;
background-position: center;
top: 10px;
border-radius: 5px;
font-weight: 600;
box-shadow: 0px 2px 5px;
}
.new {
font-size: 30px;
left: 6%;
position: relative;
font-weight: 400
}
.box1 {
height: 250px;
width: 200px;
background: green;
position: relative;
top: 2%;
display: grid;
font-size: 20px;
font-weight: 600
}
.box2 {
height: 250px;
width: 200px;
background: green;
position: relative;
top: 1%;
display: grid;
font-size: 20px;
font-weight: 600;
}
.lnlink {
text-decoration: none;
color: black;
}
.lightnovel1 {
display: flex;
flex-direction: row;
position: relative;
height: 580px;
width: 900px;
background: red;
left: 5%;
}
.ww {
margin: 20px;
height: 260px;
width: 180px;
font-size: 20px;
font-weight: 600
}
.pic2 {
height: 80%;
width: 100%
}
.ranki {
font-size: 15px
}
.ranktitle {
position: relative;
left: 5%;
font-size: 30px;
font-weight: 400
}
.ranking {
height: 580px;
width: 900px;
background: yellow;
display: flex;
flex-direction: row;
position: relative;
left: 5%;
}
.topview {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
background: blue;
}
.li {
float: left;
}
.newtrends {
display: flex;
flex-direction: column;
height: 400px;
width: 250px;
background: blue;
position: relative;
left: 5%
}
.userrated {
display: flex;
flex-direction: column;
height: 400px;
width: 250px;
background: blue;
position: relative;
left: -5%
}
<div class="bar">
<! me might not come for 2 month here or disc>
<nav>
<ul class="navlist">
<li><img src="background.png"></li>
<li>Search</li>
<li>Browse</li>
<li>Tags</li>
<li>Filter</li>
<li>Dev</li>
<li>
<div class="signin"><a href="#" class='sign'>Sign In</a></div>
</li>
</ul>
</nav>
</div>
<div class="introbox">
<h1>Read Light Novel & Web Novel Translations Online For FREE!</h1>
<p2>Your fictional stories hub</p2>
<br>
<p3>Looking for a great place to read Light Novels? Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese, Chinese and Korean light novels in English. Every new chapters published by the author is
updated instantly on the Light Novel Pub and notification service is provided to the readers.
</p3>
Start reading now to explore this mysterious fantasy world.
</div>
<br>
<br>
<div class="release">
<div class="title1">
<h3 class="new">New Ongoing Release</h3>
</div>
<div class="lightnovel1">
<div class="ww">
<img src="martialart.jpg" class="pic2">
Martial Art System
<div class="ranki">
<p2> Rank 1 </p2>
</div>
</div>
<div class="ww">
<img src="martialart.jpg" class="pic2">
Martial Art System
<div class="ranki">
<p2> Rank 1 </p2>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="ranktitle"> Ranking </div>
<div class="ranking">
<div class="misc">
<h2>Trending</h2>
<div class="topview" id="topviewid">
</div>
</div>
<div class="misc1">
<h2>most viewed</h2>
<div class="newtrends">
</div>
</div>
<div class="misc2">
<h2>User Rated</h2>
<div class="userrated">
</div>
</div>
</div>
float: right or left is causing this result
Your .userrated and .newtrends classes are both positioned in relation to their normal position. If you move the second div by 5% it overlaps with the third. If you now move the third by 5% you would moved them both by the same distance so they won't show a gap.
If you want the same gap between the second and the third div you need to set the third's left value to 10%.

Trouble with making my website responsive

I am currently attempting to make my website responsive i.e. images scale up and down with page resizing, content stacks above each other, etc. I was under the impression that I had taken the appropriate steps, but the elements are still stretching in size when resizing and the contents are not staying in their original positions.
How can I achieve this result while keeping all of my elements intact?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url(img/food-background.jpg);
background-attachment: fixed;
height: 100%;
}
.main-content {
display: flex;
flex-wrap: wrap;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1140px;
}
.Navbar {
text-align: center;
display: block;
margin-top: 2%;
}
#center-logo {
width: 100%;
max-width: 200px;
height: auto;
text-align: center;
}
#Navbar_Link-Toggle {
display: none;
}
img {
width: 40%;
}
.links {
text-decoration: none;
font-size: 13px;
color: black;
font-weight: bold;
padding: 25px;
}
.links:hover {
color: #f58300
}
a:visited {
color: black;
}
.header {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 3%;
height: auto;
background-color: yellow;
}
#food {
height: 65vh;
width: 100%
}
.footer {
margin-top: 100%;
bottom: 0;
width: 100%;
text-align: center;
font-size: 10px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
}
.top {
float: left;
width: 100%;
}
#olive-green {
margin-top: 5%;
position: absolute;
right: 50px;
max-width: 450px;
}
#coral {
max-width: 450px;
position: absolute;
left: 50px;
margin-top: 5%;
}
#teal {
max-width: 450px;
position: absolute;
left: 50px;
margin-top: 50%;
}
#honey {
margin-top: 50%;
position: absolute;
right: 50px;
max-width: 450px;
}
.images {
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 900px) {
.top {
width: 100%;
}
.bottom {
width: 100%;
}
}
<div class='main-content'></div>
<div id='Navbar_Link-Toggle' style='font-size: 20px'>
<i id='main' class='fas fa-bars'></i>
</div>
<div class='container'>
<div class='Navbar'>
<a class='links' href=''>FOOD</a>
<a class='links' href=''>FUN</a>
<img id='center-logo' src='img/SAMO.png'>
<a class='links' href=''>HISTORY</a>
<a class='links' href=''>LOCATION</a>
</div>
</div>
<div class='header'>
<img id='food' src='img/food.jpg'>
</div>
<div class='images'>
<div class='top'>
<img id='coral' src='img/coral.png'>
<img id='olive-green' src='img/olive-green.jpg'>
</div>
<div class='middle'>
<img id='teal' src='img/teal.jpg'>
<img id='honey' src='img/honey.jpg'>
</div>
</div>
</div>
<div class='footer'>
<p>200 Santa Monica Pier, Suite A Santa Monica, CA 90401</p><br>
<p>Questions? Drop us a message at: info#santamonicapier.org or 310-458-8900</p><br>
<p>All Rights Reserved © 2019 Santa Monica Pier</p>
</div>
You have an extra closing div on the first line of your HTML. So your .main-content element is actually being closed right away instead of wrapping around the rest of the elements.

How to make a full image inside href be clickable

simple question, I'm doing something wrong, but didn't get what the problem here. I want to make images clickable as it was links, but this isn't working properly, with the link staying in the middle only, not staying the full image as I want. Someone could help?
<div>
<ul class="principaisCategorias">
<li class="itemCategoria">
<div class="imagesItemCategoria">
<a data-bind="ccLink:{route: '/category/ar-condicionado-portatil'}">
<img src="/file/general/imageItemCategoria.jpg" />
</a>
</div>
</li>
</ul>
</div>
And here's my css:
div{
display: inline;
font-weight: bold;
text-align: center;
ul{
padding: 0;
margin: 0;
&.principaisCategorias{
width: 102%;
height: 450px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.itemCategoria{
list-style-type: none;
margin-top: 2px;
margin-left: 2%;
margin-bottom: 2px;
margin-right: 2%;
height: 140px;
width: 45%;
background-color: mediumturquoise;
.imagesItemCategoria {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
img, a{
display: block;
width: 100%;
height: 100%;
max-height:100%;
max-width:100%;
}
a{
display: inline-block;
}
}
}
}
}
}
When I tried to run the code initially none of the inner styles were being applied. This is because your CSS is nested like SASS or SCSS. When I refactored to ordinary CSS syntax it started working better.
As far as the a link behavior issue, you do not have an href attribute on that element so it behaves more or less like a <span> tag. There were also several other unnecessary styles in there. This is all I needed to get it to behave as I expected:
.imagesItemCategoria a {
display: block;
cursor: pointer;
}
Full code and working demo:
.wrapper {
display: inline;
font-weight: bold;
text-align: center;
}
ul.principaisCategorias{
width: 102%;
height: 450px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.itemCategoria{
list-style-type: none;
margin-top: 2px;
margin-left: 2%;
margin-bottom: 2px;
margin-right: 2%;
height: 140px;
width: 45%;
background-color: mediumturquoise;
}
.imagesItemCategoria {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.imagesItemCategoria a {
display: block;
cursor: pointer;
}
.imagesItemCategoria img {
width: 100%;
height: auto;
display: block;
}
<div class="wrapper">
<ul class="principaisCategorias">
<li class="itemCategoria">
<div class="imagesItemCategoria">
<a data-bind="ccLink:{route: '/category/ar-condicionado-portatil'}">
<img src="https://picsum.photos/300" />
</a>
</div>
</li>
</ul>
</div>

How to center vertically floated elements, problems with elements scaling, img elements size problems

I'm trying to make a simple game, and I've run into few problems I can't seem to solve:
I can't center vertically floated elements (.stat and .clickable).
Total height of all elements should fit exactly into screen height, however it goes beyond it.
Images differ a bit in their width depending on value I give them (at my screen they look the same at 32% or 29%, but on 30% upper one has slightly wider (and a bit blurry) right border).
Height property of img elements has no effect.
Here's my code (Images are 450px wide squares):
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
I don't know what you mean with your first question. However I can help you with the second. I made some small changes to your code, but I don't have the image. Look at the code bellow. The game container now is set to max-height: 100%; and height: 100vh; that should help. (100vh means the hole page. I also made body overflow: hidden;, because I think scrolling isn't necessary. I made the buttons container to the bottom of the page.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
overflow:hidden;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
.buttons {
bottom: 0;
clear:both;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
max-height: 100%;
height: 100vh;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
height: 50%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
For the third question, we don't have the images...
For the height property try display: block; and no width then. Check your classed normally it should work.
I hope I helped you !!!
You can take advantage of flexbox in this case (note the scroll is generated by the snippet's viewport height, ideally it wouldn't even overflow, but if it did, overflow: auto is set just to handle it, you can comment it though based on your benefit):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}
.hands {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/* comment if content will never overflow */
overflow-x: auto;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
/*text-align: center;*/
margin: auto;
background-color: #999999;
display: flex;
flex-flow: column wrap;
justify-content: center;
}
img {
width: 32%;
display: block;
margin: auto;
}
/*#score {
float: left;
margin-left: 5%;
}*/
/*#hp {
float: right;
margin-right: 5%;
}*/
/*.stats:after {
content: "";
display: block;
clear: both;
}*/
/*#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}*/
/*#playerHand {
margin-bottom: 5%;
}*/
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
Please check this code. I solve your question 1 and 2. I don't understand about your image issue.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
display: table;
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
width: 100%;
}
#score,
#hp{
display: table-cell;
vertical-align: middle;
padding: 10px;
}
#score {
/*float: left;
margin-left: 5%;*/
text-align: left;
}
#hp {
/*float: right;
margin-right: 5%;*/
text-align: right;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
/*float: left;*/ /*Float sould not use here */
display: table-cell;
width: 29.33%;
/*margin: 1%;
padding: 1%;*/
border: 5px solid #bfbfbf;
vertical-align: middle;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="http://placehold.it/450x450">
<img id="playerHand" src="http://placehold.it/450x450">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>