What I am trying to achieve:
image link
What my code currently looks like:
.half-circle {
background-color: white;
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should't be moved</div>
I've tried using padding with a white background and 500 radius, but it pushes the text down.
You can take a look at radial-gradient() and tune a bit the sizing
.half-circle {
min-height: 12vw;
padding-bottom: 4%;
background: radial-gradient(circle at top, white 17vw, transparent 17.1vw)
}
.half-circle img {
display: block;
margin: auto;
max-width: 15vw
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should'nt be moved</div>
This can be achieved with CSS if you give your .half-circle a border-bottom-left-radius and border-bottom-right-radius. That will round the bottom corners of the shape into a half circle. I also added some extra style to match your screenshot a little better.
.container {
padding-bottom: 10px;
text-align: center;
}
.half-circle {
background-color: white;
margin: 0 auto;
height: 100px;
width: 400px;
border-bottom-left-radius: 800px;
border-bottom-right-radius: 800px;
padding: 10px 0 20px;
text-align: center;
}
img {
max-height: 100%;
width: auto;
}
<div class="container" style="background-color: #000;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should't be moved</div>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
Here is the code I am using so far. I have 6 images that I am trying to arrange and make responsive as well.
Idea is like this
image -blank space - image
image -----blank space -----image
image -blank space - image
When I squeeze the page they do not end up stacked uniformly on top of each other. The spaces need to go away so all I have is 6 images on top of each other. CSS below followed by html
.row:after {
content: "";
clear: both;
display: table;
}
/** North Scottsdale */
.nsdl {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break1 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** Scottsdale */
.sdl {
float: left;
margin: 0px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** Tempe */
.tmpe {
float: left;
margin: 0 35px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break2 */
.break2 {
float: left;
margin: 10px;
padding: 10px;
width: 475px;
height: 200px;
border: 3px solid white;
}
/** Downtown */
.dtown {
float: left;
margin: 10px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** West Side */
.wside {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break3 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** UPTOWN */
.utown {
float: left;
margin: 0 120px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
<div class="w3-container">
<div class="row">
<div class="left">
<div class="nsdl" style="text-align: center;">
<h2> NORTH SCOTTSDALE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="sdl" style="text-align: center;">
<h2>SCOTTSDALE</h2>
</div>
</div>
</div>
<div class="row">
<div class="left">
<div class="tmpe" style="text-align: center;">
<h2>TEMPE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="dtown" style="text-align: center;">
<h2>DOWNTOWN</h2>
</div>
</div>
<div class="left">
<div class="wside" style="text-align: center;">
<h2>WEST SIDE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="utown" style="text-align: center;">
<h2>UPTOWN</h2>
</div>
</div>
</div>
</div>
I would suggest looking at a number of frameworks like Bootstrap, Skeleton and Zurb Foundation and use their CSS grid components. Look into how they control the size of various page regions with media queries using a mobile first approach.
You can definitely roll your own solution too. Here's an example.
<div class="img-group">
<div class="img-holder">
<img src="http://placehold.it/300x300?text=1">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=2">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=3">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=4">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=5">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=6">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=7">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=8">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=9">
</div>
</div>
.img-group img {
display: block;
max-width: 100%;
}
.img-holder {
float: left;
width: 50%;
}
#media ( min-width: 448px ) {
.img-holder {
width: 33.333%;
padding: 0.75%;
}
}
#media ( min-width: 779px ) {
.img-holder {
box-sizing: border-box;
width: 25%;
padding: 2%;
}
}
Demo JSFiddle.
First you make your images responsive. The simplest version of doing so is setting them to display: block; and max-width: 100%;. Setting the max width means they'll try to take up their parent element's width as long as they don't exceed their own intrinsic width. For example, if the parent element is 700px wide and the image is 600px wide, it won't stretch to fit the 700px of space. It will stop at 600px.
Now you place your images in container elements that you'll control with media queries. Use percentage widths (i.e. width: 25%; ) so they stay nice and fluid.
You might be wondering what box-sizing: border-box; does. It says that padding should be included as a part of your width definition. Normally if you have width: 25%; padding: 1%; the total width of your element would be 27% as 1% + 25% + 1% = 27%.
I'm desperately trying to format two images side by side using CSS.
I want the first one to be fixed-size and the second one to take up the remaining width (but it should stop growing when it has the same height as the first one). This is my code:
<span style="height:80px; width:100%">
<img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
<img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>
But instead of the second image shrinking (maintaining aspect-ratio) when there is not enough space, the line breaks.
Thanks for any help!
This possible solution requires CSS calc(), see the demo follows.
div {
height: 100px;
overflow: hidden;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
}
span:nth-child(2) {
width: calc(100% - 100px);
}
span:nth-child(2) img {
width: 100%;
height: auto;
}
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/100/100" /></span>
</div>
JSFiddle: http://jsfiddle.net/Low7k16d/
HTML:
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>
CSS:
.image-container {
width: 100%;
display: flex;
align-items: flex-start;
}
.image {
margin: 10px;
padding: 0;
flex-shrink: 0;
}
.image img {
width: 100%;
margin: 0;
padding: 0;
max-height: 80px; /*Line added to limit height*/
}
.image-auto {
flex-shrink: 1;
height: auto;
}
And I updated the Pen: http://codepen.io/czoka/pen/XbJXVO
I don't completely understand your question but this is what I thought you mean.
NOTE: this is my updated version of sdcr's answer.
CSS:
div {
height: 80px;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
padding:10px;
}
span:nth-child(1) img {
max-height: 60px;
}
span:nth-child(2) img {
width: 100%;
HTML
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>
See jsfiddle:
http://jsfiddle.net/Low7k16d/4/
I have a 9-box with a div structure like so:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBRight"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
</div>
And have the following CSS Rules:
.NBTopRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat;
}
.NBTopRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat;
}
.NBTopRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x;
}
.NBMiddleRow .NBLeft {
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y;
}
.NBMiddleRow .NBRight {
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y;
}
.NBMiddleRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
background-color: #ffffff;
}
.NBMiddleRow {
height: 100%;
}
.NBBottomRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat;
}
.NBBottomRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat;
}
.NBBottomRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x;
}
Everything is in the right place and has the right attributes however, the NBLeft and NBRight elements of the middle row are not taking up any height. Using height:100% does not have any effect.
I have added   and still nothing.
I am usually good with this sort of stuff, but I am stumped. Does anyone have any advice?
your NBleft & NBright are self closing make it like <div></div>
Are self closing divs supported correctly in the HTML Version you're using? You could try using instead?
I can see...
<div class="NBMiddle">SharePoint WebPart goes here<div>
Should be ...
<div class="NBMiddle">SharePoint WebPart goes here</div>
Other thing to try is overflow:auto in the CSS class of the div givin you trouble. As long as the div has content, the CSS will make sure it's displayed.
I'm not 100% sure what you're trying to do, but does the below help? I've added borders to everything so you can see what's happening.
The HTML...
<html>
<head>
<link rel="stylesheet" media="screen" href="bla.css" >
</head>
<body>
<div class="NBWrapper">
<div class="NBrow">
<div class="NBcell">Top Left</div>
<div class="NBcell">Top Middle</div>
<div class="NBcell">Top Right</div>
</div>
<div class="NBrow">
<div class="NBcellFullHeight">Middle Left</div>
<div class="NBcellFullHeight">Middle Middle</div>
<div class="NBcellFullHeight">Middle Right</div>
</div>
<div class="NBrow">
<div class="NBcell">Bottom Left</div>
<div class="NBcell">Bottom Middle</div>
<div class="NBcell">Bottom Right</div>
</div>
</div>
</body>
</html>
Then the CSS...
.NBWrapper {
width: 800px;
margin: auto;
}
.NBcell {
width: 266px;
float: left;
border: 1px solid #000000;
}
.NBrow {
float: left;
width: 804px;
border: 1px solid #000000;
}
.NBcellFullHeight {
width: 266px;
float: left;
height: 500px;
border: 1px solid #000000;
}
What i ended up doing was restructuring the divs:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
<div class="NBRight"> </div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
</div>
Taking away the floats and the margins in the attributes and adding this:
.NBWrapper {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.NBTopRow, .NBMiddleRow, .NBBottomRow {
display: table-row;
}
.NBLeft, .NBRight, .NBMiddle {
display: table-cell;
}
You might ask, why not just use a table? SharePoint 2010 may use less of them, but but its still tables all the way down. I prefer using div structures.
I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn't even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.
HTML:
<div id="container">
<div id="head">
</div>
<div id="menuTop">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
CSS:
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}
CSS Box Model 101 - the actual width of a div (or any element) is width + padding + borders
So your two floated divs add up to 1001px
the content div # 750px + 1px border is actually 751px wide, make it's width 749px and all should be well
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}
<div id="container">
<div id="head">head
</div>
<div id="menuTop">
</div>
<div id="content">ssss
</div>
<div id="sidebar">ffff
</div>
<br style="clear:both;" />
<div id="footer">
</div>
</div>