Given this HTML document
<html>
<head>
<title>CSS Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">Header 900x100 px</div>
<div id="righttop">RightTop <br />150x200 px</div>
<div id="lefttop">LeftTop 150x75 px</div>
<div id="content">Content 600x400 px</div>
<div id="rightbottom">RightBottom 150x200 px</div>
<div id="footer">Footer 900x100 px</div>
</body>
and this CSS style sheet
body, div {
padding: 0;
margin: 0;
border: solid 1px;
width: 900px;
}
#header, #footer {
width: 898px;
clear: both;
height: 100px;
}
#righttop, #rightbottom{
float: right;
width: 150px;
height: 200px;
}
#rightbottom {
clear: right;
}
#content {
float: left;
width: 591px;
height: 403px;
}
#lefttop {
width: 150px;
height: 100px;
float: left;
}
How would I go about moving the "RightBottom" box to be directly underneath the "LeftTop" box without messing up the general layout?
I have updated your code for you with the necessary corrections. Here is a JSFiddle file for your review: http://jsfiddle.net/yv7vs/
HTML:
<html>
<head>
<title>CSS Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">Header 900x100 px</div>
<div id="righttop">RightTop<br/>150x200 px</div>
<div id="lefttop">LeftTop 150x75 px</div>
<div id="content">Content 600x400 px</div>
<div id="rightbottom">RightBottom 150x200 px</div>
<div id="footer">Footer 900x100 px</div>
</body>
CSS:
body, div {
padding:0;
margin:0;
border:solid 1px;
width: 900px;
}
#header, #footer {
width:898px;
clear: both;
height: 100px;
}
#righttop, #rightbottom {
width:150px;
height: 200px;
}
#righttop {
float:right;
}
#rightbottom {
position: absolute;
top: 205px;
}
#content {
float:left;
width:591px;
height: 403px;
}
#lefttop {
width:150px;
height: 100px;
float: left;
position: relative;
}
Related
I would like to get this result below:
Example
My problem is that, I don't understand why my blocks are not centered correctly even with the propriety display: inline-block in my selector homebotblock1?
I tried this:
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</body>
</html>
You need to wrap the homebottxt1 and homebottxt2 text in its own <div> then wrap that <div> and the image in another <div> with the class homebotblock3.
Then add this CSS:
.homebotblock3 {
display: flex;
}
.homebotblock3 > div {
margin-left: 20px;
}
Modified Code
JSFiddle: https://jsfiddle.net/Zeraora/gefhov6b/
* {
margin: 0;
padding: 0;
}
.homebot {
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
min-height: 500px;
display: inline-block width:100%;
}
.homebotbg {
background-color: rgba(255, 255, 255, 0.7);
min-height: 500px;
display: block;
width: 43%;
float: right;
padding: 100px 50px 50px 30px;
text-shadow: #fff 1px 1px 0px;
text-align: left;
}
.homebottit {
font-size: 24pt;
font-family: roboto;
color: #c22312;
text-transform: uppercase;
margin-bottom: 50px;
display: inline-block;
}
.homebotpad {
padding-left: 10px;
}
.homebottxt1 {
font-size: 16pt;
font-family: roboto;
color: #000;
}
.homebottxt2 {
font-size: 10pt;
font-family: open sans2;
color: #000;
}
.homebotblock1 {
width: 80px;
display: inline-block;
}
.homebotblock2 {
width: 450px;
display: inline-block;
}
.homebotblock3 {
display: flex;
}
.homebotblock3>div {
margin-left: 20px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="homebotblock3">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.homebot{
background: url('https://zupimages.net/up/20/21/9zj3.jpg');
background-size: 100% auto;
background-position-x: center;
background-position-y: -100px;
height: 25vw;
display: block;
position: relative;
}
.homebotbg {
position: relative;
left: 40%;
width: 60%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
padding: 10px 30px;
display: flex;
flex-direction: column;
align-content: flex-end;
}
.homebot-header {
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.homebottit {
color: red;
font-size: 24px;
}
.homebot-footer {
flex-basis: 50%;
display: flex;
align-items: center;
}
.homebotblock1 {
margin-right: 15px;
}
.homebottxt1 {
font-size: 18px;
margin-bottom: 5px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<div class="homebot-header">
<p class="homebottit">Security Investment Solutions</p>
</div>
<div class="homebot-footer">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebot-footer-right">
<p class="homebottxt1">ADVANTAGEOUS CONDITIONS</p>
<p class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can design like this.
The key point here is to use flex layout.
Using flex layout by display: flex, you can make this structure easily.
Since you are applying inline-block to the image separately, it is not horizontally aligning the image to any other element in the page.
To achieve your result, you will need to create a div structure that suits your needs and then apply your property.
Also, use flex instead of inline-block, it's much powerful. I have modified your code to achieve your result.
P.S. Kindly add in a padding as per your need. Since it is not the objective of the question, I have not included it in my answer.
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.block{
display: flex;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="block">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want images auto size when users resize browser window, when users resize their browser i don't want images lose any details. I only want resolution width:800px height:400px
I did my best and searched everywhere but their solution didn't work for me, i also put width 100% and max-width 100% still my webpage didn't work.
If anyone would like to gives me some advices i would very appreciate your help thank you.
Please take a look at my code.
/*slideshow*/
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 400px;
max-width: 100%;
max-height: 100%;
margin-top: 40px;
border: 1px solid;
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
Set your .slide as background-size: cover.
See docs: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Also you can position it background-position: center center;
To keep your slide as the same size of the image you can set your padding bottom to have same ratio proportion of the image, something like:
.slide {
...
padding-bottom: 72%;
}
/*slideshow*/
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
max-width: 100%;
max-height: 100%;
margin-top: 40px;
border: 1px solid;
padding-bottom: 72%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
Here is the correct code after hard work:
#slideshow {
width: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slidebg{
width: 100%;
height: 100%;
float:left;
margin-top: 40px;
border: 1px solid;
position: relative;
}
.slidebg:before {
content: "";
display: block;
padding-top: 50%;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
<div id="slideshow">
<div class="slidebg">
<div id="slide1" class="slide">
<span class="slidecontain">SlideImage1</span>
</div>
</div>
<div class="slidebg">
<div id="slide2" class="slide">
<span class="slidecontain">SlideImage2</span>
</div>
</div>
<div class="slidebg">
<div id="slide3" class="slide">
<span class="slidecontain">SlideImage3</span>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
I have problem : my picture doesn't want to center despite I used text-aligne:center;, display:block; and margin: 0 auto;
Here is a picture
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
max-width: 1000px;
margin: 0 auto;
}
#Logo {
text-align: center;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>str</title>
<meta name="description" content=" bbbbbbb" />
<meta name="keywords" content="bablal" />
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge.chrome=1" />
<link rel="stylesheet" href="new.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400&subset=latin-ext" rel="stylesheet">
</head>
<body background="photo/ik.png">
<div id="container">
<div id="Logo">
<img src="photo/lg.png" width="800" height="533.5">
</div>
</div>
</body>
</html>
One way to do it using Flexbox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
background: yellow;
height: 100vh;
width: 100vw;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="Logo">
<img src="http://placehold.it/200x100/333333">
</div>
</div>
change #container {max-width:1000px to width:100%}
Set the margin property of the image itself to auto on the left and right.
HTML part
<body>
<div id="container">
<div id="Logo">
<img class="centeredimage" src="photo/lg.png" width="80" height="50">
</div>
</div>
</body>
CSS part
img.centeredimage{
display: block;
margin-left: auto;
margin-right: auto;
}
Fiddle:
https://jsfiddle.net/ja0zhnsd/
Try This:
.Image{
background:#ccc;
padding:30px;
}
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>
#container {
width: 100%;
}
#Logo img {
text-align: center;
margin: 0 auto;
}
Does this work?
use this code this will done your job. cheers!
<p style="text-align:center;">
<img src="yourimage.png" alt="Dev N Technologies" width=600 height=200 >
I am trying to push the footer in to down when the content page height increase.but I am not able to do that. footer is always stick with side bar.because of this my content page overflow over the footer .
My css code is below:
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
**strong text**height: 100%;
width: 231px;
float: left;
}
#nav2
{
height: 100%;
width: 250px;
float: right;
}
#content
{
height: 100%;
bottom: 0;
}
#footer
{
clear: both;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
My markup code:
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
Please help me
Try this, I changed 2 things. First, you were making the height of elements at 100% to an element that was 100% to the page, so they would never line up unless the content was bigger than the page, and 2, I made the content display: inline block; so that your menus would be on either side and not just on teh side and then to wrap around the content, but you can change this back if you wanted.. But your main main main issue was the height 100% in the nav css tags!
Everything else stayed the same.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
width: 231px;
float: left;
}
#nav2
{
width: 250px;
float: right;
}
#content
{
display:inline-block;
height: 100%;
bottomL 0;
}
#footer {
display:block;
bottom: 0;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
<tr><td>Table</tr>
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
<tr><td>Table</tr>
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
</body>
</html>
pxI created a style defenition like this:
#container {
width: 900px;
margin: 0 auto;
background-image:url(images/back.JPG);
}
#header {
width: 900px;
height: 200px;
background-image:url(images/logo2.jpg);
border-bottom: 2px solid #000;
}
#leftnav {
float:left;
width: 150px;
height: 500px;
}
#rightnav {
float:right;
width: 150px;
height: 500px;
}
#body {
margin-left: 150px;
width: 600px;
text-align:center;
background-image:url(images/tb.png);
}
#footer {
clear:both;
background-image:url(images/tb.png);
}
Then I created a index file like that used the container around everything, then put the header, then leftnav, then rightnav, then body, then footer.
This works greate on Chrome and firefox, but on IE, the "BODY" container is not where it is supposed to be, it starts under the "leftnav" container. Is there a simple fix for this?
Updated cod from first answer, still same problem.
My index file is a php file.
You don't have units defined on #body's width. Should be width: 600px;
Also, remove margin-left: 150;
Try this. It works in IE7 for me. I think you were just missing a doctype.
<!DOCTYPE html>
<html>
<head>
<title>Test for StackOverflow</title>
<style>
#container {
width: 900px;
margin: 0 auto;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/back.JPG);
}
#header {
width: 900px;
height: 200px;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/logo2.jpg);
border-bottom: 2px solid #000;
}
#leftnav {
float:left;
width: 150px;
height: 500px;
}
#rightnav {
float:right;
width: 150px;
height: 500px;
}
#body {
margin-left: 150px;
width: 600px;
text-align:center;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/tb.png);
}
#footer {
clear:both;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/tb.png);
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="leftnav">
<img src="http://www.uffdarc.com/cantonspeedway/images/p1.jpg" width="140" height="140"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p2.jpg" width="140" height="140"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p6.jpg" width="140" height="80"><br>
</div>
<div id="rightnav">
<img src="http://www.uffdarc.com/cantonspeedway/images/p3.jpg" width="140" height="80"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p4.jpg" width="140" height="80"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p5.jpg" width="140" height="80"><br>
</div>
<div id="body"> This Page is still under construction <br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/logo3.jpg" width="550" height="362"> <br>
<br>
</div>
<div id="footer">
</div>
</div>
</body>
</html>