I've made this html box, that is supposed to have a title and some buttons on right,
http://jsfiddle.net/vqpmt/17/
Everything seems fine except that the edit button as you can see is a little bit below the title, that shouldn't be the case they should both be at the same exact level.
How do I achieve that, and is my code a mess? Is there a better way of doing something like this?
I moved h1 and the edit link tag inside a div container. Check my version of your code here
To be on the exact same level, the html elements has to be either inside a container (as in my fiddle) or should use 2 inline html elements.
Try reading w3schools on html and css which has lot of information that you can learn in short time.
w3schools HTML reference here
w3schools CSS reference here
Edit: h1 is a block element which means it will add a new line. So I added a new css style .inline and changed the block property to inline.
.inline { display: inline }
Your H1 element extends the width of the page and is pushing your edit link down. I've provided an alternative solution here.
Fiddle: http://jsfiddle.net/GvGoldmedal/vqpmt/32/
Related
I think I cannot do that one in CSS, but wanted to see whether someone would have such a solution...
I have a div with the page content, a div which can be in several different location in the HTML, and a set of paragraphs. The CSS would have to place the second div between two paragraphs.
There is a sample HTML:
<div id="to-be-placed">Move Me</div>
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
Say we want to place the "#to-be-placed" div after the 3rd paragraph, is there a way to do that in CSS? I can reference the 3rd paragraph as so:
content.p:nth-child(3)
But I really don't see a way to tell CSS to move my DIV to that location...
Note: the #to-be-placed div could be inside the #content div, at the beginning or at the end.
P.S. Please, don't come up with hard coded sizes and positions. That won't work.
P.S. Just in case you get all excited about jQuery. I know how to do it with jQuery. So no, I don't need you to give me such an answer. (see How to add div tag in-between two paragraphs when wrapped inside main div using jquery for those who wonder.)
This cannot be done using CSS, as CSS does not provide any mechanism for moving elements in HTML, only for styling existing elements and adding new content through the use of pseudoelements. The best you're going to get is a solution that uses JavaScript or jQuery.
If you only want to add styled text content, you can add that using the ::after pseudo-element in CSS, but it does not support HTML, only plain text:
p:nth-child(2)::after {
content: "- Added content";
}
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
You can't do that exactly, but a possible workaround would be to define the div as the ::after element on the 3rd p element. This technically puts the div inside the p, but it might do what you're looking for.
p:nth-child(3)::after {
content: "Move Me";
display: block;
}
Here's a fiddle: https://jsfiddle.net/me5su05f/1/
Short answer: No you cannot do that. CSS (Cascading Style Sheet) is designed for styling. It is not designed to be used to manipulate DOM elements. JavaScript on the other hand is built for doing that. So if you happen to be wanting to use CSS for manipulating your DOM then you might want to re-think your approach to the solution.
I have a html file, which has sections those can be expanded or collapsed. Following image has what I am trying to achieve (when collapsed, when expanded). I have also attached code (jsfiddle.net/MpPE8/).
Question:
I wanted to place the checkbox (which was shown while expanded) between (+) and heading text (Heading One) when collapsed. See following image for more information. I want this to be achieved using CSS ONLY due to environment restriction.
Place the div as a hidden element (eq. display: none) and then show it when the block expands (eq. Display: inline)
Sorry for my late answer but I didn't had time until now. Here is what I understand you need:
jsfiddle.net/MpPE8/2/
Please apply the styling you need. I only worked on the functionality.
BR
I'm learning how to make a simple template with CSS e HTML5 but i've got a problem: i want to make a container with sidebar and articles list but it dosen't work.
See to believe: http://informaticalab.com/template.html
That black line, should be a simple border that contains both the elements.
Thanks for help and sorry for bad english,
Federico
It looks like you have an extraneous </div>, which is one problem :) It's removed in the fiddle below.
If you're using floating elements, which you are, you will need to clear those floats in order for the container to 'stretch' to the bottom of the content.
An easy way to do that is create a new class called "clear" or something similar with the following:
.clear {
clear:both;
}
However, the downside is that you're introducing a new dom element simply to modify the layout.
Another solution (courtesy of Quirksmode http://www.quirksmode.org/css/clearing.html) is to tell the containing element to deal with these floated elements:
#container {
....old code...
overflow: auto;
width: 100%;
}
This has a few quirks under certain circumstances, so it's up to you which you choose to use.
See the fiddle here: http://jsfiddle.net/callseng/kZB5j/
This uses the clear element method.
I've very new at this. I appreciate any help I can get with this. I haven't found an answer on the internet yet. (At least, not one I understand!)
When I use blockquote in WordPress, it shows up on the right side of the screen. Sometimes, I want it to appear on the left side of the screen. How do I do that? Here is the blockquote (below) I'd like to have on the left side of the screen. It currently appears on the right side of the screen.
<blockquote><p>Living a better life is less about things and more about being thankful.</p></blockquote>"
As the respected members said above, also if you have a plugin such as firebug on firefox or in your chrome browser, right click the blockquote and choose "inspect element". Then you will see all the rules(i.e effects) applied to that element and you can show/hide them to see their effect on the element which will give you a better understanding of what the rules are doing to your element.
Cheers.
<blockquote style="text-align:left;">Test</blockquote>
This will change it on a quote-by-quote basis.
A better solution is to open your theme's style.css file, search for blockquote, and replace the text-align:right; with text-align:left;. This will change the behavior or a blockquote site-wide.
What happens if you wrap up the blockquote element in it's own div element? Such as this:
<div>
<blockquote>
<p>Living a better life is less about things and more about being thankful.</p>
</blockquote>
</div>
You would then possibly be able to control the blockquote as a div block element using float:left, setting the width larger so that it gets moved below any elements to it's left, or using other means of absolutely positioning it.
For the theme that I am using, Twenty Fourteen, the correct answer would be to use:
<blockquote class="alignleft">This is my quote</blockquote>
I found this by using the Chrome devtools to inspect the example on the demo. Since this theme has a special class with nice formatting for the aligned blockquotes it is better to use this than to override the CSS with style settings. Note that while inspecting the element you get direct links into the CSS that can be used to check which other classes the theme has - quite useful! You may need to read a bit about CSS syntax to interpret it though.
It looks like a button, but it is not an input element. How can such an element be created?
Maybe it is a button element? Or img element with a image of a button?
it can be a <button>
It can be anything with the right border
it can be an image.
You could use an image, or you could style a div (or other block level element) around some text. You could then make it behave a bit more "buttony" with javascript effects. Quite why you'd want to do that is beyond me though.
They're normally created by adding CSS styling to a standard hyperlink, sometimes in combination with javascript. Check out Top 10 CSS buttons tutorials.