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
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>
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'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.
.block {
display: inline-block;
border: 2px solid white;
padding: 5px;
margin-top: 1em;
}
.paddingbox{
padding: 60px;}
.boxed {
float: left;
color: white;
padding: 0 5px;
margin-top: -2em;
}
<div class="paddingbox"><center>
<div class="block">
<span class="boxed">
<h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
</div></center></div>
With backgroun color
without background color
I'm trying to achive is like this, but it have a back ground like in the picture above
I tried fieldset and this happen
The behavior can be achieved with a fieldset tag.
.block{
display: inline-block;
border: 2px solid white;
}
.title{
color: white;
font-size: 1.5em;
text-align: center;
}
body{
background: purple;
}
<fieldset class="block">
<legend class="title">
Services
</legend>
</fieldset>
I get help of positions for solve this question!
div {
position: relative;
width: 400px;
padding: 10px;
border: 1px solid;
}
span {
position: absolute;
top: -10px;
left: 40%;
background-color: #FFF;
font-weight: bold;
}
<div>
<span>About Us</span>
</div>
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
I'm trying to display a nice box layout for my home page where I can add pictures or words to each box. I approached this idea with div's. All was going well until I tried to insert text into one of the middle div's (boxes). I'd love a hand because when I do that it screws up my whole orientation.
Here is my HTML:
<!DOCTYPE html>
<html lang:en>
<head>
<title>MitoGraphics | Branding and Promotions</title>
<link rel="stylesheet" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans|Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<section id="navbar">
<ul>
<li>The Loop</li>
<li>Working With Mito</li>
<li>Promotional Solutions</li>
<li>Branding Elements</li>
</ul>
</section>
</div>
<div id="box_one"></div>
<div id="box_two"></div>
<div id="box_three"></div>
<div id="box_four"></div>
<div id="box_five"></div>
<div id="box_six"></div>
<div id="box_seven">
<P>Branding Elements</P>
<div id="box_eight"></div>
<div id="box_nine"></div>
<div id="box_ten"></div>
<div id="box_eleven"></div>
<div id="box_twelve"></div>
<div id="box_thirteen"></div>
<div id="box_fourteen"></div>
<div id="box_fifteen"></div>
<div></div>
<footer></footer>
</body>
</html>
Here is my CSS:
/****************************
NAVBAR
****************************/
#navbar {
background-color: black;
height:40px;
width:1454px;
margin-left: -30px;
margin-top: -16px;
border-bottom: 1px solid #ff0000;
}
#navbar ul {
text-decoration: none;
list-style: none;
}
#navbar ul li {
display:inline-block;
float:right;
color:white;
padding-right: 190px;
padding-top: 10px;
font-family: 'Comfortaa', cursive;
font-weight: 10;
}
#navbar ul a li:hover {
color:#000;
text-shadow: 0.1em 0.1em #fff;
font-size: 1.1em;
margin-top:-1px;
}
/****************************
HOME PAGE LAYOUT
****************************/
#box_one {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -8px;
max-width: 100%
}
#box_two {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_three {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_four {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_five {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_six {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -8px;
max-width: 100%;
}
#box_seven {
height:285px;
width:285px;
border: 1px solid black;
background-color: #6666cc;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
.elementbox {
}
#box_eight {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_nine {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_ten {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_eleven {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -8px;
}
#box_twelve {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}
#box_thirteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}
#box_fourteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}
#box_fifteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
Why not try some responsive CSS.
Heres an example http://jsfiddle.net/bluey/72pN4/
Obviously styling would need to be added to each section, but the desired layout should be what you require, and be more stable on more devices.
Example HTML
<div>
Header
</div>
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<div>
footer
</div>
Example CSS
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 100%;
}
}
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
For more info and more CSS for various grid capabilities visit: http://www.responsivegridsystem.com/
Add vertical-align: top to your inline-elements and it should be fixed. You should also consider using a class on all of your 'boxes' so that you only have to declare the width, height, background, border, and display one time. See this reduced test case codepen http://codepen.io/the_ruther4d/pen/e1703f2d34dc7ece9cccaa8e4d360c51/