Here is my site: http://bankloan.com-credit.info/freescore/limitedtime/lp1/001.php
If you make the browser window smaller (around 750x550) you will see that the pop up image is cluttered over the main text. What I need is for that pop up to not be cluttered.
I don't know much about code. I just used a WYSIWYG editor. I've been messing with it for hours and can't fix it.
I'm pretty sure it has something to do with the absolute positioning code that my program uses.
If you need the #message popup to always be on top, you can set a high z-index value on the div e.g. z-index: 9999
In the case of your site you seem to be using inline stlyes, so you would need to add it as shown below.
<div id="message" style="z-index:9999; font-family: arial; position: absolute; top: 16px; left: 318px; margin-left: -300px; background-image: url('images/alert.jpg'); background-repeat: no-repeat; margin-top: -15px; margin-bottom: 4px; width: 562px; height: 131px; font-size: 12px;" onclick="javascript: document.getElementById('message').style.display = 'none';" onmouseover="document.body.style.cursor='pointer'" onmouseout="document.body.style.cursor='default'">
Related
I developed a text area that allows me to associate people. My problem is placing the responsive button (always in the bottom right) and making the text not "pass" over it.
Can anyone help me?
DEMO
css
.Sendbtn {
width: 30px;
height: 30px;
height: auto;
float: right;
margin-right: 21px;
margin-top: -76px;
position: relative;
cursor: pointer;
}
HTML
<dx-html-editor>
<dxi-mention
valueExpr="text"
displayExpr="text"
[dataSource]="employees"
></dxi-mention>
</dx-html-editor>
<img
class="img-responsive Sendbtn"
src="https://www.freepnglogos.com/uploads/search-png/search-icon-clip-art-clkerm-vector-clip-art-online-0.png" alt=""/>
Problem
The text passes over the button :(
If you dig down into the dx-html-editor element you can find the <p> element that contains the text. If you give this a margin-right the text will stop running over the button.
.dx-htmleditor .ql-container .ql-editor p {
margin-right: 30px;
}
You might need to play around with the exact selectors to get it perfectly right but that should be step in the right direction.
text (instagram and shop) moves downwards into black area as you can see in the following pictures
https://imgur.com/a/zevB8Op
heres the code:
HTML
<div id="rightBlock">
<a target="_blank" href="http://instagram.com/pierrebassene.world" style="text-decoration: none; color: black; font-weight: bold; font-family: Helvetica ;font-size: 2vw ;">INSTAGRAM</a>
</div>
<div id="mid">
<a style="font-family: Helvetica ; font-weight: bold; font-size: 2vw;">SIGN UP </a>
</div>
CSS
#rightBlock {
position: fixed;
top: 90%;
left: 45.2%;
bottom: 0;
right: 0;
z-index: 1;
}
#mid{
position: fixed;
top: 82%;
left: 47%;
bottom: 0;
right: 0;
z-index: 1;
}
I've already tried several methods including absolute and fixed positioning but nothing seems to be working :/
The cause is almost certainly due to the use of percentage values in the 'top' property (can't confirm without more contextual code). Try instead to re-write/re-structure your code so that you are not using percentage values which will change relative to the devices screen size.
You could try switching to pixel values. EG:
margin-top: 200px; //replace with desired px value
Also, it is a good habit to enforce the 'separations of concerns' concept with your code.
HTML is the markup language which describes the structure and contains the actual contents of the page. CSS is used for styling the pages content.
I recommend you move all the style attributes into your CSS. This keeps your HTML clean and easier to read/maintain for the future, whilst also making it clear where to modify style changes as all the styles are defined in one place (the CSS stylesheet - and not the CSS stylesheet and/or the HTML style attributes).
So I want to put a h1 tag in the bottom right corner. What I have currently is below; however, this is very tedious and I want it to always be in the corner. Currently the way I am doing it is based off of my computer's screen, but if someone uses a computer with a different size screen then the tag will not be in the right place. Would there be any other way I could do this so that the tag would be in the same place for all size monitors?
.subH {
font-family: Sedgwick Ave Display;
font-size: 10px;
padding-top: 505px;
padding-left: 1170px;
color: white;
}
<h1 class='subH'>Created by Hybrid Alpaca Game Studios</h1>
Use position: fixed
Example:
h1 {
position: fixed;
bottom 6px;
left: 6px;
}
I have an html input and a font awesome icon. I don't want to limit the amount of text a user enters. Rather, I'd like to make it so that the text doesn't overlap .fa-comment-o...any extra text will just be hidden (not cut-off, just hidden). The best example I can give is when you enter something in google the text doesn't overlap the microphone, nor do they cut if off (they use an image whereas I am using a font icon).
Here's my fiddle
<div id="container">
<input id="input" value="This is some really long text that will almost certainly not fit within the text box. What I'd like to do is not bleed beyond the comment icon."/>
<i class="fa fa-comment-o"></i>
</div>
#input{
width: 300px;
height: 25px;
margin-right: -30px;
}
.fa-comment-o{
font-size: 16px;
color: #333;
cursor: pointer;
right: 10px;
}
Do the following changes to your code padding-right:30px Beware when your increase your padding your width increases.
#input{
width: 270px;
height: 25px;
margin-right: -30px;
padding-right:30px;
}
UPDATED FIDDLE
So I have an image that is between 2 anchor tags. the css for the image is..
#howDoesItWork {
position: absolute;
height: 31px;
width: 154px;
border-style: none;
top: 3px;
left: 20px;
}
the right 20 px of the image isn't being noticed as a link in firefox. It works fine in IE. I tried changing it to padding left: 20px and margin-left: 20px. It still shows that last 20px as not being part of the link. It works fine I take the positioning away completely though.
<a id="howDoesItWork" href="">
<img src="images/howDoesItWork.jpg" alt=""/>
</a>
FIXED: I set the z-index to 2. Apparent the menu right next to it was overlapping onto the howDoesItWork imaage.
When you absolute position the image the link doesn't use the image to base its width on.
Because you've set a left: 20px it will stick over the range of the link.
So you need to extend the coverage of the link. Without knowing anything else about your document (ie. columns, what you are trying to do) my best guess is:
a #howDoesItWork { padding-right: 20px; }
If that doesn't do it... just show us more information.
UPDATE
With the new html info it should be:
#howDoesItWork { padding-right: 20px; }