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.
Related
I am working on a page with horizontal scrolling and multiple columns. The first column of the text should be centered on the page and the other columns should be visible, too. Here is a sketch, which demonstrates what I have right now – an article with columns which is scrollable: jsfiddle. I would like to see the overflow text, too. I know overflow-y:visible and overflow-y:scroll cannot be combined, but how can achive something similar?
Only the text (article) should be scrollable, not the whole page.
Here are some images which illustrate what I would like to do:
Not too sure of what you are looking for, but here is a hint with display and text-indent:
DEMO
CSS to demonstrate idea :
.article-wrapper {
border:solid;
width:600px;
margin:auto;
text-indent:0;
transition:1s
}
.article-wrapper:hover {
text-indent:-500px;;
}
article {
text-indent:0;
display:inline-block;
height:400px;
width:500px;
column-width:500px;
}
If this effect wanted, you may look for a way via transition, animation or javaScript to take control over it.
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!
I've been implementing Mega Menu Reloaded On to my website, and I am unable to properly align the div tags on different screen resolutions!
Here's: what it should look like
Here's: what it looks like after I've rewritten parts of the css of Mega Menu.
I've tried for a few hours to fix this issue, but as a beginner to css I can not seem to manage to fix it.
I believe this is the css needed pertaining to its placement
.megamenu_fixed {
width:960px;
height:44px;
position:fixed;
right:0;
margin:0 auto 0 -480px;
z-index:2;
background-image:url("../img/bg.png");
background-color: #3d3d3d;
padding-left:12px;
}
.megamenu {
position:absolute;
margin:0;
width:960px;
font-size:0.982em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
top:41px;
padding-left:42%;
}
and here's the code of it's position with the correct placement
#nav-main { right:0; top:55px; list-style: none;}
#nav-main li {list-style: none; float:left; position:relative; padding-left:20px; }
Thanks in advance for any help, or pointing me in any right directions. :)
try using relative instead of absolute positioning.
also, failing that, try specifying left as a percentage (i.e. approx 50% is where the menu starts), and width also as a percentage (100% should make it use only from the left-most point of the div to the right-most side of the screen. if not, try 50% width).
The problem is in your HTML, not your CSS (I think. Well, I fixed the part where 'Adults' was hiding, that was a syntax error)
the span where Adults is declared is mistyped. I replaced <span class="drop"><adults< span=""> (problem code) with <span class="drop">adults</span> and 'Adults' displays properly. However, it is a little squashed to the right, but I believe that would be because of the images top left of the page of 'bad' version, which are not there on the 'good' version
PS: I've left the old answer there as people may have similar issues, where it is in fact the CSS at fault. If you think it's considered "off-topic" let me know, I'll remove it
UPDATE: Oh, and something I forgot to mention, to fix the squashed megamenu, just edit the location in the CSS, that should bring it back to normal
Alternatively, you can scrap div (almost) entirely and use tables instead. can be confusing sometimes, but in my opinion it's totally worth it. You just can't merge/split cells (to split just create a table within a table). Use microsoft word or openoffice writer or something like that and create tables within tables for graphical "base layout" to help you figure out the necessary code. Here's a starting point: Formatting layout with tables on gitHub
Currently, I am modifying a css document to make a website compatible in IE 6 and including it using a conditional statement. Everything is slowly starting to look as it should EXCEPT....I can't seem to modify the height of the background image in the css below. I can make it bigger by increasing the height, but decreasing the height does not make it smaller. The original image is quite thin, so I don't see why this is a problem.
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
background-image:url(images/gradient.jpg);
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
width:680px;
height:42px;
color:white;
font-family:Helvetica, Georgia, "Times New Roman", Times, serif;
position:relative;
top:0px;
}
You can see in the attached image that the red gradient background image underneath the cork header image is too big and the text inside is too large also. However, no matter what I change in the css, it doesn't seem to alter anything.
Image of webpage
The div tag is:
<div id="title">
<h1>
Historia </h1>
</div>
Any thoughts as to why I can't seem to change this?
I would try first by using firebug lite for IE, that way at least you aren't guessing whats going wrong and you can identify the padding/height/etc;
My thought is that the height is simply being stretched by the h1 element (perhaps something else sneaking in too), thats my best guess as I don't have IE6 to test, but since your height is defined for the #title it must be whats inside of it that stretches it. Try setting overflow: hidden; for the #title see if that helps, or at least shows your 42px height.
http://bodegacooperativacigales.com/historianew.html
Try firebuglite, and view the element, it will show you what to get rid of in IE.
EDIT
to define your h1 simply do this:
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
...
}
#title h1 {
height: 20px;
margin: 0; // remove margin
padding: 0; // remove padding to check if this is the issue
}
in your IE6 CSS sheet. Don't set a background image into the h1. The above piece is separate from your #title css definition.
I think you might be having issues regarding the height due to the child element creating overflow. Try adding the following rule to prevent the parent element from displaying any overflow:
#title {
overflow: hidden;
}
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