I was just reading this article :-
http://css-tricks.com/perfect-full-page-background-image/
Please note this css :-
#bg td {
text-align:center;
vertical-align:middle;
}
What is text-align doing in here? If i just remove that property, it stops working. CSS can be quiet difficult to understand sometimes :(
Thanks in advance :)
Image elements are inline-block by default which basically means that things that normally apply only to text applies to images as well, but it also means that you can put e.g. padding and margin on the element, which you cannot put on elements that are normally "inline" such as span.
So what I'm trying to say is that since images are inline-block, the CSS property text-align applies to them.
Related
I have tried the following approaches but they do not seem to work for me (I'm sure I am doing something wrong - I need help in figuring out what it is). The image is in the HTML header section (not body).
I have bootstrap in the HEAD section (before the image and it gets picked up from the browser cache so hopefully it gets used for the image in the header)
I have tried adding the following to the CSS for the image (and when it did not work, I tried adding a div around the image and assigned the class to the div):
display:inline;
text-align:center;
margin:auto;
I also tried the following in the CSS when option 2 did not work:
display:inline;
margin:auto;
horizontal-align:center;
I tried display:block in place of display:inline as well. Any thoughts on fixing this (specially without relying on bootstrap would be quite welcome). Thanks in advance!
General css properties for centering elements:
{
display:block;
margin: 0 auto;
}
First, you can't set a margin on an element that is set to display:inline.
Here is a great guide that you should read:
http://www.tipue.com/blog/center-a-div/
Place the image in a div, and then put text-align:center on the div. That's it.
http://cdpn.io/aDBhq
In Chrome and Safari, the following CSS problem occurs:
ul, li and a or link have a default CSS property that pushes everything vertically away. I have fiddled with the following properties:
font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom
And nothing seems to prevent the problem.
I've downloaded the CSS reset by Yahoo, but I'm unsure how to use it properly.
I haven't pursued that because I don't know that it would solve my problem anyway.
I've looked at your Fiddle and I'm slightly confused. You say things are being pushed away vertically, but I don't see that happening at all.
The only thing I see which could even somewhat meet that description is the fact that your links are on separate lines.
If this is the problem, the solution very simple: divs are block-level elements. This means that they default to 100% width and are designed to break onto a new line before they start, and onto a new line after. This is the behavior of display: block; and is built-in to the default styles of a div.
To fix this, apply the following style:
#headernav div{ display: inline; }
This, however, is the least of your problems. The code you copied into the fiddle lacks a closing tag for one of the div elements, which could cause unpredictable behavior in older browsers. You have two divs with the same ID, which is a major no-no.
In this update to your fiddle I have fixed the HTML problems you have. Note that 'tempLink' is now a class, and is targetted by a '.' in CSS, not the '#' that indicates an ID.
I have applied the above CSS to the class tempLink, instead of any div within your headernav.
Note in that fiddle that your two links are now side-by-side. You can control the horizontal spacing between them with margin and padding (target the tempLink class).
As Adrift mentioned it would be a lot easier to diagnose if you use jsFiddle. That being said, have you tried display: inline-block or float: left?
I have a drop down navigation that works perfectly when positioned via a left CSS property.
http://jsfiddle.net/durilai/nmME4/1/
You can see that the dropdown adjusts to the width of the content, however I would like to position right. When I do the width of the drop down will not adjust to the content. You can see this behavior at the fiddle below.
http://jsfiddle.net/durilai/cTSJt/2/
Any help is appreciated, also any knowledge into what is causing this behavior is also appreciated.
The right: 100px in ul seems to be setting a width of 100px.
If that does not need to be positioned absolute, then use float: right; and use margin-right: 100px; instead.
JSFiddle: http://jsfiddle.net/cTSJt/12/
Ok so basically, from what I can see, the issue was being caused by using the element (in this case ul) directly as the selector.
I believe this was interfering with the below ul elements within your CSS. Simply changing the first CSS rule from ul to your ID (Navigation_Main) fixes the issue.
Fixed example > http://jsfiddle.net/cTSJt/10/
Thanks
Have you tried using div's instead of the unorder list (ul) element. As you are using CSS to striping off all the default styling that makes a "ul" a list element why not use a div to start with. I can't guarantee it will solve the problem but it eliminates unnecessary CSS and you might beable to spot the issue more easily
And in reality shouldn't a ul only be used for bullet point items, in a text document?
this problem made me scratch my head
how to use CSS to make a DIV display only the first line of a multiline content?
How can I set a DIV height like one line, but actually holding multiple lines?
Can this be done without any javascript? I have to display the full content after click the DIV and edit the DIV by setting its attribute to contenteditable, it's best if I just use CSS selector to select non-first-line of the content and hide it.
Its easy:
.magic {
height: 1em;
overflow-y: hidden;
}
.magic:active {
height: auto;
}
Make sure that instead of :active you're using suitable selector.
Height have to be equal to line-height. Which is not always equal to 1em.
Question 1: you may be able to use the :first-line pseudo-element in your CSS.
div#mydiv {display:none}
div#mydiv :first-line {display:inline}
However, the spec does not list "display" as one of the properties which may be assigned to this pseudo-element, so this may or may not work, or may depend on the browser.
there was a related bug and it's already fixed
http://code.google.com/p/chromium/issues/detail?id=81783
Unfortunately Colin's answer above using the :first-line pseudo element doesn't work.. would have been nice as it's very elegant :)
There are some alternatives here:
Show first line of a paragraph
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?