I need to align pic-text-pic in a row.
<style type="text/css">
#element1 {background: url('url1'); margin-right: 10px}
#element2 {margin-right: 10px}
#element2 {background: url('url2')}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
<div id="element3">
element 2 markup
</div>
I tried playing with it, just cant make it happend.
Any ideas?
You need to research the various display properties of CSS and how these create layout in the browser. DIVs are by default "block level elements" which means they're each going to break onto a new line.
For your example, you'll want to look into the "inline" or "inline-block" display properties, which will get your elements to line up next to each other (as long as there is enough space in the parent container). So, try this:
#element1,
#element2,
#element3 {
display: inline-block;
}
Try using <span> tags instead of <div>s.
Use display: inline-block:
#element1,
#element2,
#element3 {
display:inline-block;
}
use <span> and not <div>
Related
Is it possible to have a CSS rule that matches an element only if it contains a certain child?
Basically I have post content, where there could be inline images. I want all images to be centered but not the text. It looks like there is a patter to the inline images. They appear like this:
<p>Some text</p>
<p>
<!-- I want this p to be centered since it's an image -->
<img src="http://fpoimg.com/500x500"/>
</p>
<p>Some more text</p>
Is there any possible way without modifying the html to do this solely with some fancy CSS selectors? I know how to do it with jQuery, but I've always been interested if there are some new CSS selectors to help achieve this.
try this:
p>a>img{
display: block;
margin-left: auto;
margin-right: auto;
}
You can use something like p:nth-child(-n+3) to select elements of a certain type and pattern. (You'd have to create a parent selector though).
You could also use the basic cascade to apply a style to elements:
p img {styles}
see https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child for more info on patterns and how to use nth selectors.
For example:
p:nth-child(2n+1) {
background-color: lime;
}
<div>
<span>This span is limed!</span>
<span>This span is not. :(</span>
<em>This one is odd. </em>
<span>Sadly, this one is not...</span>
<span>But this one is!</span>
</div>
Tell me if this solves your problem:
p img {
display: block;
margin: 0 auto;
}
JSFiddle: http://jsfiddle.net/dpmytcjL/1/
I am making a theme for a website, but I ran into a problem. I can't change their HTML or use javascript, only CSS.
This is what the site's HTML looks like:
<div class="container">
<div style="margin:a ridiculously massive number">
<p id="title"> Title of page </p>
<p> Words that cannot be read because of the ridiculous margin </p>
</div>
<div id="otherContent"> There a lot of divs without ridiculous margin all with different ids </div>
</div>
I want to remove the ridculous margin without affecting the other divs margins. Is this possible?
yes you can target the div that is the first-child inside of .container as to not effect other divs.
.container div:first-child{
//code
}
EXAMPLE 1
Example 1 is specifically for the example you posted where the div you would like to target is the first child of it's parent. Also note if the margin is inline like your example you're going to have to over-ride it with !important like so:
.container div:first-child{
margin: 0 !important;
}
OR
You could also use the :not selector if the other's have a similar class
.container div:not(.classname) {
//code
}
EXAMPLE 2
The point of example 2 is if your div isn't the first child and the only without a class (it would probably be unlikely you would have multiple divs with the same classname except one but it's possible). in your example you could also use :not() to target that other div with id #otherContent like so:
.container div:not(#otherContent) {
//code
}
OR
The last option you can use if the others don't apply would be nth-of-type() to target specifically which one you want to effect:
.container div:nth-of-type(2) {
//code
}
EXAMPLE 3
In this case you will have to use first-child selector with !important keyword, as this is the only way to make rule more specific than style="margin" rule:
.container > div:first-child {
margin: 0 !important;
}
If all the other divs have ID you can use the following:
div>div:not([id]) {
margin: 0 !important;
}
It's things like this that make me feel like such a noob.
http://codepen.io/eighteyes/pen/cgLIu
i don't have any rationale in my head for why the elements are positioned vertically the way they are. yes the css is a little janky, in how so many things are assigned the same height and position. but the results are bizarre. especially the textNodes...
HTML
wtf is up
<p>a</p>
<br>
this is low
<p></p>
<br>
<br>
<div>
<p>s</p>
<span>Down Here</span>
<button>^</button>
<button></button>
<button>_</button>
<input type="text" placeholder="Why is this normal?"/>
<button class="submit">And This</button>
</div>
CSS
div, button, input, span, p {height: 50px; border:1px solid #999;}
button, input, span, p { display:inline-block; }
span {background-color: red }
p {background-color: blue; height:60px}
i'm sure it has something to do with the browser base styles, i just don't know how to override / control it, is the problem. i want everything to behave like the empty button, in my div, no questions asked.
anyone have any ideas?
With your inline-block you should really declare a vertical-align of something.
button, input, span, p {
display:inline-block;
vertical-align: top;
}
Otherwise all those use slightly different alignment settings.
Try frist doing some reset of the CSS (every browser has his own native rules for the elements), then you need to set vertical alignment.
you can do something like this
*{margin:0; padding: 0}
This is not the best way to reset your styles but it works
Learn more about CSS RESET
http://www.cssreset.com/which-css-reset-should-i-use/
Check this codepen
I want the btn next to the string. I can't figure it out even using CSS inline
<span class="subscribe_button"> <h3>Books</h3> <%= render 'follow_form' %></span>
CSS:
.subscribe_button {
display: inline;
}
You have some invalid HTML here.
A block level element cannot be within an inline one, this is basic HTML knowledge.
What I suggest you do is wrap both elements in a div and use float: left;
<div class="wrap">
<h3>Books</h3>
<span class="subscribe_button"> unsubscribe</span>
</div>
CSS:
.wrap
{
width: 300px;
}
.wrap h3,
.wrap span
{
float: left;
}
.wrap span
{
margin-left: 10px/*your value*/;
}
I also suggest you go read up on HTML rules, what is allowed where and why they are or are not allowed.
http://jsfiddle.net/Kyle_Sevenoaks/zJUZs/
The Books part is (also) a block (due to <h1>), so you need to set it to inline as well (as shown in the comment of limelights), otherwise your button will still be pushed to the next line.
Try adding this to your CSS
.subscribe_button h3 {
float: left;
}
If you float an element it means other elements after it will wrap onto the same line as it (as long as theyre width does not make them too wide).
Span is inline element and h3 is block element. Inline elements should be inside block elements. Have you tried to validate your html code? http://validator.w3.org/
try:
display: inline-block;
Try following code
.subscribe_button h3{
display: inline;
}
use float:left for both h3 and button
I think you can do this with this code:
.subscribe_button > * {
display: inline;
}
'>' is a child selector and * matches to all element.
Yo can read more about CSS2 selectors: CSS2 Selectors
I am trying to get a background color to stick strictly to the text of the heading and not span the entire width of the page. I understand that block level elements take up the entire width of the page, so I was wondering if there was a way around this besides forcing inline styles.
EDIT: If I were to use display: inline-block; why is it that even though I specify text-align: center; my headers are still left aligned? Should I use a float instead?
Or displaying as an inline-block could meet most use cases:
h1 {
background-color: red;
display: inline-block;
}
Perhaps something like this:
In HTML:
<div id="Heading">
<span id="HeadingText">HEADING TEXT</span>
</div>
In CSS:
#Heading
{
/* Formatting of full heading */
}
#HeadingText
{
/* Formatting for just heading text */
background-color: #00ff00;
}
Guessing from your question, this isn't the answer you are looking for, but it may be useful.
EDIT:
Alternatively, this should work as well. But I'm pretty sure this is what you want to avoid (inline, right?)...
<h1 style="background-color:#660000; display:inline;">Heading<h1>
This would solve this problem I think:
<div id="Heading">
<div id="HeadingText">HEADING TEXT</div>
</div>
And your css would be:
#Heading{
background-color:#CCC;
}
#HeadingText{
display:inline-block;
background-color:#FF0000;
}
You must specify the text-align:center; attribute to the parent element containing your div block to center your header and its background with display:inline-block;