I am a newbie in css and would like to create the following:
I therefore created the following code:
#outer{
height: 420px;
width: 550px;
background-color: green
}
#left_space{
float: left;
height: 100px;
width: 100px;
background-color: black;
}
#right_space{
float: right;
height: 50px;
width: 50px;
background-color: yellow;
}
<div id="outer">
<div id="left_space">
<div id="right_space">
</div>
</div>
</div>
This however gives me the following output:
Any feedback on what I should change?
I think you're looking for this:
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="outer">
<div id="left_space">
</div>
<div id="right_space">
</div>
</div>
</body>
</html>
CSS
#outer{
display: flex;
height: 420px;
width: 550px;
background-color: green
}
#left_space{
flex:1;
height: 100;
width: 100;
background-color: black;
margin: 10px 10px 300px 10px;
}
#right_space{
flex:1;
height: 100;
width: 100;
background-color: yellow;
margin: 10px 10px 300px 10px;
}
You can visit this link: http://flexboxfroggy.com/
to learn more about flexbox :)
https://jsfiddle.net/Liamm12/f69L8epL/1/
You can do that by using dispaly:flex in css
And if you want to make a spaces you can use margin
I'm seeing you have a border for the boxes in the screenshot above if you want to do that you need to use border: 1px solid #000; for each box
If you are looking to make the green background to be full page you can just change the width:100%; to 100% in #outer class
#outer{
height: 420px;
width: 550px;
background-color: green;
display: flex;
}
#left_space{
float: left;
height: 100px;
width: 100%;
background-color: black;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
}
#right_space{
float: right;
height: 100px;
width: 100%;
border: 3px solid #000;
background-color: yellow;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
}
<div id="outer">
<div id="left_space"></div>
<div id="right_space"></div>
</div>
Related
I have two rectangles with a background effect. On their own, the hover function works well and translates the top div up and to the right, however I soon as I put this code into a flex container, the hover does not work anymore. Anybody know why? Heres the code without the flex container:
body {
padding: 100px;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
z-index: -1;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
bottom: 8px;
left: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
<div class="box">
<div class="box2">
</div>
</div>
</body>
Add display: flex; to the body afterwards and the code wont work anymore.
Here is my try, I delete the z-index.
body {
padding: 100px;
margin: 0;
display: flex;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
left: 8px;
bottom: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>
How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
I want to create container that has two elements with colors given in the picture. The two are different divs and must stay side by side. How do I do it?
Here is my code:
<html>
<head>
<title>Testing</title>
<style>
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
</body>
</html>
You didn't set a height on the body of the document so setting a percentage on the divs won't do anything until you do. You also needed to float the sidenav div.
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
float: left
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
html,
body {
height: 100%;
}
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
Your code Updated!
body, html{
padding:0px;
margin:0px;
height:100%;
}
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
float: left;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
How about this:
<div class="container">
<div class="sidenav">
test
</div>
<div class="bgrnd">
test
</div>
</div>
CSS:
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
color: #fff;
float: left;
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
color: #fff;
float: right;
}
You can set .sidenav and .bgrnd to position: absolute; and position them accordingly from there. Also, you've set .container to: width: 50%; and height: 50%; which I presume you don't want.
.container {
height: 100%;
width: 100%;
}
.sidenav {
width: 25%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
}
.bgrnd {
width: 75%;
height: 100%;
position: absolute;
top: 0;
left: 25%;
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
</body>
</html>
How about using css-flex.
#main {
width: 100%;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
.div1 {
width: 25%;
height: 50px;
}
.div2 {
width: 75%;
height: 50px;
}
<div id="main">
<div class="div1" style="background-color:coral;">A</div>
<div class="div2" style="background-color:lightblue;">B</div>
</div>
I have searched a lot for this, I can not find an answer.
I want the div SubTopicInfo1 to appear when hovering over the div subTopicNav1. I need it to be only CSS.
Here is what I have:
Fiddle
HTML:
<div id="NavBar">
<div id="Mainbutton">
<center><h2 style="margin-top: 7px;"> Main </h2></center>
</div>
<div id="topic1button">
<center><h2 style="margin-top: 7px;"> Skiing </h2></center>
</div>
<div id="topic2button">
<center><h2 style="margin-top: 12px;"> Movies </h2></center>
</div>
</div>
<div id="Main">
<div id="IntroImage">
</div>
<div id="Title">
<h2 id="Titlemain"> TYLER POTTS</h2>
</div>
<div id="SubTopicNav">
<div id="subTopicNav1">
<center><h2>About Me</h2></center>
</div>
<div id="subTopicNav2">
<center><h2>Skiing</h2></center>
</div>
<div id="subTopicNav3">
<center><h2>Movies</h2></center>
</div>
</div>
<div id="SubTopicInfo">
<div id="SubTopicInfo1">
<h1> Test </h1>
</div>
<div id="SubTopicInfo2">
</div>
<div id="SubTopicInfo3">
</div>
</div>
<div id="Footer">
</div>
</div>
CSS:
#NavBar
{
width: 750px;
height: 40px;
background-color: white;
margin: 0 auto;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
}
#topic2button
{
width: 100px;
height: 45px;
margin-top:-50px;
margin-left: 215px;
float:left;
}
#topic2button:hover
{
background-color: #FFD640;
}
#Mainbutton
{
width: 100px;
height: 45px;
margin-top:;
margin-left: 315px;
float:left;
}
#Mainbutton:hover
{
background-color: #FFD640;
}
#topic1button
{
width: 100px;
height: 45px;
float: left;
}
#topic1button:hover
{
background-color: #FFD640;
}
#Main
{
width: 750px;
height: 1000px;
margin: 0 auto;
background-color: white;
}
#IntroImage
{
width: 750px;
height: 150px;
background-image:url("http://skiersedgeproshop.com/wp/wp-content/uploads/2013/11/snow-mountain-ski1.jpg")
}
#IntroImage:hover
{
opacity: 0.8;
}
#Title
{
width: 500px;
height: 40px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin:0 auto;
margin-top: 10px;
}
#Titlemain
{
margin-left: 170px;
margin-top: 6px;
}
#SubTopicNav
{
width: 150px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float:left;
}
#subTopicNav1
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav2
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav3
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav1:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav2:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav3:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#SubTopicInfo
{
width: 600px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float: left;
}
#SubTopicInfo1
{
display:none;
background-color: #FFD640;
}
#subTopicNav1:hover + #SubTopicInfo1
{
display: block;
}
Thanks.
You wont be able to do so with just CSS in your situation.
#subTopicNav1:hover + #SubTopicInfo1 {}
Works if #SubTopicInfi1 is next to (after #subTopicInfo1 closing tag) the container.
explained here:
How to affect other elements when a div is hovered
So you probably should look into a solution with Jquery/javascript!
Please try something like this:
(Hide the extra info panel by default, then make it visible on :hover like below)
<style>
.link {
display: block;
}
.link:hover p{
visibility: visible;
}
.info{
visibility: hidden;
}
</style>
<body>
<div class="link">
Text Here
<p class="info"> Info Here</p>
</div>
</body>
Here is the working Demo http://jsfiddle.net/H9fGP/1/
maybe its not the exact example. but I hope it helps :)
the main thing is that the sub info has absolute position
I rearanged the html and added some css.
.container
{
border-top: 5px solid #FFD640;
margin-top: 25px;
}
#SubTopicNav
{
position:relative;
}
#SubTopicNav > div > div
{
position:absolute;
left:200px;
top:0px;
display:none;
width: 600px;
height: 400px;
margin-top: 25px;
float: left;
}
#SubTopicInfo
{
display:none;
background-color: #FFD640;
}
#SubTopicNav > div:hover >div
{
display: block;
}
Here's what I tried: http://jsfiddle.net/tJxCD/6/
I want to create a layout like this:
But I don't know how to make the third rectangle on bottom of the second.
http://jsfiddle.net/kHT8z/1/
.wrapper {
overflow: hidden;
width: 500px
}
.top {
border: 3px solid #000;
width: 300px;
height: 170px;
margin: 5px;
float: left;
}
.right {
border: 3px solid #000;
width: 150px;
height: 75px;
margin: 5px;
float: left;
}
.bottom_small {
border: 3px solid #000;
float: left;
margin: 5px;
height: 50px;
width: 90px;
}
.bottom_big {
border: 3px solid #000;
float: left;
margin: 5px;
height: 75px;
width: 150px;
}
<div class="wrapper">
<div class="top"></div>
<div class="right"></div>
<div class="right"></div>
</div>
<div class="bottom_big"></div>
<div class="bottom_small"></div>
Hard to tell exactly what your after but your divs can share several css properties and you can use classes to specify size only. This JSFiddle represents your diagram.
Of course this layout is dependent on the width of the containing element, in this case the body, so you need to be aware of that.
HTML layout:
<html><body>
<div class="large"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="small"></div>
</body></html>
CSS:
div {
border: 1px solid gray;
margin: 5px 5px 0 0;
float: left;
}
div.large{
width: 300px;
height: 175px;
}
div.medium {
width: 150px;
height: 84px;
}
div.small{
width: 100px;
height: 44px;
}