I need to place an <input> exactly over an <a>, have the edges of the <input> link up with the outer boarder of the <a>, and not change any other presentation. Please see https://jsbin.com/cotogimaqo (script duplicated below).
The following information is known about a.link and can (but not must) be used in the CSS.
width 39px
height 17px
outerWidth w/o margin 99px
outerWidth w/ margin 159px
outerHeight w/o margin 77px
outerHeight w/ margin 137px
In Attempt 1, I thought I could use position:absolute and pin the top, right, bottom, and left positions, however, it doesn't work.
In Attempt 2, Attempt 3, and Attempt 4, I tried several other things, but still it doesn't work.
Attempt 5 is pretty accurate, but I have no idea why it is, and was accomplished by trial and error.
How can this be accomplished? Please provide explanation on "why" it works, and not just a quick fix.
PS. Note that I asked a similar question How do I place one element precisely over another element?, however, did not get any answers, and that question was related to JavaScript. This question is very different and only deals with CSS.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<style type="text/css">
.box{margin:5px;padding:5px;border: 1px solid black;width:200px;}
.link{margin:30px;padding:20px;border: 10px solid black;}
.divWrapper{margin:0;padding:0;display:inline; position:relative;}
#wrapper{width:600px;}
#info{float:right;}
.divWrapper input{margin:0;border: 1px dashed red;cursor:pointer;} /*.divWrapper input{z-index:9999;opacity:0;} */
/* this is the part I need help with.
Known information about a.link:
width 38px, height 18px, outerWidth w/o margin 98px, outerWidth w/ margin 158px, outerHeight w/o margin 78px, outerHeight w/ margin 138px
*/
#div1 input{
position:absolute;top:0;right:0;bottom:0;left:0;
}
#div2 input{
position:absolute;top:0;left:0;
width:98px;height:78px;
}
#div3 input{
position:absolute;top:0;left:0;
width:98px;height:78px;
margin:30px;
}
#div4 input{
position:absolute;top:30px;left:30px;
width:98px;height:78px;
}
#div5 input{
position:absolute;top:-30px;left:30px;
width:98px;height:78px;
}
</style>
<script type="text/javascript">
/*The following JavaScript is just to provide link information and is not related to the question */
$(function () {
var link=$('#div1 a.link');
var tableRows=$('#info tr');
tableRows.eq(0).find('td').eq(1).text(link.css('width'));
tableRows.eq(1).find('td').eq(1).text(link.css('height'));
tableRows.eq(2).find('td').eq(1).text(link.outerWidth(false)+'px');
tableRows.eq(3).find('td').eq(1).text(link.outerWidth(true)+'px');
tableRows.eq(4).find('td').eq(1).text(link.outerHeight(false)+'px');
tableRows.eq(5).find('td').eq(1).text(link.outerHeight(true)+'px');
$('.divWrapper').click(function(){alert('input clicked.');return false;})
});
</script>
</head>
<body>
<div id="wrapper">
<div id="info">
<h2>a.link info</h2>
<table>
<tr><td>width</td><td></td></tr>
<tr><td>height</td><td></td></tr>
<tr><td>outerWidth w/o margin</td><td></td></tr>
<tr><td>outerWidth w/ margin</td><td></td></tr>
<tr><td>outerHeight w/o margin</td><td></td></tr>
<tr><td>outerHeight w/ margin</td><td></td></tr>
</table>
</div>
<div id="div1" class="box"><p>Attempt 1</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>. Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
<div id="div2" class="box"><p>Attempt 2</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>. Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
<div id="div3" class="box"><p>Attempt 3</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>. Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
<div id="div4" class="box"><p>Attempt 4</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>. Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
<div id="div5" class="box"><p>Attempt 5</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>. Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
</div>
</body>
</html>
Change every div -> input to:
input {
height: 41px;
left: 13px;
position: absolute;
top: -12px;
width: 58px;
}
It happens because div.divWrapper is wrapped around a.link, and takes on the width of the child element, but only the height of the inline child element without the padding, margin, or border.
So, when one uses absolute positioning on the <input>, it needs to be raised by the padding and border amount.
As for horizontal positioning, left 0 would place it at the outer left margin of <a>, but since it should be placed at the border edit, it needs to be moved right by the margin.
The final CSS should be:
#divWorking input{
position:absolute;
top:-30px; /* padding (20px) plus border (10px) */
left:30px; /* same as margin (30px) */
width:98px; /* text in <a> width plus <a> padding and border width */
height:78px; /* text in <a> height plus <a> padding and border height */
}
Related
I've been working on designs with very irregularly-shaped divs, such as rhombuses, trapezoids, etc. I want to know what the most responsive way to deal with these types of designs.
My current workaround:
The typical way I implement these designs is by using a combination of clip-path, bloated vertical padding to deal with the clip-path clipping content, and then a negative margin-top on the next fold to cover the white-space created by the clip-path. I declare negative margin-top values with viewport width (ex. -10vw), so the folds adjust based on the width of the browser.
Problems with current workaround:
Negative margins usually cause folds to overlap each other, covering the content of other folds. Multiple #media queries needed for it to look acceptable and yet I still encounter certain sizes where the folds overlap each other.
Here's an image to further describe what I mean by irregularly-shaped divs/folds:
https://imgur.com/a/jCbJZS4
Any help would be appreciated. These sort of designs seem to be trending, so your help will serve me and others for future projects as well. Thank you!
SVGs are a nice way to create section dividers as per your image,(and other complex shapes!) you can target the various shapes inside an svg with css (change fill colour, animations etc), they are widely supported (except for old IE browsers, naturally) and as they are simply vector paths, you can easily stretch, scale and distort, and they're quite small in size.
You might set an svg divider e.g. a wave pattern inside an absolutely positioned div at the bottom of a content section, like below.
section {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
#sect1 {
background-color: #2baf70;
}
#sect2 {
background-color: #f9f9f9;
}
.row {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 45px 45px 115px 45px;
}
.divider {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmOWY5ZjkiPjxwYXRoIGQ9Ik0xMjgwIDMuNEMxMDUwLjU5IDE4IDEwMTkuNCA4NC44OSA3MzQuNDIgODQuODljLTMyMCAwLTMyMC04NC4zLTY0MC04NC4zQzU5LjQuNTkgMjguMiAxLjYgMCAzLjRWMTQwaDEyODB6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTAgMjQuMzFjNDMuNDYtNS42OSA5NC41Ni05LjI1IDE1OC40Mi05LjI1IDMyMCAwIDMyMCA4OS4yNCA2NDAgODkuMjQgMjU2LjEzIDAgMzA3LjI4LTU3LjE2IDQ4MS41OC04MFYxNDBIMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCA1MS43NmMtMjAxIDEyLjQ5LTI0Mi40MyA1My40LTUxMy41OCA1My40LTMyMCAwLTMyMC01Ny02NDAtNTctNDguODUuMDEtOTAuMjEgMS4zNS0xMjYuNDIgMy42VjE0MGgxMjgweiIvPjwvZz48L3N2Zz4=);
/* this is an inlined svg taken from a project I'm working on, as an example. as I can't really import a .svg file here */
width: 100%;
background-size: 100% 70px;
bottom: 0;
height: 70px;
z-index: 1;
display: block;
background-repeat-y: no-repeat;
position: absolute;
}
<section id="sect1">
<div class="row">
<h2>Mock Content</h2>
<p>Lorem ipsum dolor sit amet, affert omittam urbanitas est te. Eam ne oportere erroribus, quis veri eam cu, usu ex tota verear iudicabit. Vim modus conclusionemque an, verterem explicari sententiae ei duo. Mel cu docendi fierent, sonet dolorum ocurreret
at vis. Voluptua fabellas electram ut has, tation maluisset voluptatibus sea ex.</p>
</div>
<div class="divider"></div>
</section>
<section id="sect2">
<div class="row">
<h2>Mock Content</h2>
<p>Lorem ipsum dolor sit amet, affert omittam urbanitas est te. Eam ne oportere erroribus, quis veri eam cu, usu ex tota verear iudicabit. Vim modus conclusionemque an, verterem explicari sententiae ei duo. Mel cu docendi fierent, sonet dolorum ocurreret
at vis. Voluptua fabellas electram ut has, tation maluisset voluptatibus sea ex.</p>
</div>
</section>
I am creating a page for comments, which containers users' comments and a comment input, the comment input is fixed at the bottom.
The problem is it works fine on Desktop, but when I try on my iPad iOS 11 the comment input box scrolls with the page, not fixed at the bottom.
Here is my code: JSFiddle
CSS
.xi-ipad-scroll {
height:500px;
overflow:hidden;
background:green;
}
.xi-comment {
width: 40%;
bottom: 0;
position: fixed;
}
.xi-comment-box {
width: 100%;
font-size: 15pt;
font-weight: 700;
}
.xi-comment-send {
bottom: 15px;
position: fixed;
}
HTML
<div class="xi-ipad-scroll">
<div class="xi-main-title">Bình luận</div>
<div class="xi-comment-list">
<ul>
<li>
<div>Quang Anh Nguyễn</div>
<div>Lorem ipsum dolor sit amet, illum prompta sadipscing cu sit. Ea mei lorem erroribus honestatis, laoreet torquatos eu mel, nam dicant labitur tractatos et. Cu est alia altera consulatu, vim falli detracto reformidans in, novum forensibus eu sit. At etiam erroribus prodesset qui, eam veniam laoreet at. Ea mei natum erant.</div>
</li>
<li>....</li>
</ul>
</div>
<div class="xi-box xi-comment">
<textarea type="text" placeholder="Comment..." class="resizable xi-comment-box" rows="1"></textarea>
</div>
</div><!--iPad-->
I searched on internet and I got solutions like putting -webkit-backface-visibility: hidden; or z-index:100 but none of them works
If I'm understanding what you are trying to do correctly, your "position:fixed" is actually what is causing this. Fixed position will always show on the screen. More info on fixed position. If you want it to be at the bottom of all content you will need to remove the fixed from both -send and -comment.
.xi-comment {
width: 40%;
bottom: 0;
***position: fixed;***
}
.xi-comment-send {
bottom: 15px;
***position: fixed;***
}
This now leads to a new problem, you have set an absolute height and have hidden anything outside of that height. You either need to extend the height, remove the hidden, or move the comment section outside of that div.
I put together a codepen to show this. I think you actually are having the same issue on desktop, I just don't believe you had enough content for you to realize it.
I have a div that is a specific width (80%) and i have an image in that div. i want the image to stretch to 100% of the page, which would overflow the 80% div. how can i do this. would i set the image width to 140% ? i dont know how to go over the containing div that the image is in. i have tried using VW and float, and various positioning, but no luck yet.i want the image above everything else and not inside or behind.
<section style="background:linear-gradient(#F5F1FD 70%, #ffffff 30%);">
<div id="bigbtn" class='bigbtn' style="height:800px; width:1600px; overflow:hidden; cursor:pointer;">
<div style="width:2400px; height:800px; float:left; position:absolute;" id="clkcont" class="clkcont">
<div id="bgdsply2" style="float: left; display: inline-block; height:800px; width: 1600px;">
<img src="admin/showroom/clocks/<?php echo $filename ?>" style="width:1600px; height:800px;" alt="" id="bigclk"/>
</div>
<div style="display: inline-block; width: 300px; margin-top: 200px; margin-left: 200px;">
Quo ne facer impedit euripidis, inermis nonumes vis ex, fabulas menandri postulant ad nam. Animal disputationi ad qui, case natum cotidieque ei mel, et diam prima posse vel. Usu admodum lobortis inciderint eu, oratio tritani et vis, ea eum nemore deseruisse. Dicam conceptam interpretaris sed ea. Ex mei everti abhorreant disputationi.
</div>
</div>
</div>
</section>
"section" is set to 80%width. bigbtn i want to reach the left side of the visible bvrowser window and the right side also, so it will reach across 100% of the visible window while the rest of the page is at 80% width. so far no solutions have worked
I don't know if it's what you want but:
<style>
div {
width:80%;
}
img {
width: 100%;
position: absolute;
}
</style>
<div>
<img src="/img/foo.jpg">
</div>
Let me know if it solves your issue.
You can set the width of the image in pixels, and (assuming that pixel value is wider than the width of the div) the image will overflow.
Check out This fiddle:
body { width: 500px; }
div {
border: solid gray 1px;
width: 80%;
}
img { width: 500px; }
Right, so I have the site in a 100% width wrapper. Inside are two divs. One is floated left with a fixed width of 900px, and... I'm trying to get the second one to be centered in the remaining space between the first div and the right of the screen.
I've tried variations of floating left/right relative/absolute positioning, margin auto etc but none of it is working.
Could anyone help please?
Floated elements do not take up space inside their container by definition, it's therefore impossible to center 'the other content'.
In general, don't use float for content that isn't actually floating, like images inside an article. For layout you should usually prefer absolute positioning or other more flexible constructs.
You could for example just position the sidebar absolutely and give the container a margin equal to the size of the sidebar, which would solve your problem instantly.
If this isn't possible, for example because the elements are both flexible height, you could position 2 containers next to eachother with either float:left, display:inline-block or display:table-cell. Centering inside the right container is then trivial.
If my understanding is correct, you are trying to achieve something like this:
<div class="container"><div class="first"></div><div class="second"></div></div>
CSS:
.first {
width: 100px;
height: 50px;
background-color: black;
}
.second {
position: absolute;
height: 50px;
background-color: red;
left: 100px;
right: 0;
top: 0;
}
.container {
width: 500px;
height: 100px;
background-color: green;
position: relative;
}
Here's a fiddle. If I misunderstood and you don't want to have the second div stretched to full remaining width, instead you just want to center it, then simply modify the css like this:
.second {
position: absolute;
width: 100px;
height: 50px;
background-color: red;
left: 100px;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
}
Here is an example using CSS table settings on the divs. It stays together well when resized, and when content is added. An additional benefit is that both the left and right columns will stay the same height, and will wrap around the content. If you want the left and right columns to appear to have different heights, just insert and style nested divs.
In the first example, the right div has text-align:center. The nested div within is display:inline-block which recognizes the text-align:center on the parent. Therefore, the nested div is truly centered. Inline-block will also wrap around its content's width, and that's helpful if your centered element has a set width, or a small variable width. If your content fills its parent like the example, just set a max-width.
In the second example the right div has equal padding on the left and right to "center" its contents.
Note: If you support IE6 and IE7 - CSS table settings and inline-block have excellent browser compatibly, except for IE6 and IE7. For the css table settings, there is a polyfill. Also IE6 and IE7 don't recognize inline-block, but they do recognize display:inline. Just use *display:inline; *zoom:1; for IE6 and IE7.
Give it a good test and see what you think.
JSFiddle Example
CSS Table Browser Compatibility Chart
Inline-block Browser Compatibility Chart
CSS
.table-holder {
display:table;
width:100%;
}
.table-row {
display:table-row;
}
.table-cell-right {
display:table-cell;
width:90px; /* small px used for example */
background-color:#ccffcc;
padding:.5em;
vertical-align:top;
}
.table-cell-left {
display:table-cell;
background-color:#ccffff;
text-align:center;
}
.center-nested {
width:85%; /*set to desired width */
display:inline-block;
padding:.5em;
text-align:left;
vertical-align:top;
background-color:#ffffcc;
}
/* ------------ center using padding -------------*/
.padded-table-cell-left {
display:table-cell;
background-color:#ccffff;
padding:0em 2em 0em 2em;
}
.padded-center-nested {
padding:.5em;
background-color:#ffffcc;
}
HTML
<p>Table using inline-block to center</p>
<div class="table-holder">
<div class="table-row">
<div class="table-cell-right">Left Container set at 90px</div>
<div class="table-cell-left">
<div class="center-nested">
This is a CSS table. The blue parent cell has text-align:center. The yellow nested div is display:block, which responds to the text-align:center on the parent: therefore, the yellow div is truely centered. Lorem ipsum dolor sit amet, usu ad fugit indoctum molestiae, inermis mediocrem in quo, sed affert sadipscing no. Per solum rebum forensibus id, his prima everti epicuri te. Vis diam tation ei, audire tritani adipiscing eam at. Ea modo nonumy feugiat usu, pri an ubique electram. Aeque adversarium ea vim. Pri te novum veritus scriptorem, vero blandit mei eu.
</div>
</div>
</div>
</div>
<p>Table using padding to center</p>
<div class="table-holder">
<div class="table-row">
<div class="table-cell-right">Left Container set at 90px</div>
<div class="padded-table-cell-left">
<div class="padded-center-nested">
The yellow centered cell appears centered because the parent has equal left and right padding. - Lorem ipsum dolor sit amet, usu ad fugit indoctum molestiae, inermis mediocrem in quo, sed affert sadipscing no. Per solum rebum forensibus id, his prima everti epicuri te. Vis diam tation ei, audire tritani adipiscing eam at. Ea modo nonumy feugiat usu, pri an ubique electram. Aeque adversarium ea vim. Pri te novum veritus scriptorem, vero blandit mei eu.
</div>
</div>
</div>
</div>
Do you have a padding on the divs?
if you have you can set box-sizing to border-box and float the first box to the left and leave the second one as is.
Do you want to achieve something like this?
http://jsbin.com/zenedabiyoyu/1/edit
One possible solution is to nest the right div inside of another div with margin-left: 900px and then use margin: 0 auto on the inner div to center it.
Check out the technique in this example: http://jsfiddle.net/r15fL0de/
Note: For the sake of the fiddle I used 300px instead of 900px, but the principle is the same
I have some very simple code which works perfect for what look I'm trying to achieve. I have two divs which are displayed as "boxes" which are contained within an outer div which is the boxContainer. I have the boxes sitting next to each other rather than one on top of the other, and they are aligned perfectly in the middle of the screen. The boxes widths shrink/grow as the browser width gets smaller/larger, and the boxes relocate to be one on top of the other if the browser window gets too small, while remaining centered on the page. Perfect.
The only problem is that the boxes are aligned on the bottom instead of the top. Because the second box has less text within it, it is pushed further down the page to align with the bottom of the first box. I want them to align on the top instead.
I believe this is caused by display:inline-block, but I'm not sure why, and I don't know how to fix it and keep the same features I listed above.
If you could help me out, I'd surely appreciate it!!
#boxContainer {
width:80%;
margin:0 auto;
text-align:center;
}
.box {
display:inline-block;
width:35%;
margin:20px;
border:solid 5px;
border-radius:40px;
}
<div id="boxContainer">
<div class="box">
<h3>BOX 1</h3>
<p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
</div>
<div class="box">
<h3>BOX 2</h3>
<p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
</div>
</div>
Picture
Thank you!
Since the boxes are already inline-block you can add vertical-align: top to the .box style.
.box {
display: inline-block;
border: solid 1px;
vertical-align: top;
width: 40%;
}
<div id="boxContainer">
<div class="box">
<h3>BOX 1</h3>
<p>Lorem ipsum dolor sit amet, altera interesset pri an. Et aeque interpretaris vel, at quo summo deleniti disputationi. Eu inimicus splendide duo, soleat intellegam ut per. Sint impedit recusabo ex vix, aliquid adipisci consequat no ius. Eu possim consequat eum, sea cu quaeque impedit, est fuisset accusamus definiebas ad.</p>
</div>
<div class="box">
<h3>BOX 2</h3>
<p>Viris eruditi consectetuer ei mea, eu nulla ridens officiis duo. In atomorum forensibus abhorreant quo, id nec aperiam dissentiet.</p>
</div>
</div>
You can use the vertical-align CSS property.
It has effect only on inline, and inline-block elements.
This is a great reference on vertical-align.