I want to place a white border around the slider like this >> .
I tried using .coin-slider img { border: 2px solid white;} , but it didn't work.
Coin-slider link >> Coin-slider official site
HTML:
<div id='coin-slider'>
<img src='images/slideshow1x.png' />
<span>
Description for img01
</span>
<img src='images/slideshow2x.jpg' />
<span>
Description for img01
</span>
<img src='images/slideshow3x.jpg' />
<span>
Description for img01
</span>
<img src='images/slideshow4x.jpg' />
<span>
Description for img01
</span>
</div>
CSS:
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider img { border: 2px solid white;}
/*.coin-slider a{ text-decoration: none; outline: none; border: none; } */
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
/*.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }*/
.cs-active { background-color: #B8C4CF; color: #FFFFFF;}
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
In your HTML, coin-slider is the id of the div, and not class, whereas in your CSS you are referring to .coin-slider everywhere.
Change <div id='coin-slider'> to <div class='coin-slider'> in your HTML and everything should work fine.
Here is a demo.
White Border for the Coin-Slider can be set by adding the style
border: 2px solid white;
to the Cascading Stylesheet 'coin-slider-style.css' as
.coin-slider {overflow:hidden; zoom:1; position:relative; border:2px solid white;}
Related
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'm trying to change a cursor property from :default to :se-resize when hover on the border of a box only. Is there any way how I can do it in in CSS? I need options only in CSS please!
The HTML:
<textarea placeholder="..."></textarea>
The CSS:
textarea {
width: 510px;
height: 140px;
padding: 5px 0;
border:2px solid #dddddd;
outline-style:none;
color: #777777;
}
Here, try this with a wrapping DIV that has the CSS for the hover.
.border {
background-color: red;
cursor: e-resize;
padding: 5px;
}
.contents {
background-color: white;
cursor: default;
height: 100px;
line-height: 100px;
text-align: center;
}
<div class="border">
<div class="contents">
Hello World
</div>
</div>
Also here: https://jsfiddle.net/vyk4c21b/9/
I would like to make number 1 to have blue background and red text but this code doesn't work. What am I missing?
Thanks!
#testtest
{
background-color: white;
border-width: 1px;
border-style: solid;
border-color: #DDDDDD;
text-align: center;
line-height:35px;
}
#testtest span.saa
{
color: yellow;
background.color: #F0F0FF;
padding: 8.25px;
margin-left: 5px;
}
#testtest span.sss
{
color: red;
background-color: blue;
padding: 8.25px;
margin-left: 5px;
}
<div id="testtest" >
<span class="sss">1</span>
<span class="saa">2</span>
<span class="saa">3</span>
<span class="saa">26</span>
<span class="saa">-></span>
</div>
You have an unwanted colon after span.sss! try:
#testtest span.sss
{
color: red;
background: blue;
padding: 8.25px;
margin-left: 5px;
}
I have an ul/li where each li contains 2 div. One of the div ("category") can content text that can wrap on multiple lines. I'm trying to get the other div ("abbr") of that li to have the same height. Since the parent li is stretching, I tried height: 100% on the abbr but it doesn't stretch it to.
Any idea?
<ul>
<li>
<div class="abbr">ABC</div>
<div class="category">Long or short</div>
</li>
<li>
<div class="abbr">ABC</div>
<div class="category">Very long or very shortshort</div>
</li>
</ul>
And the css I used:
ul {
list-style: none;
width: 200px;
}
div.abbr {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}
Here's a fiddle if you wanna play with it: http://jsfiddle.net/P6UzU/
You can use CSS tables as Danield say above, or you can simulate the effect you want:
http://jsfiddle.net/P6UzU/3/
I put the blue background and the red border in the li tag, and a white background in the "category" class. Also, change the whole border in "category" to a border-left.
You could use css tables and remove the float:left on the first div
FIDDLE
CSS
ul {
list-style: none;
width: 200px;
display:table; /* <--- */
}
li
{
display:table-row; /* <--- */
}
div.abbr {
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
display:table-cell; /* <--- */
}
div.category {
/*float: left;*/ /* <--- removed */
padding: 16px;
border: 1px solid red;
margin-left:64px;
display:table-cell; /* <--- */
}
As others have said,
li a { display: block; }
should achieve what you’re after. But you must also remove any padding from the <li> and set it on the <a> instead. For example:
li { padding: 0; }
li a { display: block; padding: 1em; }
guys final i get the answer plz chk this....
html code:--
<ul>
<li>
<div class="abbr">ABC</div>
<div class="category">Long or short</div>
</li>
<li>
<div class="abbr1">ABC</div>
<div class="category1">Very long or very shortshort & Very long or very shortshort</div>
</li>
</ul>
CSS:--
ul {
list-style: none;
width: 200px;
}
div.abbr {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}
div.abbr1 {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category1 {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}
Script:--
$(document).ready(function() {
var rightHeight = $('.category1').height();
$('.abbr1').css({'height':rightHeight});
and to this thing work out you have to add jquery/1.8.2..
Demo:--Fiddle
I am trying to work out how I can put a border around my page. Here is my html and css:
<html>
<head>
<title>Royal Aura club</title>
<link rel="stylesheet" type="text/css" href="restyle.css" / >
</head>
<body>
<main id="main">
<div id="header">
<h1> Royal Aura club</h1>
<div id="nav">
<div class="navitem">Home</div>
<div class="navitem">Restaurant </div>
<div class="navitem">Gallery</div>
<div class="navitem">Guest list</div>
</div> <div class="navitem">Job Vancancies</div>
<div id="content">
<div id="textblock">
<h2>Why Royal Aura?</h2>
<p>
Royal Aura club and restaurant is located in Mayfair just a walk away from the Ritz.
We will guarantee you will have a ball of a time with our brilliant DJ playing the tunes while your sipping cocktails away and dancing the night away.
<p>
Aura is a glamorous and sophisticated club that has a beautiful decor to get the mood. If you fancy doing VIP in style drop us a e-mail, we will be glad to help. Not to mention our fabulous food dishes we serve are to die for.
Please make sure you e-mail us 24 hours before the day you want to come and party or dine.
</p>
</div>
</body>
</html>
Css-
body {
front-family: verdana, arial, sans-serif;
margin:0;
padding: 0;
background-color: #FFFDED;
border:0px;
}
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 0px solid;
}
#header {
border-bottom:none
}
#content {
padding: 6em 1em;
border: none;
margin: 20px;
}
#footer {
}
h1 {
font: bold 1.5em Tahoma, arial, sans-serif;
color: #826BA9;
font-style: italic;
background-image: url(relogo.jpg);
background-repeat: no-repeat;
padding: 1em 1em 1em 120px;);
background-repeat: no-repeat;
padding: 1em 1em 1em 100px;
}
.navitem {
float: left;
border-right: 3px solid #999999;
border-top:1px solid #999999;
text-align: left;
}
#textblock {
background-color: #D4CAE2;
width: 300px;
border: 4px solid #000000;
padding: 10px 7px;
float: left;
font-size: 110%;
text-align: left;
height: 400px
}
a:link {
text-decoration: none;
color: #000000;
padding-left: 0.em;
padding-right: 0.5em;
float: right;
}
a:visited {
text-decoration: none;
color: #826BA9;
padding-left: 0.5em;
padding-right: 0.5em;
}
a:hover {
text-decoration: none;
color: #826BA9;
background-color: #F4E8F0;
display: block;
}
body {
border: 5px solid red;
}
This is all you need to do:
html{
border: solid;
}
I don't think <main> is a valid tag. Also, make sure to close your tags.
Replace this:
</body>
</html>
With this:
</div>
</div>
</body>
</html>
And replace this:
<main id="main">
With this:
<div id="main">
Lastly, replace this:
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 0px solid;
}
Wtih this:
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 1px solid red; /* width, style, colour */
}
And change the border property accordingly.
If you want a border around the entire page, put that border property within body{} in your CSS.
try this, wouldnt say its the proper way tho
body {
background-color: green;
border: 5px solid white;
padding: 100%;
margin: 0;
}
You will need to adjust the properties to match your desired result, but this should place a border around your page.
#main {
border: 1px solid red;
}