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.
Related
I am working/designing the front-end (working on the layout html+css, later will use php, mvc pattern) of a website. The website has a header, body, side menu and a footer The layout is ready.
There are a few forms which are unusually long/huge since all fields are necessary and I could not make them any shorter. The form opens in a new page.
Not to scare the user away I am planning to downsize the header on the form template (the design change will only apply to the form templates) and get rid of the footer completely.
I tried looking a few places but did not find how to go it done. In short, I want the site to have all block i.e. header, body, footer but when it comes to the form I would want to downsize the header and remove the footer to make the form look sleeker.
Is there a way to do this?
Note: I post no code because I have no problem with the code but the concept.
You can use display: none for the footerelement in CSS rules that only apply to this page (for example in a style tag in the head of that page).
Concerning the header, it depends how it is built, if it has a logo, background image, text, menu, whatever. In general you could reduce the height, make the logo smaller, hide parts of the text in there etc.
You can also done this thing using angularjs
ng-include
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body >
<div ng-include="'header.html'">
</div>
<div ng-include="'footer.html'">
</div>
</body>
</html>
Make sure the body of the page has a class, for example .no-footer .small-header or .form-page. and then in your CSS stylesheet, use something like this :
body.no-footer #footer{
display:none;
}
body.small-header #header{
height:50px;
/* or whatever you want to apply to make the header smaller */
}
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.
I have been asked to design a side scrolling site for Wordpress similar to this
site. Each post is positioned side by side on the page.
Im trying to work out if there is a line of PHP that i can add to page.php that will allow a normal vertical scrolling site to horizontal scroll ?? as far as I'm aware there is no jQuery used . . . . .
I've looked for countless amounts of Wordpress themes but can't seem to find the relevant piece of php for horizontal-scrolling. It seems to be quite a common layout for UK based illustrators/graphic designers. Does anyone have any ideas how to achieve this ??
thanks
https://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
the DEMO...
https://css-tricks.com/examples/HorzScrolling/
Is quite good - although could be more intuitive with anchors & arrows
Use this theme:
http://thethemefoundry.com/shelf/
Otherwise you'll have to digg into CSS for that effect.
Give your body (or for instance a wrapper div) an explicit width, either via CSS (fixed, see below) or JavaScript (dynamic and for instance depending on the number of articles). Then float your articles left and give them an explicit width as well.
<!DOCTYPE html>
<style>
body { width: 8000px; }
.article { float: left; width: 800px; }
</style>
<body>
<div class="article">...</div>
...
<div class="article">...</div>
</body>
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>