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
Related
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).
Can someone please help me how to overlay my globe logo over my blue horizontal bar? Thanks! I have attached a photo of how it looks. I do not want to lose the positioning or anything.
CSS
.logo {
display: inline-block;
width: 100px;
margin-left: 100px;
margin-top: 20px;
max-height: 100%;
}
.title {
display: inline-block;
font-size: 40px;
vertical-align: top;
margin-top: 50px;
font-family: arial;
}
#bannerTitle {
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue, steelblue, white);
}
h2 {
color: white;
padding-left: 120px;
padding-top: 11px;
font-size: 30px;
}
HTML
<img class="logo" src="img/globe.png" alt="">
<h1 class="title">The Inter<span>net</span></h1>
<div id="bannerTitle">
<h2>The World Wide Web</h2>
</div>
https://www.w3schools.com/cssref/pr_pos_z-index.asp
You need to add z-index
#bannerTitle{
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue,
steelblue, white);
z-index: -1;
}
It's as matti said; you need to consider the z-index variable. What z-index does is relayer elements within the same stacking context.
From your HTML markup, I can see that your <img> and <div id="bannerTitle"> are sibling elements, so they are within the same stacking context. Therefore, whoever has a higher z-index will display on top of the other.
One way to do that is to demote the "bannerTitle" div, as matti did: z-index:-1.
An alternative way is to promote the <img>: .logo { z-index:99; }.
It's good to know that z-index only applies to block elements, and img is inline by default, but you're already made it a block element with inline-block.
Here's the basic HTML code:
<div class="soc-cont">
<div class="soc-item-cont" style="background: blue;">
<div class="soc-item">
<img src="img/facebook.png" style="width: 100%; position: absolute; left: 0;">
</div>
</div>
</div>
And here's the CSS:
.soc-cont {
position: absolute;
height: 100%;
width: 20%;
display: inline-block;
right: 0;
text-align: center;
font-size: 0;
}
.soc-item-cont {
width: 25%;
height: 100%;
position: relative;
display: inline-block;
}
.soc-item-cont:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.soc-item {
vertical-align: middle;
width: 50%;
display: inline-block;
position: relative;
background: black;
}
What I'm trying to do is add position: absolute and left: 0 to to the img in order to take it out of the usual document flow to be able to overlap it with another picture later on. But instead of working as it should, I get this:
Instead of this:
Note: I have color-coded it a little to be more easily understood.
It also should be noted that there are, in fact, four .soc-items. However, since they are, right now, nothing more than copies to fill up the space, I didn't deem it necessary to post it here, as it would probably confuse you even more.
However, all it takes is changing position to absolute to instantly break the look.
Any ideas on how to fix this?
The reason for your problem is that, by changing it to position:absolute, you are taking it out of the normal flow but that causes your div(s) to collapse cause they now have no content (essentially). Once they do, you have to deal with the image being on the baseline and having white space, just like text. So it's the same as if you inserted or removed that content. Your layout "adjusts" to the content.
I have the following fiddle
The HTML is created by javascript. I can add/change the styles to the div's if needed but I cannot change the order of the HTML code.
I know I can use:
text-align: center;
But there is a catch :) The div containing the 4 images is put in the HTML code before the <h3> is. Since I cannot edit the HTML order I figured to lower the DIV with the images using margin-top: 70px; The problem is that this has an effect on the text in the <h3> which isn't centered anymore.
How to solve this? (pref with css3)
It's okay if the values of the DIV's in the HTML need to be changed in order to fix it
(I can change them)
Thanks a lot
The HTML code:
<div class="solitaireprefs" style="position: absolute; left: 0px; top: 0px; width: 80%; height: 80%; z-index: 100;">
<form method="get" action="">
<div style="float: right; margin-top: 70px; display: table; vertical-align: bottom;">
<div><img src="cardsets/test/spades1.svg" alt="Ace spades" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/clubs7.svg" alt="7 clubs" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
<div><img src="cardsets/test/hearts12.svg" alt="Queen hearts" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/backred.svg" alt="Card" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
</div>
<h3>Options</h3>
<h4>Images for size 119</h4>
</form>
</div>
The CSS:
div.solitaireprefs {
background-color: #fff;
border-radius: 7px;
border: 1px solid #ddd;
}
div.solitaireprefs form {
padding: 0 15px;
}
div.solitaireprefs h3 {
background: #e9e9e9;
margin: 0 -15px;
padding: .7em 0;
text-align: center;
border-radius: 7px 7px 0 0 ;
}
The real answer to the question is to figure out how you can arrange the dom elements correctly. Semantics is more important than you think. But since you are already kinda hacking the visuals, the quickest and dirtiest hack is to fix your padding:
padding: .7em 45%;
on the div.solitairprefs h3
Tweak the percentage to get the middle, but the missing 10% of the sum of left and right padding on the h3 is the space between where the options text appears (so tweak accordingly).
And since you're already manually centering, you can go ahead and get rid of the
text-align: center;
Instead of float:right; and margin:top on the element that contains the images, position it absolutely.
{ position: absolute;
top: 70px;
right: 10px;
}
Using absolute positioning takes it out of the flow of the document; which is what is messing up the centering on your h3.
On a webpage I've got a list of thumbnails with link boxes on top of them. The are wrapped by a link tag and are clickable. However, in the link boxes on top of them which has a slightly transparent background it is only the text and not the entire box which is clickable.
This is the HTML code for one set of thumbnail and link box:
<article class="recent-post-item">
<h2>
Something
</h2>
<a href="link/to/somewhere" title="Something" class="thumb">
<img src="someimage.png" alt="Something" width="248" height="125" />
</a>
</article>
And this is the corresponding stylesheet:
#column-2 .recent-post-item {
height: 127px;
width: 250px;
position: relative;
border: none;
}
#column-2 .thumb {
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
#column-2 h2 {
font-size: 22px;
background-color:rgba(255,255,255,0.6);
padding: 5px 4px;
margin: 0;
position: absolute;
z-index: 1;
bottom: 1px;
left: 1px;
right: 1px;
}
And heres a working site showing the problem: http://fuckthepony.dk/wordpress/ (the thumbnails I'm talking about are those in the middle column)
Some people have told me that they do not experience the problem. I've tested on Linux with both Opera, Chrome and Firefox and the problem is persistent across all of these browsers.
I concur with the comments above but to make the whole transparent block clickable you would need to also take the padding off of the h2 and add the padding to the a tag instead.
#column-2 h2 {
padding: 0;
}
#column-2 h2 a {
display: block;
padding: 5px 4px;
}
This is because a elements are inline elements, so they don't take all parent's width available. You can add this rule to your css:
#column-2 h2 a {
display: block;
}
That's just because the a element has not display:block by default.
Just add this little line :
#column-2 h2 a { display:block; }