Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
i have a code like bellow:
<div style="font-size:58px;"> Name <span style="font-size:18px; vertical-align:middle;">|</span> 2015-04-01 </div>
and then i have the result like this
but i want the span element a little bit higher like this
so please teach me how to do, Thank you very much.
Actually the span element technically is already in the middle. You can verify this by applying vertical-align:top;, vertical-align:bottom; or vertical-align:middle; on the span element.
Other than that, I’d recommend using
position:relative;
top:-.5em;
on the span. Use the em units to make it dependent on font size (although that doesn’t perfectly work because it’s dependent on the font size of the span element).
Demo:
<div style="font-size:58px;"> Name <span style="font-size:18px; vertical-align:middle;position:relative;top:-.5em;">|</span> 2015-04-01 </div>
Of course you can adjust the value as you please.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How can I keep this two words on a single line:
<div align=right>hai</div>
<div align=center>hello</div>
I have already tried it but I didn't get any satisfactory preview.
Divs are block elements by default so they will appear on separate lines.
You can set them to inline by css: display:inline
Or use an inline element like or
<span align=right>hai</span>
<span align=center>hello</span>
I'm not sure I correcctly understand your question, but I'll try an answer anyway.
Let's say you have 2 words in a sentance :
<p>word1 word2</p>
and you want this 2 words to be, at any resolution, displayed beside each other.
Replace the space between this 2 words by (code for non-breaking space in HTML), and it will be displayed as a single entity :
<p>word1 word2</p>
If you wanted only DIV tag
Simply, use display:inline-block with DIV tag.
div {
display: inline-block;
}
<div align=right>hai</div>
<div align=center>hello</div>
Update
You can even use style attribute like below:
<div style="display:inline-block">hai</div>
<div style="display:inline-block">hello</div>
But, it's not a good practice...
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Is there anyway I can display a div correctly with style code in the tag. For example I was wanting to have a div banner but Wordpress does not display the background color but it does show the text is there any way I can change it.
Example of what I was wanting todo.
<div id="Break" style="color:blue">
Test
</div>
You should use background-color instead of color.
<div id="Break" style="background-color:blue">
Test
</div>
You really shouldn't be adding styles in your html either, this should be;
index.php (or wherever you want to use it)
<div id="Break">
Test
</div>
style.css
#break{
background-color: blue;
}
Achieves exactly the same but is a much better way of doing it.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to make a <span></span> tag goes to the right as possible using CSS without the use of margin nor padding?
Not this way :
<span style="margin-left:1000px;">ABC</span>
You can use the float: right CSS property. See some more documentation here:
W3 Schools and on MDN
float:right
Generally speaking, unless your css has explicitly made a style class for it, such as Bootstrap, you may add right in your class or pull-right
<span class="mySpan">something</span>
.mySpan{ float:right}
General answer for a general question. If you have something more complicated, post your code.
Also you can try
position:absolute;
right:0;
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Just had a discussion on some html concepts and the question arises should we give id's to hr and br tags. Both do not contain/handle the content in any way and both have fixed functionality. So invoking the DOM on basis of id's is a good coding practice or not?
Take scenario suppose I want to apply css to a hr tag. One option is giving hr an id/class like
<hr id="hrIdName"></hr>
and use css like
#hrIdName
{
}
Other is enclose hr in div and then use selector to implement the css
<div id="hrIdName">
<hr>
</div>
and use CSS like
#hrIdName hr
{
}
Out of two which is a better approach and meets good coding practice?
I wouldn't do either. I have been working a lot recently with jQuery Mobile and the interesting thing about that is they assign classes based on the CSS function you want.
So for example, if you wanted a HR to have margin and padding, you could use:
<hr class="margin-padding">
It would be better this way because you could re-use your classes on the same page (as you would likely want to with a hr). Also you cant repeat id's.
EDIT
Or as peopel have aid on your comments, dont use them at all because div and span elements should be used.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm currently building a signup form and I find myself resorting to tables in order to align things properly e.g. the MySpace equivalent where I would use a colspan to achieve the even spacing between the three birthday text areas and the other text inputs. Is this going against conventions and should I be looking into more advanced CSS?
I think you should drop the table all together and use more CSS.
You could look into this: http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
I prefer using Divs, floats and margins and not tables
It is generally against conventions. You should be using CSS to position your elements here. The CSS needn't be advanced though. E.g.
<div class="field-name"><label for="birthday">Birthday</label></div>
<div class="field"><input class="text-field" name="birthday" type="text" /></div>
CSS can be added to these elements.
.field-name{ float:left; width:100px; }
.field{float:left; width:150px;}
This should then position your fields next to each other. I'm not sure of your layout, but this is a simple example really. You can remove the divs as well if needed and change the CSS accordingly. I hope this helps.