Newbie here
I'm making a website that has 2 main sections: one larger section (section A) with 75% width, and another section (section B) with 25% width, appear side by side.
Section A has several p tags with footnote inside, the only problem is that when I hover the footnote, it appears behind the section B, can anybody help me? Thanks!
Screenshot: http://imgur.com/7BQrcP7
CSS Code:
Section A {
margin: 0px;
padding: 0px;
background-color: #FAFAFA;
float: left;
width: 75%;
}
Section B {
float: right;
width: 25%;
text-align: left;
}
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
}
You need to add a z-index to the footnote element to make it appear to be above every other element, without the HTML I will just apply the z-index to both footnote CSS elements
CSS
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
z-index: 100; /* a large number to ensure it's on top */
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
z-index: 100; /* a large number to ensure it's on top */
}
Add the z-index to the Footnote-tooltip
Footnote-tooltip {
z-index:100;
}
If you want to achieve this without z-index then follow my pen.
Hope this pen will help you.
'http://codepen.io/anon/pen/NGeaKp'
Related
Code pasted below. I'm trying to get the two castle images to stick to the bottom of the page, specifically the bottom of their container div. I tried using display:flex on the image container div, with align-items: baseline, but it didn't do anything. I tried playing around with various justify and align values, as well as position:relative and absolute, but that just gave a lot of unexpected (to me, at least) results e.g. one of the two images disappearing off-screen.
Any suggestions for fixes greatly appreciated!
Cheers
#import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=MedievalSharp&family=Roboto+Condensed:wght#300&display=swap');
body {
margin: 0 auto;
background-color: #1D1D1D;
cursor: url('snake-moving.png'), pointer;
font-family: 'MedievalSharp', cursive;
}
header nav {
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20 px;
height: 88px;
width: auto;
border-style: double;
border-top: 15px;
border-color: white;
}
header nav * {
font-size: 30px;
color:antiquewhite;
text-decoration: none;
font-weight: 800;
}
header nav form, a::after {
content: url('pie-logo.png');
position: relative;
top: 10px;
left: 20px;
}
.game {
border: #1D1D1D solid 40px;
width: auto;
background-color: #F4F186;
}
.image-container {
width: auto;
height: 800px;
margin: 0 auto;
position: relative;
}
.image-container img {
position: absolute;
bottom: 0;
}
.game h1 {
color: midnightblue;
}
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
I want an image to be displayed behind some text in an <h1> tag. But when I add the image it replaces the text and pushes the text below it.
Screenshots : Before and After
CSS
body {
background-color: #1a1a1a;
}
header,
h1 {
text-align: center;
font-family: CGF Locust Resistance;
font-size: 50px;
color: lightgray;
-webkit-text-stroke: 1.5px #000;
}
header {
margin: 0;
padding: 0;
height: 100px;
border-bottom: .5px solid #b3b3b3;
}
nav {
position: relative;
top: -5px;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
border-bottom: .5px solid #b3b3b3;
}
nav ul li {
display: inline;
color: #fff;
font-family: CGF Locust Resistance;
font-size: 12.5px;
padding: 20px;
}
.red {
color: red;
}
#omen {
z-index: -1;
}
Set the image as a background-image of header. Is that what you're after?
h1 {
background: url(the/filepath/to/your/image.jpg) no-repeat center 100px;
background-size: 400px auto;
}
That's approximately how you would use a background image in this situation. center 100px means horizontally centered and 100px from the top (in relation to the h1 element).
h1 {
position : abosolute;
}
This should do the trick but it is preferable to use ids instead of changeing the h tags everywhere on your side
Put this parameter to the image object in css (example creating custom classes) :
.image{
position: relative;
}
And this one to the text :
.text{
position: absolute;
}
Of course, you have to set this classes to it's respective objects. Hope it helps !
I have a problem that I believe might be pretty stupid, but I can't figure out.
I have a form, where I want to align the elements in both sides, problem is I can't align it to the right (where the red line is), here is a picture to show it:
and here is my SASS (sorry if is not very tidy I been working for a while in it and might be messy):
.contact {
margin: 100px auto 0;
max-width: $half-width;
form {
letter-spacing: 2px;
color: $color4;
input, textarea {
border: 3px solid $color5;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
background: $color6;
&:focus {
outline: none !important;
border-color: $color3 !important;
}
textarea {
height: 10em;
width: 100%;
overflow: inherit;
}
}
.info-group {
margin-top: 10px;
label {
display: inline-block;
width: 45%;
float: left;
&:nth-child(2) {
float: right !important;
margin: 0 auto;
}
}
}
.tell-group {
width: 100%;
label {
display: inline-block;
margin-top: 10px;
}
textarea {
height: 10em;
width: 100%;
float: left;
}
}
.submit-wrap {
margin-top: 10px;
float: right;
input {
width: 100px;
font-size: 18px;
text-transform: uppercase;
color: $color6;
background-color: $color5;
border: none;
&:hover {
color: $color1;
}
}
}
}
}
Thanks!
padding: 10px; is going to add 20px to the width, this extra width is likely what is causing the problem. You can change the width attribute to width: calc(100% - 20px); to account for the 10px padding on each side of the element.
Here is a list of where calc is supported: http://caniuse.com/#feat=calc
You can also try adding these css rules to the problem elements to move them over:
position: relative;
left: -20px;
You might also have to add position: relative; to the parent element
Here is a fiddle showing the left -20px method: http://jsfiddle.net/0f153w8e/
Side note: you might have to adjust the left amount a little bit to make it exact if your text areas have borders (which they probably do)
I have been trying to align two elements, a h2 and a div side by side without having one of them colapse when the window changes to a smaller size. I've searched the web a bit but found nothing similar that would help and my solutions just wouldn't work so I though here there would be someone able to help me.
So I want it to be displayed like this at all times:
https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (Can't post images sorry!)
But when window size changes dispite the fact the div should adapt at some point it just breaks to next line:
https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png
Here is my code on this one:
HTML
<div id='pagetitle'>
<h2 id='subtitle'>Weapons</h2>
<div id='hline'></div>
</div>
CSS
#pagetitle { /* This div is for centering both of the elements. */
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
display: inline-block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
text-align: center;
}
#hline {
display: inline-block;
background-color: #72c9b9;
width: 70%;
height: 1px;
position: relative;
bottom: 4px;
margin-left: 20px;
}
So this is it guys, any sugestions? Thanks in advance.
cs.almeida
Here's a way how to do it:
demo
<div id='pagetitle'>
<h2 id='subtitle'><span>Weapons</span></h2>
</div>
#pagetitle {
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
border-bottom: #72c9b9 solid 2px;
height: 18px;
display: block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
}
#subtitle > span {
background-color: white;
padding: 10px 20px;
}