I am trying to add section seperator using border as shown in the image. Any help for how to do this is much appreciable. I dont know is there any materialized component already available for the same or not?
Myfiddle : https://jsfiddle.net/fcvr8oxq/
Image demo :
<body>
<main>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="nav-mobile" class="full side-nav">
<li>John Daglas
<ul class="collection">
<li class="collection-item avatar">
<img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
</li>
</ul>
</li>
<li>Follower analysis</li>
<li>Tweet analysis</li>
<li>Retweet analysis</li>
<li>Tweet analysis</li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
<div class="row scrollspy grey lighten-4">
<div class="container">
<div class="row">
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text">Tweets
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<i class="material-icons">repeat</i>
<span class="white-text">Retweet
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Favourite
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Followers
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Sentiment
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Social score
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s6 m6">
<div class="card-panel teal">
<span class="white-text">Sentiment analysis graph for tweets
</span>
</div>
</div>
<div class="col s6 m6">
<div class="card-panel light-blue accent-4">
<span class="white-text">Sentiment analysis donuts graph for all hastags
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12">
<div class="card-panel teal">
<span class="white-text">Tags analysis.
</span>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
</body>
please try this one:
.row
{
border:5px solid #42a5f5;
margin-top:10px;
}
DEMO
You can use the following HTML:
<div>
<h1><span>Div title</span></h1>
</div>
With the following CSS:
div{
border: 1px solid #000;
width: 200px;
height: 200px;
}
div h1{
text-align: center;
margin-top: -10px;
height: 20px;
line-height: 20px;
font-size: 15px;
}
div h1 span{
background-color: white;
}
DEMO
Please Try this one:
img {
outline: 1px solid white;
outline-offset: -4px;
}
DEMO
IE9&10 do not support the outline-offset property, but otherwise support is good:http://caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
http://jsfiddle.net/ivinraj/2nj1qn3h/1/
Related
To change the color like this:
I don't seem to find how to do it anywhere.
If you want to apply the same color style to all of your cards you can do something like this:
.ui.card,
.ui.cards>.card {
background-color: #D9499A;
}
The card is divided into 3 div elements: .image, .content, and .extra.content. If you want to change the colors individually do something like:
.ui.card>.content,
.ui.cards>.card>.content {
background-color: #D9499A;
}
.ui.card>.content.extra,
.ui.cards>.card>.content.extra {
background-color: #D9499A;
}
Check this example Fiddle out:
HTML
<div class="ui card kristy">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<a class="header">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Kristy is an art director living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 22 Friends
</a>
</div>
</div>
<div class="ui card matthew">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
</div>
<div class="content">
<a class="header">Matthew</a>
<div class="meta">
<span class="date">Joined in 2015</span>
</div>
<div class="description">
Matthew is an in interior designer living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 47 Friends
</a>
</div>
</div>
<div class="ui card molly">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/molly.png">
</div>
<div class="content">
<a class="header">Molly</a>
<div class="meta">
<span class="date">Joined in 2010</span>
</div>
<div class="description">
Molly is a personal assistant living in Paris.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 12 Friends
</a>
</div>
</div>
CSS
.ui.card {
display: inline-block;
margin: 10px;
}
.ui.card,
.ui.cards>.card {
background-color: #5C5D5F;
color: white;
}
.ui.card.matthew {
background-color: #2B4B64;
}
.ui.card.kristy {
background-color: #253E54;
}
.ui.card>.content>a.header,
.ui.cards>.card>.content>a.header,
.ui.card .meta,
.ui.cards>.card .meta,
.ui.card>.content>.description,
.ui.cards>.card>.content>.description,
.ui.card>.extra a:not(.ui),
.ui.cards>.card>.extra a:not(.ui) {
color: white;
}
You can give an id for the object and then set the color with CSS, eg:
#header-blue{
background-color: #1A3E6E;
}
i am new to ARIA tags. Kindly excuse if i am stupid.
What i want is a custom drop down to be visible when i click the down arrow.
The problem is the popup comes write below the icon as shown in this pic.
CSS
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But I need it like this
I know I can achieve it with this code
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row dropdown" id="dropdownrow">
<div class="dropdown-toggle" style="color: white; font-size: 35px; width:210px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div id="dropdownlabel" style="color: white; font-size: 35px;display: inline-block;width:180px;font-family:'Roboto-Regular',san-serif">
Benarsi Das
</div>
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But this makes the dropdown(popup) visible even the text is clicked. I want it only to be visible only when the dropdown icon is clicked.
Any help would be greatly appreciated.
In your stylesheet, add the declaration
transform: translate(-60px, 26px);
to the style rules for .bkcolor.
N.B. You can alter the x-translate (-60px) and the y-translate (26px) to achieve the exact positioning that you want.
Working Example:
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
transform: translate(-60px, 26px);
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
I have something like this and I need to skip first element "comment-id-1" to remove border-style on the next element "border-style". I tried to write, but it doesn't work. Is there some regex rules for css? How can I do this?
.comments-list:not(:first-child)
<div id="comments-list">
<ol class="comments-tree-listan">
<div id="comment-id-1">
<div class="border-style">
<div class="com_info">
<span class="name">Fedor</span></div>
<div class="text">
<div id="comm-id-1"><p>Some text</p></div></div>
</div>
</div>
<div id="comment-id-2">
<div class="border-style">
<div class="com_info">
<span class="name">Validim Puten</span></div>
<div class="text">
<div id="comm-id-2"><p>Text</p></div></div>
</div>
</div>
<div id="comment-id-3">...
</ol>
</div>
[id^="comment-id-"] will give you all id start with the string.
> will get the immediate child after (only one level down)
div[id^="comment-id-"]>.border-style {
border: 1px solid red;
}
<div id="comments-list">
<ol class="comments-tree-listan">
<div id="comment-id-1">
<div class="border-style">
<div class="com_info">
<span class="name">Fedor</span></div>
<div class="text">
<div id="comm-id-1"><p>Some text</p></div></div>
</div>
</div>
<div id="comment-id-2">
<div class="border-style">
<div class="com_info">
<span class="name">Validim Puten</span></div>
<div class="text">
<div id="comm-id-2"><p>Text</p></div></div>
</div>
</div>
<div id="comment-id-3">...
</ol>
</div>
my flipclock animation works well in Firefox & IE but doesn't work in Google Chrome.
HTML
<div id="tempFlipClock" data-position="LeftContent">
<div id="FlipClockContainer" class="animated" data-dbitm='ClockContainer'>
<div class="container">
<ul class="flip hoursPlay">
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
</ul>
<ul class="flip minutesPlay">
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
</ul>
<ul class="flip smallsize dnPlay">
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
</ul>
<div class="clsServerDate">
<span id="serverdate"></span>
</div>
</div>
</div>
</div>
i put the fork here ... [PS]:http://codepen.io/anon/pen/WQxREV
it work on firefox but not chrome... in chrome only display white page.. this happend after the chrome update that disable flash..
It seems like your perspective is the main culprit here. I've made changes in your CSS as:
old CSS:
ul.flip li a {
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
}
new CSS:
ul.flip li a {
height: 100%;
width: 100%;
display: inline-block;
/* -webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px; */
}
As you can see I've comment-out your perspective for ul.flip li a now its working fine for both Chrome as well as FF.
Hope it will do the trick for you :)
I have problem with 3 object in one row there is text between two images on the desktop it show this http://www.part.lt/img/d3aabc6dea1cafd939b9cda8152403a5633.jpg on mobile looks great, i need solution any help ?
my code:
<div class="pull-left hidden-xs">
<img src="images/head_window.png" class="img-responsive">
</div>
<div class="header_title">
<h2 class="align-right">åpnes i<br/>
eller<br/>
åpne ut
</h2>
</div>
<div class="pull-right hidden-xs">
<img src="images/head_window2.png" class="img-responsive">
</div>
css
.header_title {
margin:90px auto 0px;
width: 32%;
text-align: center;
padding: 0px;
}
.header_title h2 {
font-family: 'Arimo', sans-serif;
font-size: 73px;
color: #004657;
}
Try to add columns since you using boostrap.
<div class="col-sm-5">
<div class="pull-left hidden-xs">
<img src="images/head_window.png" class="img-responsive">
</div>
</div>
<div class="col-sm-2">
<div class="header_title">
<h2 class="align-right">åpnes eller åpne ut</h2>
</div>
</div>
<div class="col-sm-5">
<div class="pull-right hidden-xs">
<img src="images/head_window2.png" class="img-responsive">
</div>
</div>