i am trying to make something like this:
http://funedit.com/imgedit/soubory/small_6719449301396601413.jpg
The problem is i am totaly new in CSS and i have no idea how to make it, i just try something like:
.newsnames{
background-image: url("images/newsname-right.png");
background-repeat: repeat-x;
width:572px;
height:227px;
display:inline-block;
position: absolute; left: 415px; top: 39px; right: 0px; bottom: 0px;
font-family: Arial;
font-weight: 13px;
color: white;
text-decoration: none;
line-height: 45px;
}
But it just giving it that dark background and position , but what i need is to let everything looks like on image and i am completly lost, can somebody help me with it?
My actualy try can be see here: http://funedit.com/andurit/newnew/
p.s. Its really important that all image have to go to CSS not to HTML!
Shuld i divide it for 3 parts? (that blue arrow, mid, and right with date and chat buble? If yea how can i change 3 things with one a:hover?
you have to give z-index to your css so that the layer to your right will show on top of your image
.newsnames{
background-image: url("images/newsname-right.png");
background-repeat: repeat-x;
width:572px;
height:227px;
display:inline-block;
position: absolute; left: 415px; top: 39px; right: 0px; bottom: 0px;
font-family: Arial;
font-weight: 13px;
color: white;
text-decoration: none;
line-height: 45px;
z-index: 1000;
}
what happens is your image is projected outward in the z plane so it appears on top of your background image.
you can provide your other elements inside this div itself ...
Shuld i divide it for 3 parts? (that blue arrow, mid, and right with date and chat buble? If yea how can i change 3 things with one a:hover?
In my opinion your only chance is to use jquery to realize this demand (especially the last part).
Related
I get some HTML and CSS code.
https://codepen.io/lbebber/pen/pvwZJp
.menu-item,
.menu-open-button {
background: #00bcd4;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
color: white;
text-align: center;
line-height: 80px;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
}
I tried to use this code, but I did not succeed pushing the hamburger menu to be at the bottom-left corner.
I think something outside the part I copied here is blocking the menu to get it to the bottom.
The second thing, I wanted to use little pictures instead of icons.
Do you have an idea how?
When I add a picture, I am getting weird behavior.
Thank you for your help in advance.
Code is Fixed!
So in your .menu attribute, I added the following. These attributes move your menu (.menu) in a fixed position in the bottom left of the screen.
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
I removed the margin-left:-80px; as this caused your menu to warp halfway off the left of the screen when I added the other attributes above. So your .menu attribute should look like this when the proper attributes are edited:
.menu{
#extend %goo;
$width:650px;
$height:150px;
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:left;
}
This resulted (on codepen) with your site looking like this. Of course, the gooey menu opens as shown below. I cannot insert the code into stack overflow as there were issues with layout and content. But if you make the changes to your CSS code above, you can see your menu working
[
I have a problem where I need to remove/hide a line behind my transparent logo:
The white line needs to be beside the logo, but it should not be shown behind. - And no, I will not add a black background..
Code:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 90%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
Span will become a transparent image, this is just for testing..
You can check out the Line-On-Sides Headers CSS Trick.
Something like this:
body {
background-color: black;
color: white;
}
.fancy {
line-height: 0.10;
text-align: center;
font-size: 81px;
margin-top: 20px;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-top: 1px solid white;
top: 0;
width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<div class="fancy"><span class="fancy">LOGO</span>
</div>
Source
Since you have a transparent background, I think the only way is to duplicate the line div and divide it in two, one left and one right, I don't know the dimensions you need, but you should have something like this:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 30%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
<div style="position: absolute;margin-top: 74px;margin-left: 60%;width: 30%;height: 2px;background-color: #FFF;"></div>
Hard to say the correct margins without knowing where they are contained, you should post the entire HTML if you want more help.
I would absolutely position the elements in a container and then arrange them with z-index to ensure they stack in the correct order. I have created a JSfiddle with a quick example of how to acheive this:
https://jsfiddle.net/bL0dfkvq/
The key here is the z-index on the text is:
z-index:10;
The z-index on the hr line is:
z-index:5;
Few things...
1. Your methods of positioning in the code snippet you included are, quite frankly, awful. I'd clean this up and not using things like padding: 43% to position your elements - make sure you have a sturdy foundation before you go building a house on it! I'd suggest checking out some resources in regards to positioning elements using CSS - given that you've provided just a 2-line snippet, I can't exactly go into what proper methods would be in your case.
2.
And no, I will not add a black background..
You're acknowledging the simplest working answer, yet you don't want to use it...? Why not? Do you mean you don't want to apply a background to the image? You can just add it to the span using background-color: black;
3. Again, I don't approve of position the elements in this manner, however using your snippet (and applying the 43% on the margin instead of padding), you can achieve this: https://jsfiddle.net/dgat2q34/
For additional space between the line and the text, you'd then use padding on the span.
EDIT: Kaiwen Huang brings up a good point - if you didn't want to use specifically black as I've included in my example, you can change the span's background to background-color: inherit; instead.
You might test this code:
<div id="#bg" style="border:1px solid ; position:relative; background-color:black; display: inline-block"><hr id="line" style="border: 1px solid #ffffff; position:absolute; width:98%; top:50%; z-index: 0;margin:0"><div id="#container" style="border:1px solid ;position:relative; background-color:none; display: inline-block"><div style="margin:0px 35px; font-family:Arial, Helvetica, sans-serif; color:#333333; font-size: 80px">LOGO</div></div></div>
Just set your logo to have a higher z-index: than the line.
Z-index is basically:
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
So I have started building my first 'real' website, and pretty soon I ran into a problem. The fixed navigation bar at the top of the site gets overlapped by a <div>or a <p> tag, (both of them with a lower z-index than the element that gets overlapped. The fixed element doesn't get visually overlapped, but you can't click the links when it is in front of other elements. I have no idea how to fix it, and did not find a solution on Google.
Here's sample code:
<body>
<div id="Nav"> <p id="navicon">Brochmann.se</p>
<a id="navtext1" href="#">link</a>
<a id="navtext1" href="#">another link</a>
</div>
<div id="text">
<p>This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.
This is a test text i just made for a problem i have.</p>
</div>
</body>
</html>
CSS:
p {
font-family: Noto Sans;
position:relative;
z-index: -2;
margin-left: 8px;
}
a {
text-decoration:none;
}
#headtxt {
/*titeltext*/
position: relative;
color: #F0F4C3;
text-align: center;
top: -300px;
font-family:Lobster;
font-size: 700%;
opacity: 1;
z-index: 1000
}
body {
margin: 0px;
}
#Pic {
z-index: 1;
height: 300px;
/* avstånd från headern till övrigt innehåll *magisk punkt* */
z-index: 999;
background-color: #E6EE9C
}
#Nav {
/* fäst navbar i toppen av fönstret*/
position: fixed;
/*background-image: url("head.JPG");*/
/*samma bild som i headern*/
background-color: #F0F4C3;
width: 100%;
background-size: 100%;
background-position: center right;
background-repeat: no-repeat;
top:0px;
z-index: -1;
box-shadow: -5px 10px 20px #888888;
height:40px;
}
#headimg {
/*bakgrundsbild till headern*/
opacity: 1;
}
#navicon {
color: #AFB42B;
font-family: Lobster;
margin-left: 10px;
font-size: 150%;
z-index: 5;
position: relative;
display: inline;
top: 20%;
text-align: left;
opacity: 1;
}
#navicon:hover {
color:white;
}
#text {
/* brödtext*/
position: relative;
z-index: -5;
}
/*#navcontainer{
background-color: #E6EE9C;
width:13%;
height: 100%;
z-index: -2;
margin-top: -34px;
display: inline;
position:relative;
top: -12px;
}*/
#navtext {
position: relative;
top: -400px;
margin-left: 18.5%;
/*borde vara 20, ingen aning om vad som är felet*/
text-align: center!important;
text-align: -moz-center;
color: #F0F4C3;
font-family: Oswald;
font-weight: bolder;
font-style: oblique;
font-size: larger;
}
#navtext1 {
margin-left: 18.5%;
/*borde vara 20, ingen aning om vad som är felet*/
text-align: center!important;
text-align: -moz-center;
font-family: Oswald;
font-weight: bolder;
font-style: oblique;
font-size: larger;
color: #AFB42B;
position: relative;
left: -11.75%;
top: 25%;
z-index: 4;
}
/* FF9800 - orange #CDDC39 - Lime */
JSFiddle
I'm not very good at HTML, so it could be pretty messy but I simplified it a lot
The navigation bar is staying behind of all the content because you're telling it to stay behind the content with the z-index:-1; in your #Nav. By removing this line from your #Nav will fix this problem.
#Nav {
position: fixed;
background-color: #F0F4C3;
width: 100%;
background-size: 100%;
background-position: center right;
background-repeat: no-repeat;
top: 0px;
z-index: -1; /* <======= THIS LINE NEEDS TO BE REMOVED <======= */
box-shadow: -5px 10px 20px #888888;
height: 40px;
}
Jsfiddle example here
Although I think you are misunderstanding the concept of z-index because I notice that you are using z-index in many classes and IDs. Use it only when it's really necessary.
Note: IDs should be created for unique divs as well, when used more than once you should exchange these for classes instead.
About z-index
The z-index property determines the stack level of an HTML element. The “stack level” refers to the element’s position on the Z axis (as opposed to the X axis or Y axis). A higher z-index value means the element will be closer to the top of the stacking order. This stacking order runs perpendicular to the display, or viewport.
http://www.websiterox.com/wp-content/uploads/2015/03/zindex.gif
http://www.lakotuts.com/wp-content/uploads/2013/12/figure020.gif
You need to put a margin-top for the text :
#text {
/* brödtext*/
position: relative;
margin-top:50px;
z-index: -5;
}
on my website: http://evoxity.net/en/wallpaper/3-wallpaper.html
i noticed two bugs with fancy box. The first one is, if you decide to enlarge the pciture with a click on it. The first time it loads, the background is a bit out of the center, if you close the window and enlarge it again, its fine. This bug contains if you hover one of the sites of the fancybox and switch through the images.
The secound bug is, the line under the X to close the window.
Any suggestions how to fix that?
product.tpl:
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css:
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here some pictures to explain the last bug. (just click first, secound image to navigate) http://imgur.com/kGUyv2i,Ts8rrOk#0
Removing the lines under the X
a {text-decoration: none;}
The box looks centered for me when I open it.
search in global.css line 7959 add text-decoration:none;
I have a code like this
<div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel">1B 100E</span></div>
I also have CSS for pinlabel
.pinlabel{
display: none;
position: absolute;
background-color: #3774d5;
height: 16px;
width: 200px;
color: white;
top: 0px;
left: 1px;
font-size: 10px !important;
border-radius: 10px;
border: white 2px solid;}
.maptimize_marker_0:hover span.pinlabel {display:block;}
But I cant get the Hover state work. If to Force hover state in developer tool in chrome everything works fine, but not working when mouse is over... What am I doing wrong? Also I want to put span Under the div, but the span is always on top and covers the div background picture... Please help!
I'm not sure what your problem is, on http://jsfiddle.net/abrunet/Bb9T3/, I copy paste your code and the hover is working..
Last, your span does not have a z-index specified. You might chose one, lower than the divs one and an other higher for the hover case.
You should also try to separate your style in a different sheet to keep your code clean.
Let me know if I misunderstood your question.