I dont know what title to give for this question. Got from my designer this image:
How can i make something like this?
Like you see there is button in midle who needs to be clickable and background transparent. Around button you see red full width parent. Maybe my approach is not good maybe it can be done with pseudo elements but i dont know how.
Pls help me...
This is my html code:
<div class="pdf">
<div class="pdf-container">
<h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
stáhnout katalog
</div>
</div>
Support isn't fantastic, but mix-blend-mode is the easiest way to achieve your desired look.
.pdf {
background: url('https://media.istockphoto.com/vectors/gear-wheel-vector-rendering-of-3d-wireframe-style-3d-view-layers-of-vector-id1003526726') 50% 10% no-repeat;
text-align: center;
}
.nav {
height: 60px;
background-color: #313131;
mix-blend-mode: multiply;
}
.pdf-container {
padding: 30px;
background-color: red;
mix-blend-mode: multiply;
}
.pdfbutton{
background: white;
border-radius: 20px;
display: inline-block;
padding: 10px 20px;;
}
<div class="pdf">
<div class="nav"></div>
<div class="pdf-container">
<h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
stáhnout katalog
</div>
</div>
Related
I am trying to design a weather website. In the body I have a div for my search bar, and then a div below it for the main area with the weather information. The problem is that there is a divider between the two (below the search area and above the main area) How do I get rid of this? I have tried margins but I can't figure out what I'm missing.
As well, I am trying to get these two divs to share one background image
Thanks in advance
<div class="searchArea">
<ul>
<li><div><input type="text" id="search_term" placeholder="Other Location ..."></div></li>
<li><div><input type="submit" value="Check Weather" onclick="findNewWeather()" /></div></li>
</ul>
</div>
<div class="mainArea">
<h1>City Name</h1>
<ul>
<li>
<div>
<h1>Current</h1>
<img src="http://openweathermap.org/img/wn/10d#2x.png" alt="today icon">
<h2>12oC</h2>
<h3>Feels: 9oC</h3>
<h3>Mostly Sunny</h3>
ETC ....
.weatherMain {
margin-top: 1px;
background-image: url("./WP.jpg");
background-size: 100%;
background-repeat: no-repeat;
color: gray;
padding: 25px0px;
display: flex;
flex-direction: row;
height: 600px;
font-family: poiret one;
font-size: 35px;
color: yellow;
font-weight: bold;
}
.searchArea {
background-image: url("./banff.jpg");
background-position: 0 -75;
height: 50px;
margin-bottom: 1px;
}
Given the code you posted above, I think the problem is that your <ul> and <h1> tags have their own margins that are pushing your <div> tags apart.
This should fix the issue:
.searchArea ul {
margin-bottom: 0;
}
.weatherMain h1 { // or .mainArea h1, your example has both
margin-top: 0;
}
To give them one background, I would recommend wrapping them in a <div> and applying the background image to that.
a {
text-decoration: none;
}
.social {
padding-left: 670px;
/*margin-left: 670px;*/
margin-top: -140px;
}
.blog_roll_links {
margin-left: 58px;
width: 210px;
height: 40px;
line-height: 40px;
}
.blog_roll_links:hover {
background-color: #C74451;
color: white !important;
text-shadow: 1px 1px 1px black;
}
.social_links {
padding-left: 8px;
margin-left: 40px;
width: 140px;
height: 30px;
line-height: 30px;
}
<div class="bolgnsocial">
<div class="blog">
<h3 class="featArt">blogroll</h3>
<div class="blog_roll_links">
HTML5 Doctor
</div>
<div class="blog_roll_links" style="margin-left:17em; margin-top: -40px;">
HTML5 Spec (working draft)
</div>
<div class="blog_roll_links">
Super Magazine
</div>
</div>
<div class="social">
<h3 class="featArt">social</h3>
<div class="social_links blog_roll_links">
facebook
</div>
<hr align="right" style="border-style: outset; border-color: white; margin-left: 45px; width: 140px;" />
<div class="social_links blog_roll_links">
twitter
</div>
</div>
</div>
I have this little snip of code and two questions:
The "facebook" and "twitter" have the same class of "blog_roll_links", however, the final result is different. It supposed to change the div color when hovered over the link, like the links in blog does. I just cannot figure it out why "blog" and "social" have the same class, but don't have the same effect.
I want to change the text color to white when hovered over, i have the code in my CSS, why it won't work?
Hi I highly recommend you to explore the browsers (chrome recommended) development tools.
if you inspect the elements you will see that in your current styling, that the anchor is nested inside your div AND that the anchor doesn't have the same width and height.
depending on which class you are adding :hover, css will react accordingly.
also the color of the font belongs to the anchor.
My suggestion is that you wrap the styling div inside the anchor, so that the whole div becomes a link ;)
Hope this helps you
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
I've got to design a menu bar which has two actions for it's links
1) Before action where the icon is green
2) On hover the icon should change to it's active version
On changing to active version, I need the text to display too. Like this:
My current HTML for this is:
<div class="span1 but">
<a href="#">
<div class="image-holder" id="about">
</div>
<div class="text-menu" id="about-text">
About
</div>
</a>
</div>
Where span1 is from Bootstrap while but is the css class as follows:
.but{
height:70px;
}
the ID #about is defined as:
#about{
background:url('../img/about-green.png') no-repeat;
background-size: 60px 60px;
}
#about:hover{
background:url('../img/about-active.png') no-repeat;
background-size: 60px 60px;
}
My current problem is such that on hover, I want the text to appear too. The text-box for this is defined as:
.text-menu{
text-align: center;
margin-top: -10px;
text-decoration: none;
color: rgba(255,255,255,0);
}
And the ID #about-text is:
#about-text:hover{
color: rgba(0,0,0,1);
}
What should I do to make the text appear along with the image on hover?
Try the following.
#about-text{
display: none;
}
#about:hover #about-text{
display: block;
}
This uses display:none; to hide the text but it shows the text if you hover on #about.
You can also try this.
.text-menu{
display: none;
}
.image-holder:hover .text-menu{
display: block;
You can use visibilityproperty
.text-menu{
visibility:hidden
}
.text-menu:hover{
visibility:visible
}
You have to change your HTML first in order to solve your problem.
<div class="image-holder" id="about">
<div class="text-menu" id="about-text">
About
</div>
</div>
Now add css as below instead of "#about-text:hover"
#about:hover #about-text{
color: rgba(0,0,0,1);
}
This will solve your problem.
In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D
Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here
This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}
I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)