I need to have an half arch like shown below using only css.
Tried using clip path, but the result is not the same.
clip-path: circle(63.5% at 100% 63%);
Maybe something like this?
You should define border-radius value according to your div width.
.arch-div{
position:absolute;
width:40%;
right:0;
height:100%;
background-color:black;
border-top-left-radius:300px;
}
.container{
height:200px;
background-color:darkgreen;
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body >
<div class="container">
<div class="arch-div">
</div>
</div>
</body>
</html>
The image shown does not have exactly a quarter circle showing - it looks more like quarter of a sort of oval/ellipse.
There is no need to add an extra element to the main HTML, you can add this 'quarter' using an after pseudo element.
This snippet uses aspect ratio to set the sizes, but you could of course use actual dimensions as required and change the measurements to get exactly the shape you require.
.cutout {
height: 50vh;
aspect-ratio: 16/9;
display: inline-block;
background: teal;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.cutout::after {
content: '';
display: inline-block;
background-color: white;
border-radius: 50%;
position: absolute;
left: 63%;
top: 0;
height: 200%;
aspect-ratio: 1/1.5;
z-index: 1;
margin: 0;
padding: 0;
}
<div class="cutout"></div>
Related
I don't know how else to describe it, not fullscreen, but fill up the whole viewport.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1001001</title>
<style id="style-tag"></style>
<script src="dist/app.js"></script>
</head>
<body spellcheck="false">
<div id="content">
<pre contenteditable id="style-text"></pre>
</div>
<div id="footer">
Skip
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
pre {
overflow: auto;
min-height: 100%;
width: 100%;
border-radius: 1px; /* Prevents bad clipping in Chrome. */
}
#content {
position: absolute;
top: 0; right: 0; left: 0; bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
height: 20px;
left: 0;
right: 0;
padding: 0 10px;
}
Expected outcome:
The coloured block fills the entire screen (I require this to be a as text is added afterwards).
Actual outcome:
Viewport is almost covered by the block, however, on the top and bottom, there is about 10px that are not coloured.
If you set the css min-height property as min-height:100vh; (rather than 100%) on the <pre> element, that should solve your issue, by forcing the height of the element to at least the full viewport height.
Edit - also add margin:0; to the style of the <pre> element. That seems to work for me.
Hope this helps! - James.
I'm trying to create an arch using just CSS. I've looked into various "inset border-radius" questions, but all of them show how to inset corners, not the middle section of an object.
I'm looking for a way to inverse the middle of an object to create an arch like a bridge.
Included is an example image to show the sort of thing I'm trying to achieve.
Edit:
An important part of this arch is that it will be placed over other objects. Simply whiting it out isn't a solution, rather just a temporary hack. See image below for more on that.
You could accomplish with radial gradients. I’ve put an example up on JSFiddle: http://jsfiddle.net/17ohey9h/
The basic idea is to have a big overlay (generated content clipped to the container with overflow: hidden) and then to give it a background of a radial gradient with a hard stop for the transition. We can do this by setting two stops at the same position, but with opposite translucencies:
radial-gradient(ellipse at center, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%)
You can obviously play around with the colours and positionings, the general idea holds. I’ve also only provided the W3C syntax for this. You’ll need to add in the older versions dependent on how far back your required browser support goes.
Given the images you've posted, you might consider another approach to this, such as this: http://codepen.io/pageaffairs/pen/lpLHg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {background: red; padding-top: 100px; width: 400px; text-align: center; overflow: hidden;}
img {border-radius: 200px/30px ; display: block; margin: 0 0 -30px -10px;}
</style>
</head>
<body>
<div>
<img src="http://placeimg.com/420/420/any">
</div>
</body>
</html>
Another way to solve it, using box-shadow
.overlay::after {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 30px;
border-radius: 50%;
box-shadow: 0px -100px 0px 72px red;
}
fiddle
Reusing Robin fiddle :-)
Html :
<div class="wrapper">
<div class="rectangle"></div>
<div class="egg"></div>
</div>
CSS :
.wrapper {
width:200px;
height:100px;
overflow:hidden;
position:relative;
}
.rectangle{
width:200px;
height:100px;
background-color:red;
}
.egg {
width:200px;
height:100px;
border-radius:50%;
background-color:#fff;
position:absolute;
top:56px;
}
and the fiddle :
http://jsfiddle.net/h1gjefk7/
You could do it like this: http://codepen.io/pageaffairs/pen/wpaFm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
width: 230px;
height: 120px;
background: red;
position: relative;
overflow: hidden;
}
div:after {
content:"";
width: 260px;
height: 50px;
background: #fff;
border-radius: 100% 100% 0 0;
position: absolute;
bottom:0;
left: -15px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
I am sorry to keep asking versions of the same question but this seems difficult to achieve. Here's the code I have so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
}
#outer {
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
Now it seems I see scroll bars but I just want the outer DIV to occupy 90% of the screen and there not to be scrollbars.
Find the fiddle here.
This is a pretty interesting bug I've never seen. Without going with the nasty body { overflow:hidden; } approach, I've found some fixes:
1 - Using display:inline-block (not the actually wanted)
#outer {
display:inline-block;
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
2 - Using padding instead of margin (not the actually wanted)
#outer {
width: 90%;
height: 90%;
padding: 5% 5% 5% 5%;
background-color: #333;
}
3 - Using position absolute (recommended)
#outer {
position:absolute;top: 5%;bottom: 5%;right: 5%;left: 5%;
background-color: #333;
}
I will edit this answer on further investigation of this issue.
As per http://www.w3.org/TR/CSS2/box.html#box-dimensions
The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well.
Which means that by putting 90% width on the body, will cause the 5% of the margin to be 5% out of 90%, instead of the expected 100%, which causes the "bug." - Same applies to padding.
Here is how I would do it: http://jsfiddle.net/remibreton/8hfwp/1/
The trick here is to leave the browser figure out the width and height of the outer element. To do so you specify top:0; bottom:0; left:0; right:0; to make sure it fills up the entire available space. Then you add margin:5%; to reduce the height and width to 90%. The outer element should be position:relative; to allow absolute positioning inside it.
For the content elements, they can both be width:50%; height:100%. What you need to do is to make sure that the right one get a special left:50% treatment.
HTML
<div id="outer">
<div class="content left">xx</div>
<div class="content right">xx</div>
</div>
CSS
body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } /* margin:5% to make sure the width and height are actually 90%. Overflow is optional */
.content { position:absolute; width:50%; height:100%; } /* Applies to both content element */
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; } /* Left position is equal to the right content element */
This method allows cleaner and more flexible CSS than what you previously had. Bonus internet points!
Try this:
body, html{
height: 100%;
margin: 0;
}
#outer {
width: 90%;
height: 90%;
position: absolute;
margin: 5%;
background-color: #333;
}
change overflow property to hidden(overflow:hidden;) then change the margin of #outer to margin:2.5% 5%;. Here is the full code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
overflow:hidden;
}
#outer {
width: 90%;
height: 90%;
background-color: #333;
margin: 2.5% 5%;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
Hope it'll work!
It seems to be being caused by margin collapsing going wrong. Add padding:0.01px to the <body> and it works like it should.
If you want something fixed-size on the screen, you should probably just use position:fixed like so:
#outer {
position:fixed;
left: 5%; right: 5%; top: 5%; bottom: 5%;
background:#333;
}
#left-content {
position:absolute;
left:0; top: 0; width:50%; bottom: 0;
}
#left-content {
position:absolute;
left:50%; top: 0; width:50%; bottom: 0;
}
I am making a website with css and jquery. One of my script is to show a text at a specific location on a mouse click. The text is displayed good in google chrome at its intended position. but in IE9 and FF17 they are displaced from the intended position. My background image is such that it fits to the size of the window of the browser.
I am attaching the screenshot which will give a better idea. Also I am writing the code. maybe only a small tweak is required but I do not get it. Please help me in this.
This is the comparison between chrome and IE. the right one is chrome which is the right one. FF and IE display at same positions.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
*Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin-top: 0px;
padding-top: 0px;
top: 0px;
margin-left: 0px;
padding-left: 0px;
left: 0px;
}
body {
overflow: hidden;
}
#background {width: 100%; height: 100%; display: block; position: absolute; z-index:1;}
.content {
visibility:hidden;
border-style: none;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
margin-top: 40%;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
}
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
<div><img id="background" alt="background" src="tot1.png"></div>
<div class="content" id="thought_text">Here goes the text<br></div>
There is a simple hack that will work in IE9 for vertically centering elements. It uses the transform: translateY property to adjust an element within another element. We can apply a class to our inner element like so:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
You'll need to add the appropriate vendor prefixes. Here is a great article on this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Firstly, for fixed positioning, use: top, bottom, left, right attributes instead of margin-top, margin-right..
Secondly, you've applied same z-index'es on siblings.
Thirdly, use of img element for background this way is not the best solution.
You should go for CSS background-image for body or text-div wrapper, stretched to 100%.
Full solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image:url(http://25.media.tumblr.com/6d28260f10f17c0d2eab47398fd855f6/tumblr_mj9ha54DuW1rub5xuo1_1280.jpg);
background-position: top center;
background-repeat:no-repeat;
}
.content {
top: 40%;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
border-style: none;
}
#thought_text{
left: 25%;
right: 25%;
color:#000;
}
</style>
<body>
<div class="content" id="thought_text">Here goes the text<br></div>
</body>
</head>
Consider removing #thought_text{} block in css file and combining it in the .content {} block to avoid overriding of attribute values
or
adding !important directive to the attributes
and also change
margin-top: 40%; to some fixed value such as margin-top: 250px; which ensures the top positions as same in all the browsers.
As I understand, you stretch image to whole page and want to center your block with text. You have 50% width (100% - 25% margins from both side) and 40% top margin.
With position:fixed you have top and left properties to set position relative to page.
.content {
position:fixed; /* taking it over the page */
z-index:2; /* and over the image */
left:25%; /* move to 25% from left */
width:50%; /* and setting width */
top:40%; /* move to 40% from top */
font-size:1.5em;
opacity: 0.697;
}
And you can remove
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
You get original bug because top/bottom margin and padding in percents calculates from width not height according to spec.
this is just an idea , hope that useful .
<style>
#background {
background:url('tot1.png') no-repeat;
width: 100%;
height: 100%;
position: absolute;
z-index:1;
}
</style>
<div id="background">
<div class="content" id="thought_text">Here goes the text<br></div>
</div>
You can use a bit of javascript to detect if IE or Firefox are present, and then change the margin/position of the text accordingly.
function detectBroser(){
if (navigator.userAgent.indexOf("Firefox")!=-1)
return "Firefox";
else if (navigator.userAgent.indexOf("MSIE")!=-1)
return "Internet Explorer";
}
This should be easy, but I've spent a while trying to figure this out... I have a div that is 73px in height. I also have an Iframe that is suppose to stretch to the rest of the page but it overflows and I have two scroll bars (Iframe, and page). How can I have the div above the Iframe and have the Iframe in 100% height? I've also tried a negative margin and padding and that hasn't done anything.
Trying to get rid of the page scroll bar when using 100% and top: 73, but you can see the code for yourself.
I find this an interesting problem, so I've spent some time debugging the design on your page.
Now for me, the textarea always stretch exactly to the bottom of the page, not farther, and the page scrollbar does not appear.
Here are the modifications (I hope you did not change your code or stylesheets too much while I was debugging):
1.) - The "container" div:
Using bottom: 0 together with position: absolute ensures that the div stretch to the end of the page. Using height: 100% would cause the div to overflow! Using overflow: hidden does not allow the page scrollbar to show up.
<div class="container" style="position: absolute; top: 73px; bottom: 0; overflow: hidden; left: 50%; margin-left: -475px;">
2.) - The left pane ("span-12" div):
<div class="span-12" style="float: left; padding-top: 17px; width: 470px">
3.) - The right pane ("span-12 last" div):
You can use the same trick as with the "container"
div: absolute positioning and use of the top, right and bottom css properties.
<div class="span-12 last" id="friend_pane" style="position: absolute; top: 0; right: 0; bottom: 0">
4.) - And the iframe:
<iframe src="/friend/shell.php" frameBorder="0" allowTransparency="true" style="height: 100%; width: 100%">
EDIT - To make it center-aligned, I added "left: 50%; left-margin: -475px;" in the style of the "container" div. This tricks belongs to #clairesuzy, I didn't find it myself.
http://jsfiddle.net/HZTTp/:
<!doctype html>
<html>
<head>
<title></title>
<style>
html,
body {
margin: 0;
overflow: hidden;
}
body {
padding: 0 !important;
padding: 30px 0 0;
}
#top {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 100%;
overflow: hidden;
background: gray;
}
html
>
body
#bot {
position: absolute;
top: 30px;
bottom: 0;
width: 100%;
}
object {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bot">
<object data="foo"></object>
</div>
</body>
</html>
You can use a wrapper div on the iframe to specify where you want it's sides to be (top:73px; left:0; right:0; bottom:0;) with the help of position:absolute.
HTML:
<div id="head"></div>
<div id="main">
<iframe src="http://i.reddit.com/"></iframe>
</div>
CSS:
body { margin:0; padding:0; }
#head { height:73px; background:#c33; }
#main { top:73px; left:0; right:0; bottom:0; position:absolute; }
#main iframe { border:0; width:100%; height:100%; display:block; }
Demo: jsfiddle.net/fErZY
A bit tricky.. and most solutions work OK for the main part but IE7 doesn't like when a iframe is set to 100% tall without it's parent having an explicit height (in px, not percent) - so my solution is to absolutely position the container so you get the 73px top and 0 bottom co-ordinate you need - then it should be as simple as setting the #friend_pane div to 100% height, and then subsequently the iframe to 100%.. but that's the bit IE7 doesn't like.. so adding position: absolute; right: 0; also to the friend_pane div, along with the 100% height - then makes IE7 apply the 100% height to the iframe too.
There is leakage (small?), if that's what you've been referring to in your comments, that is to do with the iframes natural box model, but I found setting a negative bottom margin -4px on the iframe counteracts that
So with your code; remove all inline styles from .container #friend_pane and the iframe #friendpane_area
and add these styles:
.container {
position: absolute;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
Here's a demo of this with your page code:
JSBin HERE
Note: overflow:hidden; on the #friend_pane div instead of the negative 4px margin on the iframe will also cure the "leakage"
and to keep some general code in the answer.. a simplified demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FriendsConnect | My dashboard</title>
<style type="text/css" media="screen">
body {
background-color: #4DA2CA;
margin: 0px;
padding: 0px;
}
#mainbar {
background-image: url('http://friendsconnect.org/bar_fade.png');
background-repeat: repeat-x;
background-color: #494949;
padding-top: 6px;
height: 67px;
}
#infobox_left {
color: #444444;
margin-bottom: 15px;
padding: 15px;
background-image: url('http://friendsconnect.org/grp2.png');
background-color: #F2F2F2;
background-repeat: repeat-x;
float: left;
width: 440px;
}
#com-status {
border: solid 1px;
border-color: #3B7D99;
background-color: #4794B7;
padding: 15px;
float: left;
clear: left;
width: 440px;
}
.container {
position: absolute;
width: 950px;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
</style>
</head>
<body>
<div align="left" id="mainbar">Main bar</div>
<div class="container">
<div style="padding-top: 17px;" class="span-12">
<div id="infobox_left">
<font color="#000000">Welcome TEST, what's up?<br/></font>
SOCIAL POINTS <font color="#000000">0 Points</font><br/>
ACCOUNT STATUS <font color="#2C8231">No Problems Found</font><br/>
CONNECTBOX <font color="#000000">0 New Messages</font>
</div>
<div id="com-status">
<strong>Pete Allport commented on your status</strong><br/>Pete Allport Commented: Yeah bro thats beastt...
<div style="float: right;"><button>Close</button></div>
</div>
</div>
<div id="friend_pane">
<iframe id="friendpane_area" src="http://google.com" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>
which you can see:
JSBin Here
You can wrap your iframe in a div and set the div's position:fixed with top:73px then right, bottom, and left set to 0 so the div fills remaining space below your 73px header. Once your wrapper is set you can specify height and width to 100% for your iframe.
example: http://jsfiddle.net/pxfunc/KTwxb/
HTML:
<div id="header">Header</div>
<div id="wrapper">
<iframe id="frame" src="http://www.supercalifragilisticexpialidocious.com/"></iframe>
</div>
CSS:
html, body {margin:0;padding:0;height:100%;font-family:helvetica,arial,sans-serif;}
#header {width:100%;height:73px;}
#wrapper {position:fixed;top:73px;right:0;bottom:0;left:0;}
#frame {width:100%;height:100%;border:0;}
Here is an example. Only way I was able to hide the scroll bar was to set the iframe's html overflow property to hidden.
http://jsfiddle.net/nERqu/
HTML:
<div class="top">
<p>div text</p>
</div>
<iframe class="iframeBottom" src="http://www.google.com">
</iframe>
CSS:
.iframeBottom {
height: 100%;
width: 100%;
position: absolute;
scrolling: no;
}
.top {
height: 73px;
width: 100%;
background-color: yellow;
position: absolute;
z-index: 999;
}
It seems like iframe is being treated as an absolutely positioned element whether or not you actually specify that in the css. If its container is absolutely positioned, it should be able to fill the container using width:100% and height:100%.
In other words, if my theory is correct, the iframe isn't sizing "correctly" because it is searching for a positioned (i.e. relative, absolute, just not static) parent element. It needs to figure out how to adjust its size and the closest abs pos element is the browser viewing area itself. 100% height of the screen would normally fill the screen height, but the iframe is positioned down 73px, thus making it overflow by 73px.
Play with this a bit, it should be a nice step in the right direction:
<div style="position:absolute; width: 515px; top:73px; bottom:0px; right:0px;">
<iframe id="friendpane_area" style="position:absolute; width:100%; height: 100%;" src="./FriendsConnect My dashboard_files/shell.htm" frameborder="0" allowtransparency="true"></iframe>
</div>