I'm a beginner at this. I have text and input buttons in a div on a tumblr theme, intending it to show up only on the homepage, but it shows up on all pages at the bottom. Is there a way to hide it for all others, set some sort of parameter, etc?
There is more than one way to achieve this. The easiest one is to add at the head section <style> #id, or .class {display: none}</style> you use either class or id or hide the div that contains them.
You could slice your page content like this:
There are three types of HTML models :
Layouts (or Templates, Grids), which represent a structure to hold Components.
Components (or Modules) which represent a sufficient and consistent auto part.
Contents (or Datas) which represent data could be found into HTML, JSON or MongoDB (database).
e.i.
<body class="layout-class">
<section class="component-class-1"></section>
<section class="component-class-2"></section>
<section class="component-class-3">
<input class="input" />
</section>
</body>
So if you have an input like this:
<body>
<div>
<input class="input" />
</div>
</body>
with this CSS
.input {
display: inline
}
you could only hide this on the homepage layout like this:
<body class="home">
<div>
<input class="input" />
<div>
</body>
and
.home .input {
display: none;
}
or only on the overview component
<body>
<div class="overview">
<input class="input" />
<div>
</body>
and
.overview .input {
display: none;
}
or only on overview into homepage, etc.
<body>
<div class="overview">
<input class="input" />
<div>
</body>
.homepage .overview .input {
display: none;
}
Related
I've got the following code, that's basically an Auth0 login form and it includes the logo image as an img element, which has it's own shadown tree: It looks like this:
<div class="auth0-lock-header-welcome">
<img alt="" class="auth0-lock-header-logo" src="/supp/pixel.png">
#shadow-root (user-agent)
<span>
<img />
</span>
<div class="auth0-lock-name" title="Log in">Log in</div>
</div>
How do I select the <span> in the #shadow-root, the <img> or even both in a classic .css file? Or do I have to write some React code for it?
Here's what I tried (none worked):
.auth0-lock-header .auth0-lock-header-logo::shadow #shadow-rootspan{
display: none;
}
:host(.auth0-lock-header .auth0-lock-header-logo #alttext-image) {
display: none;
}
PS: Sorry if it's a stupid question.
I'm trying to integrate an html page(which already has lots of formatting, links to css files, .js files etc) in to asp.net
The problem is that some of the styles used in the html refer to a form element, like this:
#Area form input[type="mytype"] {
content: '';
position: absolute;
display: block;
}
When I try to wrap this up in an asp.net page, it loses the formatting, because I need to put everything inside an asp.net 'form' with runat="server". The Css gets confused because it's now a form within and area within a form.
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
</head>
<body>
<form method="post" action="uitest.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUxMTcwNzgxMGRk/FKLdutHp78brNcMIqdbHqG7TcPZ3FoZf+HMkhw=" />
</div>
<div id="feature">
<div class="validate-form">
<span class="icon"></span>
<input class="required-email" type="email" placeholder="Email address">
<button class="btn"><span>Apply now</span></button>
</div>
</div>
</form>
</body>
</html>
What's the best way round this? Can I just rename 'form' to something else in the Css?
thanks
You should not have a nested form in a Web Forms app. If your CSS styles aren't being applied, your selector isn't targeting your elements properly or your selected has lower specificity than another selector with conflicting styles. runat=server has nothing to do with it, as that attribute is not actually rendered on the page.
Now, it appears you have an illegal type for your input. Based on your selector, you should have a structure something like:
<div id="Area">
...
<form>
...
<input type="mytype" /> //ILLEGAL!!
</form>
</div>
Why do you have a mytype input? You should only be using valid types, like text. Change them, and then add this:
#Area form input[type="text"]{
background-color:red !important; //This is just for testing, don't put into production!
}
If your inputs don't get a red background, then adjust to this:
form input[type="text"]{
background-color:red !important; //This is just for testing, don't put into production!
}
If you are still having trouble, actually paste your source code (click View Source from your browser, not Visual Studio).
UPDATE
Why do you have #Area in your selector? There is not element in your markup with that ID. This selector will work:
form input[type="email"]{ ... }
Assuming you don't need to be able to interact with the input elements in the page's code-behind file, it's perfectly acceptable to just use literal HTML controls in the page's markup.
Assuming, also, that you are allowed to tweak the CSS, you can remove form from your selectors, and then just make sure you copy everything into a <div> ... </div> with an id="Area" attribute.
CSS:
#Area input[type="whatever"] {
content: '';
position: absolute;
display: block;
}
HTML:
<div id="Area">
...
<!-- add markup here -->
...
</div>
I am trying to make two hyperlinked buttons go side by side. I saw this question but can not make the answers work. Below are my two attempts to make the buttons go side by side. The first attempt works but hyperlinks to the wrong location. The second one hyperlinks correctly but is not side by side. The third based on this question doesn't link anywhere but I think that has to do with using links instead of Javascript:submitRequests().
<!DOCTYPE html>
<html>
<body>
<head>
<style>
.container {
overflow: hidden;
}
button {
float: left;
}
button:first-child {
margin-right: 5px;
}
</style>
</head>
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>
Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 3
<div class="container">
<button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
<button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
</div>
</body>
</html>
If you just need plain links to work, just use links and style them to look like buttons (see also Styling an anchor tag to look like a submit button):
<style>
.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
font: menu;
color: ButtonText;
display: inline-block;
padding: 2px 8px;
}
</style>
<div class="container">
paste2
colSplit text
</div>
You could also do <button>paste2</button> but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.
buttons would line up side by side automatically since they're display: inline-block by default (I think). I'd remove the float: left since it could be causing some issues when nesting.
You should never nest forms. It'll lead to some really screwy things.
However, if you want two forms side by side you can make them do that by adding display: inline to them. Here's a small demo: http://jsbin.com/UgaMiYu/1/edit
The onclick attribute should't make any difference at all.
I just tried to add css to attempt 2. how about this:
HTML:
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit"/>
</form>
CSS:
form{
float:left;
}
DEMO: http://jsfiddle.net/uzDZN/
NOTE: Add class to form which has this buttons. Otherwise css may effect other form elements in website.
Utilizing regular buttons and setting their display property to either inline or inline-block worked for me.
I am using jquery mobile. I have defined a background image in index page inside css body{} tag. Back ground is coming fine but it's automatically loading in different pages also though I didn't declare the body css part in following pages. How to prevent that? and css body{background: url()} is only working on index page. here is my code
<style type="text/css">
body {
background: url(images/login2.png);
background-repeat:repeat-y;
background-position:center;
background-attachment:scroll;
background-size:100% 100% ;
}
.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}
</style>
</head>
<body>
<div align="center" data-role="fieldcontain" id="contentConfirmation" name="contentConfirmation">
<div >
<label class="userlabelclass" for="url" style="float:left" ><p>Username:</p></label>
<input class="userfieldclass" id="Lusername" name="uid_r" type="text" value="John Doe" " style="width:230px;float:right">
</div>
<div >
<label class="pswdlebelclass" for="url" style="float:left"><p>Password:</p></label>
<input class="pswdfieldclass" id="Lpassword" name="pwd_r" type="password" value="123456789" style="width:230px;float:right">
<label class="forgotclass" for="url" style="float:left"><p>Forgot Password?</p></label>
</div>
<div align="center">
<a href="listview_page.html" data-role="button" data-inline="true" data-theme="e" class="buttonclass" >Log In</a>
</div>
</div>
</body>
Jquery mobile navigation uses Ajax to load the body part only of the pages you navigate to. This means that the header of subsequent pages is ignored, and that the header of your first page is "applied" to all pages. If you want your background to apply only to your first page, I would recommend:
you create a data-role="page" div to hold the content of your first page, as recommended when using jquery mobile
You apply your background to this specific page element
I have
<input type='text', id='name'></input>
and I have
<p>my name is xyz</p>
I would like the <p> element to be located 20px the right side of <input>, how to use CSS to achieve this?
I realise that this is a little bit more work than simply adding a CSS style declaration, but could I suggest that you use slightly-more semantic mark-up to style your forms? Something along the lines of:
<form action="path/to/script.php" method="post">
<fieldset> <!-- to associate related inputs -->
<legend>Name</legend> <!-- a broad description of this group of inputs -->
<input name="name" id="name" type="text" /> <!-- input elements are usually self-closing -->
<label for="name">My name is</label> <!-- the for attribute takes the id of the associated input, and allows a click on the label to focus the input -->
</fieldset>
</form>
Then, in the CSS, if you want the label to be 20px to the right of the input, all you need to do is:
input {
margin-right: 20px;
}
/* or */
label {
margin-left: 20px;
}
JS Fiddle demo of margin-right.
JS Fiddle demo of margin-left.
Recommended reading:
http://www.alistapart.com/articles/prettyaccessibleforms
http://www.themaninblue.com/writing/perspective/2004/03/24/
<label><input type='text', id='name'><span style="padding-left:20px;">my name is xyz</span></label>
You can float the elements to achieve this:
input { float: left; }
p {
float: left;
margin-left: 20px;
}