EDIT! -- The problem was to do with the browser Cache and the solution is to do a hard refresh in Chrome (CTRL + F5)
My site seems to break when switching over to from .html to .php and is not acting as expected when adding simple div elements with classes and using spanned styles or h tags.
Essentially I'm trying to add 2 simple elements to my page.
• A heading consisting of boldened and centered text.
• A div that will act as a vertical timeline.
Once I have added these elements using a h1 tag with custom styles and a simple div assigned to a class, it works as expected..
Until I add more text underneath my heading, at which point it breaks; my custom h1 tag style applied to my heading is no longer active and my timeline div disappears from view!
Even stranger.. when I delete the text the problem is still there. Even after I delete the timeline div the problem still persists.
Its only after I actually go into the css and delete the .timeline class does the span actually come back into effect, which to me makes no sense at all!
The problem is not present before switching over to php so this is how I switched from working in html to php code:
Open xampp Control Panel and ran 'Apache' and 'MySQL' and open my website project in Adobe Brackets.
Change the file extension of my index file from .html to .php .
Change the 'Live Preview Base URL to point to my project's directory in xampp's htdocs folder.
At this point the live preview works okay (apart from having to save to see updates)
Insert my heading into my document inside h1 tag and apply styles to h1 tag in css document
Create a div with a class to act as my timeline bar
At this stage, it will break if I add a line of text to the document ("is this working!?")
<div class="row" style="margin-top: 46px;">
<h1> BIOGRAPHY </h1>
Is this working!?
<div class="timeline"></div>
</div>
h1 {
font-weight: 650;
text-align: center;
}
.timeline {
width: 10px;
height: 2000px;
background: #454545;
position: relative;
margin: auto;
}
Sorry for the very long question and I hope it makes sense. I'm probably making a really silly mistake but I'm struggling to see what it is.
Thanks!
Just a quick update and a solution that I have found. I ended up switching to another local server and eventually ran into the same issue.
So the issue was actually down to the browser Cache..
The simple solution was to do a hard refresh on Chrome (CTRL + F5). This forced Chrome to read my up to date CSS file from the server.
I hope this helps someone with the same issue. And thanks for everyone's help in pointing me to all of the possible issues.
I am glad I will be able to continue to use Bracket's useful live preview feature! :)
Nothing breaks.
After replicating your code on my xampp and testing it as both .html and .php
They both have the same result.
Here is my code
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
font-weight: 650;
text-align: center;
}
.timeline {
width: 10px;
height: 2000px;
background: #454545;
position: relative;
margin: auto;
}
</style>
</head>
<body>
<div class="row" style="margin-top: 46px;">
<h1> BIOGRAPHY </h1>
Is this working!?
<div class="timeline"></div>
</div>
</body>
</html>
if you still have an issue, I would suggest you
Restart your Xampp Server
Tryout another browser
+++ GOODLUCK +++
Related
I'll try to explain the issue the best I can: I have two css uploads methods. The first one is with link rel and is working fine.
The second one (for performance issues), goes inside the css file and print directly the css into the page.
<!-- <link rel="stylesheet" href="<?php echo URL_SITE; ?>style/index.css" /> -->
<style>
<?php
$urlstyle = URL_SITE.'style/index.css?m='.(int) IS_ON_MOBILE;
$style = file_get_contents($urlstyle);
echo $style;
?>
</style>
There is absolutely no doubt about what is loaded. Those two methods returns the same css.
As an example we can use this part of the css
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
As you can see, there is an url inside.
When trying to load the css with the first method, the path is fine. Everything works fine.
But here comes the issues, when I try my second method writting this css inside the file where it's called. The url path of the css is wrong. (I shouldn't have the first ../ to make it works.
But here is the thing. Even if this code shouldn't be working with the second method. The file is loaded properly with no problem. And I can't understand why it's working. (And the cache is cleared ne doubt about that neither).
More stranger things, when I upload the website on server and i'm no longer in localhost, then there is indeed an issue and the file isn't found as it should be.
So working in localhost while it shouldn't. Not working in server while it should indeed not be working.
But I have something more stranger again, I got an other website. Same framework (that means same folder/file structure), same css file, same way of including the file. And with this one using the second method, the file is found in localhost and in server too...while it shouldn't be working with none of them.
I hope you have any idea cause I'm lost at this point. Thanks.
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
May be you have a folder containing picto has on another folder
I'm not sure I get 100% what your problem is, but it seems that you load your css with relative paths from two different starting points:
Loaded with link:
www.example.com/path/to/your/application/style/index.css
=> this loads the asset from:
www.example.com/path/to/your/application/assets/img/picto/arrow-down.svg
Included in site:
www.example.com/path/to/your/application/site.php
=> this loads the asset from:
www.example.com/path/to/your/assets/img/picto/arrow-down.svg
^^^
note the missing path due to "../" in your svg path
Maybe this is the answer to your problem, feel free to clarify if I didn't get you correctly! Please also check the developer console, especially the "Network" tab in Chrome and see what exactly is requested and double check the paths there.
i have this little but annoying issue displaying text content in the body of the mail. From a form page i send a mail HTML5 formatted.
This is what i sent via mail() php function:
<html>
<head>
<style type='text/css'>
body{
font-family:'Lucida Grande', Arial;
color:#333;
font-size:15px;
}
.div1{ display:inline; }
.row {margin-bottom:5px}
.background {background-color:#ffe508; padding:5px; font-size:18px}
</style>
</head>
<body>
<div>
<div class="row">
<div class="div1"><strong>Company:</strong></div><div class="div1">
$company</div></div>
</div>
</body>
</html>
This is what i display on OUTLOOK 2013:
Company:
company_name
It's wrong because i need to display this field on one line as i display fine on WLM
Company:
company_name
i also tried to use table instead of html5 but nothing changes.
Any idea? Thanks
If you don't need the divs, then simply remove them. They don't appear to be doing anything. The line could just be:
<strong>Company:</strong> $company
This means there's nothing which could interfere with this part of the layout.
CSS elements such as float, width and position of <div> doe not work in Outlook.
Div styles not working in Outlook Emails
#ADyson is correct. You don't even need them in your example.
In addition, keep in mind that margin does not work. Margin (capital M) does work. I understand that is not the correct use of Margin, but that's the way Outlook uses it. It's important to remember that email development is not Web development.
https://litmus.com/help/email-clients/outlookcom-margins/
Good luck.
I have 2 links.
For example - When a person clicks on the button "click here" - it should show www.google.com on the link bar, but it should redirect to "www.yahoo.com" and the person should not be able to see this "www.yahoo.com".
Yahoo and google are just used as an example.
How can I do that?
This was so ridiculously easy I guess this cannot be a hackers big secret.
Click HERE to be lured into my fake banking site
Although it does require javascript to be active on the browser
I would "recommend" using a full page iframe like this:
Upload a file to your server that contains this (in your example your server would be Yahoo!)
<!DOCTYPE html>
<html>
<head>
<style>
body, html, iframe {margin: 0; padding: 0; height: 100%; width: 100%; border: none}
</style>
</head>
<body>
<iframe src="https://google.com">
</body>
</html>
This should work alright for you and give the effect that the link is actually located on your own domain. Causing the APK download to look like it's on your machine.
The source domain can break free from the iFrame and therefore break your illusion. Many sites will do that, but it will still work properly for most of your needs.
Im currently making a poll website. And i were trying to change the font (to a custom font(font-face)) of the h1 tag but it doesn't work. But changing the color and everything else works. I have also tried changing the tag to p and giving it an id. The custom font works on all other pages but the poll php one.
#font-face {
font-family: Ubuntu-BI;
src: url('fonts/Ubuntu-BI.ttf');
}
h1{
color: #e9e9e9;
font-family: Ubuntu-BI;
font-size: 40px;
}
<style>
<?php include 'css/pollStyle.css'; ?>
</style>
<?php <!-- HERE'S THE REST OF THE CODE
echo "<h1>$title</h1>"; //< Title of the pole
I would really appreciate some help! :)
The PHP include construct does not output anything to the page. It includes the contents of a file into the current code base. What you want to do is put this into the HTML document head:
<link rel="stylesheet" href="css/pollStyle.css"/>
There is nothing wrong with the CSS itself, the problem must lay in the way it is included. As per miken32 answer you should use a link tag to attach the stylesheet. In theory the way you have specified would work as long as this code was within the <head></head> tags.
In my (PHP) web app, I have a part of my site that keeps a history of recent searches. The most recent queries get shown in a side box. If the query text is too long, I truncate it and show ellipses. Eg: "My very long query is..."
Currently, I truncate after a certain number of characters. Since the font is not monotype, a query of all I's is more narrow than a query of all W's. I'd like them to all be about the same width prior to the ellipses. Is there a way to get the approximate width of the resulting string so that the ellipses for any given string will occur in about the same number of pixels from the beginning? Does CSS have a way? Does PHP? Would this be better handled by JavaScript?
Here's another take on it and you don't have to live without the ellipsis!
<html>
<head>
<style>
div.sidebox {
width: 25%;
}
div.sidebox div.qrytxt {
height: 1em;
line-height: 1em;
overflow: hidden;
}
div.sidebox div.qrytxt span.ellipsis {
float: right;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
<span class="ellipsis">…</span>
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Short text. Fail!
</div>
</body>
</html>
There is one flaw with this, if the text is short enough to be fully displayed, the ellipses will still be displayed as well.
[EDIT: 6/26/2009]
At the suggestion of Power-Coder I have revised this a little. There are really only two changes, the addition of the doctype (see notes below) and the addition of the display: inline-block attribute on the .qrytxt DIV. Here is what it looks like now...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.sidebox
{
width: 25%;
}
div.sidebox div.qrytxt
{
height: 1em;
line-height: 1em;
overflow: hidden;
display: inline-block;
}
div.sidebox div.qrytxt span.ellipsis
{
float: right;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
<span class="ellipsis">…</span>
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Short text. FTW
</div>
</div>
</body>
</html>
Notes:
Viewed in IE 8.0, Opera 9, FF 3
A doctype is required for IE to get the display: inline-block to work correctly.
If the .qrytxt DIV's overflow occurs on a long word, there is going to be a wide gap between the ellipsis and the last visible word. You can see this by viewing the example and resizing your browser width in small increments. (this probably existed in the original example as well, I just may have not noticed it then)
So again, an imperfect CSS-only solution. Javascript may be the only thing that can get the effect perfect.
[EDIT: 6/27/2009]
Here is another alternative which uses browser specific extensions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.sidebox
{
width: 26%;
}
div.sidebox div.qrytxt
{
height: 1em;
line-height: 1em;
overflow: hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
-moz-binding:url(ellipsis-xbl.xml#ellipsis);
white-space:nowrap;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
Short text. FTW
</div>
</div>
</body>
</html>
Note that in order for the above example to work, you must create the xml file referenced by the -moz-binding rule, ellipsis-xbl.xml. It's should contain the following xml:
<?xml version="1.0" encoding="UTF-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:window>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>
You could also quite easily use a bit of javascript:
document.getElementByID("qrytxt").offsetWidth;
will give you the width of an element in pixels and even works in IE6. If you append a span containing ellipses to the end of each query a simple logical test in JavaScript with a bit of CSS manipulation could be used to hide/show them as needed.
Does CSS have a way?
No
Does PHP?
No
-
To do that you'd have to get the font metrics for each character, and apply them to all your letters in your string. While you could do this by using a drawing/rendering library like ImageMagick on the server, it wouldn't really work because different browser on different OS's render fonts differently.
Even if it did work, you wouldn't want to do it, because it would also take forever to render. Your server would be able to push 1 page per second (if that) instead of several thousand.
If you can live without the trailing ..., then you can nicely fake it using div tags and css overflow: hidden, like this:
.line_of_text {
height:1.3em;
line-height:1.3em;
overflow:hidden;
}
<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>
PHP should be left out of consideration completely due to the fact that even though there is a function designed for measuring fonts, http://www.php.net/imageftbbox , there is no way for PHP to know whether the visitor has a minimum font size setup that is larger than your anticipated font size.
#Robert
what if you put the ellipses in a div with a low z-index so that when it moves to the left (for shorter lines) they get covered up by a background image or something?
it's pretty hacky I know, but hey worth a try right?
edit Another idea: determine the position of the div containing the ellipses with javascript and if it's not pushed all the way right, hide it?