When I adjust the screen size , the orange line which is defined by a h1 tag doesn't move downwards with the text and also my orange boxes that i had floated to the right merge behind the text.
I know I need to include Media Queries somehow but no idea how, can anyone help me?
Thanks!
Ok, first of all I don't think I have ever seen anyone use as many breaks <br> tags on a single page as you have haha.
The answer to your question is to simply use the <hr> tag (horizontal rule), wherever you want a line.
For example after the closing div tag for timings add the <hr> tag. By default the <hr> tag is styled black so we need to add some simple styling to your stylesheet.css
hr {
border-top: 1px solid #bd6e22;
}
If you wanting to add spacing above, below or even both then add this to the styling.
hr {
border-top: 1px solid #bd6e22;
margin: 20px 0;
}
I have put 20px for an example but you can change that to what ever you want.
Hope this helps.
Ok you need to open up http://me14evb.leedsnewmedia.net/slate/stylesheet.css in a ftp client.
then https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ use the #media quieres for each page break size and adjust the style's accoridng to each device :D
good luck!
Chris
Related
I made a report of Qweb in odoo 10. Put my css in tag and place it in ".page" class div. Like this
<div class="page">
<style type="text/css">
.header,
.footer {
display: none !important;
}
</style>
</div><!--end of page-->
It is working perfectly on screen but when I generate PDF or take print from the screen by CTRl + P. It doesn't shows the css colors, backgrounds, padding and margins. I have consulted following link:
Plus I also have one solution. If we apply this tag it reflects some of the properties on the printing page.
t-attf-style="background: #333;color: #FFF; padding: 10px 0px; margin: 0px 0px 0px 6px;"
Is there any way to print the backgrounds and some different font colors on printing page other than these options. The first link is not making any changes and the second solution don't work for all properties plus its very time taking to place this tag with all the HTML tags.
I am facing this problem from last one year. That would be great help and a new learning If someone helps me sort this problem.
Thanks
Well the right answer is always the one through that separate module of defining and calling color fields as done in custom invoicing module. But I suggest a hack. Create images of that color and put them on that area with position: absolute and adjust the remains(text) on it. Plus for font and other things t-attf-style works perfectly.
Hi I'm trying to have a word or group of word in a different color in a . This is the code I use:
<h2 class="text-blue">
We are a <span class="text-orange">photography & video production</span>
studio improving businesses & brand's image and helping them to achieve their goals
</h2>
css:
.text-blue{
color: #645f5f;
}
.text-orange{
color: #ff8400;
}
My problem is that somehow the orange text appears smaller than the rest and not on the same line. Can someone tell me what I do wrong? Thank you very muchscreenshot
That's a little strange...from what I can tell, span shouldn't really change the size of your text. I put it into Codepen as well, and I didn't really see any difference. However, if you really want to make sure, I recommend just manually adjusting the .text-orange class, so that the text is the same size as that of its parent class:
.text-orange{
color: #ff8400;
font-size: 100%;
}
Give that a try. Let me know if that works :)
Ok I solved it thanks to you J. Zhou
I changed the span by a p and added a display:inline into my class. Following is the code:
<h2 class="text-blue">We are a <p class="text-orange">photography & video production</p> studio improving businesses & brand's image and helping them to achieve their goals</h2>
css:
.text-orange{
color: #ff8400;
display:inline;
}
It's very likely that your span is being styled elsewhere, and it's receiving display: block - which is why it's breaking the line - and also a font-size. You can see it at the developer console.
If that's the case, then I highly suggest that you correct it instead of using another tag, because span is the most adequate tag for inline style exceptions.
If you wish to keep that style, try changing its selector, making it more specific, so it doesn't affect all your span tags.
just add the font-size you want like this:
.text-orange {
font-size: 100% !important;
}
this will undo any predefined styles and make font-size 100%;
similarly you can add more styles with !important;
"If my answer is correct then please mark my answer as the right answer-> it will help my profile thanks Read: stackoverflow.com/help/someone-answers"
I have an application that has a lot of buttons in the window. In writing the HTML documentation pages for this, I've been successful in creating a bordered, sorta-shadowed CSS <span> with text within that represent the buttons that just have legends on them.
This allows me to show "momentary" buttons like these...
...that just have a legend on them in such a way that it's reasonably obvious what I'm describing by simply putting...
<span id="button">LAP</span>
...in line with the associated description (and my custom documentation system makes it even easier by letting me invoke the style inline with [s button LAP]. Fun. :) Here's the style I built for that:
span#button
{
font-family: Courier;
font-weight: bold;
white-space: pre;
border: 1px solid #000000;
background: #ddddee;
padding-left: 2px;
padding-right: 2px;
color: #000000;
}
Here's screen clip of part of the documentation that uses that technique:
Also within the application, I have buttons that have "LED" indicators on them. A typical one might display a green LED when on, and a dark LED when off. Screen clip from the application (with a dark style sheet, so the buttons are dark) showing some of these:
I already have nice little .jpg images that show all the "LED" colors I use, conversely, an embedded CCSS box filled with the right color would be fine too.
What I would like to do, and am having no luck at all doing, is create a <span> within the text that looks as least somewhat like one of those buttons -- without going to specific images for each button, or in other words, using CSS. Since the only things that vary are the LEDs and the text, I want to can the LEDs and feed in the text. Something like...
<span id="greenbutton">Run</span>
In order to do that, I need the LED to appear above the text, and size the text small enough to land underneath it, and center them both within a bordered box as the text-only version above does. I would like an output like this (button built in an image processor)...
press to start
...from this:
press <span id="greenbutton">RUN</span> to start
It seems like it ought to be easy enough; and I can add quite a bit of complexity within my documentation system if required to make it all work -- multiple nested spans, divs, images, test, whatever it takes -- but I keep running into these two showstoppers:
<span> wants things to come one after another horizontally
<div> either causes line breaks or floats left or right
I can't seem to get a <div> to just land in the text where I put it in the first place, although I've been able to make them look just like I want them to because they understand vertical alignment and positioning withing their own context.
I was also thinking of some actual images of buttons with the text removed from them in each LED state, used as background to a span, where the text is overlaid on that background, thereby looking like a specific button. I've not tried this, as I can't seem to find how to make a span have a background and <div>... a <div> won't stay where I want it (not left or right, but right there, or else refrain from breaking the lines if it's not floated.
I'm not opposed to putting a table inline, either. If I knew how...
I hope I'm missing something. In which case, help! Or is this impossible, and the only solution is to screen-cap the many, many buttons in each of their various states (some actually display multiple LED colors for various settings, worse yet) and then drop the images in where I want them? Because although I could do that, it's awfully clumsy and effort intensive. :(
Introducing the pseudo element "before"! Ta-da!
<p>Green button</p>
<span class="myButton greenbutton">RUN</span>
<p>Red button</p>
<span class="myButton redbutton">RUN</span>
<p>Click this purple button <span class="myButton purplebutton">RUN</span> here.</p>
<style>
span.myButton {
display:inline-block;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding:1px 2px 0;
background: #dde;
width:20px;
height:auto;
font-size:10px;
font-family:monospace;
text-align:center;
}
span.myButton:before {
display:block;
margin:2px auto 0;
width: 16px;
height: 5px;
border: 1px solid #000;
content: "";
}
span.greenbutton:before {background:#99FF00;}
span.redbutton:before {background:#FF0043;}
span.purplebutton:before {background:#A200C1;}
</style>
Updated answer: I changed the display on the span to inline-block, so it will go inside a paragraph. I missed that requirement on my previous answer.
I added a class to each span, so that all spans in your document won't be affected, just the ones with that class.
Technically, if you are going to have more than one green button, you shouldn't use an ID for it. ID's are supposed to be unique and therefore only used once in a document. So I've also converted that to a class.
in CSS, the period denotes a class, as opposed to the # sign denoting an id. Ergo: span.myButton targets the span with class "myButton". span.greenbutton targets a span with the class greenbutton. You can have more than one class on an element.
I took the background-color property out of the span:before style, and put it in a class specific style -> span.greenbutton:before. Basically, the classes for the span.myButton and the pseudo element span.myButton:before are the same for all these buttons. But for each color, put an additional class on the span, and create a style with that class for it, using the background color you want. Hope that's clear. Fiddle updated too.
https://jsfiddle.net/maguijo/05zwwjy6/
I have an HTML form with a bunch of input fields (of type text and select). I am floating them such that there are two on each row. In all browsers (including IE7), everything works okay, but for some reason in IE8, whenever I click inside any of the fields or their labels, that field or a surrounding one vertically moves up or down. The position then returns to normal once I click away from the box, though then another nearby box might move. Also, not all of the textbox fields have this issue, and clicking the same textbox doesn't always cause this issue. Any ideas?
I had the exact same problem, and to fix it, I set
display:block
On the element that was jumping around and that fixed it. Hope that helps.
Problem is when you focus an input text element, your browser puts 2px border around it for focus which is shifting its position if it is contained in a tight container...
I think it is more related to having 2px border all the times. Use the same color border and your text field to have transparent borders...
Your problem is addressed on this question
StackOverflow Question when focusing an input field border 8270380
This is speculation, but since focusing in an element seems to trigger the shifting, you may have different styles applied to those focused elements. Increased margins or borders could be responsible.
Not a big deal just put:-
outline: none;
in input tags
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
display: block;
border-radius: 5px;
outline: none;
}
if you want to have a border of your own then put
input:focus {
border: 2px solid salmon;
color: #333;
}
I think your structure conflicting with your parent structure CSS (there may possible is you using third party plugin something like jQuery UI or else) do one thing just for confirmation cut or copy your conflicting code and paste out side of you parent structure or beginning of your body tag. you find the difference.
For proper help I want to review you code.
Thnx
Look, this is my test site.
http://www.securebitcr.com/test/balls.php
The problem that I am having is, that I see the link style in the flying objects, but I am resetting that in my css .
Please take a look at my code, I've been trying a lot of things and anything works for me.
Thanks,
Marco,
Add this CSS?
.box img {
border: 0
}