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
Related
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>
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>
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;
having a blonde moment here, trying to use CSS to tell a divider to change its background once an input has focus.
<p>
<label>Your Name</label>
<input type="text" name="your_name" id="your_name" value="" />
<div class="formhelper">Please enter your full name,<br />Character limit of 255</div>
</p>
Thats the HTML code, now I've tried the following but can't get it to work
.appformwrapper input:focus + div {
background-color: #CCC !important;
display: block;
}
.appformwrapper div ~ input:focus {
background-color: #CCC !important;
}
.appformwrapper input:focus {
background-color: #EEF;
}
Any ideas? I've done this once before in CSS but can't find me blasted code :(
It's not valid HTML to have a div in a p. Browsers will take your markup and treat it as this:
p
label
input
div
Which means your div actually comes after the p, rather than being inside it. So while you're trying to select a div that comes after an input, it won't work because the div doesn't exist in that position.
If you can change your p to another div, or your existing div to a span, your CSS should work. I'm not sure what exactly your second rule is supposed to do either, but it still won't work, as the general sibling selector ~ doesn't look at previous siblings.
I was having trouble with two types of buttons.
It was a form button and a css button basically. And I was advised that the css button whould use display:inline-block;
This made the whole a href tag actually look like a button.
But this invisible margin seems to be screwing up something. I tried separating them into separate css classes, but oddly, applying a real margin to the css button gives an additional margin as well. What's causing this?
You can easily see it here (low graphics):
www.matkalenderen.no
Basically, code looks like this:
<input type="submit" value="Logg inn" class="button_blue" alt="ready to login">
<a class="button_css_red" href="access.php">Glemt passord</a>
CSS
.button_red, .button_blue, .button_css_red, .button_css_blue {
background-image:url("../img/sprite_buttons.png");
background-repeat:no-repeat;
border: none;
color:#FFFFFF;
display:inline-block;
display:inline-block;
font-size:12px;
height:27px;
width:98px;
}
.button_css_red, .button_css_blue {
margin-top:20px;
}
Just found the answer myself :)
Looks like I was able to fix it by applying a line-height of about 31 pixels.