I asked this earlier and was sent: Can I create a div with a Curved bottom?
But a curved bottom div is not what I want.
I am after a very large circle (not just with a curved bottom but a proper circle)... which is positioned with a negative margin-top and has a flexible width when the browser windows is resized.
Here's an image of exactly what I want
Here's an image of what the layout should look like zoomed out - so you can see the whole circle
Here's what I have so far:
https://jsfiddle.net/etmgho6s/
#container {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}
#nav-bg {
width: 90vw;
height: 90vw;
margin: 0 auto;
padding: 0;
margin-top: -45vw;
background: red;
border-radius: 50%;
position: absolute;
}
#title {
margin: 0 auto;
text-align: center;
position: absolute;
margin-top: 20px;
}
Any help would be appreciated!
Thanks, Josh
Does this work for you?
#container {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
display: flex; /* line added */
justify-content: center; /* line added */
}
#nav-bg {
width: 150vw;
height: 90vw;
margin: 0 auto;
padding: 0;
margin-top: -60vw;
background: red;
border-radius: 50%;
position: absolute;
}
#title {
margin: 0 auto;
text-align: center;
position: absolute;
margin-top: 20px;
}
<div id="container">
<div id="nav-bg"></div>
<h1 id="title">Navigation content goes here</h1>
</div>
Related
I'm designing my CSS layout, but can't get the div to stretch to 100% of the height of the parent.
I have a menu bar that takes up the top 13.714vh of the screen. Then I have a main div that I want to take up the remainder of the screen height which I did with height: 100%. bottom-container takes up the bottom 38.2% of the vertical space available in main, and I want speech-bubble to take up the remaining 61.8% of the vertical space in main.
For some reason though, there's a huge white container in the middle of the screen, and speech-bubble isn't taking up the remaining space because of it. Can anyone help me figure out what's going on?
Is there a problem with my HTML or did I make an error in the CSS?
Here's the code pen:
https://codepen.io/TheNomadicAspie/pen/NWjKwxE
body {
margin: 0;
}
.menu-bar {
height: 13.714vh;
width: 100vw;
background: darkblue;
top: 0%;
}
.main {
background: black;
grid-template-rows: 61.8% 100%;
height: 100%;
width: 100%;
padding-left: 1.5%;
padding-right: 1.5%;
padding-top: 1.5%;
padding-right: 1.5%;
}
.speech-bubble {
grid-row: 1;
position: relative;
background: orange;
height: 97%;
width: 97%;
border-radius: 4em;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: white;
border-bottom: 0;
margin-left: -4em;
margin-bottom: -4em;
}
.email-container {
visibility: hidden;
}
.question-text {
visibility: hidden;
}
.bottom-container {
grid-row: 2;
position: fixed;
background: green;
height: 38.2%;
width: 100vw;
bottom: 0%;
left: 0%;
}
<div id="menu_bar" , class="menu-bar"></div>
<div id="main" , class="main">
<div id="speech_bubble" , class="speech-bubble">
<div id="email_container" class="email-container">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit_email_btn" class="btn">Submit</button>
</div>
<div id="question_text" class="question-text">Question</div>
</div>
</div>
<div id="bottom_container" , class="bottom-container">
</div>
</div>
</div>
Do you want anything like this? screenshot.
If so, making your .menu-bar as position: relative and modifying your .main class styles as follows will work:
.main {
position: absolute;
background: black;
left: 0;
right: 0;
height: 50%;
}
Also, you may add margin: auto in your speech-bubble class to align it to center.
Your main tag is not taking full height as your html and body tags are not taking the full height.
Always remember that block elements can stretch maximum to their's parent's height, hence you need to give html and body tag height of 100%.
I have added the additional css below.
html, body { height: 100%;}
I think you want thing like this
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.menu-bar {
height: 13.714vh;
background-color: tomato;
color: #fff
}
.main {
background: black;
padding: 1.5%;
flex: 1
}
.speech-bubble {
background-color: orange;
border-radius: 4em;
height: 95%;
position: relative;
display: flex;
flex-direction: column;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: white;
border-bottom: 0;
margin-left: -4em;
margin-bottom: -4em;
}
.email-container {
align-items: center;
justify-content: center;
flex: 1;
display: flex;
}
.question-text {
height: 50px;
position: relative;
text-align: center
}
.bottom-container {
height: 70px;
background-color: lightseagreen;
}
After searching to center my div all I could get was margin: 0 auto; together with an assigned width, but still it not working.
My problem is simply centering a div. I have no idea why margin: 0 auto; isn't working.
Here is the layout of my CSS/html:
CSS
.countdown-box {
position: absolute;
width: 80px;
margin: 0 auto;
height: 130px;
/*left: 50%;*/
background: #008040;
border-radius: 4px;
z-index: 2;
}
<div class="countdown-box"></div>
It's because you are using position: absolute;. Change it to position: relative; and it will work.
The margin: auto works with elements with relative position. To center with absolute position should be like the following CSS:
.countdown-box {
position: absolute;
background: #008040;
border-radius: 4px;
height: 130px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="countdown-box"></div>
Actually margin auto will allocate the available space, which means it doesn't has any relation with it is relative or not.
<div class="centerize"></div>
.centerize {
width: 200px;
height: 200px;
margin: 0 auto;
background: yellow;
}
I am having a really hard time with getting this image centered.
I have tried the following:
margin: 0 auto;
display: block;
text-align: center;
I really do not want to use the left command because it isn't working in my mobile setting. I just want a fixed property that will work everywhere and I won't have to add it again.
Why is this image not centering?
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
</div>
<img src="/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
I had also tried the below but it still doesn't work.
.approach-tablet {
bottom: 0;
position: absolute;
/*left: 50%;*/
}
img.approach-tablet {
display: block;
margin: 0 auto;
text-align: center;
}
I need the position: absolute to position the div where I am wanting it to go. It sits on the bottom of the page. Regardless, the image isn't centering with what is in there.
As indicated in this SO answer, an element that is positioned absolutely cannot be centered using the margin: 0 auto method and you would have to resort to other options.
One option would be to use left: 50% and then use transform: translateX(-50%) to get it back to the center. The left: 50% offsets the image 50% from the left edge of the page (but this alone will not center the image because the image's left edge is at page center). The translateX(-50%) moves the image to the left by half of the image's width and thus would result in the image's center being at page center.
This should work in all modern browsers (including mobile) as the browser support is good.
As can be seen from the snippet (view it in normal mode and full page mode), no special tweaking is needed for it to be responsive.
Note: Though you had stated that you don't want to use left property in the question, I understand based on your comment that the reason was that mobile support is needed and be responsive.
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: absolute;
left: 50%;
height: 200px;
transform: translateX(-50%);
}
<div id="section3-container">
</div>
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
Please use below code
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
CSS
#section3-container {
margin: 0 auto;
text-align: center;
width: 100%;
}
.approach-tablet {
height: 200px;
margin: 0 auto;
text-align: center;
width: auto;
}
Your image is outside of the div. If you put it inside, it centers
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
Just add another div, html is all about divs:
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
#section4-container {
text-align: center;
width: 100%;
}
<div id="section3-container">
</div>
<div id="section4-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.
I have a problem centering everything while keeping my header in fixed position. Can anyone help me figure out why?
Here is my HTML
<div id="wrapper">
<div class="header">....</div>
<div class="experiences">...</div>
</div>
Here is the CSS:
#wrapper {
margin: 0 auto 0 auto;
width: 1000px;
height: auto;
}
.header {
background-color: #222;
color: white;
top: 0;
left: 0;
right: 0;
position: fixed;
height: 130px;
padding: 20px;
width: 1000px;
margin: 0 auto 0 auto;
}
.experiences {
background-color: #eee;
padding: 20px;
* padding-top: 190px;
width: 1000px;
margin-top: 170px;
}
You just need to remove the left and right declarations in .header.
The rest should already be centered (unless you use a very old version of IE...).