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
Related
I have a navbar with a few elements inside it and a button that escapes the navbar when i resize it. What CSS property should I style to keep the button in CSS to stop the button from escaping the navbar?
Attached is a JFiddle of an example of what happens:
https://jsfiddle.net/6Lx0hkfa/
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
float: left;
margin-left: 235px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
<a href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
</div>
</section>
I don't know what you are trying to achieve, but this one worked for me:
.green-button {
position: absolute;
}
This is a case where I would use float for simplicity. Note that this requires to put the link element on top of the rest of the wrapper's contents within the markup, but it's the most direct solution.
.green-button-link {
float: left;
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
margin-right: 20px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<a class="green-button-link" href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
</div>
</section>
check the snippet if its what you want.i added description add to ones I added to your code.
* {
margin: 0;
padding: 0;
}
body {
background: url(img/hero_bg.jpg) repeat-y center center fixed;
background size: 100%;
}
#header {
background-color: #1d7cb6;
display: block;
/* position: relative; */
color: white;
width: 100%;
height: 50px;
}
.wrapper {
text-align: center;
margin: 0px auto;
font-family: 'Raleway';
background: white;
z-index: 500;
vertical-align: middle;/* add */
position: relative;/* add */
padding-right: 200px;
}
.address {
display: inline-block;
width: 240px;
float: left;
display: inline-block;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.phone {
display: inline-block;
width: 100px;
float: left;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.email {
width: 150px;
float: left;
display: inline-block;
height: 100%;
padding: 20px 18px;
font-size: 10px;
}
a.social-btn {
width: 20px;
height: 20px;
margin-top: 13px;
float: left;
}
a.social-btn.fb {
background: url("img/facebook#2x.png") 0% 0%/ 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.tw {
background: url("img/twitter#2x.png") 0% 0% / 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.ig {
background: url("img/instagram#2x.png") 0% 0% / 20px 20px no-repeat;
}
a.social-btn.gp {
background: url("img/google#2x.png") 0% 0% / 20px 20px no-repeat;
}
section {
width: 900px;
margin: 0 auto;
}
section#header .wrapper button.green-button {
text-decoration: none;
font-family: 'Raleway';
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
/* float: left; */
right: 0;/* add */
position: absolute;/* add */
/* margin-left: 235px; */
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social"><a class="social-btn fb" href="http://facebook.com"></a></div>
<div class="social"><a class="social-btn tw" href="http://twitter.com"></a></div>
<div class="social"><a class="social-btn ig" href="http://instagram.com"></a></div>
<div class="social"><a class="social-btn gp" href="https://plus.google.com"></a></div>
<button class="green-button">Book Consultation</button>
</div>
</section>
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;
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 want to crate a search bar similar to that of https://www.zomato.com/ Exactly the same layout.
I am able create a floating search box on top of my background image. Not sure how to join various input fields and button side by side. This is the css I have as of now.
.search {
background:rgba(0,0,0,0.6);
border: 2px solid #414141;
border-radius: 5px;
padding: 10px;
}
header {
text-align: center;
color: #fff;
background-attachment: scroll;
background-image: url(../img/header-bg.jpg);
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
header .intro-text {
padding-top: 100px;
padding-bottom: 50px;
}
header .intro-text .intro-lead-in {
margin-bottom: 25px;
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 22px;
font-style: italic;
line-height: 22px;
}
As for the HTML:
<body id="page-top" class="index">
<!-- I have a navbar here -->
<!-- Header -->
<header>
<div class="intro-text">
<div class="intro-lead-in">Welcome To Our Studio!</div>
<div class="intro-heading">It's Nice To Meet You</div>
</div>
</header>
</body>
this is a fiddle which containes the style of the bar. I think it may help you.Main interest css is:
.header-link {
float: left;
height: 60px;
margin: 0px 7px auto 0px;
}
.header-link a {
line-height: 62px;
color:#FFF;
}
.header-hiring-btn {
background-color: #CB202D;
padding: 7px 8px 6px;
border-radius: 3px;
text-align: center;
color: #FFF !important;
transition: all 0.15s ease-out 0s;
margin-right: 6px;
}
.header {
box-sizing: border-box;
height: 60px;
position: absolute;
width: 100%;
z-index: 7;
background: none repeat scroll 0% 0% rgba(45, 45, 45, 0.8) !important;
color:#FFF;
}
.wrapper {
padding-left: 10px;
padding-right: 10px;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
max-width: 1140px;
}
.col-s-16 {
width: 100%;
box-sizing: border-box;
}
.logo-header {
width: 134px;
}
.logo {
display: inline-block;
float: left;
text-align: center;
height:46px;
}
.logo img {
width: 130px;
margin-top: 15px;
margin-left: -4px;
vertical-align: middle;
border: 0px none;
}
.header-navigation {
float: right;
display: inline-block;
height: 60px;
}
.login-navigation {
float: left;
}
.header-link {
float: left;
height: 60px;
margin: 0px 7px auto 0px;
}
.header-link a {
line-height: 62px;
color:#FFF;
}
.header-hiring-btn {
background-color: #CB202D;
padding: 7px 8px 6px;
border-radius: 3px;
text-align: center;
color: #FFF !important;
transition: all 0.15s ease-out 0s;
margin-right: 6px;
}
<header class="header header--fixed " id="header">
<div class="wrapper">
<div class="">
<div class="col-s-16"> <a class="logo logo--header" href="https://www.zomato.com" title="">
<img src="https://bzmtcdn-a.akamaihd.net/images/logo/zlogo.png" alt="">
</a>
<section class="header-navigation" id="header-navigation">
<section class="login-navigation" id="login-navigation">
<div class="header-link"> <a class="header-hiring-btn" href="https://www.zomato.com/careers" target="_blank">We're Hiring!</a>
</div> <span class="header-link">
Log in with Facebook
</span>
<span class="header-link mr0">
Log in
</span>
</section>
</section>
<!-- end header-navigation -->
</div>
<!-- end col-s-16 -->
</div>
<!-- end row -->
</div>
<!-- end wrapping class -->
</header>
The code seems to be based on bootstrap.css rebuild. Hope it helps.
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