Image overlapping BG image and/or DIVs - html

I want to incorporate an image that sits on top of an existing image (and maybe straddles two different divs. In general, I would just like to see what general html structure you'd suggest -- and any CSS rules I should include. I've spent hours trying to replicate the structure I wanted -- but after inspecting elements and trying to de-construct and re-construct I was unable to produce anything close to what I wanted.
Also, in the example provided below -- I noticed the overlapping image was placed inside a span tag. Any idea why? If you could just roughly describe how you'd approach this kind of design -- that would be awesome!

This is a pretty neat effect. This is one way out of multiple you can do.
The trick is to have a fixed height on your div with background, and inside it, another div that contains the image.
I've tried to keep height/widths pretty small so you can check them correctly on the embedded snippet. I've tried to keep styles as minimal as possible to recreate what you asked for.
Let me know if something like this does the job.
.first-image{
background: #eee;
height: 250px;
}
.container{
width: 95%;
margin: 0 auto;
max-width: 400px;
}
.container--padding{
padding: 1rem 0;
}
.second-image{
margin: 2rem auto;
}
<header>
<div class="first-image">
<div class="container container--padding">
<h2>I'm the cool title headline.</h2>
<button>Download</button>
</div>
<div class="second-image">
<div class="container">
<img src="http://placehold.it/400x190" alt="placeholder" />
</div>
</div>
</div>
</header>

In the example you're referring to, the images are not <img /> tags but <div /> overlapping on top of each other. Both of these <div /> have a background image.
There are multiple solutions to make 2 <div /> overlaps, you could use absolute positioning, float, negative margins, having the background in a parent <div /> with a height greater than the height of the background image, etc.
For example, using negative margins, if I have 2 <div /> following each other like:
<div class="bg1"></div>
<div class="bg2"></div>
I could simply add a negative top margin to the second one to make it appears on top of the first one to give an illusion of overlapping like:
.bg2 {
margin-top: -40px;
}
You can check an example using negative margin on this JSFiddle.

Related

How do I place a div on top of another div while maintaining alignment without using position:absolute?

I am having trouble placing a rectangle over another rectangle in a resume template I am trying to create. I want to be able to do it without using absolute positioning but nothing is working after a few hours of research. I tried using relative positioning and using a z-index but no luck. There is also a problem where the left most rectangle has some space between the rectangle and the edge of the page. I removed the left margins on my A4 page but still there's a gap between the container div and the A4 page no matter what I do. Any help would be appreciated.
Code in Question:
<page size="A4">
<div class="container">
<div class="over-rect"></div>
<div class="blue-rect">
<span class="name">Name</span>
<div class="icon">
<img class="education" src="img/education.png">
</div>
</div>
</div>
</page>
Having some pasting issues so the rest of the code can be found here:
https://jsfiddle.net/p2g95e04/2/
I am trying to create something similar to this: https://imgur.com/a/eOUGT8n
However you can see in the picture, the blue rectangle has a gap between itself and the edge of the page that I am also trying to remove. If someone can point me in the right direction on how to approach these two problems, I would appreciate it a lot.
Edit: Clarity on gap issue: https://imgur.com/a/UHqORE5
If I remove the outside container div, it fixes the problem but messes other things up so I was wondering how I could get it to work inside the container div.
Edit2: Changing the box shadow parameters removes the gap but I can't find a way to keep the shadow without removing the A4 paper.
You could use a negative margin, there's an example
https://jsfiddle.net/Lxterbo4/10/
<div class="blue-rect">
<div class="over-rect"></div>
<span class="name">Name</span>
<div class="icon">
<img class="education" src="img/education.png">
</div>
</div>
.over-rect {
margin-top: 20px;
background: red;
width: 100%;
height: 50px;
display: block;
}
.container>div.blue-rect>span.name {
font-weight: bold;
color: white;
font-size: 35px;
margin-top: -50px;
}

Why Does Making my div into a circle affect bootstrap columns?

I am working on a website and I am trying to make use of the grid/column system provided in bootstrap. What I want to do is have a picture on the left side with the text beside it to the right. This is the html that I have written so far:
<div class="container">
<div class="row">
<div class="col-xs-4 circle-pic">
<!-- circle -->
</div>
<div class="col-xs-8">
words and stuff go here
</div>
</div>
</div>
and this is the css that I've written so far:
.circle-pic {
height: 150px;
width: 150px;
border-radius: 100%;
border: 2px solid black;
}
My problem is that the first div is not taking up 4 columns as I expect it too which is causing it these elements to be uncentered. I think the problem occurring because I specified the width and height for the circle and that is overwriting something in col-xs-4. Is that the case? If so, how would I go about centering these elements? If not then, Why is the circle not taking up 4 columns worth of space?
EDIT: I am using bootstrap 3.2.0. I have tested on safari and chrome and I do not have any custom rules for col-xs-4.
No, the border radius will not affect the table style.
The width will. It will force the div to be 150px wide on every resolution which will make it not responsive anymore.
Bootstrap has a feature for showing round pictures. You can doing that like this:
<img src="..." alt="My image" class="img-circle">

How do i stack divs next to and on top of eachother?

I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help

How to CSS two vertical cylinders

I want to do this
How to do these with CSS?
Update
How do I align the cylinders on the same bottom, and how do I add the caption below them?
You have to split the cylinder image in three parts: The top, the middle (which will be repeated), and the bottom. Like this:
Call them top.png, middle.png, and bottom.png, for example.
Then you need three HTML elements, one for each part:
<div class="cylinder top"></div>
<div class="cylinder middle" style="height:300px"></div>
<div class="cylinder bottom"></div>
And the css:
.cylinder {
width: <width of the cylinder image>px;
}
.cylinder.top {
background-image:url('top.png') no-repeat;
height: <height of the top image>px;
}
.cylinder.middle {
background-image:url('middle.png') repeat-y; /* repeat vertically */
}
.cylinder.bottom {
background-image:url('bottom.png') no-repeat;
height: <height of the bottom image>px;
}
To change the height or the cylinder, you just have to modify the style="height:300px" on the middle element.
This solution will work in any browser, even IE6.
Here is a list of tutorials for the same
You can build one using a jQuery plugin as well
or you can try Google Chart Api
http://codepen.io/msvbg/pen/Lymko
This is just for fun. In pure CSS3, no JS or images. A better approach would probably be to simply use one of the many charting libraries out there.
Create a bottom image for the rounding.
Create a 1px high image for the pipe
Create a little image for the top.
Divide your image into different divs.
<div>
<div class="bar1">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
</div>
Now you can style this with absolute positioning and repeating background images. I don't think it is very easy to do with floating and all, because you have to work from bottom to top.
Doing this with pure CSS might be overkill. Of course you can use gradients, but you can't get that shadow on the bottom of cylinders with css only. I'm not sure how to do cylinders top with css either.
The easiest way to do that is to use good old background images.
You might consider using canvas if you don't want any images at all.
UPD: If you can use CSS3, you might wanna use multiple background images. That way you'll have only one <div> instead of three of them. Good semantics.
Take a look at http://icant.co.uk/csscharts/. It's easily customizable with your own styles and has a handy PHP script for generating the tables.
Well... it can be done with some "brute force".
First of all you should cut the bases of the cilinders and put them on a background of a div with bottom alignment.
then in another div with know and fixed height add two divs of same width that float left and have on the background,repeating on Y axis a slice of a cilinder. then control their height as you need it. Below the div that contains the other two you can add the captions.
Now you will have the cilinders of the same height. In order to "shorten" one you create another div inside it that has a certain height and a white background (repeating image or color).
ex {
<div id="chart"> <!-- this one has the bottom cut backgound -->
<div style="height:200px">
<!-- cilinder class has the background -->
<div class="clinder" style="height:100%"> </div>
<div class="clinder" style="height:100%">
<!-- this one has white bg -->
<div class="shorter" style="height:30px"> </div>
<div>
</div>
<div class="labels">
<div class="caption">
Indoor
</div>
<div class="caption">
Outdoor
</div>
</div>
</div>
It should work like this.
You can make cylinders with CSS3 by giving it a box-radius.
For example:
box-radius: 100px / 30px;
This will give you a box an oval look.
Just give it the desired width and height and it's done :)
Or use jqPlot as a jquery plugin. This plugin can make lots of graphs.

Simple CSS MasterPage layout

I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):