Div border cut off when behind another div - css

I am having trouble getting the top of the border to show up of a div that is behind another div. It is currently cut off, but I'd like to get it to show behind the skills tag. Is this possible? Thank you!!
#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 38px;
background-color: #ffe8eb;
float: left;
}
#box {
width: 84%;
max-width: 500px;
height: 200px;
margin-top: 40px;
position: absolute;
border: 1px solid black;
float: left;
z-index: -1;
}

I'd like to get it to show behind the skills tag. Is this possible?
The z-index property specifies the order of an element as they appear in the DOM (with the lowest element down at the same hierarchy level always appearing on top). When elements overlap, the z-index value determines which one covers the other. z-index only effects elements that have a position value other than the default value. To create the affect you're wanting, you need to add a lesser z-index value to #skills, like this:
#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 38px;
background-color: #ffe8eb;
float: left;
z-index: -2;
}
Or change the z-index value of #box from -1 to 1. Here's a fiddle example for you to review. http://jsfiddle.net/yongchuc/dconymaf/

your #skills element does not have the z-index property set, meaning it will default to auto, which will check the parent element's z-index to calculate it, My advice would be to set both elements index to be sure:
#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 38px;
background-color: #ffe8eb;
float: left;
z-index: 0;
}
#box {
width: 84%;
max-width: 500px;
height: 200px;
margin-top: 40px;
position: absolute;
border: 1px solid black;
float: left;
z-index: -1;
}

Related

Positioning a :before selector

When adding a :before selector, in this scenario I am trying to insert a Phone Icon to appear above the .front-page-contact div. Ideally, so it would be centered above the text in the .front-page-contact div.
How could I go about positioning this selector to achieve the result mentioned above?
.front-page-contact .widget:nth-of-type(1) {
text-align: center;
}
.front-page-contact {
background-color: #00AFBE;
padding: 20px 0;
}
.front-page-contact h2 {
font-size: 26px;
color: #fff;
margin: 0;
position: relative;
}
.front-page-contact h2:before {
font-family: Ionicons;
content: "\f4b8";
font-size: 40px;
background-color: tomato;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 20px;
display: block;
position: relative;
line-height: 1em;
margin: 0 auto;
}
Screenshot:
Give h2 position: relative then the pseudo element will position itself absolutely to the h2 not to the page. Its hard to say more without seeing the markup.
EDIT:
Change it to:
.front-page-contact h2:before {
font-family: Ionicons;
content: "\f4b8";
font-size: 40px;
background-color: tomato;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 20px;
display: block;
position: absolute;
line-height: 1em;
left: calc(50% - 40px);
top: -60px;
}
Adjust left / top as necessary

How to Stack two or more Elements to the Right hand side using CSS

I would like to have my Header Elements stack on top of each other to the right hand side of the screen (H1 element with the H2 element right under it). I am just starting to get a hang of CSS so do bear with me. Tried searching online for solutions but was only able to find an answer for when there was a single element.
Anyways this is what the page is looking like right now on screen:
The blue "We Help People and Businesses" is an H1 Element. The white "Achieve today's Goals and tomorrow's Aspirations" is an H2 Element. Both of these Header elements are nested within a DIV
Currently the CSS code is looking like this:
.hero01_content-div {
margin-top: 400px;
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
How can I make the H2 element stack right under my H1 element with both of these elements on the right hand side? I would appreciate any help. Thank you in advance.
A codepen demonstrating the above can be found here: http://codepen.io/anon/pen/qOoVxb
You need to set float: right to the parent container and remove the floating properties from the heading element as it takes it out of the normal flow.
Codepen Demo
.hero01_content-div {
margin-top: 400px;
float: right; /* Added */
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
<div class="w-section hero-01">
<div class="hero01_overlay">
<div class="w-container hero01_content">
<div class="w-clearfix hero01_content-div hero01_test" data-ix="scroll-reveal">
<h1 class="hero01_content-head-test-main">We Help People and Businesses</h1>
<h2 class="hero01_content-subhead-test-main">Achieve today's Goals and tomorrow's Aspirations</h2>
</div>
</div>
</div>
</div>
OK you need to remove
.hero01_content-div {
margin-top: 400px;
float: right;
}
Then change these
.hero01_content-head-test-main {
postion: absolute;
top: 0px;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
float: right;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}

how to make the div fits all of it's width?

i have a html div that is styled with css, this div contains some data(a string), and although setting the div width the same as the width of another div (25%) but the div only wraps the text that is written inside it while the other div fits the specified area perfectly.
the div with the problem :
.item_name {
background-color: #F30;
position: absolute;
height: 15%px;
width: 25%px;
background-repeat: repeat;
background-position: center center;
top: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
line-height: 35px;
color: #FFFFFF;
}
the other div:
.item_block {
background-origin:content-box;
background-color:#FFECC1;
height: 20%;
width: 25%;
line-height: 450px;
font-family: Arial, Helvetica, sans-serif;
text-indent: 0px;
vertical-align: middle;
text-align: center;
position: relative;
float: left;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
here's a JSfiddle contains my code
I think this has got to be the problem :
height: 15%px;
width: 25%px;
in class .item_name
Change it to
height: 15%;
width: 25%;
and add this to you css :
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
this should do pretty much as the parent element has dimension set, child will inherit it in %age!!

Trying to get div blocks left to right but they are stuck on the left

I'm attempting to get the blog posts for this student staff to go left to right and auto wrap to the next line. The problem is that the div blocks will only stay to the left side. Is there something I'm missing in the CSS?
.page_container {
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 20px;
margin-top: 30px;
min-height: 250px;
padding: 0 15px;
position: relative;
width: 700px;
}
.staff_container {
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 20px;
margin-top: 30px;
padding: 0;
position: relative;
width: 300px;
}
Weber State PRSSA Staff Page here
Do you mean like this?
I added these styles:
.post {
float: left;
width: 300px;
}
.staff_container {
width: 100%;
}

Browser messing up sidebars when reducing size

http://rusticblonde.hostizzo.com/
Hi there,
please can someone help. Ive done this on a "float" style with % margins etc.... but when for example i resize the browser the sidebars go all messy...
This is my CSS markup
#MainContent {
width: 53%;
float: left;
margin-left: 110px;
margin-top: -247px;
padding-top: 0px;
background-color: #ffffff;
font-family: verdana;
padding-left: 10px;
padding-right: 10px;
font-weight: 100;
font-size: 8pt;
color: #000000;
}
#rightsidebar {
background-color: #ffffff;
width: 26%;
float: left;
margin-left: 15px;
margin-top: -247px;
}
#FooterWrapper {
width: 81.2%;
clear:both;
height: 20px;
background-color: #145618;
color: #ffffff;
margin-top: 0px;
margin-left: 110px;
padding-bottom: 10px;
}
#chunkyfooter {
clear: both;
overflow: hidden;
width: 81.2%;
padding-top: 8px;
margin-left: 110px;
text-align: center;
font-family: verdana;
font-size: 10px;
}
Any ideas how to fix this?
thanks :)
Kirsty
Try not to mix two units in the same element, maybe this is the cause of your problems.
Some people like to mix the two kinds of units, pixel and percentage, but I always try to always use pixels.
My suggestion, choose the one you are most comfortable with and stick with it and as long as you don't mix different units in the same element you should be fine.

Resources