https://www.cp24.com/polopoly_fs/7.687199!/httpImage/image.jpg_gen/derivatives/default/image.jpg
I want to accomplish something similar to the image attached, I tried several post but didn't get it done, please help me.
Thanks
You can utilise the CSS :after pseudo-element to achieve a similar item, for example:
#banner {
font-family: sans-serif;
text-transform: uppercase;
}
#banner > div {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
}
#banner .banner-grey {
background: #aaa;
position: relative;
}
#banner .banner-grey:after {
border: 20px solid transparent;
border-left-color: #aaa;
content: '';
display: block;
position: absolute;
right: -40px;
top: 0;
}
#banner .banner-red {
background: red;
font-weight: bold;
margin-left: -4px;
padding-left: 60px;
}
#banner .banner-red span {
color: #fff;
font-style: italic;
}
<div id="banner">
<div class="banner-grey">Check out our <b>live and interactive screen</b></div>
<div class="banner-red"><span>CP24</span>now</div>
</div>
Related
I have my code here in css for the a inside the header:
header {
display: block;
background-color: black;
color: white;
width: 100%;
height: 150px;
position: relative;
min-width:200px;
}
header img {
float: left;
}
header a {
color: white;
font-family: 'Roboto Slab', sans-serif;
font-weight: 100;
font-size: 200%;
text-decoration: none;
float: left;
}
<header>
<div class="header-image-container">
<img src="benny.jpg" alt="Benny logo">
</div>
<h1 class="site-title">Benny's List</h1>
</header>
I just want the a that is inside the header to be down towards the bottom of the header but no matter if I put margin or padding, it won't move at all. Thank you guys for any help!
Screenshot: https://imgur.com/a/YbwDAML
You probably just need to add clear for your hyperlink
header {
display: block;
background-color: black;
color: white;
width: 100%;
height: 150px;
position: relative;
min-width: 200px;
}
header img {
float: left;
}
header a {
color: white;
font-family: 'Roboto Slab', sans-serif;
font-weight: 100;
font-size: 200%;
text-decoration: none;
float: left;
clear: both; /* Added */
}
<header>
<img src="https://via.placeholder.com/100x100">
Link
</header>
There is no need of using floats when u don't need them next to each other, have a look at the below working snippet without using float: left, hope it helps :)
header {
display: block;
background-color: black;
color: white;
width: 100%;
height: 150px;
position: relative;
min-width: 200px;
}
header img {
/* float: left; */ /* removed */
display: block; /* Added */
}
header a {
color: white;
font-family: 'Roboto Slab', sans-serif;
font-weight: 100;
font-size: 200%;
text-decoration: none;
/* float: left; */ /* removed */
}
<header>
<img src="http://placekitten.com/g/80/80">
Link
</header>
header {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 150px;
position: relative;
min-width: 200px;
}
header img {
width: 100px;
height: 100px;
display: block;
}
header a {
color: #ffffff;
font-family: 'Roboto Slab', sans-serif;
font-weight: 100;
font-size: 200%;
text-decoration: none;
}
<header>
<img src="https://image.ibb.co/nsrpRz/111.jpg">
Link
</header>
Just play with negative value of margin-top of img according to your requirement.
It will work. Below is the css code:
header img {
float: left;
margin-top: -10px;
}
Just tweak the value of margin-top according to your requirement.
When I hover my link normally it turns to green. However there is also red showing up around the link. I don't understand.
.myButtonRegister{
float: left;
background-color: #C22312;
height: 48px;
width: 168px;
text-align: center;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
}
.myButtonRegister a:hover {
background-color: green;
color: black;
}
Thanks
As the size of <a> link tag is size of the content it contains, so the background doesn't cover the entire parent element which it has a larger size.
You can force the link to have the same size as the container by adding:
.myButtonRegister a {
display: block;
width: 100%;
height: 100%;
...
}
.myButtonRegister {
float: left;
background-color: #C22312;
height: 48px;
width: 168px;
text-align: center;
font-family: 'Pridi', serif;
font-size: 26px;
line-height: 48px; /* added */
/* padding-top: 10px; */
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.myButtonRegister a:hover {
background-color: green;
color: black;
}
<div class="myButtonRegister">Sample text</div>
I would suggest to get rid of the div container but only use the link tag.
.myButtonRegister {
display: inline-block;
height: 48px;
width: 168px;
font-family: 'Pridi', serif;
font-size: 26px;
line-height: 48px;
text-decoration: none;
text-align: center;
background-color: #C22312;
color: #f2f2f2;
}
.myButtonRegister:hover {
background-color: green;
color: black;
}
<a class="myButtonRegister" href="#">Sample text</a>
When hovering the <a> tag you are also triggering the hover on its parent element .myButtonRegister. Your html can be simplified from this:
<button class="myButtonRegister">
REGISTER
</button>
to this:
<a class="myButtonRegister">REGISTER</a>
Then trigger a hover animation on class myButtonRegister. Because both button tag and a tag can be used to render a button.
I have some pagination in a div and am seeing some extra space. I'm not sure where it is coming from. The extra space is green (I added a background to the container).
The URL is: http://joshrodg.com/test/inductees/page/2/
Basically, at the bottom of the page, you'll see the pagination. The code is generated, so I can't change that. I'm pretty sure it's something with the css adding the extra space.
I can put a height on the wrap and the extra space goes away, but that's cheating.
The HTML looks like:
<div id="pagi">
<div class="wrap">
<a class="prev page-numbers" href="http://joshrodg.com/test/inductees/"><span class="left"></span><span class="ion-android-arrow-dropleft"></span> Prev</a>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/3/">3</a>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/4/">4</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/15/">15</a>
<a class="next page-numbers" href="http://joshrodg.com/test/inductees/page/3/">Next <span class="ion-android-arrow-dropright"></span><span class="right"></span></a>
</div>
</div>
The CSS looks like:
#pagi {
text-align: center;
}
#pagi .wrap {
background: #00ff00;
display: inline-block;
font-size: 0;
overflow: hidden;
position: relative;
}
#pagi .page-numbers {
background: #CD1F31;
display: inline-block;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 40px;
padding: 0 10px;
position: relative;
text-decoration: none;
top: -2px;
}
#pagi .current {
background: #fff;
color: #CD1F31;
}
#pagi .next,
#pagi .prev {
background: #054872;
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 20px;
line-height: 40px;
position: relative;
text-transform: uppercase;
top: 0;
}
#pagi .next {
padding: 0 35px 0 16px;
}
#pagi .prev {
padding: 0 16px 0 35px;
}
#pagi .left,
#pagi .right {
background: #333;
border-bottom: 21px solid transparent;
border-top: 21px solid transparent;
height: 0;
position: absolute;
top: 0;
width: 0;
}
#pagi .left {
border-right: 12px solid #054872;
left: 0;
}
#pagi .right {
border-left: 12px solid #054872;
right: 0;
}
#pagi .ion-android-arrow-dropleft,
#pagi .ion-android-arrow-dropright {
display: inline-block;
font-size: 30px;
position: absolute;
top: 6px;
}
pagi .ion-android-arrow-dropleft {
left: 18px;
}
#pagi .ion-android-arrow-dropright {
right: 18px;
}
#pagi a:hover .ion-android-arrow-dropleft,
#pagi a:hover .ion-android-arrow-dropright {
color: #fff;
}
#pagi a:hover {
color: #ddd;
}
I know this is probably something simple that I'm over-looking. If someone could point me in the right direction I'd appreciate it!
The one thing I forgot to mention is everything works just fine when the fonts are the same - my guess is the size differences are causing some of the issues.
Thanks,
Josh
So, after investigating this issue further, my problem was being creating by the different Google Web Fonts I was using.
The page numbers use a font called Lato and the Previous and Next links use a font called Oswald.
Somehow the line heights and padding that both fonts had were conflicting and I couldn't get them to play nicely with each other.
Both the Previous and Next links and the page numbers have the same pagenumbers class assigned. Because this is generated code, that's something I can't change.
So, I removed the Oswald font, which fixed the issue...unfortunately, I wanted the font to be different, so I was thinking about other options available visually.
I also had some arrows next to the Previous and Next links. Those arrows were absolutely positioned, so none of the line height issues apply.
After thinking it over I decided to go with arrows-only!
Now, the alignment is fixed and I understand what happened.
The HTML remains unchanged:
<div id="pagi">
<div class="wrap">
<a class="prev page-numbers" href="http://joshrodg.com/test/inductees/"><span class="left"></span><span class="ion-android-arrow-dropleft"></span> Prev</a>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/3/">3</a>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/4/">4</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/15/">15</a>
<a class="next page-numbers" href="http://joshrodg.com/test/inductees/page/3/">Next <span class="ion-android-arrow-dropright"></span><span class="right"></span></a>
</div>
</div>
The CSS looks like:
#pagi {
margin: 5px 20px 25px;
text-align: center;
}
#pagi .wrap {
background: #054872;
display: inline-block;
font-size: 0;
overflow: hidden;
position: relative;
}
#pagi .page-numbers {
background: #CD1F31;
display: inline-block;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 40px;
padding: 0 10px;
text-decoration: none;
}
#pagi .current {
background: #fff;
color: #CD1F31;
}
#pagi .next,
#pagi .prev {
color: #fff;
text-transform: uppercase;
}
#pagi .next {
padding: 0 25px 0 16px;
}
#pagi .prev {
padding: 0 16px 0 25px;
}
#pagi .left,
#pagi .right {
background: #333;
border-bottom: 21px solid transparent;
border-top: 21px solid transparent;
height: 0;
position: absolute;
top: 0;
width: 0;
}
#pagi .left {
border-right: 12px solid #054872;
left: 0;
}
#pagi .right {
border-left: 12px solid #054872;
right: 0;
}
#pagi .ion-android-arrow-dropleft,
#pagi .ion-android-arrow-dropright {
display: inline-block;
font-size: 30px;
position: absolute;
top: 6px;
}
#pagi .ion-android-arrow-dropleft {
left: 18px;
}
#pagi .ion-android-arrow-dropright {
right: 18px;
}
#pagi a:hover .ion-android-arrow-dropleft,
#pagi a:hover .ion-android-arrow-dropright {
color: #fff;
}
#pagi a:hover {
color: #ddd;
}
There are other ways I could've fixed this. I could've specified a width and absolutely positioned my Previous and Next links, which would also fix this issue because of the absolute positioning.
But, I like this solution and think it is better to just not have the inferred Previous and Next links and just show the icons (pointing in their respective directions).
Thanks,
Josh
I need something similar to this hr tag
hr.style-eight {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.style-eight:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
JSFiddle
But I need an image instead of the ASCII symbol. I've tried making the content "" and the background a background-image, but I'm having no luck.
Rather than
content: '';
Use the url(<url>) notation:
content: url(http://i.stack.imgur.com/yUzqW.png);
hr.style-eight {
margin-top: 2em;
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.style-eight:after {
content: url(http://i.stack.imgur.com/yUzqW.png);
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
<hr class="style-eight" />
External JS Fiddle demo, for experimentation.
References:
content property (MDN).
http://jsfiddle.net/gfweqd7y/1/
content: url(image.what ever);
My goal is to hover on next_wrapper and nav_text_title_next appears.
Now both the image and the p tag nav_text_title_next appears, but unfortunately I can't see any of the text in p tag nav_text_title_next. I use the same code for other sections, and it works well but it's not working in this part. Can you help me figure out what goes wrong?
HTML:
<div class="next_wrapper" id="next_wrapper_title" style="position:absolute; left:1050px; top:300px; z-index:5;">
<a class="next_button" href="#blah" style="background:none;">
<p class="navigation_text_next" id="nav_text_title_next">
HI!
</p>
<img class="next_button" src="img/next-icon.gif" onmouseover="this.src='img/next-icon-stop2.gif'" onmouseout="this.src='img/next-icon.gif'">
</a>
</div>
Here is the CSS:
.next_wrapper {
position: absolute;
top: 0px;
left: 95px;
}
#nav_text_title_next {
display: none;
}
#next_wrapper_title:hover #nav_text_title_next {
display: block;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
your display is none delete that and you will see your text
also delete it on your image
then do something similar to this
in html
<p>bla</p>
in css
p {
opacity:0;
}
p:hover {
opacity:1;
}
You have hidden it from view that is why.
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none; <-- remove this
}
You can remove display: none; as it parents is hiiden and not required.