I need to display single page as below:
http://s18.postimg.org/epvzomt0p/P_62343_Patron_Roca_Ebrochure_R2_01_1.png
I made working example in
https://jsfiddle.net/dipchk/pua95mwg/1/
Can any one tell me what more I need to implement in css in order to look like above image
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
css
.wrapper {
width: 90%;
height: 90%;
position: relative;
background-color: white;
}
.wrapper div {
padding: 10px;
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
display: block;
position: absolute;
width:70%;
height: 50%;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
position: absolute;
display: inline-block;
width: 15%;
height: 40%;
}
Please check this solved
body{margin:0; padding:0;background:#ddd;}
.wrapper {
position: relative;
background-color: #fff;
width:580px;margin:0 auto;
padding:40px 0;
height:500px;
}
.wrapper div {
}
#one {
}
#one img {
width:100%;
}
#two{position: absolute;
right: 0px;
top: 72px;}
#two img {
width: 166px;
}
<body>
<div class="wrapper">
<div id="one"><img src="http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png"></div>
<div id="two"><img src="http://i.stack.imgur.com/rg43a.png"></div>
</div>
</body>
You Just Remove
Position:absolute;
and Do what you want.
Thank you
It's difficult to understand exactly what you are asking.
According to the image you showed, please check the following code.
body{margin:0; padding:0;}
.wrapper {
position: relative;
background-color: #ccc;
}
.wrapper div {
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
width:580px;
height: 142px;
margin:0 auto;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
width: 580px;
height: 924px;
margin:0 auto;
}
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
Related
Here's my summarized code
HTML:
<div class="wrap">
<div>
<img src="Pictures/titlepic.jpg" width="1035" height="200">
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS:
.wrap{
width: 1060px;
margin: auto;
}
.text_over_image{
position: absolute;
top: 20px;
}
I've tried left: 50%, text-align:center, any number of things with no great luck. I didn't want to do a left: 50px (or whatever the value needs to be) as whats unseen is that the length of the text changes depending on Javascript values. So the title could be short, or long and I want it to center no matter what.
Ideas?
Try the following css:
.text_over_image{
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
===Edit ===
.wrap {
width: 1060px;
height:auto;
margin: auto;
text-align:center;
position:relative;
}
.text_over_image {
position: absolute;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:100px;
}
There you go JsFiddle
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>TEXT</span>
<img src="http://placehold.it/100x100"/>
</div>
HTML
<div class="wrap">
<div>
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS
.wrap
{
background-image:url(Pictures/titlepic.jpg);
width:1035px;
height:200px;
}
.text_over_image
{
text-align:center;
line-height:200px;
}
I'm a beginner to Html & CSS and have a probably really simple question, but I just can't seem to find the answer: How could you span an html element(child div, text, etc.) across multiple divs using only CSS & Html(no Javascript/JS)? I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 0 auto;
width:300px;
padding-top:50px;
}
.colorone{
background:#FFEB3B;
width:150px;
height: 150px;
float:left;
}
.colortwo{
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
}
<html>
<head></head>
<body>
<div id="container">
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
Desired result:
The blue div/rectangle should also be able to span more than two parent divs if wanted.
I've searched and researched online & on StackOverflow but I still can't seem to find the answer. Any help would be greatly appreciated.
Here's a quick example using your code with a few changes. I added the position to the container and the 3rd element and set the z-index to 2 on the div with the class of .colorthree.
var width = 0,
container = $('#container');
container.children('div').each(function(){
if(!$(this).hasClass('colorthree')) {
width += $(this).width();
}
});
container.width(width);
$('.colorthree').width(width-20);
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 20px auto;
width:300px;
height: 150px;
position:relative;
white-space: nowrap;
}
.colorone, .colortwo, .colorfour {
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
float:left;
}
.colorone{
background:#FFEB3B;
}
.colorfour {
background: red;
}
.colorthree {
z-index: 2;
top: 20px;
left: 10px;
position: absolute;
width:90%;
height: 40px;
background:blue;
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="colorone"><b>1</b></div>
<div class="colortwo"><b>2</b></div>
<div class="colorfour"><b>4</b></div>
<div class="colorthree"><b>3</b></div>
</div>
You can do that with position: absolute
No javascript needed, only with html and css
html,
body {
left: 0;
margin: 0;
background: white;
height: 100%;
}
b {
font-family: calibri;
padding-left: 10px;
}
#container {
margin: 0 auto;
width: 300px;
padding-top: 50px;
position: relative;
}
.colorone {
background: #FFEB3B;
width: 150px;
height: 150px;
float: left;
}
.colortwo {
width: 150px;
height: 150px;
background: #8BC34A;
overflow: hidden;
}
.colorthree {
background-color: blue;
display: block;
position: absolute;
width: calc(100% - 50px);
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
left: 0;
right: 0;
color: white;
text-align: center;
line-height: 50px;
}
<html>
<head></head>
<body>
<div id="container">
<span class="colorthree">I'm Span!</span>
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
I have an element with absolute position that is being displayed over the vertical scroll, preventing the user from scrolling the page using the scrollbar.
This fiddle explains the problem and what I'm currently doing.
This is the css I'm using to position the div.
.side-content {
background: grey;
position: absolute;
right: 0;
top: 60px;
height: calc(100% - 132px);
width: 100px;
}
I was expecting the div to be positioned considering the scrollbar (without manually adding a margin) and not hovering it.
Thanks in advance!
do z-index: -50;
.side-content {
z-index: -50;
background: grey;
position: absolute;
right: 0;
top: 60px;
height: calc(100% - 132px);
width: 100px;
}
body {
margin: 0;
text-align: center;
}
.wrapper
{
position:absolute;
width: 100%;
height:100%;
display: flex;
}
.inside_div_one
{
width:10%;
height:100%;
background-color: green;
}
.inside_div
{
width: 25%;
}
.inside_div_two
{
width:80%;
height:100%;
}
.inside_div_three
{
width:10%;
height:100%;
background-color: grey;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="inside_div_one">
<p>sidebar</p>
</div>
<div class="inside_div_two">
<p>FIRST</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>LAST</p>
</div>
<div class="inside_div_three">
<p>jvsdfv</p>
</div>
</div>
</body>
</html>
Here's my summarized code
HTML:
<div class="wrap">
<div>
<img src="Pictures/titlepic.jpg" width="1035" height="200">
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS:
.wrap{
width: 1060px;
margin: auto;
}
.text_over_image{
position: absolute;
top: 20px;
}
I've tried left: 50%, text-align:center, any number of things with no great luck. I didn't want to do a left: 50px (or whatever the value needs to be) as whats unseen is that the length of the text changes depending on Javascript values. So the title could be short, or long and I want it to center no matter what.
Ideas?
Try the following css:
.text_over_image{
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
===Edit ===
.wrap {
width: 1060px;
height:auto;
margin: auto;
text-align:center;
position:relative;
}
.text_over_image {
position: absolute;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:100px;
}
There you go JsFiddle
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>TEXT</span>
<img src="http://placehold.it/100x100"/>
</div>
HTML
<div class="wrap">
<div>
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS
.wrap
{
background-image:url(Pictures/titlepic.jpg);
width:1035px;
height:200px;
}
.text_over_image
{
text-align:center;
line-height:200px;
}
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}