I was wanting to make a website, just to see if I like doing it and how it would turn out, but I can't seem to get this part done. I want the "informatie" div to be next to the "vertmenu" div and make it fill up the white part and I want the "vertmenu" div to extend till the "voetregel" div. I have no idea how to get this done and I have already tried changing the width and height to percentages, changing the positions to absolute/relative and adding a float property, but I couldn't make it how I wanted it to be. So my question in short, how can I make the "informatie" div next to the "vertmenu" div and make it fill up the white part and get the "vertmenu" div to extend till the "voetregel" div.
body {
margin:0;
padding:0;
background-color:#ffffff;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
#hormenu {
background-color: rgba(0, 0, 0, 0.5);
position:relative;
text-align: center;
width:100%;
height:15%;
line-height:50px;
font-size:100%;
}
#vertmenu {
background-color: rgba(255,0,0, 0.3);
position:relative;
height:100px;
top:15%;
width:15%;
margin:0px 0px 0px 0px;
padding:3px;
overflow:hidden;
}
#informatie {
background-color: rgba(0,0,255, 0.3);
position:relative;
float:left;
height:100%;
width:85%;
left: calc(15% + 6px);
margin:0px 0px 0px 0px;
padding:3px;
overflow:hidden;
}
#voetregel {
background-color: rgba(0,255,0, 0.3);
position:fixed;
width:100%;
height:100px;
top:auto;
right:0;
bottom:0;
margin-left:10px
}
a.hormenu_item {
margin: 10px;
transition: color 0.3s, text-shadow 0.3s, text-decoration-line 0.3s, font 0.3s ease-in-out;
}
a:link.hormenu_item {
color: white;
text-decoration: none;
}
a:visited.hormenu_item {
color: white;
text-decoration: none;
}
a:hover.hormenu_item {
color: gold;
text-decoration:none;
text-shadow: 0px 0px 7px gold;
font-size: 30px;
}
#informatie h1, #vertmenu h1, #voetregel h2 {
color:#FF0000;
font-size:20px;
}
<body>
<div id="hormenu">
Home
Biografie
Features
Contact
</div>
<div id="vertmenu">
<h1>vertmenu</h1>
</div>
<div id="informatie">
<h1>informatie</h1>
</div>
<div id="voetregel">
<h2>voetregel</h2>
</div>
</body>
apply float:left; css in #vertmenu and #informatie
and dont use position:fixed; in #voetregel use clear:both; it will clear the float effect of above 2 div tags
position:fixed; is used for creating menubar in web site so that even with the scrolling that menubar stays at same place
You can add display: inline-block to make them next to each other. Remove position:fixed from #voetregel too.
#vertmenu {
background-color: rgba(255,0,0, 0.3);
width:15%;
margin:0px 0px 0px 0px;
}
#informatie {
background-color: rgba(0,0,255, 0.3);
width:85%;
margin:0px 0px 0px 0px;
}
#voetregel {
background-color: rgba(0,255,0, 0.3);
width:100%;
height:200px;
}
#vertmenu,
#informatie {
display: inline-block;
float: left;
}
#informatie h1,
#vertmenu h1,
#voetregel h2 {
color:#FF0000;
font-size:20px;
}
<div id="vertmenu">
<h1>vertmenu</h1>
</div>
<div id="informatie">
<h1>informatie</h1>
</div>
<div id="voetregel">
<h2>voetregel</h2>
</div>
Related
#c_w {background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;}
#c_w:hover {display:block;}
.color_td {height:27px;
width:27px;
margin:2px;
border-radius:5px;}
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
<div id="c_w">White</div>
i wanna make #c_w box showing when i hover .color_td box.
why is it not work???
any help will be so appreciated.
Thank you
If you remove the a tag as .color_td's parent, then you access #c_w like this-
.color_td:hover + #c_w {
display:block
}
#c_w {
background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;
}
.color_td {
height:27px;
width:27px;
margin:2px;
border-radius:5px;
}
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
<div id="c_w">White</div>
Or if you want to keep the a tag as .color_td's parent, then you could achieve the desired effect with Javascript-
let color_td = document.querySelector('.color_td');
let c_w = document.querySelector('#c_w');
// listen for 'mouseenter' event
color_td.addEventListener('mouseenter',()=> {
c_w.style.display = "block"
});
// listern for 'mouseleave' event
color_td.addEventListener('mouseleave', ()=> {
c_w.style.display = "none"
});
#c_w {background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;}
.color_td {height:27px;
width:27px;
margin:2px;
border-radius:5px;}
<a href="#">
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
</a>
<div id="c_w">White</div>
your doing wrong here,
#c_w {background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;} /* <- */
#c_w:hover {display:block;} /* <- */
As, You cant hover on a hidden element
instead you wanna do something like this,
1. keeping ur html un-touched
#c_w {
background-color: rgba(0, 0, 0, 0.5);
width: 55px;
height: 25px;
color: white;
text-align: center;
padding-top: 3px;
position: absolute;
margin-top: 38px;
margin-left: -12px;
display: none;
}
a:hover + #c_w { /* ModifiedCss */
display: block;
}
.color_td {
height: 27px;
width: 27px;
margin: 2px;
border-radius: 5px;
}
<a href="#">
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
</a>
<div id="c_w">White</div>
2. move the #c_w under .color_td
#c_w {
background-color: rgba(0, 0, 0, 0.5);
width: 55px;
height: 25px;
color: white;
text-align: center;
padding-top: 3px;
position: absolute;
margin-top: 38px;
margin-left: -12px;
display: none;
}
.color_td:hover #c_w { /* ModifiedCss */
display: block;
}
.color_td {
height: 27px;
width: 27px;
margin: 2px;
border-radius: 5px;
}
<a href="#">
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2">
<div id="c_w">White</div> <!-- ModifiedHtml -->
</div>
</a>
Here, i thing is, you gotta, wrap the hidden element in something that visible (hoverable), and edit style properties of that targted hidden element by making it child or sibling or soemthing like that...
I just need to add a overlay effect on clicking the three dots. It should display a white background on top of that, transition should be from bottom.
I have attached the codepen link.
To preview your work...
Use this codepen link....
https://codepen.io/subin_s/pen/NVgLgx
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<div class="projects">
<div class="image">
</div>
<div class="words">
<h2>BlogSpire</h2>
<i class="fas fa-ellipsis-v" id="moreinfo"></i>
<div class="clearfix"></div>
<p>Blogging web app created for the Engineering team at WeSpire.</p>
</div>
</div>
CSS
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:'Roboto';
}
.projects {
position:relative;
margin:2rem;
width: 335px;
height:400px;
background-color:#fff;
border-radius:5px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.image {
position:absolute;
width:100%;
height:240px;
background-color:skyblue;
}
.words {
position:absolute;
top:240px;
padding:20px 20px 30px;
color:#333;
}
.words i {
position:absolute;
top:27px;
right:40px;
cursor:pointer;
}
.words h2 {
color:#008073;
}
.words p {
padding:13px 0 0;
}
JS
document.getElementById('moreinfo').addEventListener('click', projectInfo);
function projectInfo() {
}
You can add the overlay by adding a element commonly a div inside of your card, and setting its position to absolute. You can position it around using the top, left, bottom or right attributes.
To create the animation of the overlay comming from the bottom, you can create a simple css transition, changing the values of the top css attribute.
I've edited your code to create a small example on top of it. I hope it helps you.
const moreInfoElement = document.getElementById('moreinfo');
const overlay = document.getElementById('overlay');
moreInfoElement.addEventListener('click', projectInfo);
function projectInfo() {
overlay.classList.add('active-overlay');
setTimeout(() => {
overlay.classList.remove('active-overlay');
}, 3000);
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:'Roboto';
}
.projects {
position:relative;
margin:2rem;
width: 335px;
height:400px;
background-color:#fff;
border-radius:5px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
overflow: hidden;
}
.image {
position:absolute;
width:100%;
height:240px;
background-color:skyblue;
}
.words {
position:absolute;
top:240px;
padding:20px 20px 30px;
color:#333;
}
.words i {
position:absolute;
top:27px;
right:40px;
cursor:pointer;
}
.words h2 {
color:#008073;
}
.words p {
padding:13px 0 0;
}
.overlay{
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(255, 255, 255, 0.9);
z-index: 1;
transition: all .6s;
}
.active-overlay{
top: 0;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="projects">
<div id="overlay" class="overlay">
Some text
</div>
<div class="image">
</div>
<div class="words">
<h2>BlogSpire</h2>
<i class="fas fa-ellipsis-v" id="moreinfo"></i>
<div class="clearfix"></div>
<p>Blogging web app created for the Engineering team at WeSpire.</p>
</div>
</div>
I need to display two divs one next to another on the same line, but I can't understand why the second one is slightly lower than the first one.
<div class="cont-title">
<div class="triang-header"></div>
<div class="h2-stripe">
<h2 itemprop="name">
Title
</h2>
</div>
</div>
This is the css:
.cont-title{
margin-right: -7px;
min-width: 90%;
max-width: 100%;
height:51px;
float:right;
text-align:right;
white-space: nowrap;
}
.triang-header{
position:relative;
width:39px;
height:38px;
display:inline-block;
background:url('../images/titlebar.png') no-repeat top left;
}
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
What am I doing wrong?
I think you did not count the line-height,
should be like this the style for .h2-stripe:
.h2-stripe{
position:relative;
line-height: 23px; // <----
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
box-shadow: 2px 3px 5px 0 #555;
}
here it is an example with line-height:23px for .h2-stripe: http://jsfiddle.net/6a0ga3uq/
you misspelled your class
.h2-strispe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
should be
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
The margin of your h2 element causes the second div to shift down. Also, you should vertical-align inline-block elements. See this updated snippet (also with corrected class name in CSS).
.cont-title{
margin-right: -7px;
min-width: 90%;
max-width: 100%;
height:51px;
float:right;
text-align:right;
white-space: nowrap;
}
.cont-title > * {
vertical-align: middle;
}
.triang-header{
position:relative;
width:39px;
height:38px;
display:inline-block;
background:url('http://placehold.it/39x38') no-repeat top left;
margin: 0;
}
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
h2 {
margin:0;
}
<div class="cont-title">
<div class="triang-header"></div><div class="h2-stripe"><h2 itemprop="name">
Title
</h2>
</div>
</div>
In the second div, you have line height and lot of other stuff. So other elements can extend your div. If you want your div to be the same size regardless to its other elements you should change display attribute like this
.h2-strispe{
position:relative;
z-index:10;
display:inline-block;
box-sizing:border-box;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
You can see i added box-sizing to border-box and that will save the position of your div no matter what you do to inner elements
CSS
#articlebottom {
width: 980px;
height: 250px;
}
.products{
width:980px;
margin:0px auto;
padding-left:20px;
}
#articlebottom .imgWrap {
width:295px;
height:200px;
position:relative;
float:left;
margin:10px;
background:#333;
}
#articlebottom .imgWrap img {
position:absolute;
left:5px;
top:5px;
width:285px;
height:190px;
}
#articlebottom .imgDescription1 {
position: absolute;
left:0;
letter-spacing: 2px;
background-color: rgba(255, 250, 250, 0.2);
color: rgba(255, 250, 250, 0.2);
font-weight:bold;
font-size:18pt;
line-height: 50px;
width:100%;
height:50px;
opacity: 0;
text-align:center;
text-transform:uppercase;
transition:opacity 500ms ease-in-out, color 20ms ease-in-out,height 500ms ease-in-out;
}
#articlebottom .imgWrap:hover .imgDescription1 {
opacity: 1;
height:200px;
line-height:200px;
color: #1b9bff;
}
HTML
<article id="articlebottom">
<div class="products">
<div class="imgWrap">
<a href="Products/Camphor.aspx" target="_blank"><img src="Images/Camphor_b.JPG" alt="polaroid" />
<p class="imgDescription1">Camphor</p></a>
</div>
</div>
</article>
Fiddle
What I'm having:
The Text appears on the center when i hover and going to top after hover
What i need:
When i hover on the image the appropriate text shoould appear on the center and also need to disappear on center of the image itself
Updated Fiddle
The crucial part is moving
height:200px;
line-height:200px;
color: #1b9bff;
From:
#articlebottom .imgWrap:hover .imgDescription1
To:
#articlebottom .imgDescription1
Otherwise the position of the text is set to a default/inherited value and only set to centred on hover, hence why the hover state sees it jump.
I have a <div> and a <button>, but for some reason, the button will not stay in the div.
I have tried to clear the div, as well as float: left but it has not helped.
I have also added padding to the bottom of the div, but I don't think that is the solution.
My code:
<div class="service-text text2">
<p>
this is some text
</p>
<i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More
</div>
JSFiddle
Usually parent div set its height auto to its child heights, but padding you assigned to button-learn is causing the issue.
you just need to set display:inline-block; on your anchor tag
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
.button-learn {
margin: 2px;
position:relative;
text-align: center;
border-radius:4px;
text-decoration: none;
font-family:'PT Sans',helvetica;
background: #69c773;
display:inline-block;
font-size: 17px !important;
padding: 10px 10px 10px 10px;
color: #FFF;
}
Here is fiddle
Floating both the elements seems to do what you want, unless you want the button to be next to the text.
add these:
.service-text {
float: left;
}
.button-learn {
float:left;
}
or check: http://jsfiddle.net/Milanzor/Qt9u3/4/
working demo
Set document height first:
body, html {
height:100%
}
then set .service-text height:
.service-text {
margin:0;
width:100%;
height:100%; /* change this from auto */
display:block;
background-color:#34495e;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
and it works!! :)
EDIT
div inside another div
HTML
<div id="parent">
<div class="service-text text2">
<p>this is some text</p>
<i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More
CSS
body, html {
height:100%;
margin:0;
padding:0;
}
#parent {
height:100%; /* remove this and everything falls out of place*/
}
.service-text {
margin:0;
width:100%;
height:100%;
display:block;
background-color:#34495e;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
.service p {
margin:0;
padding-top:5px;
padding-bottom:10px;
padding-right:7px;
padding-left:15px;
font-family:'PT Sans', 'Arial', 'Open Sans';
font-size:14px;
line-height:22px;
color:white;
display: block;
position:relative;
}
.button-learn {
margin: auto;
position:relative;
text-align: center;
border-radius:4px;
text-decoration: none;
font-family:'PT Sans', helvetica;
background: #69c773;
font-size: 17px !important;
padding: 10px 10px 10px 10px;
color: #FFF;
}
.button-learn:hover {
color: #51A65F;
}
</div>
</div>
Explaination : you just need to set the height of the div always, once you set it.....you'll get the desired view!