This is the code I'm working with:
<div style="width:100%; position:absolute; border:0px; background-color:#232323; color:#ffffff; padding-top:5px; padding-bottom:5px; font-size:12px" align="center">
TEST TEST TEST TEST TEST
What it does is basically add a bar to the top of your website where you can enter text similar to what you see here: http://demo.fiverrscript.com/
What needs to be changed in my code to make this appear at the bottom of the screen instead of at the top?
Add the bottom:0px to the style tag.
<div style="width:100%; position:absolute; bottom:0px border:0px; background-color:#232323; color:#ffffff; padding-top:5px; padding-bottom:5px; font-size:12px" align="center">
Also, the width:100% wont work so you should also add left:0px and right:0px;
try to change position:absolute to position:fixed and add bottom:0
Related
I'm trying to get absolute 0 padding around my button.
I have tried
padding:0px;
But as you can see from the image I still have space top and bottom of the button (Blue line is border). Any suggestions?
Edit: Button code:
<asp:Button ID="WPDErrorBtn" Style="font-family:'Century Gothic'; font-size:65px; background:none; padding:0px; margin:0px; border:none; " runat="server" OnClick="WPDErrorBtn_Click" OnClientClick="showLoading();" />
Try to change the line-height to for example 65px; the chances are real that you have to try a smaller number.
Edit example
<button style="font-family:'Century Gothic'; font-size:65px; background:none; padding:0px; margin:0px; border:1px solid blue; line-height:50px;">0</button>
What is this inside border, number or picture?
try this ---> padding:0px !important;
But i think it is not padding issue, please more details...
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
I don't know how to call it exactly, these are the example i am working on.
Is is possible to make all of this using html and css on the sqaure and triangle part
or it is better just to use images
Yes it possible to make it using pure css but
it shows different result for different browser. i Better suggest you to take help of css and image.
<div class="firstDiv">
<div class="secondDiv"></div>
<div class="arrowDiv"></div>
</div>
apply following css
.firstDiv { float:left; height:25px; width:200px;}
.secondDiv{ float:left; height:25px; width:170px; background:#666; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:25px; color:#FFF;}
.arrowDiv { float:left; height:25px; width:25px; background:url(images/arrow.png) left no-repeat;}
I came across a problem and I tried searching on google and here too, however, could not get the right solution. Let me be brief...
I have a div name #email_input_box which contains <input type="text" class="email_box" border="0" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />
The issue is in padding the text, it works fine in other browsers, however, it does not work in IE7.
Here's my .email_box class styling
.email_box{
width:160px;
height:26px;
background:url(images/inputbox_email.png) no-repeat;
line-height:26px;
color:#969595;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-style:normal;
}
and here's my div #email_input_box styling
#email_input_box{
width:180px;
height:26px;
float:left;
position:absolute;
top:60px;
}
I need help with the padding-right issue in IE7. Thanks!
input doesn't have a border attribute, remove it.
<input type="text" class="email_box" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />
this may solve the problem. however even if it doesn't, it should be removed.
Also the div containing the input have a less width than the input.
.classname {
background-image:url(../../images/classname.png);
background-color:transparent;
background-repeat:no-repeat;
text-align:center;
border:none;
height:50px;
width:160px;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
color:#CCC;
}
<div class="classname">Text</div>
Why the Text is above of image? What should I add to make it normal? I can use padding-top, but then the bottom of image will have space too if you know what I mean.
Thanks.
I created this for you, I think that's how you want to make it.
Because the image is a background for the text.
If you're trying to make an image button with text fallback, do <img src="someurl" alt="sometext" />
What do you mean by above?