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>
Related
I have a page like:
<div class="loginpage-form">
...some stuff
<form>
<div class="flexwrapme">
<input type="text"... />
</div>
<input type="submit".../>
</form>
<!-- DONT apply Style to inputs from form below -->
<form>
<input type="text"... />
</form>
</div>
This is a very basic question, but it's not clear to me : how do I properly style just the input type "text" or "email" within the loginpage-form > flexwrapme containers?
I had the following, but not convinced... :
.loginpage-form .flexwrapme input[type="text"],
.loginpage-form .flexwrapme input[type="email"] {
style stuff...
}
Am I writing this correctly?
Cheers! Pat
you don't need to add .loginpage-form for your style just this will do
.flexwrapme input[type="text"],.flexwrapme input[type="email"]{
your style
}
And one more easy way to do this would be to directly add class to your input elements and styling them
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;
}
I am using a CMS which when building a form wraps all it's contents with what it calls an "anonymous div" to comply with XHTML, unfortunately the theme was designed without this insight and there fore the submit button CSS is:
.contact form div.control input[type=submit]
This works if the markup is:
<section class="contact">
<form>
<div class="control">
<input type="submit" />
However because this additional DIV added by CMS:
<section class="contact">
<form>
<div>
<div class="control">
<input type="submit" />
How can I write the CSS a bit more adaptive so extra markup doesn't affect it so much, but without styling the individual element via ID or class???
Alex
Your selector should still select the input, the div won't affect that. If the div is causing layout problems, you might need to make it an inline element like this:
section > form > div { display: inline }
You should be able to just add:
.contact form div div.control input[type=submit]
or
.contact form div .control input[type=submit].
Either should work fine.
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