I have this structure...
<body>
<div class="page-wrapper">
<div class="page-content">
<div class="login-welcome">
<h3 class="welcome">
<form class="form-login">
I'm able to apply css to login-welcome and welcome but not to form-login.
In Chrome Debugger, I don't see the styles I've set. These are the relevant styles...
.login-welcome {
position: absolute;
top: 15%;
left: 40%;
display: block;
}
.welcome {
font-weight: 600px;
font-size: 30px;
color: #653487;
}
.form-login {
padding-top: 500px;
}
In debugger, I can adjust the same padding setting by adjusting element.style so I figured using form .form-login or .form-login would work but the classes I've tried has not applied any formatting to the class. Any reason why that would be the case?
When I copy your css to chrome, there is some weird character right after the closing } of .welcome
it seems like it's stopping chrome from interpreting the next css lines
When you remove this character the following css selectors (e.g. .form-login {) are evaluated again and will be applied to your form element - everything should work then
You can use the following:
div.login-welcome .welcome{
color:red;
}
<div class="page-wrapper">
<div class="page-content">
<div class="login-welcome">
Im not affected
<h3 class="welcome">Some heading text</h3>
<form class="form-login">
some form text
</form>
</div>
</div>
</div>
It works as follows: div.login-welcome .welcome is a CSS selector which applies styles for element which have a welcome class and a <div> parent elements which have the class login-welcome.
Hopefully this was helpful.
Your code works:
.login-welcome {
position: absolute;
top: 15%;
left: 40%;
display: block;
}
.welcome {
font-weight: 600px;
font-size: 30px;
color: #653487;
}
.form-login {
padding-top: 500px;
}
<div class="page-wrapper">
<div class="page-content">
<div class="login-welcome">
<h3 class="welcome">Welcome header</h3>
<form class="form-login">
<input type="text">
</form>
</div>
</div>
</div>
look at this fiddle: https://jsbin.com/segiqoyoci/edit?html,css,output
Related
I'm creating a popover and I want to apply CSS to it but my CSS is getting ignored. What could be the reason?
The JS creates following markup for popover:
<div class="popover fade bottom in" style="top: 24px; left: 461.281px; display: block;">
<div class="arrow"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">Phone</div>
</div>
Default Style is:
element.style{
top: 24px;
left: 461.281px;
display: block;
}
My CSS:
<style>
.popover{
left: 580px;
}
</style>
Can I not overwrite the CSS?
You need to use !important because inline styles take the priority and you cannot override without !important.
.popover {
left: 580px!important;
}
Using important is not considered a good practice, rather give it a id and style it.
<div id="popover" class="popover fade bottom in" style="top: 24px; left: 461.281px;
display: block;">
<style>
#popover{
left: 580px;
}
</style>
I has this code
.cont {
width: 150px;
overflow: hidden;
resize: both;
border: solid;
}
.wrap:after {
content: 'A';
background: #ccc;
display: inline;
}
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao
</span>
<span class="emptyornot">
</span>
</span>
</div>
http://jsfiddle.net/rcsd7L74/
I need that :after always stay with last word in .wrap.
And if container too small - break line before last word.
The CSS you have will do this perfectly well; the problem you're having is that new-lines, in HTML, collapse to a single white-space character; remove those and it works (leading to this, admittedly ugly, HTML):
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span><span class="emptyornot"></span></span>
</div>
To allow for slightly prettier HTML (though, in fairness, HTML should be minimsed when sent to the client anyway), such as:
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span>
<span class="emptyornot"></span>
</span>
</div>
JS Fiddle demo.
The following CSS can be used:
.wrap {
/* sets the wrapping element's font-size to 0, to hide the collapsed white-spaces: */
font-size: 0;
}
.inner {
/* overrides the parent's font-size:
font-size: 16px;
}
.wrap:after {
/* as above, to make the text of the pseudo element visible */
/* no other changes */
font-size: 16px;
}
JS Fiddle demo.
Change width:
.cont { width: 160px }
I'm trying to add a subtitle below the title on my page. I've got an image to the left of the existing title, and the title is centered to the middle of the image. I'm trying to add a subtitle in a smaller font below the title and I can't seem to figure it out. The code I'm using is like so:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="clear"></div>
</div>
</div>
</div>
.container {
display:table;
width:100%;
height:auto;
background-color:#171717;
}
.container .text {
display:table-cell;
height:100%;
vertical-align:middle;
font: bold 70px Verdana;
color: #666666;
}
and here's what that looks like:
(I'm not including the code for the menu even though it's in the picture).
And what I'm trying to achieve is this:
Does anyone have any ideas?
You have a div.text which contains your title. Underneath that you need to place your subtitle. This code is called "html markup". You should use <h1> - <h6> tags for titles.
Here is an example (fiddle)
.header {
text-align: center;
}
.header img {
float: left;
}
.clear {
clear: both;
}
<div class="header">
<img src="http://dummyimage.com/100/000000/fff" />
<h1>Hello world</h1>
<h2>This is a subtitle</h2>
<div class="clear"></div>
</div>
Preview:
You can in fact do this with CSS.
div.text {
font-size: 32px;
font-weight: bold;
display: inline-block;
color: #fff;
vertical-align: top;
padding: 2px 1em;
}
div.text:after {
display: block;
text-align: center;
font-size: 20px;
margin-top: 1em;
content: "This is the subtitle";
}
.container {
background-color: #111;
display: inline-block;
}
.container img {
display: inline-block;
}
Now, whether you should do that with CSS is another question entirely. Content that's actually part of your page's message should be part of the page, not part of a style sheet.
Also, your "container" should probably be an <h1> tag. Also you don't need to close <img> tags, and self-closing tags are pointless in an HTML5 document (which yours may or may not be I suppose).
Try this:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="subtitle">My subtitle</div>
<div class="clear"></div>
</div>
</div>
</div>
.text {
margin-bottom: 0px;
padding-bottom: 0px;
}
.subtitle {
margin-top: 0px;
padding-top: 0px;
}
There's probably 100 different ways to do this... Here's one. In your line of text, just use a <br /> and a <span>
<div class="text">This is the Title<br /><span>The SubTitle would go here</span></div>
Then style your subtitle like so:
.container .text span {
/* Something styled here */
}
The html your using could be improved as it is not really appropriate.
Try something like this
<div class="header">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<h1>this is the title</h1>
<h3>This is the subtitle<h3>
</div>
.header{
overflow:hidden
}
.header img {
float:left;
}
.header{
text-align:center;
}
Thanks, #Sergio S. That worked for me. A more general way of doing this, based on Sergio's answer (is the following):
CSS:
.classofheadertext {
margin-bottom: 0px;
padding-bottom: 0px;
}
.classofsubtitletext {
margin-top: 0px;
padding-top: 0px;
}
Full credit once again to Sergio. I've just put this in simple form :D
I am trying to create a form with multiple rows. Each row has an optional input field followed by a mandatory button. The buttons should line up vertically - something like this:
_____________ _______________
| input 1 | | button 1 |
|___________| |_____________|
_______________
| button 2 |
|_____________|
I tried to float the button left with a fixed left margin, but doing so moves the input field to the right of the button - even though the input field appears first in the markup:
<div>
<input type="text">
<button>Action 1</button>
</div>
Please see my jsfiddle here. Why is this happening and what's the correct solution?
You need thee div container to do this as shown in this jsFiddle.
HTML Code
<div class="container">
<div class="left">
<button>
</div>
<div class="right">
<button>
</div>
</div>
CSS Code
.container {
width: 190px;
height: 22px;
margin: 0;
}
.left {
float: left;
width: 95px;
height: 22px;
}
.right {
float: right;
width: 95px;
height: 22px;
}
Use rows.
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 1">
</div>
</div>
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 2">
</div>
</div>
With the following styling.
div.row-rap {
width: 100%;
}
div.row-rap .right, div.row-rap .left {
width: 50%;
float: left;
}
Here's an alternative, the margins and colors may need modification. See jsfiddle link for sample result.
It has a left-aligned label and right-aligned input (button style) in a div, for each line. The non-breaking space is needed as a placeholder in the span element that represents an "empty label".
http://jsfiddle.net/qallar/kfgCb/5/
The html is:
<div class='line'>
<span class='formlabel'>label 1</span>
<input class='formbutton' type='button' value='button 1 text ' />
</div>
<div class='line'>
<span class='formlabel'> </span>
<input class='formbutton' type='button' value='button 2 text' />
</div>
and the css:
.line
{
display: block;
background-color: #ddd; /* also try #fff */
margin: 0px;
padding: 2px;
height: 30px;
width: 200px;
}
.formlabel
{
float: left;
background-color: #eee; /* also try #fff */
margin: 0px;
padding: 2px;
width: 75px;
height: 100%;
clear: both;
}
.formbutton
{
float: right;
background-color: #0f0;
margin: 0px;
padding: 0px;
width: 100px;
height: 100%;
}
The input field is flying to the right of the button because it is an inline element. Float works on block elements only, inline elements will always flow around the floated elements. This explains the behavior in the original jsFiddle.
Having said that, even if I put display:block on the input element it still behaves like inline. I was able to make the basic concept work for a div though, which is a true block element. See the jsFiddle here.
<div class="row">
<button>Action 1</button>
<div class="in"></div>
</div>
.row {
clear: both;
}
.in {
background-color: green;
height: 24px;
width: 100px;
}
button {
float: left;
margin-left: 110px;
width: 150px;
}
The only workaround seems to be the one offered by Musa (see this jsFiddle) where he aligns the buttons to the right using text-align and limiting the width of the div.
I am not a CSS expert and usually this task works for me using table
<table>
<tr><td>Optional Input</td><td>Button</td></tr>
<tr><td>Optional Input</td><td>Button</td></tr>
</table>
if table by some reason is not an option you can use div/span
<div style="display: table-row">
<span style="display: table-cell">Optional Input</span>
<span style="display: table-cell">Button</span>
</div>
It will about like this
using Block formatting context https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context
jsfiddle code: http://jsfiddle.net/EeNFH/9/
the html code:
<div class="inp">
<input type="text">
</div>
<div class="btns">
<p><button>Action 1</button></p>
<p><button>Action 2</button></p>
</div>
and the styles:
input {
width: 100px;
}
button {
width: 150px;
}
.inp{
float:left;
}
.btns{
overflow:hidden;
}
I've got a weird CSS float problem in IE6 and IE7.
My HTML is:
<fieldset style="float:left">
<legend>Summary</legend>
<div class="display-label">Recruitment type</div>
<div class="display-field">Permanent Labour</div>
<div class="display-label"># resources</div>
<div class="display-field">2</div>
<div class="display-label">Request Created</div>
<div class="display-field">4/28/2011</div>
<div class="display-label">Requested by</div>
<div class="display-field">1066594</div>
<div class="display-label">Status</div>
<div class="display-field">Active</div>
</fieldset>
and my CSS is:
.display-label, .display-field
{
padding: 0.35em 0.25em;
float: left;
}
.display-label
{
width: 13em;
text-align: right;
clear : left;
font-weight: bold;
}
.display-field
{
margin-left: 1em;
}
IE 8+ and Firefox display this correctly like this:
IE6 and 7 , though, display the following:
How can I fix this?
you do need to contain the floats, i.e. use some form of clearance, but you don't need to float everything
first remove the inline style, unfloat the fieldset
<fieldset style="float:left">
if you want fieldset to "shrink-wrap" (floating an element without a width should do this) you'd be best to set a width or max-width on it, IE hasn't quite got the shrink-wrap behaviour right the element to be "shrunk" contains elements with hasLayout which this 'fieldset` does because of the floated div(s) inside
then this CSS should work without hacking the HTML
.display-label,
.display-field {
padding: 0.35em 0.25em;
}
.display-label {
float: left;
clear: left;
width: 13em;
text-align: right;
background: #eee;
font-weight: bold;
}
.display-field {
overflow: hidden;
}
EDIT: You need to specify a a clear after the label and the field are created. You should technically be wrapping both the label and field with a container element to prevent misalignment, but this should accomplish what you're looking for.
<fieldset style="float:left">
<legend>Summary</legend>
<div class="display-label">Recruitment type</div>
<div class="display-field">Permanent Labour</div>
<div style="clear:both;"></div>
<div class="display-label"># resources</div>
<div class="display-field">2</div>
<div style="clear:both;"></div>
<div class="display-label">Request Created</div>
<div class="display-field">4/28/2011</div>
<div style="clear:both;"></div>
...
</fieldset>