I have a block <div> I want to define with precise pixel coordinates via position: absolute, but I want to position a heading above its parent <div>. If the font-size changes (or the user enlarges the text), the block <div> must stay in exactly the same place, but the heading may move up/down to accommodate the larger/smaller text.
Here is some sample code that, honestly, doesn't come close, but may help to illustrate the problem. It's just one of the variations I tried:
<!doctype html>
<html>
<head>
<title>Positioning Test</title>
<style>
#box1 { border: red 1px solid; }
#box1 h4 { margin: 0; color: blue }
.inner_box {
background: #aaf;
width: 400px;
height: 50px;
}
.target_pos {
position: absolute;
top: 50px;
left: 100px;
}
#marker {
width: 10px;
height: 10px;
background: red;
}
</style>
</head>
<body>
<div id="box1">
<h4>Heading</h4>
<div class="inner_box target_pos">
This is the <strong>inner_box</strong>.
</div>
</div>
<!-- Marks where the inner_box should begin -->
<div id="marker" class="target_pos"></div>
</body>
</html>
The idea is the blue inner_box must be positioned exactly at the marker (which it is), but the Heading text must be directly above it, and the red 1px border should enclose everything.
Here is how it looks in Firefox:
And here's how I would like it to look instead:
Since I have several of these boxes to work with, and their positions may change depending on viewport size, and the heading font/text will vary, I need a dynamic solution, here. I would prefer pure CSS3, but if JS is required, I could live with that.
I have created a fiddle for you that works for any font size, position and number of boxes.
http://jsfiddle.net/y73sqdr9/3/
Also
HTML
<div class="box target">
<h1>Headingggggggggg</h1>
<div class="inner">
This is the <strong>inner_box</strong>.
</div>
</div>
<div class="square target"></div>
<div class="box target2">
<h1>Headingggggggggg</h1>
<div class="inner">
This is the <strong>inner_box</strong>.
</div>
</div>
<div class="square target2"></div>
CSS
.box {
position: absolute;
border: 1px solid red;
border-top: none; }
.box h1 {
margin: -2em -1px -1px;
padding: .5em;
border: 1px solid red;
border-bottom: none;
line-height: 1; }
.box .inner {
padding: 1em;
background: #CCF; }
.square {
position: absolute;
width: 16px;
height: 16px;
background: red; }
.target { left: 100px; top: 150px; }
.target2 { left: 120px; top: 280px; }
I hope to have helped you!
How this is done:
The position id gives the position of the entire element.
The box class defines the width and height of the box and only has borders for bottom left and right leaving the top open because the header will be there
The header class height is set to zero as to not influence the box's position and is moved up 18 px
The h4 has borders on top left and right but not on the bottom so it will not block out the box
The html:
<!DOCTYPE html>
<html>
<head>
<title>Positioning Test</title>
<style>
.header{
position: relative;
bottom: 18px;
right:1px;
background: white;
height:0px;
}
.header h4{
width: 400px;
margin:0;
padding:0;
border: 1px red solid;
border-bottom:none;
}
.box{
border: 1px red solid;
border-top:none;
width: 400px;
height: 300px;
background: #aaf;
}
#position1 {
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div id="position1" class="box">
<div class="header">
<h4>Title</h4>
</div>
<div class="inner">
I'm inside!
</div>
</div>
</body>
<html>
Firstly your body tags are are not wrapping your code.
Secondly your red box div should wrap all the other divs and be closed last. It closes early
Related
I have a web application that is going to become a app for smartphones . so it must be too Responsive .
and now my question :
I have a parent div and 4 Child .I want to get down last one till it make a visual like below with parent's bottom border :
-----( content )-----
[This is the Result I got For an specific Resolution . I want it to be for all Resolution :
should I add 'height' to parent for this or not?
there is a simple code . how can I make it like image I Attached for all Resolutions ?
<style>
#parent{
border-bottom : 2px solid;
}
#child{
pading:10px;
border-radius:30px;
}
</style>
and html like this :
<div id="parent">
<span style="">
Content
</span>
</div>
Do it like this:
.parent {
position: relative;
height: 200px;
width: 100%;
}
.content {
border: 2px solid tomato;
padding: 10px;
border-radius: 30px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: white
}
.line {
width: 100%;
position: absolute;
border-bottom: 2px solid tomato;
bottom: 20px;
}
<div class="parent">
<div class="line"></div>
<div class="content">
Content
</div>
</div>
I have the 3 div with 3 different of color and a paragraph. And i do a little manipulating with the paragraph so it can be moved anywhere with
p {
width: 50%;
border: 1px solid black;
margin: 0 auto;
position: relative;
bottom: 350px;
}
But after it moved, the problem is the last position of the block of paragraph still there and i want it to completely remove. How can i do that?
I will provide the SS so you can understand what i want.
When using position:relative and move the element, its first place (the space it takes) remain unchanged. As you can read here :
Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted away from
its normal position. Other content will not be adjusted to fit into
any gap left by the element.
div.red {
background: red;
height:120px;
}
div.blue {
background: blue;
height:120px;
}
p {
color: #fff;
padding: 20px;
position: relative;
top: -100px;
}
<div class="red">
</div>
<p>lorem ipusme lorem ipusmelorem ipusmelorem ipusme</p>
<div class="blue">
</div>
Instead you need to use position:absolute and add position:relative to the parent container to still be able to move the element relatively to its initial place.
div.red {
background: red;
height: 120px;
}
div.blue {
background: blue;
height: 120px;
}
div {
position: relative;
}
p {
color: #fff;
padding: 20px;
position: absolute;
top: -100px;
}
<div class="red">
</div>
<div>
<p>lorem ipusme lorem ipusmelorem ipusmelorem ipusme</p>
</div>
<div class="blue">
</div>
I've created the following banner below, using a triangle and rectangle in order to create the banner required over the image. However if the user zooms in on the browser these two containers have a gap between them. Any ideas how I could fix the two containers together or is there a better approach to writing this banner in general using CSS? Thanks in advance! :)
Code:
<html>
<style>
#triangle {
width: 0;
height: 0;
border-bottom: 150px solid red;
border-right: 50px solid transparent;
top: 8px;
position: relative;
}
#square {
background-color:red;
height:150px;
width:300px;
z-index: 3;
margin-left: 8px;
top: 8px;
position: relative;
color: white;
}
.align div {
display:inline-block;
float: left;
}
</style>
<div class="img">
<img src="IMAGE HERE" alt="test" width="800" height="150">
</div>
<div class="align">
<div id="square">
<h1>
Headline
</h1>
<p>
Some text here!
</p>
</div>
<div id="triangle"></div>
</div>
</html>
I did not see any white space between the rectangle and the triangle on my browser. However I cleaned your code so you can try this :
#triangle {
width: 0;
height: 0;
border-bottom: 150px solid red;
border-right: 50px solid transparent;
top: 8px;
position: relative;
}
#square {
background-color:red;
height:150px;
width:300px;
z-index: 3;
margin-left: 8px;
top: 8px;
position: relative;
color: white;
}
.align div{
display:inline-block;
float: left;
}
.align {
min-width:450px;
}
<div class="align">
<div id="square">
<h1>
Title
</h1>
<p>
Some text here.......
</p>
</div>
<div id="triangle"></div>
</div>
EDIT : Fixed the align at 400% zoom. Added min-width to .align .
This problem is browser dependent and not all browsers showing same problem. Chrome may show perfect but mozilla might show problem. Also, Use reset css to avoid any browser dependent css property.
I'm struggling on a problem.
I have to put a border on element inside an image(I can't put an image due to reputation under 10) but that border should have the same width and height of that element.It should be responsive.I write the code based on bootstrap media screen resolution but when I reduced my page the wide becomes small at some specific screen resolution.That's the code.Thanks.
<div class="parent">
<img />
<span class="makeBorder"></span>
</div>
and the css:
.parent {
position: relative;
}
.makeBorder {
position: absolute;
top: 15px;
left: 23px;
border: 2px solid red;
width: 83%;
height: 83%;
}
What I finally do:
<div class="customClass"><img /></div>
.customClass{outline:1px solid red;outline-offset:-18px;}
Try this I hereby use a button on the image and it correctly work.Some of css property are no useful in this example denoted by //.
<html>
<head>
<style>
div{
background:url("1.jpg") no-repeat;
background-size:contain;//
height:500px;//height of div
width:500px;
}
button{
height:50px;
width:70px;
outline:red solid 4px;
margin:20px 20px;
}
</style>
</head>
<body>
<div>
<button >Hello</button>
</div>
</body>
</html>
<html>
<head>
<style>
div{
height:500px;
width:500px;
position:absolute;
}
button{
position:absolute;
height:50px;
width:70px;
outline:red solid 4px;
margin:20px 20px;
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
<button >Hello</button>
</body>
</html>
use this code if you want to use 2 images then provide background image
z-index=-1;
use the above positioning property;
Here is the solution
HTML
<div class="parent">
<img src="/path/to/img/png" class="img-responsive" /> // Here I added a class img-responsive
<span class="makeBorder"></span>
</div>
CSS
.parent {
position: relative;
}
.makeBorder {
position: absolute;
top: 15%; // Here I use percentage instead of pixels
left: 23%; // Here I use percentage instead of pixels
border: 2px solid red;
width: 83%;
height: 83%;
}
NOTE: The point I want to make is use percentages instead of pixels so that your work/html become responsive !!
.parent {
position: relative;
}
.makeBorder {
position: absolute;
top: 81px;
left: 83px;
border: 2px solid red;
width: 55px;
height: 60px;
}
<div class="parent">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRBnmmAWOlqD-8ZjLvlkXoz0sSMOd7DiA5paUl7Ug2VBjXnnqKaHw" />
<span class="makeBorder"></span>
</div>
i suppose this is what you want to do
I have a selection of squares (squares turned 45° to look like diamonds) which I want to use to make up a big diamond shape with a central red diamond.
I am having issues organising the diamonds themselves and the href seems to fail.
How do I position the responsive diamonds in a regular grid?
Her is my code:
body {
background: black;
color: #000000;
font: 13px georgia, serif;
line-height: 1.4;
font-weight: lighter;
text-rendering: optimizelegibility;
}
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: white;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: white;
}
#diamond_red {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #AA1C08;
position: relative;
top: -50px;
}
#diamond_red:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #AA1C08;
}
<a class="navigation">
<center>
<div id="diamond"></div>
<div id="diamond"></div>
<div id="diamond" href="/photos/"></div>
<div id="diamond_red"></div>
<div id="diamond" href="/projects/"></div>
<div id="diamond"></div>
<div id="diamond"></div>
<div id="diamond" href="/archive/"></div>
</center>
</a>
The responsive grid of diamons:
I don't think you have the right aproach to achieve a regular responsive diamond grid layout. It would be much simpler to:
create a responsive grid of squares (3x3 or whatever grid you feel like)
then rotate the grid 45 degrees.
That way you won't have to fiddle with borders, pseudo elements (:after, :before) and positioning each diamond.
Here is a responsive example
It uses percentage width and padding-bottom to keep the diamonds responsive and transform:rotate(45deg); to rotate te whole grid and make it look like a diamond grid:
body{background:#000;}
#big_diamond {
width: 50%;
margin:15% auto;
overflow:hidden;
transform: rotate(45deg);
}
.diamond {
position: relative;
float: left;
width: 31.33%;
padding-bottom: 31.33%;
margin: 1%;
background: #fff;
transition:background-color .4s;
}
.diamond a {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
#red{background-color: #AA1C08;}
.diamond:hover, #red:hover{background-color:darkorange;}
<div id="big_diamond">
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond" id="red"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
</div>
As other people have mentioned, there are some errors in your HTML that I corrected like: Ids need to be unique and href can't be used on divs.
You're going to need to be more specific / clear on your first question.
First of all, you are using the ID 'diamond' many times. IDs are meant to be unique and used for one element. You should be using classes for this, not IDs.
Second, you can't use href within div tags. You could wrap the divs in a tags like this:
<div class="diamond"></div>
Or, even better so that the whole shape is clickable you can put the a inside of the div and make the a a block level element that is 100% width and height like this:
<div class="diamond"></div>
div a{
width: 100%;
height: 100%;
display: block;
}
JSFiddle Example: http://jsfiddle.net/kQj24/1/
This html has fallback for browsers that don't support transform in that the diamond becomes a square. Also the <div> elements can be wrapped in <a> tags using this method without altering any existing css rules for a. If transform isn't supported the text inside the square class doesn't rotate either.
<center>
<div class="diamond">
<div class="row">
<div class="square"><p>Text</p></div>
<div class="square"></div>
<div class="square"><p>Text</p></div>
</div>
<div class="row">
<div class="square"><p>Text</p></div>
<div class="square red"><p>Text</p></div>
<div class="square"><p>Text</p></div>
</div>
<div class="row">
<div class="square"><p>More</p></div>
<div class="square"></div>
<div class="square"><p>Text</p></div>
</div>
</div>
</center>
CSS, using your existing body rule:
.diamond {
padding-top: 50px;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
.square {
background-color: white;
display: inline-block;
height: 50px;
overflow: hidden;
width: 50px;
}
.square:hover {
background-color: green;
}
.square p {
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.red {
background-color: red;
}
http://jsfiddle.net/5Q8qE/8/