I am new with HTML web design and all the languages involving it (php, JavaScript, CSS, etc.)
I would like some help to make my HTML layout look as follows:
I have the following code, but I don't know how to modify it to make it look as I want.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
width: 100%;
float: left;
}
.class1{
width: 100%;
float: left;
height: 100%;
}
.class2{
width: 100%;
float: right;
height: 100%;
}
.class3 {
width: 100%;
float: right;
height: 100%;
}
p {
padding-top: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>left</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Top right</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>Buttom right</p>
</div>
</body>
</html>
Would really appreciate the help.
Please see the code snippet for the details of the change. Basically, all 3 <div> are using float: left with width: 50%. In <body> scope, add height: 100vh; to set the height of body.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
.class1 {
width: 50%;
float: left;
height: 100%;
}
.class2,
.class3 {
width: 50%;
float: left;
height: 50%;
}
p {
padding-top: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>left</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Top right</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>Buttom right</p>
</div>
</body>
</html>
I would suggest using grid or flex to have such a layout, its better than having float based layout, but keep in mind to check browser compatibility
* {
box-sizing: border-box;
}
body {
display: grid;
grid-template-areas:
"left top"
"left bottom";
height: 100vh;
width: 100%;
}
.class1{
grid-area: left;
}
.class2{
grid-area: top;
}
.class3 {
grid-area: bottom;
}
p {
padding-top: 25px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>left</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Top right</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>Buttom right</p>
</div>
</body>
</html>
Related
I'm trying to create an account dashboard using Html Css(Bootstrap) and also php lavarel for backend.
My idea is that to create one row and three columns and put the content inside the three columns.
This is the html:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pop</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<style>
html{
background: #01ACAD;
}
.container{
background-color: white;
width: 95%;
height: auto;
position: relative;
left: 40px;
top: 15px;
}
.row{
background:;
padding: 22.875rem;
margin: 6.188rem;
margin-left: 134px;
position: relative
}
.col-6 {
float: left;
width:30%;
background: grey;
}
</style>
</head>
<body class="container">
<div class="row">
<div class="col-6 .col-md-4">
<h2>LOGO</h2>
</div>
<div class="col-6 .col-md-4">
<h2>LOGO</h2>
</div>
<div class="col-6 .col-md-4">
<h2>LOGO</h2>
</div>
</div>
</body>
</html>
This is how it looks like:
This is what I want:
Any response I would appreciate it.
Please take reference from below code snippet:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Three Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
Logo
</div>
<div class="column" style="background-color:#bbb;">
Logo
</div>
<div class="column" style="background-color:#ccc;">
Logo
</div>
</div>
</body>
</html>
You could change the height property value to get the preferred column size you want:
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px; /* Change this height property according to your need */
}
I changed the height to my preference but its not in the center.
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 750px; /*Changed*/
}
This is how it looks now:[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/FTnpI.jpg
My idea is that to be in the center with height: 750px;
I'm trying to position two images and running into difficulties. I want the 'Welcome!' speech bubble to be just to the left of the logo.
Can someone help me with this?
Here is my code:
html {
background-color: #FFFFFF;
}
img {
width: 100px;
height: 150px;
}
#logo {
margin: auto;
width: 10%;
}
#welcome {
margin: auto;
width: 10%;
}
#popUp {
width: 50px;
height: 50px;
}
<! DOCTYPE html>
<html>
<head>
<title>Placehold</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id='logo'>
<img src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/logo_zpsopheofmw.png" alt="logo">
</div>
<div id='welcome'>
<img id='popUp' src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/welcome_zps3xaw6gge.png" alt="welcome">
</div>
</body>
</html>
An easy fix would be to switch the ordering of the HTML so that the welcome bubble div is before the logo div. All you will have to do then is float each div to the left.
html {
background-color: #FFFFFF;
}
img {
width: 100px;
height: 150px;
}
#logo {
margin: auto;
width: 10%;
float:left;
}
#welcome {
margin: auto;
width: 10%;
float:left;
}
#popUp {
width: 50px;
height: 50px;
}
<! DOCTYPE html>
<html>
<head>
<title>Placehold</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id='welcome'>
<img id='popUp' src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/welcome_zps3xaw6gge.png" alt="welcome">
</div>
<div id='logo'>
<img src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/logo_zpsopheofmw.png" alt="logo">
</div>
</body>
</html>
I am trying to make a homepage divided into two halves. The page should look like this page - two images should be responsive, they should cover full screen without white spaces on sides, images should be clickable. And I would appreciate if it could be written just in HTML and CSS without JavaScripts.
Everything I have got now is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="body">
<div id="production" class="column half">
<h1>production</h1>
</div>
<div id="label" class="column last">
<h1>label</h1>
</div>
</div>
</body>
</html>
and css
.body { overflow: hidden; margin: 0; width: 100%; height: 100%;}
.column { float: left; }
.half { height: 100%; width: 50%; }
.last { height: 100%; float: none; width: auto; }
#production { background-image:url(bgprod.jpg); }
#label { background-image:url(bglabel.jpg); }
Thanks for any help.
I sketched up something quickly that you can use. This meets your requirements given that the images are proportional to the screen size.
The html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="col-half">
<img class="responsive-image" src="test.jpg" />
</div>
<div class="col-half">
<img class="responsive-image" src="test.jpg" />
</div>
</div>
</body>
</html>
And the css:
html, body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.container {
width: 100%;
height: 100%;
}
.col-half {
margin: 0;
padding: 0;
float: left;
max-width: 50%;
height: 100%;
}
.responsive-image {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
I have a HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижатый к низу футер</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-color: #DDE4EA;
}
.container {
max-width: 1250px;
margin: 0 auto;
}
.page {
min-height: 100%;
height: auto !important;
height: 100%;
}
.wrap {
padding-bottom: 77px;
background-color: #000;
color: White;
}
.footer {
height: 77px;
margin-top: -77px;
background-color: #E11;
color: White;
}
</style>
</head>
<body>
<!--<div class="container">-->
<div class="page">
<div class="wrap">
Content
</div>
</div>
<div class="footer">
Footer
</div>
<!--</div>-->
</body>
</html>
In this case, footer is working as I need (top image), and when I uncomment div "container", footer isn't works (bottom image)
See attached screenshot:
That's happening because you are applying the .container class without height: 100%; in the CSS, and footer is now contained with .container.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижатый к низу футер</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-color: #DDE4EA;
}
.container {
max-width:100%;
margin: 0 auto;
height:100%;
}
.page {
min-height: 100%;
height: auto !important;
height: 100%;
}
.wrap {
padding-bottom: 77px;
background-color: #000;
color: White;
}
.footer {
height: 77px;
margin-top: -77px;
background-color: #E11;
color: White;
}
</style>
</head>
<body>
<div class="container">
<div class="page">
<div class="wrap">
Content
</div>
</div>
<div class="footer">
Footer
</div>
</div>
Ok so here is my question i have a website and in the middle i have a section and a aside. every thing else on the page is 100% but the section and aside i want to equal 80% and me aligned next to each other in the middle. but instead i get this.
IMAGE: https://twitter.com/iamalecgrogan/status/392454057345810432/photo/1
before you start saying stuff i have tried every thing doing table-cell and table verticaly align and in-line block elemets creating a div for them to go into. but nothing is working please help. here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Home | ProvideWebDesign
</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<div id="header_right">
</div>
<div id="header_left">
</div>
</header>
<nav id="nav">
</nav>
<section id="section">
<article id="section_article">
</article>
<article id="section_article2">
</article>
</section>
<aside id="aside">
<article id="aside_article">
</article>
<article id="aside_article2">
</article>
<article id="aside_article3">
</article>
</aside>
<footer id="footer">
<div id="footer_right">
</div>
<div id="footer_left">
</div>
</footer>
</div>
</body>
</html>
CSS--------------------
*
{
margin: 0px;
padding: 0px;
}
#wrapper
{
width: 100%;
height: 875px;
display: table;
}
#header
{
width: 100%;
height: 75px;
display: block;
}
#header_right
{
width: 50%;
height: 75px;
float: left;
display: block;
}
#header_left
{
width: 50%;
height: 75px;
float: left;
display: block;
}
#nav
{
width: 100%;
height: 50px;
display: block;
}
#section
{
width: 60%;
height: 600px;
float: left;
display: table-cell;
}
#aside
{
width: 20%;
height: 600px;
float: left;
display: table-cell;
}
#footer
{
width: 100%;
height: 150px;
display: block;
clear: both;
}
#footer_right
{
width: 50%;
height: 150px;
float: left;
display; block;
}
#footer_left
{
width: 50%;
height: 150px;
float: left;
display: block;
}
Create a containing element such as a div around the section and aside, give that container a width of 80%, block display, and margin auto. Lose the table-cell display on the section and aside. Give the container a clear fix: https://gist.github.com/jelmerdemaat/3804403