I am trying to put my text on the horizontal line.
I want if the text length increases the line should get adjusted according to the text length. which is working fine on IE7,8, Mozilla. I want to make it work for Google Chrome.
It's working fine except Google Chrome.
Here is my code:
/*CSS*/
.pageHD{ font-size:30px; color:#369; font-weight:bold; padding:20px 0} .pageHD p{display:block; margin-right:10px}
.title-line{ height:1px; border:0 none; background:#e5e5e5; position: relative; right:0; top:0px}
<!--HTML-->
<div class="pageHD"><p class="left">Zones Showcases</p> <hr class="title-line" /></div>
Can anybody help me for this.
Thanks.!
Here's what I understand on your question:
You want to make a text overlap a hr element.
If I'm not mistaken on understanding your question, then this would be my answer.
Just make a content after the hr so it would overlap the hr.
Your new HTML would be:
<div class="pageHD"><hr class="title-line" /></div>
And your new CSS would be:
.pageHD {
font-size:30px;
color:#369;
font-weight:bold;
padding:20px 0
}
.pageHD p {
display:block;
margin-right:10px
}
.title-line{
height:1px;
border:0 none;
background:#e5e5e5;
position: relative;
right:0;
top:0px;
z-index: 0;
}
.title-line:after {
position: absolute;
content: 'Zone Showcases';
bottom: -15px;
z-index: 1;
}
Here's a jsFiddle Example: jsFiddle Example
this will solve your problem
border-bottom:1px solid #e5e5e5;
Check this fiddle
Related
I was looking at Android developer's website and I wanted to copy how they designed the article's animation when someone hovered on top of it. As such I tried to make something similar in plain HTML/CSS. However, I am running into an issue.
I used float expecting that the div tags would seperate from one another and apply the appropriate margins. However, It seems that the div tags are stacking on top of each other instead of being spread out.
I wanted them to look like this
but it ended up looking like this
https://codepen.io/alfielytorres/project/full/XYxPVO
I provided my files below.
HTML
<div class="new"><div>
<div class="new"><div>
<div class="new"><div>
CSS
body {
background: white;
font-family:courier;
padding:20px 100px 20px 100px;
}
.new {
width:100px;
height:100px;
background-color:white;
position: relative;
border:2px solid black;
float:left;
padding:15px;
border-radius:5%;
}
.new::before {
content:"";
width:100px;
height:100px;
padding:15px;
background-color:black;
position:absolute;
transform:translate(-6px,-6px);
border-radius:5%;
z-index: -1;
}
.new:hover:before{
animation-name:click;
animation-duration:500ms;
animation-fill-mode:forwards;
}
#keyframes click {
0% {
transform:translate(-6px,-6px);
}
100% {
transform:translate(-10px,-10px);
}
}
Thank you for your help!
You need to close your div tags like so </div>, then you could put these 3 div in a flex container and space them evenly.
hope this helps
I'm teaching myself html and css whilst at uni.
I'm trying to make a one page website, and am struggling trying to later the navigation bar over the title page. As eventually, i want the navigation bar to be mainstay on each page (which will be completed later in the project via javascript).
Can anyone point me in the right direction? I've attached some of the css code below.
Cheers
#import url('https://fonts.googleapis.com/css?family=Poiret+One');
a:link {
text-decoration: none;
}
a:visited {
color: white;
}
.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One;
}
.Nav li{
display:inline;
padding: 40px;
}
.Nav a{
display:inline-block;
padding:15px;
}
.Title-Page {
background-image: url("Images/Campeche.jpg");
background-size: cover;
padding: 200px 0 260px 0;
height: 600px;
margin: 0;
}
You need a position and a z-index to make this happen. You have to have the position for z-index to work. So here are 2 examples just remember to have your pages set up the same with a position but a lower z-index this will place the page below the nav bar. Hope it helps.
If you want it fixed while the page scrolls behind it.
.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One;
position:fixed;
z-index:90
}
If You want the Nav bar to scroll with the page.
.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One;
position:absolute;
z-index:90
}
Title Page with the position set and a lower z-index.
.Title-Page {
background-image: url("Images/Campeche.jpg");
background-size: cover;
padding: 200px 0 260px 0;
height: 600px;
margin: 0;
position:absolute;
z-index:50;
}
Are you able to use z-index to achieve this? Without an example to see it's a little tough. The z-index property specifies the stack order of an element (think of bring forward or backward).
Try something like this:
.Nav {
z-index:
}
If that doesn't bring the .Nav forward, try adding this as well:
.Title-Page {
z-index: -1;
}
You may have to adjust the #'s to get the best result. The higher the #, the closer it is to you.
Note: Position could also need adjusting here. Best to put this into something like codepen if the above doesn't work and post that link.
I have the following problem and it drives me crazy:
Basicly I have a div-container with an background. This background should change when I hover it (see pichture). It is an png and instead of white it should turn red.
What I have done until now:
First: CSS sprite
Thought it will be the best solution but becuase the div changes it's size (responsive) and the icon does not have a fixed size it was not very clean: I had a small offset on hovering. Not sure why… mybe this can be fixed…
Second: 2 separate images
But this is not an option in this case because I need to work with inline styles. :hover ist not available as inline style.
Thrid: tried mask-box-image
Was a woderful solution… but Firefox does not support it.
Does anyone has another idea how to solve it?
Give This a Try
CSS
.icon-cont{
height:300px;
width:300px;
background-color: #ff0000;
text-align:center;
}
.icon-cont:hover{
background-color: transparent;
}
.icon-cont:hover .icon,
.icon-cont:hover .icon::before,
.icon-cont:hover .icon::after
{
border-color:#ff0000;
}
.icon{
height:0px;
border-bottom:2px solid #fff;
width:60%;
line-height:300px;
position: relative;
margin:auto;
top:50%;
}
.icon::before{
content:"";
position: absolute;
top:0;
bottom: 0;
left:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
.icon::after{
content:"";
position: absolute;
top:0;
bottom: 0;
right:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
HTML
<div class="icon-cont">
<div class="icon"></div>
</div>
Link for reference
hope this helps..
May be it will help
I posted an example following
.box {
padding: 20px;
display: inline-block;
background:tomato;
}
.box:hover {
background: transparent;
}
.box:hover span {
color: tomato;
}
.box span {
display: inline-block;
color: #fff;
}
<div class="box">
<span>a</span>
<span>----</span>
<span>b</span>
</div>
You can't change color of .png with css. I think you should make a font out of your icons in order to change their color with css later.
I haven't done that myself, but I know those fonts, like font-awesome can change color. There are some automatic generators in google to make your own font.
Try this.
I need help with the frontend. Is it possible to set the style for the number (string) without breaking it in HTML?
How I wish that it looked like in HTML:
<div>Dodano: <span>127</span> stylizacji</div>
The effect that I want to get should look like this:
link to Dropbox
You can use pseudoelement "after" and it works fine with any number of digits without breaking into html. You will need a background-image from the first answer.
span {
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 21px;
padding-left:8px;
position:relative;
margin-left:10px;
margin-right:-2px;
}
span:after {
content:'';
display:block;
position:absolute;
width:8px;
height:66px;
background:#fff;
top:0;
right:0;
}
Here is an example JSFIDDLE
Here is completely CSS solution without changing your HTML. However, I did create a custom image for the background to go behind the numbers. You will have to tweak the size to make sense with your website.
Using a repeating background with a rectangle including a small space on the right-side to "space" out the digits. Use letter-spacing to give more space between the numbers.
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;
See the example: http://jsfiddle.net/amyamy86/6FaLd/
You can apply styling to the span element.
<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>
<div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding: 27px;">
Dodano:
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span>
stylizacji
</div>
Is there a way to turn this feature off? Contents of <button> are always vertically centered, as opposed to what happens in a regular HTML tag.
Demo: http://jsfiddle.net/HbqnR/
I want <button> behave like <a>, with the text at the top left corner of the button.
I'm looking for a WebKit specific fix, maybe there is some -webkit-* css property that controls this behavior. Hacks are welcome but without using additional markup!
Thank you in advance :)
.button
{
display:inline-block;
height:200px;
border:4px gainsboro outset;
background:silver;
vertical-align:middle;
padding:20px;
box-sizing:border-box;
text-decoration:none;
width:200px;
text-align:left;
}
<button class="button"><button></button>
<a>
Add this:
button:before {
content:'';
display:block;
margin-top:-50%;
}
See http://jsfiddle.net/r6yXw/
And, if you want it to only apply to webkit based browsers, wrap it in
#media screen and (-webkit-min-device-pixel-ratio:0) { ... }
see http://jsfiddle.net/r6yXw/1/
I see that you requested no additional markup, but if you decide to go down that route, one quick idea is to use positioning and one additional element.
button {
position: relative;
}
button > span {
position: absolute;
top: 0;
}
<button><span><button></span></button>
You can't. Not without introducing a <span> inside the <button> and use positioning:
<button class="button"><span><button></span></button>
Then add the following to .button:
.button
{
/* ... */
position:relative;
}
.button > span {
position: absolute;
top: 20px;
left: 20px;
}
Demo
If you want to keep your HTML intact, you can modify the document using JavaScript as well:
$('button.button').wrapInner('<span>');
Note that if JavaScript is disabled, it won't work :)
button {
height: 100px;
display: flex;
}
Check this out :P JSFIDDLE DEMO
.button
{
display:block;
height:200px;
border:4px gainsboro outset;
background:silver;
vertical-align:top;
padding:20px;
box-sizing:border-box;
width:200px;
text-align:left;
text-indent: 0;
white-space: normal;
word-spacing: 0px;
letter-spacing: 0px;
float: left;
top:0;
}
It might work heh. I don't really know what do you need the button for. But this gets to see just like what you were asking before.
Used it here.
<title>Documento sin título</title>
<body>
<form id="form1" name="form1" method="post" action="">
<button class="button">tODAY WE ARE HERE WONDERING WHAT TO DO<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></button>
</form>
</body>