the top attribute appears not to be working on a html. I am trying to use the top attribute on image to move an image to the top and place above a text but the top attribute of a css never moves the image Here is snippet
<div class="stl_02">
<div class="stl_03">
<img src=""
alt=""style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
//other texts here
here are the css rules
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em,51.04167em,66.04166em,-0.041667em);
position: absolute;
pointer-events: none;
}
Please how can push the image to the top using this attribute style="top: 4.4538em;" is a challenge
Your element does have the top attribute applied. This can be seen in the following:
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em, 51.04167em, 66.04166em, -0.041667em);
position: absolute;
pointer-events: none;
}
<div class="stl_02">
<div class="stl_03">
<img src="http://placehold.it/100" alt="" style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
</div>
</div>
</div>
If you are not seeing this effect, it is possible you have a rule with higher specificity overriding it, or you have cached the style before you applied this rule.
It's also worth noting that top only works on a positioned element. You need to have position: relative, position: absolute or similar on .stl-04 in order to position it with top.
Alternatively, you may be looking for margin-top, which positions vertically based on the containing element.
As an aside, basing margins off of font sizes (with em units) is generally bad practice; you should really use fixed units instead (preferably not going to so many decimal places).
Related
I'm actually trying to fix an image to a div with text on it regardless of the screen resolution the user may have.
So the image doesn't move and stays fixed in that div.. forever
On Html:
<div class="config">
<img id="uC1"></img>
<div class="config-title">Settings</div>
</div>
On Css:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative; }
#uC1 {
background-image: url(/images/tinta2.png);
width: 32px;
height: 23px;
position: absolute;
top: 5%;
left: 60%; }
The problem is, when neither using % nor px on top and left, other screen resolutions moves the image.
I've already tried to play with the #media (min-width: 575px) {} options and thats working but then will need to fix the position in all the widths, and maybe there's a better and much simple solution that i don't know
I'm aware that creating an image with the div's content plus image will do the thing but i want to be able to change the text eventually
And sorry if i type like yoda, but remember:
In a dark place we find ourselves, and a little more knowledge lights our way.
From the comments, it looks like you are just wanting your icon before your text. In this case, I would use a pseudo element before the actual text:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative;
line-height: 23px; /* same height as your image (unless your font size is larger, then make it the same size as your font */
}
.config-title:before { /* this will place a pseudo element at the beginning of the config title div */
content: '';
display: inline-block; /* make it inline block so it appears before the element and is centred with it */
background: url(/images/tinta2.png) top left no-repeat;
background-size: contain;
width: 32px;
height: 23px;
margin-right: 10px; /* spacing to your text */
vertical-align: middle;
}
<div class="config">
<div class="config-title">Settings</div>
</div>
If I understand the question correctly, you can achieve this with the position attribute.
position: absolute will be positioned relatively to the container div with position: relative. If you want to place in the top left corner, you can use top: 0; left: 0.
Working JSFiddle
.container {
position: relative;
display: inline-block;
margin: 15px;
height: 200px;
width: 200px;
border: 2px solid red;
}
.container--image {
position: absolute;
left: 0;
top: 0;
}
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
If you take a look at my test website here you will see that the "Scroll Down" button is overlapping all my content, no matter what z-index I input. Is there a way to fix this issue? I realize that my position is absolute and that is most likely the issue, but if I state it as relative it is no longer set at the bottom of my page.
#scroll-down {
height: 53px;
width: 100%;
display: table-cell;
position: absolute;
color: #fff;
padding-top: 20px;
padding-bottom: 20px;
bottom: 0;
left: 0;
z-index: inherit;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: all 0.25s ease-in-out;
}
#scroll-down:hover {
color: #bae9ff;
background-color: #fff;
}
<div class="site-wrap">
<div class="background-image img-home">
<div class="text">Welcome!</div>
<a id="scroll-down noselect">
<div id="scroll-down">Scroll Down
<br />
<object class="scroll-down-img" height="33" width="50"></object>
</div>
</a>
</div>
z-index becomes effective only for elements that have attribute position with value absolute or fixed or relative. Elements with position: static (which is the default for all elements) will not be affected by the z-index.
Easiest way in your case, add position: relative to .header, so your header tag becomes like this:
.header {
width: 100%;
background-position: center;
background-repeat: no-repeat;
z-index: 1000;
position: relative;/* this will fix it */
}
If you want to push your scroll div under the header then use z-index:999 in .top-bar class so top-bar will come above the scroll bar text and you are done.
.top-bar {
z-index:999;
}
The problem you have is with "Object" tag. Tags like OBJECT, EMBED,FRAME (and SELECT in some previous browser versions) are rendered as part of window model and does not respect z-index. The classic approach is to put the top content in iframe. In your case I can not understand why you need Object tag for simple button. Just change it with image.
If we look at my site, we see that the icon with the like and dislike button is not on its correct place. I want it to be to the right of the text evaluate tekkkz.com and above XX total views. So that's my html:
<div id="bar">
<span>evaluate<br>tekkkz.com</span>
<a class="icon-small" id="like"></a>
<a class="icon-small" style="margin: 0 0" id="dislike"></a>
<br>
<span id="views"></span>
</div>
And here some CSS:
.icon-small {
display: block;
position: absolute;
height: 32px;
width: 32px;
text-indent: -9999em;
margin: 0 0.5em;
}
#bar span {
float: none;
padding: 0 0.2em;
vertical-align: middle;
}
#bar {
right: 70px;
top: 1em;
position: absolute;
font-size: 0.7em;
}
So what is wrong?
I rewrote the HTML. Not all the changes are necessary to solve your issue, but I think it's better practice to makes your elements divs as opposed to spans with <br />. A hard-coded break like this makes it more complicated to control line breaks using CSS. I also found it easier to group your like/dislike buttons in one div.
<div id="bar">
<div class="evaluate">evaluate<br>tekkkz.com</div>
<div class="likeButtons">
<a class="icon-small" id="like"></a>
<a class="icon-small" style="margin: 0 0" id="dislike"></a>
</div>
<div id="views"></div>
</div>
Then for the CSS I used inline-block to put the necessary elements side by side.
.evaluate, .likeButtons { /* this is new */
display: inline-block;
}
.icon-small {
display: inline-block; /* was block before */
/*position: absolute; <-- remove this */
height: 32px;
width: 32px;
text-indent: -9999em;
margin: 0 0.5em;
}
/*#bar span {
float: none;
padding: 0 0.2em;
vertical-align: middle;
}
^ I don't think you need this any more,
maybe the padding but I'm sure you can work that out yourself */
#bar { /* didn't touch this */
right: 70px;
top: 1em;
position: absolute;
font-size: 0.7em;
}
You're positioning the icons absolutely, but not defining where they go (top, bottom, left, right) in the parent, which is also positioned absolutely.
You're probably going to need to define a top value for them both, then individually define a left or right value.
I would strongly recommend restructuring the html and use floats instead to accomplish what you want. Using absolute positioning can be a pain and very buggy.
Remove position: absolute;
seems to work
This is my html:
<div id="Header">
<div id="logoContainer">
<a id='logoClick' href='/'></a>
<p id="welcome">Welcome</p>
<h1 class="logoText">first<img id="logoImage" src="image.jpeg" /><span id="second">second</span></h1>
</div>
</div>
and this is my CSS:
#logoClick {
width: 100%;
height: 100%;
z-index: 1;
display: block;
position: absolute;
}
#loginHeader {
font-family: consola;
width: 100%;
background-color: black;
color: white;
}
#logoContainer {
height: 10px;
width: 200px;
padding: 20px;
}
Form some reason, the link is taking up the width and height of the entire page and has a padding of 20px on the top-left and top.. Any idea why?
The link is positioned absolutely which removes it from the normal flow and positions itself relative to the next positioned element. The parent of the anchor is not a positioned element.
To contain the anchor, add position:relative; to #logoContainer.
depending on the effect you are trying to get, you can change the height/width of the link to inherit or you can change the position to relative
I have a problem with setting up my menu for a website. The whole website is centrated whith margin: auto. By some reason the menu does not centrate because it's a div that contain links, the buttons. Each button link has a background image. This is because the images for the buttons are 315px wide and include the overlay images. For example, when the user holds over this image the image moves 105px to the left and shows the mouseover option. (View code)
This is the .html: (don't mind the id names for the buttons, didn't feel like changing :D and yes I'm swedish)
<body>
<!--Banner-->
<img src="/header/picture.png" />
<img src="/header/banner.png" />
<!--Pre-loads the images for menu-->
<img src="/header/start.png" style="display: none;" />
<img src="/header/bestall.png" style="display: none;" />
<img src="/header/priser.png" style="display: none;" />
<img src="/header/omoss.png" style="display: none;" />
<img src="/header/support.png" style="display: none;" />
<img src="/header/filarkiv.png" style="display: none;" />
<!--Menu-->
<div id="menu">
<img src="/header/box.png" id="box" />
</div>
<div id="content">
<p>Hi!</p>
<p>This is one paragraph</p>
<p>And this is another.</p>
</div>
</body>
And this is how I have set up the buttons in the css for the menu:
/*Startknappen*/
#startknapp
{
position: absolute;
left: 0px;
width: 105px;
height: 35px;
text-decoration: none;
background-image:url(start.png);
}
#startknapp:hover
{
background-position: -105px 0;
}
#startknapp:active
{
text-decoration: none;
}
/*Priserknappen*/
#priserknapp
{
position: absolute;
left: 105px;
width: 105px;
height: 35px;
text-decoration: none;
background-image:url(priser.png);
}
#priserknapp:hover
{
background-position: -105px 0;
}
#priserknapp:active
{
text-decoration: none;
}
... and so on for the other buttons...
Here is some of the .css:
#html, body
{
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 800px;
height: 800px;
margin: auto;
}
#menu
{
height: 35px;
width: 800px;
}
#content
{
position: absolute;
width: 800px;
background-color: ;
}
The problem now is that, as written above, the menu won't centrate. However when I do position: absolute; for #menu it does centrate. Only problem is that content then overlaps the menu, and I don't want that. I want content to start 0px after the bottom of menu. Here are some images of how it looks:
Won't centrate:
http://imageshack.us/photo/my-images/15/leftra.png
Position: Absolute:
http://imageshack.us/photo/my-images/443/centerh.png
Hope someone can help me get this right. Thanks in advance :)
hasn't been closed, I don't know if you haven't closed the body tag either or just cut that off of your copy-pasting.
Also, the style for#menu should include "position: relative" if you are setting the menu items with position absolute, that way they will be positioned relative to the menu container and not the body of the page.
Also, I'm not sure what this code will do:
#html, body
{
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 800px;
height: 800px;
margin: auto;
}
You're trying to position it centrally with a width, but then saying that it should stretch to every corner with the portion that says "top: 0; right: 0 etc"
It would be much better to have a wrapper like such:
HTML:
<div id="wrapper">
All content in here
</div>
CSS:
#wrapper { margin: 0 auto; width: 800px; }
Edit: Also just noticed, nice to see someone else using Ubuntu ;)
Edit2: It would be much better if you positioned your nav items with floats instead of "position: absolute" for more information see here
For more information on positioning, which you might also want, see here
As Sean Dunwoody said, you need to add position: relative to div.menu. When using position: absolute, items are positioned to the last item to be given a position property. Since you haven't positioned any of your divs other than the menu items, they're moving up through the hierarchy of divs and positioning themselves in relation to the body tag. By adding position: relative to div.menu, you tell div.menu where it needs to be (i.e, relative to everything else), and then the buttons know where they need to be (positioned absolutely in regards to their parent div, div.menu)