I have done a lot of research before posting it in here. So, here I got few imperfections.my link
Question: In the last tab which is supposed to be a contact info tab, how do I make those two tables to get close to each other? I will take borders afterwards. But how do I make them get close and centered?
I put them under table, did not work. Then tried to use division, still is not working. what should I chance in the css file?
Thats it for now. Thanks in advance!
For the Question 2
I want to say that in css replace float:right for sag div
.contact-info {
width:98%;
margin:1%;
}
#sol {
float:left;
text-align:left;
margin-left:290px;
margin-right:auto;
width:200px;
}
#sag {
float:left;
text-align:left;
margin-left:auto;
margin-right:auto;
width:200px;
}
For your second question I want to tell you that in css replace float:right for sag div and to place them in the center of the page just add in your css just add
#contact-info { width:250px;
margin: 0 auto;
}
Hope this will help you!
Related
Here is my fiddle:
https://jsfiddle.net/2msz53n9/
And here is the problem:
* {
margin:0;
padding:0;
overflow:hidden
}
I need to use this for the rest of my site. So I cannot remove it. However, on my fiddle, I want the border to show also on the right, but now because of the above, it doesn't. I would like to have a solution where I can keep the above code, however, if not, I will have to review my whole site and re-do the CSS, I guess. I haven't been able to get the border on the right without removing that wildcard code though. Anyone?
You can add box-sizing:border-box; to your list of wildcard rules:
* {
margin:0;
padding:0;
overflow:hidden;
box-sizing:border-box;
}
jsFiddle example
Bootstrap actually does this and you can read more here.
The actual width of .rightcont is 328px including 1px border on left and right.
So either increase width of .right to 328
Or add box-sizing: border-box; to .rightcont
this css in my view should stretch the "x" over the whole input content.
input{
height:20px;
width:20px;
line-height:20px;
font-size:20px;
padding:0;
}
Instead, there appears to be some font inherited property going on that pushes the "x" down.
I have no idea what that is. Can you help?
I've made a jsfiddle should you want play about with it.
http://jsfiddle.net/uc4z20yb/
thank you
Well, I know it`s not the cleanest solution but you can do this.
<button><span>X</span></button>
Then in css:
button{
width:20px;
height:20px;
padding:0;
font-weight:20px;
line-height:20px;
position:relative;
}
button span{
position:relative;
top:-5px;
}
I do not know if you are trying to create a checkbox or the above is just a example, but if you are trying to create a checkbox, there are better ways to do it.
New answer:
Ah, I see what you are trying to do here.
In this example I used vertical-align set to baseline with line-height.
JS FIDDLE: http://jsfiddle.net/4fy9k6t9/1/
Also. If you are using the small 'x' it will always be a bit down off the center, because the size of the lette ris determined by it's capital letter height: 'X', so use X. I assume it's a close button.
If you MUST use small 'x' your best bet is padding-bottom: 2px or so.
I've been creating a wordpress theme from a html template I designed and I've got mostly everything working except for the content section being stuck to the left.
you can see it here: http://www.divisionforty.com/wall/events/
I hope someone can guide me to fixing thins
Do you want that everything is stuck to the left, or that is the problem and you want it to be in the center or right ?
Have you tried:
{
float:right;
}
or
{
position:absolute;
right:0px;
}
or
{
position:fixed;
top:30px;
right:5px;
}
What have you tried?
You can see the implementation here: http://jsfiddle.net/DVp4A/
How do I get the div 'quota info' to be situated to the top left of the UL?
I have the positioning of the UL stuff fine, I just don't know how to get the positioning of the 'quota-info' div to be top left and not 'above' the UL.
I'm not sure what you are trying to acomplish, try adding this this:
#quota-info {
position:absolute;
top:0px;
left:0px;
}
#navigation {
position:relative;
}
If it's not what you want to get let me know and try describe it as I'm an idot ;)
I can't understand exactly what is your requirement but check this http://jsfiddle.net/DVp4A/2/
If this is what you needed, I added
position:relative;
top:50px;
for #quota-info. If this is not what you need, please clarify or make visual example to help you.
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here