I am trying to make the site look sorta like a desktop app...It will sorta resemble Program Manager from windows 3.1 except i need the icon groups to resize and tile depending on the number of icons i have and how much space they need. they don't need to take up 100% of the space inside, but at leastmake 2 - 3 columns and fill in the empty spaces AND they do n o need to be fixed widths.
What I am getting
What I am trying for
body
{
padding: 5px;
height: 99%;
margin: 0;
}
#mainWin
{
border-color: Black;
border-width: 1px;
border-style: Solid;
border-radius: 10px;
display: table;
width: 100%;
height: 100%;
}
#titleBar
{
background-color: blue;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
text-align: center;
height: 17px;
padding: 2px;
color: white;
display: table-cell;
width: 100%;
}
#Wrapper
{
border: solid black 1px;
display: table-row;
height: 100%;
padding:5px
}
#cellWrapper
{
padding: 5px;
display: table-cell;
}
#statusBar
{
background-color: lightgray;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
height: 17px;
padding: 2px 2px 2px 10px;
color: black;
display: table-cell;
}
.Window
{
border-color: Black;
border-width: 1px;
border-style: Solid;
border-radius: 10px;
display: table;
width: 45%;
margin:5px;
}
.titleWindow
{
background-color: blue;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
text-align: center;
height: 17px;
padding: 2px;
color: white;
display: table-cell;
width: 100%;
}
.wrapWindow
{
border: solid black 1px;
display: table-row;
height: 100%;
padding:5px
}
.wrapcellWindow
{
padding: 5px;
display: table-cell;
}
.stausWindow
{
background-color: lightgray;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
height: 17px;
padding: 2px 2px 2px 10px;
color: black;
display: table-cell;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/CSS/Service.css" rel="stylesheet" />
</head>
<body>
<form id="form1">
<div id="mainWin">
<div id="titleBar">
Consumer Lawncare Inventory Tracking System
</div>
<div id="Wrapper">
<div id="cellWrapper">
<div class="Window">
<div class="titleWindow">
Some Window
</div>
<div class="wrapWindow">
<div class="wrapcellWindow">
The inside it 1 <br />qweqweq<br />qweq<br />qwe<br />qweqw<br /><br />qweqweqwe<br />qweqweqwe<br />qweqweq<br />weqweq
</div>
</div>
<div class="stausWindow">
Some Status Bar
</div>
</div>
<div class="Window">
<div class="titleWindow">
Some Window
</div>
<div class="wrapWindow">
<div class="wrapcellWindow">
The inside it 2
</div>
</div>
<div class="stausWindow">
Some Status Bar
</div>
</div> <div class="Window">
<div class="titleWindow">
Some Window
</div>
<div class="wrapWindow">
<div class="wrapcellWindow">
The inside it 3
</div>
</div>
<div class="stausWindow">
Some Status Bar
</div>
</div>
</div>
</div>
<div id="statusBar">
Ready
</div>
<div>
</form>
</body>
</html>
add float: left; to .window
body
{
padding: 5px;
height: 99%;
margin: 0;
}
#mainWin
{
border-color: Black;
border-width: 1px;
border-style: Solid;
border-radius: 10px;
display: table;
width: 100%;
height: 100%;
}
#titleBar
{
background-color: blue;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
text-align: center;
height: 17px;
padding: 2px;
color: white;
display: table-cell;
width: 100%;
}
#Wrapper
{
border: solid black 1px;
display: table-row;
height: 100%;
padding:5px
}
#cellWrapper
{
padding: 5px;
display: table-cell;
}
#statusBar
{
background-color: lightgray;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
height: 17px;
padding: 2px 2px 2px 10px;
color: black;
display: table-cell;
}
.Window
{
border-color: Black;
border-width: 1px;
border-style: Solid;
border-radius: 10px;
display: table;
width: 45%;
margin:5px;
float: left; <!---here--->
}
.titleWindow
{
background-color: blue;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
text-align: center;
height: 17px;
padding: 2px;
color: white;
display: table-cell;
width: 100%;
}
.wrapWindow
{
border: solid black 1px;
display: table-row;
height: 100%;
padding:5px
}
.wrapcellWindow
{
padding: 5px;
display: table-cell;
}
.stausWindow
{
background-color: lightgray;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
height: 17px;
padding: 2px 2px 2px 10px;
color: black;
display: table-cell;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/CSS/Service.css" rel="stylesheet" />
</head>
<body>
<form id="form1">
<div id="mainWin">
<div id="titleBar">
Consumer Lawncare Inventory Tracking System
</div>
<div id="Wrapper">
<div id="cellWrapper">
<div class="Window">
<div class="titleWindow">
Some Window
</div>
<div class="wrapWindow">
<div class="wrapcellWindow">
The inside it 1 <br />qweqweq<br />qweq<br />qwe<br />qweqw<br /><br />qweqweqwe<br />qweqweqwe<br />qweqweq<br />weqweq
</div>
</div>
<div class="stausWindow">
Some Status Bar
</div>
</div>
<div class="Window">
<div class="titleWindow">
Some Window
</div>
<div class="wrapWindow">
<div class="wrapcellWindow">
The inside it 2
</div>
</div>
<div class="stausWindow">
Some Status Bar
</div>
</div> <div class="Window">
<div class="titleWindow">
Some Window
</div>
<div class="wrapWindow">
<div class="wrapcellWindow">
The inside it 3
</div>
</div>
<div class="stausWindow">
Some Status Bar
</div>
</div>
</div>
</div>
<div id="statusBar">
Ready
</div>
<div>
</form>
</body>
</html>
Added new class for right side containers
.Window
{
border-color: Black;
border-width: 1px;
border-style: Solid;
border-radius: 10px;
display: table;
float:left;
width: 45%;
margin:5px;
}
.Window-side
{
border-color: Black;
border-width: 1px;
border-style: Solid;
border-radius: 10px;
float:right;
width: 45%;
margin:5px;
}
Removed unnecessary table-cell property from stausWindow and wrap classes.
PREVIEW
http://output.jsbin.com/xalozotuxo/2/
CODE
http://output.jsbin.com/xalozotuxo/2/edit
Related
I tried searching the web for various answers and tried everything that solved other people problem, but my CSS just doesn't want to cooperate.
Here you can find a JSFiddle where I recreated the issue: I would like the side navigation to be visible on the black sections too.
HTML
<div class="sidenav">
Section 1
Section 2
Section 3
</div>
<div class="content">
<div>
<p>Some text<p>
</div>
<div class="blk">
<p>Some text<p>
</div>
<div>
<p>Some text<p>
</div>
</div>
CSS
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #0D0D0D;
border-radius: 0 5px 5px 0;
color: #0D0D0D;
mix-blend-mode: difference;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
did you want something like this?
html {
scroll-behavior: smooth;
background: #fff;
}
body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
background-color: #ffffff;
color: #0d0d0d;
}
/**********************************************/
.section {
width: 100vw;
max-width: 100%;
background-color: #ffffff;
text-align: center;
margin: 0;
padding: 15vh 0;
position: relative;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
/**********************************************/
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
mix-blend-mode: difference;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 0 5px 5px 0;
color: #fff;
background-color: #000;
}
.sidenav a:hover {
left: -2px;
}
.sidenav a.selected {
left: -2px;
color: #000;
background-color: #fff;
cursor: default;
}
<!doctype html>
<html>
<head></head>
<body>
<div class="sidenav">
Section 1
Another Section
Last One
</div>
<div class="content" onclick="closeMenu()">
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
</div>
</body>
</html>
you need it add mix-blend-mode to parent element like sidenav, than change backround, color and border-color in a
I am trying to create 3 div's inside parent, but no luck to any attempt i was made.. (that's what i am getting http://prnt.sc/bytx6l)
The idea is to create 3 div's 33% height (i dont want to use height by 137 pixels each).
The second is to have absolute centered any content inside 3 div's.
(that's what i want http://prnt.sc/bytzu1)
PS. I dont want to use just divs
What i am doing wrong? Any help?
body {background-color: #111;margin-left: 0px;margin-right: 0px;margin-bottom: 0px; color: #ffffff;}
#tbl {display: table; width:100%; margin-top:-4px;}
#row {display: table-row; width:100%;}
.title {font-weight:400; font-size: 170%; color:#ebebeb;}
#a {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
width:170px; text-align: center; }
#a-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
#a-left {height: 100%; width:100%; display:block; background-color: rgba(31,30,30,1);}
#empty {display: table-cell; background-color: #3a3a39; width:10px; text-align: center; }
#b {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;
width:170px; text-align: center; }
#b-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
#b-left {height: 100%; width:100% ;display:block; background-color: rgba(31,30,30,1);}
.j-left {border:1px solid #dc6210; margin:-1px 4px -1px -4px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.j-right {border:1px solid #dc6210; margin-right:2px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
#spacer {display: table-row; height: 6px;}
#block {width:100%; height: 33% /*137px*/;}
<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
<div id="tbl">
<div id="spacer"></div>
<div id="row">
<div id="a" class="title">1</div>
<div id="a-choose">
</div>
<div id="empty"></div>
<div id="b-choose">
</div>
<div id="b" class="title">2</div>
</div>
<div id="spacer"></div>
<div id="row">
<div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
<div id="a-choose" style="border:1px solid #dc6210;">
<div id="a-left">
<div id="block" style="">a</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
<div id="block" style="">a</div>
</div>
</div>
<div id="empty" style="background-color: transparent;"> </div>
<div id="b-choose" style="border:1px solid #dc6210;">
<div id="b-left">
<div id="block" style="">b</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
<div id="block" style="">b</div>
</div>
</div>
<div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
</div>
<div id="spacer"></div>
</div>
</div>
Because #a-choose and #a-left is relative position (by default), height: 33% of #block can not be calculated.
So, you should add style position: absolute to #a-left and position: relative to #a-choose.
This will be helpful.
body {
background-color: #111;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
color: #ffffff;
}
#tbl {
display: table;
width: 100%;
margin-top: -4px;
}
#row {
display: table-row;
width: 100%;
}
.title {
font-weight: 400;
font-size: 170%;
color: #ebebeb;
}
#a {
display: table-cell;
background-color: #3a3a39;
padding: 0px 0px 0px 6px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
width: 170px;
text-align: center;
}
#a-choose {
display: table-cell;
background-color: #3a3a39;
text-align: center;
width: 40%;
position: relative;
}
#a-left {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: rgba(31, 30, 30, 1);
}
#empty {
display: table-cell;
background-color: #3a3a39;
width: 10px;
text-align: center;
}
#b {
display: table-cell;
background-color: #3a3a39;
padding: 0px 0px 0px 6px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
width: 170px;
text-align: center;
}
#b-choose {
display: table-cell;
background-color: #3a3a39;
text-align: center;
width: 40%;
position: relative;
}
#b-left {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: rgba(31, 30, 30, 1);
}
.j-left {
border: 1px solid #dc6210;
margin: -1px 4px -1px -4px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.j-right {
border: 1px solid #dc6210;
margin-right: 2px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#spacer {
display: table-row;
height: 6px;
}
#block {
width: 100%;
height: 33% /*137px*/;
}
<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
<div id="tbl">
<div id="spacer"></div>
<div id="row">
<div id="a" class="title">1</div>
<div id="a-choose">
</div>
<div id="empty"></div>
<div id="b-choose">
</div>
<div id="b" class="title">2</div>
</div>
<div id="spacer"></div>
<div id="row">
<div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
<div id="a-choose" style="border:1px solid #dc6210;">
<div id="a-left">
<div id="block" style="">a</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
<div id="block" style="">a</div>
</div>
</div>
<div id="empty" style="background-color: transparent;"> </div>
<div id="b-choose" style="border:1px solid #dc6210;">
<div id="b-left">
<div id="block" style="">b</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
<div id="block" style="">b</div>
</div>
</div>
<div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
</div>
<div id="spacer"></div>
</div>
</div>
height is relative. Therefore all elements above it must also have a height element in them.
a-left
a-choose
row
tbl
Once you have a height: 100%; in all of these it works.
It is a common <h3> but the text appear on the right side of box, not extreme right but almost, something like that
h3:
.....................................................................................................................................................................
text appear here
.....................................................................................................................................................................
html file:
<div class="fifth">
<p>F-Village</p>
<div class="f-t">
<div class="f-t-col" id="f-t-c-photos">
<h2>Photos</h2>
<div class="big-photo">
<img src="./images/photo.jpg">
</div>
<div class="small-photo">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
</div>
</div>
<div class="f-t-col" id="f-t-c-material">
<h2>Material</h2>
<span>
...some text...
</span>
<p>
<img src="./images/history.jpg">
...some text...
</p>
</div>
<div class="f-t-col">
<h2>Words</h2>
<p class="words"><em>"...some text..."</em>
</p>
</div>
</div>
<div class="f-m">
<div class="f-m-l">
<h3>Video</h3> <!--The problem appear here-->
</div>
</div>
</div>
css file:
.fifth{
/* margin-top: 40px; */
width: 100%;
height: 700px;
color: white;
background-image: url('../images/ww-bg.jpg');
margin: auto;
}
.fifth .f-t-col{
color: white;
height: 265px;
width: 27%;
display: inline-block;
margin-left: 57px;
float: left;
}
#f-t-c-photos div{
float: left;
}
#f-t-c-photos .big-photo{
width: 190px;
}
#f-t-c-photos div:last-child{
width: 80px;
}
.f-t{
width: 1102px;
margin-left: 125px;
height: 240px;
border-bottom: 2px solid rgba(100, 100, 100, 0.9);
}
.small-photo img{
margin-bottom: 2px;
height: 55px;
width: 60px;
}
.small-photo img:first-child{
margin-top: 15px;
}
.big-photo img{
width: 165px;
height: 171px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.f-t-middle img{
width: 165px;
height: 170px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.words{
margin-top: 65px;
font-size: 17px;
}
.fifth h2{
color: #2e2e2e;
font-size: 17px;
color: whitesmoke;
padding: 0 0 10px 7px;
background: url('../images/ww-title.png') top right no-repeat;
margin-top: 5px;
height: 8px;
border-left: 3px solid red;
}
#f-t-c-material img{
float: left;
width: 215px;
}
#f-t-c-material span{
font-weight: 800;
font-size: 16px;
color: #00b3ff;
}
.f-m:before{
clear: both;
}
.f-m h3{
color: white;
}
You can align your text like this,
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
If the text is in a div that is floating right or margin right, you could change it to
float: left;
How to make the inside divs fit to the contents in the below html
I tried with display:inline-block but it moves the 2nd div to the bottom.
<div class="ms-table">
<div class="tableCol-75">
</div>
<div class="tableCol-25">
</div>
</div>
There you go:
.ms-table {
width: 80%;
}
.tableCol-70 {
float: left;
width: 70%;
border: 1px solid black;
margin-right: 10px;
}
.tableCol-25 {
float: left;
width: 25%;
border: 1px solid blue;
}
<div class="ms-table">
<div class="tableCol-70">
My name is abc and I live in ams.
</div>
<div class="tableCol-25">
I love junk food even though it is unhealthy
</div>
</div>
use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
display: table;
width: 100%;
height: 100px;
}
.table-cell{
display: table-cell;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div>
<div class="table-cell tableCol-25">25%</div>
</div>
use display: inline-block;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
width: 100%;
min-height: 100px;
}
.table-cell{
display: inline-block;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div><!--
--><div class="table-cell tableCol-25">25%</div>
</div>
Please check this image link :
http://postimg.org/image/4iooctxxt/
As you can see, I pointed out the 3 navigation breadcrumb.
How I am able to obtain this with CSS/CSS3 and HTML. How can this be done? If it's possible, how can it be done with a background image.
Try this HTML and CSS:
<html>
<head>
<style>
body
{
margin: auto;
}
#one, #two, #three
{
position: relative;
width: 200px;
height: 40px;
float: left;
background-color: #E6E6E6;
cursor: pointer;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
#one
{
border-left: 1px solid gray;
}
#one:after, #two:after, #three:after
{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #E6E6E6;
left: 100%;
top: 0px;
content: "";
z-index: 1;
}
#one:hover, #two:hover, #three:hover
{
background-color: #4DB84D;
}
#one:hover:after, #two:hover:after, #three:hover:after
{
border-left: 10px solid #4DB84D;
}
#circle, #text
{
float: left;
}
#circle
{
position: relative;
background-color: white;
color: black;
border-radius: 50%;
width: 21px;
height: 21px;
left: 15px;
top: 50%;
margin-top: -12px;
text-align: center;
border: 1px solid gray;
}
#text
{
position: relative;
left: 20px;
top: 50%;
color: black;
margin-top: -11px;
}
#one:hover #circle, #two:hover #circle, #three:hover #circle
{
background-color: #009900;
color: white;
}
#one:hover #text, #two:hover #text, #three:hover #text
{
color: black;
}
#navigation
{
padding: 40px;
position: absolute;
text-align: center;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 10px black;
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="navigation">
<div id="one">
<div id="circle">
<b>1</b>
</div>
<div id="text">
Connect with Facebook
</div>
</div>
<div id="two">
<div id="circle">
<b>2</b>
</div>
<div id="text">
Invite friends
</div>
</div>
<div id="three">
<div id="circle">
<b>3</b>
</div>
<div id="text">
Complete Profile
</div>
</div>
</div>
</body>
</html>
You can copy and paste this to see what happens in a new html document.
You can, of course, modify it to your needs.
EDIT: This is now a full template. To see, create a new html document, copy and paste the code, and open it.
include bootstrap file to your code. example:
<ol class="breadcrumb">
<li>Home</li>
<li>Library</li>
<li class="active">Data</li>
</ol>
it will create breadcrumb