I have a simple textbox within a .well and want to style the width of the .well class to be not much bigger than the text I put in.
Is there an easy way to achieve this with CSS?
How about this?
.well{display: inline-block;}
Example.
.well{
display: inline-block;
background: gold;
}
.textbox{
background: skyblue;
}
<div class="well">
well
<div class="textbox">textbox</div>
</div>
Use max-width property in the style for the box and
.well-class{width:auto; max-width:200px;}
for the class, This will work.
I think better use Textarea, then text automatically wrap the textarea field's width.
<textarea rows="5"></textarea>
Related
I would like to hover a link (<a> tag which contains a <div> tag), so the color becomes red BUT only when I hover the yellow field! My problem is that you can also hover it if the cursor is not on the yellow field.
I know that I could put the a tag into the div tag but I want to link the whole box and not only the text.
I also tried to use a { width: 100px; } but that is of course not working.
https://jsfiddle.net/3phy4950/
Any ideas how I can resolve this?
It does not work with width, because you are applying this style to the a tag. But a tags are display inline by default which means they dont take the whole space / line.
The div tag is display block by default, which means it will take the whole space / line.
What you need is to change the display style from the a div to inline:
a div {
display: inline;
}
See Fiddle
Use inline-block as the display format for the <a> tag.
a {
width: 100px;
display: inline-block;
}
Your updated fiddle
What about this:
<div class="btn" onclick="location.href='http://google.com'">ยป Hover Me</div>
And the css:
.btn {
background-color: yellow;
width: 100px;
}
.btn:hover {
color: red;
}
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 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>
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 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;