I want to add divs on both sides of the image. I'm trying to make two yellow
horizontal rectangular divs on both sides.
You can use flex boxes in CSS. Read about it here: FLEX-BOX
Fiddle here: fiddle Thank you to Alon Eitan for his valuable suggestion!
So, encapsulate your entire div with a parent div and then you can play around with the heights and width.
So your structure will be like:
<div id="mainDiv">
<div id="div1">
</div>
<div id="img1">
<img id="image" src="http://i.imgur.com/HKwhBJp.png"/>
</div>
<div id="div2">
</div>
</div>
Put the image in a div and use pseudo-elements
body {
width: 100vw;
height: 100vh;
background: rgb(141, 0, 0);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.image-container {
width: 100vw;
height: 50vh;
background: red;
display: flex;
}
.image-container:before,
.image-container:after {
content: "";
display: block;
width: 25%;
height: 100%;
background: yellow;
}
.image {
width: 50%;
height: 100%;
}
<div class="image-container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/4/4f/World_topic_image_Satellite_image.jpg">
</div>
Your requirement should be starting somewhere what this image is showing below. You can tinker around with it to get the layout which you need
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
#container{width:100%;height:100%; background-color: white;}
#left{float:left;width:100px;height:100px;background-color: yellow;}
#right{float:right;width:100px;height:100px;background-color: orange;}
#center{margin:0 auto;width:100px;height:100px;background-color: violet;}
</style>
<div id="container">
<div id="left">Your Left Div</div>
<div id="right">Your Right Div</div>
<div id="center">Image Goes Here</div>
</div>
</body>
</html>
Related
I have to put several images and texts on the site and they should be in the same position as the background image but when I minimize the screen size the proportionality is lost, I tried with an image of the text that I needed and it worked for me but I can not do that work with texts
Thank you very much for your help i've just been stuck for the hole day trying to find the solution
.title {
width: 74.5%;
}
/*text image png
.title.s1{
position: absolute;
margin-top: 36%;
}
/*text in h1*/
h1.title.s1 {
color: rgb(60, 255, 0);
position: absolute;
margin-top: 34.5%;
margin-bottom: 0;
text-align: center;
display: inline;
}
<div id="r_bg-img">
<img src="/img/rokubun_background.png" width="100%">
</div>
<div class="content">
<img src="/img/title1.png" class="title s1" >
<h1 class="title s1">The premise</h1>
</div>
In the link there's the output , the gray text is added as an img and the green text is added as a and below those elements the background titles are in orange
If you want to make your contents propotional, you can use the styles like below.
We can use the padding-top property as a percentage to make the gap between your contents like headers and images.
Here this is an example I tried, You can apply the styles properly for our contents. It is easy to create an outer and inner containers to keep the contents like headers and images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
position: relative;
width: 100%;
height:100%;/* 1:1 Aspect Ratio */
}
.container .outer {
width: 100%;
padding-top: 5%; /* defines aspect ratio */
position: relative;
}
.container .outer .inner {
text-align:center;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
display: block;
width: 50%;
height: 50%;
padding: 0% 25%;
}
h1 {
margin:auto;
color: rgb(60, 255, 0);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
</div>
</body>
</html>
You can follow this to get an idea https://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements#:~:text=For%20proportional%20resizing%20purposes%2C%20it,the%20aspect%20ratio%20you%20need.&text=And%20that's%20it!
Hope this will help you and think this is what you want to do.
I'm trying to create a simple HTML page. Now, I'm trying to add bg-image / color. So I have this simple html tag:
<html>
<style type="text/css">
.header {
height: 100px;
}
.kontent1 {
height: 50px;
margin-top: 10px;
}
.kontent2 {
height: 50px;
margin-top: 10px;
}
</style>
<div class="bgheader"></div>
<div class="header">HEADER</div>
<div class="kontent1"> KONTENT </div>
<div class="bgfooter"></div>
<div class="kontent2"> KONTENT</div>
<div class="footer">FOOTER</div>
</html>
So, what I want to achieve is something like this:
How can this be achieved?
UPDATE
I'm have tried this:
body{
background:
url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;
background-size: contain;
max-height:80%;
padding-top: 20px;
margin-bottom:10px;
}
but it's not responsive, because when the page height change, the backgrounds are broken.
You can use the below code for adding 2 images in div:
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
You can go though the below links for better understanding:
http://www.css3.info/preview/multiple-backgrounds/
https://www.w3schools.com/css/css_background.asp
You can use background-color to achieve background color and background-image for image as background on these containers. As you have two different containers, its better approach to background them separately instead of using background on body or parent div.
You can try something like this,
.header-container, .footer-container {
width: 200px;
height: 200px;
border: 2px solid black;
text-align: center;
text-transform: uppercase;
}
.header, .content {
min-height: 100px;
}
.header-container {
background-color: #DD3388;
}
.footer-container {
background-color: #33DD44;
}
<html>
<head>
</head>
<body>
<div class="header-container">
<div class="header"> Header </div>
<div class="content"> Content </div>
</div>
<div class="footer-container">
<div class="content"> Content </div>
<div class="footer"> Footer </div>
</div>
</body>
</html>
I have a container div and two child divs both with the float: right property.
My code looks like:
<div class="container"> .container {width: 50%}
<div class="a"></div> .a, .b { float: right }
<div class="b"></div>
</div>
Semantically, I should see [ [A][B]] on my page, but it shows up as
[ [B][A]]
I get that I can just reorder my HTML and put B first if I want to see A first, but that's not really semantically correct. What's the proper way to do this?
You can use flexbox and justify-content: flex-end;
.container {
background: #eee;
width: 50%;
display: flex;
justify-content: flex-end;
}
<div class="container">
<div class="a">a</div>
<div class="b">b</div>
</div>
Or set the child divs to display: inline-block; and use text-align on the container to align to the right.
.container {
background: #eee;
width: 50%;
text-align: right;
}
.container > div {
display: inline-block;
}
<div class="container">
<div class="a">a</div><div class="b">b</div>
</div>
And another solution would be to introduce a new element to wrap the child elements, float the new element right, then float the children left.
.container {
background: #eee;
width: 50%;
text-align: right;
overflow: auto;
}
.inner {
float: right;
}
.inner > div {
float: left;
}
<div class="container">
<div class="inner">
<div class="a">a</div>
<div class="b">b</div>
</div>
</div>
.container {
width: 100%;
}
.container div {
float:right;
width: 50%;
}
Another solution is to just wrap the child elements in a tag, and float it right :), but this is subject to adding a wrapping element, and converting your child div tags into inline blocks.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<style>
.container {
width: 30%;
}
.c {
float: right;
}
.a, .b {
display: inline;
}
</style>
</head>
<body>
<div style="margin-left:20px;">
<div class="container">
<div class="c">
<div class="a">a</div>
<div class="b">b</div>
</div>
</div>
</div>
</body>
</html>
Floating your elements right will order them with the last div first. Try floating them both left.
.a, .b
{
float: left;
}
I have built a template to layout what I intend to accomplish. Everything seems to work well with what I have learned from the stackoverflow community.
However, the Footer which is its own container and has "section7" as another DIV is not displaying as 150 pixels in height. Basically all sections have fixed height except for Section 5 and Section 6 which have to scale in height depending on the browser window size or content that will be placed inside the section. So if content is sparse, I just want the height to be 100% of the remaining browser space so that the website is top to bottom. However if there is content that is lengthy obviously I want the middle section to adapt and continue as required. Hope I am making sense.
The challenge is I don't know where I am wrong and thus do not know how to pose the question in the search function as I imagine it is an easy task for those with experience. Any help is appreciated.
The HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="section1">section 1</div>
<div class="section2">section 2</div>
<div class="section3">section 3</div>
<div class="section4">section 4</div>
</div>
<div class="middle">
<div class="section5">section 5</div>
<div class="section6">section 6</div>
</div>
<div class="footer">
<div class="section7">section 7</div>
</div>
</div>
</body>
</html>
The CSS:
#charset "utf-8";
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background-color:#DBDBDB
}
div.container {
width: 1200px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
}
div.header {
height: 100px;
}
div.middle {
min-height: 400;
}
div.footer {
height: 150px;
}
div.section1 {
background-color:#FF0004;
height: 100px;
width: 275px;
float:left;
position:relative;
}
div.section2 {
background-color:#FFA600;
height: 100px;
width: 100px;
float:left;
position:relative;
}
div.section3 {
background-color:#00C304;
height: 50px;
}
div.section4 {
background-color:#DFDD00;
height: 50px;
}
div.section5 {
background-color:#0A00FF;
width: 275px;
height: 400px;
float:left;
height: 100vh;
}
div.section6 {
background-color:#CB05B1;
width: 925px;
height: 400px;
float:right;
height: 100vh;
}
div.section7 {
background-color:#9E9E9E;
height: 150px;
}
Floating elements need to be cleared so that elements following align correctly and do not move into the elements you have floated. Section 5 and Section 6.
Add the following class definition to your stylesheet
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
Change the following tag <div class="middle"> to <div class="middle clearfix">
HTML5 also includes <header> and <footer> elements, as well as <article> tags to make the document language more semantic. So for HTML5 you can use
<header>
<div class="section1">section 1</div>
<div class="section2">section 2</div>
<div class="section3">section 3</div>
<div class="section4">section 4</div>
</header>
And
<footer>
<div class="section7">section 7</div>
</footer>
https://jsfiddle.net/raythcael/s49o4rjz/2/
To make .section7 have a height of 150px add display: inline-block;
div.section7 {
background-color: #9E9E9E;
height: 150px;
display: inline-block;
}
See: https://jsfiddle.net/zvkxj6v8/
The reason why the height isn't working as it should is because the Div's above it is set to "float". Add "clear: both;" to div.section7 to clear the floats.
https://jsfiddle.net/2L55g0f9/1/
because section 5 and 6 are floated, you're not seeing the height of section 7. All i did was clearfix it, and you got your height :)
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
I just want to view the divisions I have done on the page, but nothing is visible on the page. What is wrong with my code?
I just want that what I have divided should be shown on the page without content. I'm using chrome.
<!DOCTYPE html>
<html>
<head>
<style>
.main {
width: 100%;
height: 100%;
background: -webkit-linear-gradient(#029CC9, #005077); /* For Safari */
background: -o-linear-gradient(#029CC9, #005077); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#029CC9, #005077); /* For Firefox 3.6 to 15 */
background: linear-gradient(#029CC9, #005077); /* Standard syntax (must be last) */
}
.main .header .icon {
width: 90%;
margin-left: 5%;
}
.main .header .menu {
width: 90%;
margin-left: 5%;
}
.main .content {
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<div class="icon"></div>
<div class="menu"></div>
</div>
<div class="content"></div>
</div>
</body>
</html>
If you add within the div elements to see the backgrounds you can see the colors without having any actual content in it.
<div id="main">
<div class="header">
<div class="icon"> </div>
<div class="menu"> </div>
</div>
<div class="content"> </div>
</div>
This will give you a basic border around the main div and color it green. You can do similar things for the others to show where each div is placed.
.main {
border-style:solid;
border-width:1px;
height: 10px;
background-color: green;
}
Change the .main into an id.
Replace .main with #main respectively.
If you want to see the div portion without adding text ,you have to mention particular height .
.main .header .icon {
width: 90%;
margin-left: 5%;
height: 30px;
}