Pls see: Demo
What I want to do is: horizontally, put the first sentence on the left, and put the other one right. Vertically, I want to align them to the bottom. The two sentences are not the same font size. I searched this topic for a while and think display:table-cell should work, but you see, the two sentences are not bottom aligned. Any help will be appreciated!
HTML
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm right</p></div>
</div>
CSS
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
}
.di_h_cn p{
font-size:24px;
}
check this Fiddle
*{
margin:0px !important;
}
You need to remove the auto generated margins. i've specified the height of your table cells to see the effect of bottom alignment
Remove margin and you will get your desired output
.di_h_cn p {
font-size: 24px;
margin: 0;
}
as p tag has these two rules to add margin
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
Use this only to solve your issue
p{margin:0;}
When you write HTML you should know that most of HTML tags takes default margin and padding. To remove those margin and padding you should use one of the following techniques:
Use CSS Reset [recommended]
Use following CSS
body, p, h1, h2, h3, h4, h5, h5, h6, form, input, blockqoute {
margin: 0;
padding: 0;
line-height: normal;
}
By using one the above techniques your HTML elements behaves same in cross browsers.
Related
I am having a little issue with a page that is displaying an image for all H1, H2 texts. It is set globally like this?
.text h1,
.text h2,
.text .title-arrow {
color:#a6a6a6;
font-family:'MelbourneRegular', Arial, sans-serif;
font-size:23px;
background:url(images/arrow_1_green.png) 0 3px no-repeat;
padding:0 0 0 20px;
margin:10px 0 20px 0;
line-height: 23px;
}
However I would like to turn off this arrow image feature for just one or two occasions? It's a really newbie question so I'm sorry if it offends anyone?
This will apply to all h1 with class text, h2 with class text or elements with both text and title-arrow as classes.
If you want to disable it on only one or two elements that have one of the above, then you need to assign it a new class, for example, no-arrow
the css would then be:
.no-arrow {
background:none !important;
}
note, the !important is used to force an override of the background property (should work in almost all cases).
Simpy you can do so by rewite you new defention for that component directly under the previous definition
// this is your old css
.title-arrow , h3 , h5 h6, div {
background:url(images/OLD.png) 0 3px no-repeat ! important;
}
// write this under the previous
.title-arrow {
background:url(images/RED.png) 0 3px no-repeat ! important;
}
This is what it looks like in Dreamweaver and how I want it to look
This is how it turns out in browser view
Add
margin:0;
padding:0;
In the CSS. Your browser gives the elements margins/padding by default, and you have to explicitly remove them.
i found good way is to reset CSS for all browsers, so it looks more/less same in all. there are alot of examples so here is one:
html, body, blockquote, code, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0
}
button, fieldset, form, input, legend, textarea, select {
margin:0;
padding:0
}
fieldset {
border:0
}
a, a * {
cursor:pointer
}
div {
margin:0;
padding:0;
background-color:transparent;
text-align:left
}
hr, img {
border:0
}
applet, iframe, object {
border:0;
margin:0;
padding:0
}
button, input[type=button], input[type=image], input[type=reset], input[type=submit], label {
cursor:pointer;
}
ul, li {
list-style:none;
margin:0;
padding:0;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
Heading tags takes default margin and padding on web page.
Use margin:0 and padding:0 on heading tags.
h1
{
margin:0px;
padding:0px;
}
I had a similar issue with attempting to include a heading inside another element with a limited width. It seems that when you limit the width of the element, it adds the default newline as a whitespace equivalent before the heading content.
Setting the margin and padding did not have any impact on the text placement, but preventing whitespace from wrapping a newline resolved the issue.
h1 {
white-space: nowrap;
}
I have an incredibly simple layout, you can see it here
<html>
<head>
<style>
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
margin: 0;
padding: 0;
}
ul.mm_sortable_items {
list-style: none;
}
ul.mm_sortable_items li {
display:inline-block;
margin: 0;
}
ul.mm_sortable_items a {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="mm_quicksand_container">
<ul class="mm_sortable_items">
<li class="game_filter_1" id="game_8"><img src="images/itg_0.png"/></li>
<li class="game_filter_1" id="game_9"><img src="images/piu.png"/></li>
<li class="game_filter_2" id="game_10"><img src="images/default.png"/></li>
<li class="game_filter_2 game_filter_3" id="game_11"><img src="images/cam-teng.png"/></li>
</ul>
</div>
</body>
</html>
I want the images to be next to each other with no spaces in between. To the best of my knowledge, what I currently have should do it, but instead there are these gaps between the pictures.
How do I get rid of them?
You literally have put spaces between them. If you remove the spaces, the images will come together.
display:inline-block displays elements as if they are inline. In other words, the line breaks between your images is being read as white space.
You can solve this using:
float:left; rather than display:inline; in your CSS
There are workarounds with negative margins, etc. as others have suggested, but this is the usual way to do what you are asking.
Just remove the display:inline-block on your list items and float them instead.
ul.mm_sortable_items li {
float:left;
}
add this css
.mm_sortable_items {
font-size: 0;
}
Due to spaces between your inline block elements (LI). There are several ways to fix it, you can remove the spaces but it will be hard to read. You could also do negative margin on the li but I personally like the font-size 0 since you have no text anyway
You have following
ul.mm_sortable_items li {
display: inline-block;
margin: 0;
}
Just add
float: left;
in ul.mm_sortable_items li.
I would've had the reflex of using a table, which would have a single row and a cell for each image (especially since they are of the same size). Then you could make the size of the cell, using basic CSS the same as the image's one, such that there is no space between them.
I had spaces in my markup to keep it neat. The browser was rendering it as a single space between each image. Whoops.
Add a
float:left;
rule to the
ul.mm_sortable_items li
selector.
You have two options in CSS
Option 1:
ul.mm_sortable_items li {
margin-right:-4px;
your other CSS here...
Option 2:
ul.mm_sortable_items li {
float:left;
your other CSS here...
Float left is probably considered more of the proper way to do it.
Images in HTML are by default inline elements. What this means is that images are considered equivalent to letters in text. So, there is a space between each image equal to the space between letters. To remove the space between images, you need to use this CSS property on the container of the images:
letter-spacing: -4px;
That will get your images to stick together.
Does anyone have any explanation for this? I've tried setting a width on #menu_wrapper ul li to no avail.
sIFR is limited in width to the width of the element you're replacing. If this element is floated, the width is the actual width of the HTML text. If the Flash font is wider than the HTML font, this means the Flash text won't fit in the allowed width and splits into multiple lines.
Possible solutions:
Specify letter-spacing for the list items, such that the HTML text is as wide as the Flash text
Set forceSingleLine parameter for sIFR.replace() to true, with as downside that the Flash movies will show horizontal resizing as they are initialized
Combine the two solutions to get better initialization performance, and the security that the text will never split
sIFR calculates the dimensions of the element you're applying it to. Floated elements are shrinkwrapped and take up only the width in which its necessary for the text inside to display.
I suggest you give an id to each of those lis, something like
li#nav-blog { width:200px; }
This will give you finer control over how much area each of those nav list elements take up, and more space for sIFR to use.
My solution:
sIFR.replace(gothic, {
wmode: 'transparent',
forceSingleLine: true,
selector: '.quick-access li h2 a',
css: [
'.sIFR-root { background-color: transparent; font-size:24px; color: #abaaab; text-align: center; cursor: pointer;}',
'a {background-color: transparent; font-size:24px; color: #abaaab; text-decoration:none; text-align: center; cursor: pointer;}',
'a:hover {background-color: transparent; font-size:24px; color: #77b100; text-decoration:none; text-align: center; cursor: pointer;}'
],
});
And CSS:
h2 {
font-size: 18px;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.35;
margin: 0 0 5px;
}
*{
margin: 0;
padding: 0;
}
Setting the width of both the textbox (ie. input type="text") and the textarea to 500px doesn't work in IE6 and Chrome, only works fine in FF2 (haven't tested other browsers), IE and Chrome add two pixels to the textbox.
Padding and margin is set to 0 on all elements using
*
{
margin: 0px;
padding: 0px;
}
Changing the doctype from xhtml 1.0 transitional to strict didn't work too.
You need to explicitly set a border of 1px and make the width 498px, or make the border 0 and the width 500px, although the latter will make the input impossible to see unless you know it's there, so from there it's just a styling issue.
You might have some luck using a set of reset styles in your CSS. They go a long way to eliminating the cross-browser differences between the way elements are rendered.
Eric Meyer (one of the web's best minds on CSS) describes reset styles and why he uses them here -- with his latest version here.
That said, without knowing the overall effect you're trying to achieve, form elements are notoriously difficult to style in a way that is perfectly consistent across browser platforms. Best of luck. :)
I use CSS3 to make textbox and input work the same. See jsFiddle.
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Works in IE8+, see caniuse.
I also think that the problem is in border. Try defining the border style specifically for inputs/textarea together with their width.
input, textarea{
border:1px solid grey;
width:498px;
}
Also take a look in the source if input/textarea is not defined anywhere else or in their own tag (e.g. size or rows/cols).
Other option when IE messes around is using special css file for it. However IMHO it shouldn't be necessary in your case.
I would recommend first to avoid that "star" reset rule, as it only brings problems down the line. Instead prefer a specific reset like
ul, ol, p, blockquote, h1, h2 /etc.../ { margin:0; padding:0; }
FORM ELEMENTs, in fact, is where the star rule does the most damage.
AFAIK, setting padding and width explicitly to a textarea and an input element, will give the exacts same pixel width in all browsers.
IE6 does add a 1px margin to the TOP and BOTTOM I believe, not the sides.
Here's an example of a RESET rule taht does'nt break the default properties of form elements:
/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/
body {
font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif;
margin:0; padding:0;
background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
color:#303030;
}
p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }
/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }
These are just random, but you get the idea. Don't clear margin and padding on everything, it's much safer to clear what you need to, and leave the browser defaults elsewhere.
I have been experimenting and found out that "the ratio" between text input and textarea can be calculated using 21 * 8*x.
If you have
< input type="text" size="X" />< br/>
< textarea cols="X">< /textarea>
... and you want them to be equally wide, use this formula to calculate the width for the input text.
if x = 70 then 21*8*70 = 581px
So you will write:
< input type="text" size="70"
style="width: 581px" />< br/> < textarea
cols="70">< /textarea>
The two will become equal!
In this way in a program/website/etc you can enter the same value and get the same result (cols in textarea)!
Try
input{
border:none;
}
<!--***********************CSS**************************-->
<style>
.set_font
{
font-family:verdana;
font-size:10px;
color:#ffffff;
width:250px;
}
.set_font2
{
font-family:verdana;
font-size:10px;
color:#000000;
width:250px;
}
</style>
<!--*******************HTML**************************-->
<input type="text" size="33" class="set_font2" name="inputName" id="inputName" value="inputValue" maxlength="50">
<textarea cols="30" rows="8" class="set_font2" name="inputName" id="inputName">inputValue</textarea>