Currently I'm building a website, and I want a small contact form to overlap a backgroud image and a part of the div above and beneath...
I've read about positioning it as absolute and setting your positions for top and right, in my dreamweaver it looks like what I want, but when I open it in my browser (in dreamweaver it's a smaller screen) the container is placed way too far down on the page. has this something to do with screen sizes and responsive design? ps: I'm totally new so my code can be messy.
the html:
<div id="contact">
<div id="container"></div>
</div>
the css:
#container {
background-color: #FFFFFF;
width: 700px;
height: 500px;
margin: auto;
border-radius: 15px;
box-shadow: 0px 0px 70px 5px #000000;
position: absolute;
left: 30%;
top: 720%;
}
#container {
background-color: #FFFFFF;
width: 700px;
height: 500px;
display: block;
margin-left: auto;
margin-right: auto;
z-index:99999;
border-radius: 15px;
box-shadow: 0px 0px 70px 5px #000000;
position: absolute;
transform: translate(-50%);
}
<div class="contact">
<div class="container">
</div>
<div>
<style type="text/css">
.contact{
height: 100%;
width: 100%;
background: #EEE;
}
.container {
height: 200px;
width: 350px;
position: relative;
border: 1px solid #e3e312;
box-shadow: 3px 6px 26px #3A1314;
display: block;
margin-left: auto;
margin-right: auto;
top: 15%;
z-index: 999999;
}
</style>
I am facing a typical situation. I am trying to practice dropdown menu in CSS. Here, the child div .dropdown (grey colored) appears whenever the parent div .content-small (green colored) is hovered upon. Please note, that I have used the .max-width property for all div's because I want all the div's to scale down/up whenever the browser window is scaled.
Now, what I want to do is that I want to increase the max-width of the child div dropdown. But whenever I try to enter a value above 50px, nothing happens. The width DOES NOT increases.
I know that this can be resolved by replacing max-width with only width in the .dropdown class. But if I do that, then the child div dropdown will not scale with the browser window. So in any case, I have to use .max-width property for all divs.
I also don't want to use media queries at this stage. In totality, this is what I am looking for:
I want to increase the width of the dropdown child div .dropdown, I also want it to be scaled along with the browser windows like all other div's (max-width)
I don't want to use media queries at this stage, since I am trying to practice with plain CSS
I don't mind if the .dropdown div DOES NOT remain the child of the parent .content-small (if a possible solution needs it that way)
Would appreciate a solution for this.
* {
box-sizing: border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html, body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
}
.content-small:hover .dropdown{
visibility: visible;
}
.dropdown {
box-sizing: border-box;
width: 100%;
max-width: 250px;
height: 50px;
background-color: rgba(214,214,214,1);
position: absolute;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(255,0,0,1);
top: 47px;
left: -3px;
visibility: visible;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown"></div>
</div>
</div>
</div>
Hopefully this does not interfere with what you are trying to accomplish, but what about restructuring your code a little bit:
HTML
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container" style="height:60px;padding-top:10px;">
<div class="dropdown"></div>
</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{visibility:hidden;display: inline-block;
max-width: 100px;
width: 100%;}
.dropdown {
background-color: rgba(214,214,214,1);
border: 3px solid rgba(255,0,0,1);
max-width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 5px;
}
And here is:
UPDATED JS FIDDLE
[EDIT]
The + in the css select is saying to look for elements after the first criteria. So, in this case, the css is saying, when you hover over .content-small, it then targets the element AFTER .content-small with .dropdown and applies the css to it. Although it is not the most clear, here is a link of some documentation on css selectors
[SECOND EDIT]
I changed the code above to wrap the dropdown in a container and then set it so on container:hover it alters the visibility of .dropdown the same way, making it persist as visible if you are hovering over either. The reason I had to introduce a container is to give it that spacing between .dropdown and .content-small - which you can see I did with padding-top: and not margin-top: because margin would not have worked with the :hover
when you tell: width:100%; to an absolute child, it takes innerwidth and won't mind the borders,why should it overflow :) ?
You may size it with coordonates like you did for left, use right as well and drop the width:100%;
max-width will still be efficient and you may use margin:auto as well if you wish.
* {
box-sizing: border-box;
}
a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
}
a:hover {
color: rgba(0, 0, 255, 1);
}
html,
body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 1);
padding: 0px;
}
.wrapper {
height: 220px;
/*demo purpose */
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204, 204, 204, 1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0, 0, 0, 1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0, 255, 204, 1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0, 0, 0, 1);
top: 5px;
}
.content-small:hover .dropdown {
visibility: visible;
}
.dropdown {
box-sizing: border-box;
max-width: 250px;
height: 50px;
background-color: rgba(214, 214, 214, 1);
position: absolute;
border: 3px solid rgba(255, 0, 0, 1);
top: 47px;
left: -3px;
right: -3px;
margin: auto;
visibility: visible;
}
.wrapper + .wrapper .dropdown {
max-width: 50px;
font-size:0.75em;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">100% + border
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">tiny
</div>
</div>
</div>
</div>
I am attempting to code a blog page with a header, a navigation, a left sidebar, a right sidebar, and content. All of these sections are child divs being wrapped in an outer div. However, not all the properties of the parent div are being recognized, and bgSide is appearing overtop of the wrapper instead of underneath it and I cannot for the life of me figure out why.
I do not have any floats and I have already run my code through a program to ensure there's nothing wrong with the markup. overflow: hidden does nothing.
UPDATE ONE: Solved width property not inheriting. Still need solutions for wrapper height not working, left and right aligning to body instead of wrapper, and image showing up on top instead of behind.
UPDATE TWO: Solved height property not working by changing height: 100%; to height: 100vh;
<!DOCTYPE html>
<head>
<style>
body
{
background:{color:background};
background-repeat: no-repeat;
background-position: center top;
background-image: url('{image:background}');
margin: 0px;
padding: 0px;
word-wrap: break-word;
}
#bgside img
{
position: fixed;
z-index: 1;
margin-left: 0px;
margin-bottom: 0px;
height: 100%;
padding: 0px;
}
#wrapper
{
z-index: 2;
height: 100%;
min-height: 300px;
width: 60%;
min-width: 600px;
max-width: 900px;
margin: 0px auto; /* center the body */
padding: 0px;
border: 1px solid {color:side link border};
border-top: 0px;
border-bottom: 0px;
text-align: center;
background: {color:background};
-moz-box-shadow: 0px 0px 20px 20px #000
-webkit-box-shadow: 0px 0px 20px 20px #000;
box-shadow: 0px 0px 20px 20px #000;
}
#header
{
background: {color:header background};
position: fixed;
z-index: 3;
top: 0px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: 100px;
padding: 0px;
border: 1px solid {color:side link border};
border-width: 0px 1px;
text-align: center;
vertical-align: center;
}
#header img
{
background: transparent;
width: 100%;
min-width: 600px;
max-width: 900px;
height: 100px;
min-height: 100px;
max-height: 100px;
}
#nav
{
background: {color:navigation background};
position: fixed;
z-index: 4;
top: 100px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: auto;
padding: 10px 0px 15px 0px;
border: 1px solid {color:side link border};
text-align:center;
line-height:5px;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#nav a
{
background: {color:top link bg};
padding: 2px 15px 3px 15px;
margin: 4px;
font-family: calibri;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: {color:top link text};
-webkit-transition: all 0.5s ease-in-out;
}
#nav a:hover
{
color:{color:top link text hover};
background:{color:top link bg hover};
-webkit-transition: all 0.5s ease-in-out;
}
#right
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#left
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
left: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#content
{
/* Not coded yet */
}
</style>
</head>
<body>
<div id="bgside"><img src="{image:bgside}" alt="bgSide"/></div>
<!-- START OF CONTAINER -->
<div id="wrapper">
<div id= "header"><img src="{image:header}" alt="header"/></div>
<div id= "nav">
A BUNCH OF LINKS
</div>
<div id="left">
CONTENT
</div>
<div id="right">
CONTENT
</div>
<div id="content">
CONTENT
</div>
</div>
<!-- END OF CONTAINER -->
</body>
</html>
Try adding inherit to things inside the wrap that don't cascade. Some programs do this for you. For example:
height:inherit;
background:inherit;
color:inherit;
This may take a while but it works for me!
SOLUTIONS:
Width property not inheriting:
Change width properties of #nav and #header to width: inherit;
Height property not being recognized in wrapper:
In wrapper CSS, change height: 100%; to height: 100vh;
Left and Right ignoring wrapper and aligning to body:
Remove this code:
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
and replace with float: right; and do the same with #left while assigning left instead of right. Then add overflow: hidden; to #wrapper
bgside ignoring z-index and layering on top:
Change z-index: 0; to z-index: -1;
I have 3 boxes and the first one it's a bit up then the other 2..
The other 2 boxes are ok next to eachother and in the same line.. but first box its not on the same line with the other 2.. its a few pixels up.
This is the css code
#services1 {
float:left;
width: 33%;
padding: 100px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
#services2 {
float:left;
width:33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
#services3 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
How i can fix that?
use this css -
box-sizing: border-box;
on each box. This help you produce desired and accurate result.
Fiddle
Reduce the padding on the first box to 80px(Same as other two boxes). The padding value adds to the overall height of the box.
#services1 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: lightblue;
height: 400px;
}
#services2 {
float:left;
width:33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: tomato;
height: 400px;
}
#services3 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: lightblue;
height: 400px;
}
<div id="services1"></div>
<div id="services2"></div>
<div id="services3"></div>
Update the first block, you need padding 100px to 80px
#services1 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: red;
height: 400px;
}
Its because of padding-top: 100px; other two boxes were having 80px padding.. Demo
As all the boxes were of 400px height with padding, you can adjust height or change the padding to 80px of 1st box.
#services1 {
float:left;
width: 33%;
padding: 100px 0px 0px 0px;
text-align: center;
background-color: red;
height: 380px; / *changed value*/
}
So on my website, I use two columns with modules in them to display information in them like this:
however I myself am working on vertical monitors and so when I change the width to a more landscape format, it looks like this:
currently the css code I'm using looks like this:
.module2 {
display: block;
border-radius: 0px 0px 25px 25px;
background: url(wallparapet.png) no-repeat;
background-size: cover;
width: 85%;
height: 250px;
margin-top: 30px;
margin-bottom: 30px;
margin-right: auto;
margin-left: auto;
}
.module2inside {
width: 90%;
height: 75%;
top: 20%;
border-radius: 25px;
position: relative;
margin: 0 auto;
background-color: #FFF;
background-color: rgba(255, 255, 255, 0.8);
}
module2inside representing the translucent inside with the actual content and module2 being the background to it. module2inside is just a div inside module2. So what can I do so that the inside stays underneath the cutout area no matter what the width of the page.
You should remove the percentage in the top element, and set a fix value for margin-top in pixel, for example:
.module2 {
display: block;
border-radius: 0px 0px 25px 25px;
background: url(wallparapet.png) no-repeat;
background-size: 100% auto;
width: 85%;
height: 250px;
margin-top: 30px;
margin-bottom: 30px;
margin-right: auto;
margin-left: auto;
}
.module2inside {
width: 90%;
height: 75%;
border-radius: 25px;
position: relative;
margin: 0 auto;
margin-top: 100px;
background-color: #FFF;
background-color: rgba(255, 255, 255, 0.8);
}