When i design our web-form then i see then my web-form is very small then my web page
Because my form have only two field (two text-box two label)
How i design it. then he look Beautiful.
You need to learn about styles and Cascading Style Sheets (CSS). You can use this tutorial for example:
http://www.w3schools.com/css/
Increase
- font size
- paddings
- textbox size
Reduce
- page size
Or add some nice pictures around... :P
Bam! Chuck the following CSS into your CSS file. You may change the size of the font but generally all your form elements will now be nice and big.
input,button,select
{
font-size:18px;
}
or, in your HTML
<style type="text/css">
input,button,select
{
font-size:18px;
}
</style>
Related
I am making a website, but for some odd reason I can't move or resize the text. I do not want to use CSS because it is really hard for me to understand.
Here is an example of what i'm talking about in the image:
CSS is a very important part of front-end developing, so you shouldn't be afraid to use and learn it. You can start to link your css to your html like this :
<head>
<link rel="stylesheet" href="myfile.css">
<!-- Or specify the directory C:/User/...
but it's more efficient if you only specify the file created into a folder so if you move that folder changes will apply along with the html-->
</head>
Then open the created css and use these rules : (Only {})
Resizing Text:
p(or the part of html that you are using){
font-size: 40px;
}
Move Text :
(Consider that you are moving the object FROM the direction
to the opposite one:
example left:80px means that it will be 80px away from the left side.
p{
position:absolute;
left:80px;
top:20px;
}
I know three ways to change the size of the text, which are:
Use css
Or
Make changes using the Style tag inside the Head tag
Or
Using the Style tag inside the desired used tag, such as:
<p Style="font-size:10px;">hello</p>
use the font tag
<font size="3">I want the size to be small.</font>
I'm new to CSS (started looking at it yesterday!) so this is probably a very simple problem and hopefully someone will be able to help.
I can't seem to get any text to appear in the margin boxes of a print-formatted page.
Below is a very basic HTML snippet that should put "There should be something here!" in the top-left margin box and "This is the body of the page..." in the main page area.
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
#page {
#top-left{
content: "There should be something here!";
}
size: A4 portrait;
margin: 50;
}
</STYLE>
</HEAD>
<BODY>
<P>This is the body of the page...
</BODY>
</HTML>
The body text appears but the margin text does not.
My ultimate aim is to create automated test reports so I need to have identical headers and footers for multiple pages and will fill the main page area with the test data.
Thanks in advance,
Pete.
#top-left is not supported from all engines.
See the anser on a simulare questions: CSS Paged Media Contents Issue
The generic recommendation for you would be to go through some html and css tutorials, css tricks (some methods and technics might be deprecated) or better to use official references alike MDN or official W3C.
If you find this extremely tricky for you, and you still feel the need, you may use HTML editors with WYSIWYG components, they will simplify the start for you.
I'm working on a site which has to be compatible with many kind of devices, so I've chosen to use Bootstrap. My problem is that while I have a nice responsive grid layout, I don't see an out-of-the-box solution for making other visual parts of my site responsive. I mean for example font sizes, form field sizes, button sizes, etc.
What I want for example is to have normal button sizes for desktop, and large button sizes (.btn-lg class) for mobile. Similarly with form inputs. Is there a nice, global level solution for this way of responsiveness?
Thank for the answers.
EDIT: I would like to reuse the existing bootstrap classes as much as possible, with minimal added media-query or other code. I'm looking for something like "conditional classes" on elements based on resolution, like the following: if there is "sm" or smaller screen, add "btn-lg" to "btn"-s. If there is "md" or bigger, don't add anything, just use pure "btn". And something similar with form inputs.
Font-sizes and paddings are more simple with simple media-queries of course. My problems are mostly with form fields and buttons, just as I note in the corrected title.
I would like to avoid copying and duplicating more complex (like buttons and form fields) Bootstrap CSS code into my css
They are responsive to some extent. To add this level of responsiveness you must write your own media queries.
It's very easy. It's even easier if you are using SASS or Less.
See starting at line 260 in the variables file. Here's an excerpt.
#screen-xs: 480px;
#screen-xs-min: #screen-xs;
#screen-phone: #screen-xs-min;
A phone example:
#media (max-width: $screen-xs) {
// Change h1 size
h1 {
font-size: 20px;
}
// Change .btn font size.
.btn {
font-size: 10px;
}
}
If you are not using Sass or Less, just swap the variable $screen-xs with the value that you want--480px, for example.
use % rather than px.
Or use media queries within your css
My main issue is that my CSS does not load with the elements. I'm placing my CSS/HTML insde the HTML boxes as a lot of styling is not allowed directly in the HTML. There are a bunch of other frustrating things with Google Sites but this is what I need help with right now.
I'll navigate/refresh my page and all of my elements will display without CSS. Then after a few seconds the CSS is applied and things look how I want.
How do I get the CSS to load correctly? I can't have my menus and object load looking all crazy.
Here is a random example of code that does this (anything I've put into these boxes does this)
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p>
<span>T</span>he first letter in ths paragraph is styled
with CSS to be 400% larger than the rest of the text.
</p>
UPDATE: I've spoken with a Google Apps rep and they opened a ticket as the css not loading is a bug. No word on the time frame but they are working on it.
I have the same problem and a workaround can be
<style type="text/css">
.show-on-load {
display: block !important;
}
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p class="show-on-load" style="display: none;">
<span>T</span>he first letter in ths paragraph is styled
with CSS to be 400% larger than the rest of the text.
</p>
This way the content doesn't display until the CSS is loaded. Unfortunately, I can't use this workaround myself because I have to support IE8 and style tags don't load at all there.
Edit: use opacity instead so IE8 is supported
Hello all I am trying to work through (learn) MVC3 and I was playing aroudn with formatting my view using CSS. When using html / webforms have been able to use div tags and apply to that div teh approiate css style.
When using MVC adn creating the layout in my view I have found that multiple CSS styles are not being inheritted.
for example: (sorry for the image but razor syntax seemed to fail on the code cut/paste
In the above I had a div tag for certain sections. however when I used the class property
<div class="myfirststyle" >some content</div>
for each of these div tags only the first one would be detected. The remaining div tags seemed to inherit from the main body style. also defined in the main CSS file.
Can anyone point me to some information on how to setup and style div tags within a view using CSS instead of the stylel property as shown in the above image OR is this correct as you cannot directly call CSS styles from a view as they are only recognized by the page layout.cshtml or masterpage?
Thanks in advance
Update: to help troubleshoot what is happening please refer to the following
Code within the view (using razor engine)
code within the CSS
output from developer toolbar notice how first div layer attributes are detected
output from developer toolbar notice now how image div does not have a style applied
What is interesting is that when viewing the source in html you can still see the CSS tags within the DIV tags they are just not being picked up or inherited for some reason after the first node/div tag
Thanks again for any pointers
Definitely not the case. Something else is going on.
Did you include your CSS file in the view or it's master page?
<link href="#Url.Content("~/Content/YourCSS.css")" rel="stylesheet" type="text/css" />
Or manually add the CSS to your view?
<style type="text/css">
div.myfirststyle { ... }
</style>
If so, have you confirmed the spelling of classes? Typos happen, and we can't see from your image whether or not you added classes to divs. Add some of your code even if you can't format it well enough :)
There is definitely something else funky going on... it has nothing to do with MVC*, it occurs when the browser tries to render it, so the problem must lie with the html & css.
If would recommend validating your HTML and CSS, this will show errors with missing closing tags or anything of the likes that can cause these sorts of errors.
I would recommend using Firefox or Chrome with the Web Developer Toolbar to make html & css validation easier.
*nothing to do with MVC directly... indirectly, sure.
Unfortunantly the error was all on my part. While I did have an error withiin my CSS file regarding the use of the position attribute within my styles. below is the updated style:
.resultController
{
position:static;
width:90%;
border: 1px solid #7C90BE;
margin:5px;
}
.resultImage
{
display:table-cell;
color:Green;
height:36px;
width:36px;
}
.resultContext
{
display:table-cell;
padding:3px;
left:50px;
color:Red;
}
.resultButtons
{
top:5px;
}
The larger problem (all my fault) was the browser was not purging teh cache on close. After dumping the cache and reloading the page the styles began to render correctly. Thanks to all for taking the time to look at this and offer your input.