I have a webpage whose alignment is alright in edit mode, but when my page is in read only, the alignment changes and all textboxes alignment change too. I tried to fix in read only, but then it is not working in editable mode.
Can I fix it by conditional CSS?
CSS do not have this type of mechanical, if you want to do that,
your should use
SASS or LESS
However Without your code it's hard to give you a concrete example
but you can always do it in PHP or JS
Exemple in PHP
<?php
$title = "page4";
?>
<html>
<head>
<meta name="Dynamic CSS" content="" />
<title>My Page</title>
<link rel="stylesheet" href="<?php if(isset($title) && !empty($title)) { echo '/css/dynamic.css'; }else{ echo '/css/style.css';?>" />
This is just an exemple; but again, without your code;
It's a bit complicated to know your needs
Do you use the contenteditable attribute? If you do, you can use the [contenteditable] attribute selector in CSS.
Or you can add different classes to the body element with a small piece of JavaScript and use the class selector in CSS.
Related
I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.
I'm kinda new to HTML, PHP and CSS and I have an issue with my stylesheet not applying some changes.
Here is the part in my HTML where I've got an issue:
<div class="container" id="contact">
Some Random Text
<br/><br/>
More Random Text
</div>
And the corresponding ID in my stylesheet:
#contact{
color:white;
font-size:20px;
font-weight:bold;
}
I am using Bootstrap for the grid and such thing and I've already made sure to call the Bootstrap stylesheet before my own (to not overwrite my own changes).
What I really don't understand is that if I type the following HTML, I got the result I need but not with the previous one:
<div class="container" style="color:white; font-size:20px; font-weight:bold;">
Some Random Text
<br/><br/>
More Random Text
</div>
I hope that my question is clear, and that I haven't made to many English mistakes (not a native speaker).
Maybe you didn't link your css right?
For example, if you have your index.html file and style.css file in one directory, you may write like this:
<link type="text/css" rel="stylesheet" href="style.css">
But if your css file on the folder "css" don't forget to write: href="css/style.css"
After following Ths's answer, I've looked for a solution to this possible caching problem.
And after changing my stylesheet call from:
<link rel="stylesheet" media="all" type="text/css"href="css/style.css" >
to:
<link rel="stylesheet" href="css/style.css" media="all" type="text/css <?php echo date('l jS \of F Y h:i:s A'); ?>">
It seems to now update properly.
Here is a link to the explanation on this CSS-caching problem:
https://css-tricks.com/can-we-prevent-css-caching/
It’s because your rules are on the html tag what has more precedence
You should identify with your developer tools what styles are effectively setting the styles
Style precedence is a bit complex to solve as « you new » but first as your rule is « active » (seem not but but using developer tools to see it will help)
Could also try to be more precise with a « .container#contact » does it work ?
Order of stylesheet processing do not drive precedence logic but in some cases it change the result is « active » styles
F12 and Check styles tab...
I have a very confusing problem and I'm not sure what's wrong. My CSS styles completely disappear when I add the media attribute to the link tag in the head of the html file. When I remove the attribute, the styles show up just fine. But I need this attribute to set the size for the display. Here is what I have in my head:
<head>
<title>Learning Addition</title>
<meta charset="utf-8">
<link rel="stylesheet" href="DesktopCss.css" media="screen and (max-width:481px)" >
</head>
Anyone know what the problem can be? Thanks.
You probably just copied the media query without understanding what's happening in it. Or else you simply overlooked the error in it.
Your query defines that this css file should be used only up to maximum screen size of 481px. Which is highly likely what you're not trying to do.
You should change max-width to min-width to make it work.
Also one more change that I would recommend is using all small case in the file name of your css file, and also changing the original name of your file on your server to small case, to avoid browser incompatibility issues.
Your code should look something like this:
<head>
<title>Learning Addition</title>
<meta charset="utf-8">
<link rel="stylesheet" href="desktopcss.css" media="screen and (min-width:481px)" >
</head>
If you're trying to load CSS that will apply to a desktop browser, unless you're using the world's smallest monitor, you should be saying
screen and (min-width:481px)
I am working on responsive website that has 100's of pages. It is implemented using a CMS. The problem is, I need to apply some styling only for homepage.
It is a bit cumbersome to add a class or id in the CMS for one page as it uses templates to render pages.
I've added the css in the head section. The reason why I don't want to add in external file is beause the same id might be used on some other page.
Is adding CSS in head section a bad practice in this case.
<head>
<style>
//my css
</style>
</head>
<body>
</body>
Thanks
It's perfectly fine to have inline CSS. Whether you should use inline CSS or simply set a unique ID for the page depends on the complexity and flexibility of the CMS you're using. Using inline CMS just means that you'll have to update the CSS from each individual page, rather than from a single source for all separate pages.
As for your second point, adding CSS to the head in a <style> tag is not bad practice. In fact, <style> is required to be a child of <head> in order to validate correctly. According to the HTML 5.2 specification, <style> can be a child of any element as long as it it scoped, though at the present date, Firefox is the only browser that can use the scoped attribute.
On top of this, using a <style> tag in the <body> could lead to a flash of unstyled content due to the way in which the page gets loaded. So if you use inline CSS, always do so in the head to both validate correctly, and improve user experience :)
Hope this helps!
In a word yes. For reasons of maintainability. You would be better using the cascading nature of css to target a style specific to a specific page than to have lots of inline styles.
For example, consider:
<body class="my-page">
<h1 id="myId">Title</h1>
<body>
<h1 id="myId">Title</h1>
h1#myId{ font-size:12px; }
body.my-page h1#myId{ font-size:14px; }
the latter style will have precedence. h1#myId would be global, yet on a specific page you can override this style. Is there no way to work out what template is in use, and adjust the body class?
If your CMS uses say PHP...
You could detect if you're in homepage and than call your custom external stylesheet, something like:
<?php
$page = $_SERVER["REQUEST_URI"];
$isHomePage = $page==="/" || $page==="/index.php" || $page==="";
if( $isHomePage ) {
echo '<link href="homepage.css" rel="stylesheet" type="text/css" />';
} else {
echo '<link href="style.css" rel="stylesheet" type="text/css" />';
}
?>
</head>
Firstly, I've done some Google'ing and found the IE 'conditional comment' and understand it's non-standard. I also get the impression there is no standard HTML 'IF' so my question is about what I need to do to achieve the same effect (Javascript perhaps?)...
I'd like to conditionally include an external .html file (from a selection of external .html files). Specifically, the external files each contains nothing but a <meta> element on a single line. Alternatively is it possible to have multiple inline <meta> elements in a HTML file and to 'choose' one conditionally (effectively ignoring the others)?
Basically, can I do something that would achieve the same as one of either of these pseudo code examples?
Example using pseudo code for external files...
<html>
<head>
if some-condition
<!--#include file="meta1.html" -->
else
<!--#include file="meta2.html" -->
...
</head>
...
</html>
Alternative example (again pseudo code) for selecting alternative elements directly...
<html>
<head>
if some-condition
<meta name="viewport" content="abc" />
else
<meta name="viewport" content="def" />
...
</head>
...
</html>
NOTE: In all cases the <meta name attribute will always be viewport - it's just the content attribute which needs changing perhaps with some other attributes.
EDIT: The main condition would be the type of client. One example is that to help correctly size web app pages on an Android device you can use certain content data for the viewport that only Android devices understand. For conventional browsers, I would set a default set of data for content (for width/height for example). This could also be expanded for other clients such as Google TV, iOS etc etc.
Using Javascript:
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );
Demo: http://jsfiddle.net/ThinkingStiff/ccX5p/
You could do this with javascript / jQuery quite easily.
Set your conditions and then append() to the head.
Example:
if(//condition here){
$('head').append('<meta name="viewport" content="abc" />')
}
else{
$('head').append('<meta name="viewport" content="def" />')
}
if you are using a server side, like asp or java, the thing becomes lot easier for you.
i shall consider you are not using server side coding.
use javascript for getting the browser name (navigator.appname I guess).
then you may use DOM to add <meta ..../> tags inside <head> element.
document.getElementsByTagNam('Head').appendChild(metaChild);