EDIT: First of all, sorry for not pasting the link directly. Secondly, thank you ALL for the help, everything works now. Thank you Manoz especially for pasting my code and fixing it. This website is magical, I've been trying (and failing) to make my code work all day yesterday, so I thought to give this website a try and got much more help than I expected. THANK YOU!!
I'm an amateur programmer in school, having a lot of trouble with div id. Here is a link of how my code looks like:
http://convert.neevia.com/docs/e7416408-ff15-4c01-954c-603bfd1ce941/test11.jpg
The problem I'm encountering here is that anything from #title to #footer is not showing up in the browser. In other words, it is not linking any id (such as #title) to the HTML code .
I would really, really appreciate some help. Thank you very much.
<!Doctype html>
<html>
<body>
<head>
<style type="text/css">
div{
border:solid 2px;
margin:5px;
padding:5px;
color:green;
}
#title
{
height:150px;
}
#menu
{
width:150px;
float:left;
height:450px;
}
#mainarea
{
margin-left:180px;
margin-top:10px;
}
#content
{
}
#footer
{
height:30px;
text-align:right;
}
</style>
</head>
<body>
<div id="title">
<p>The title</p>
</div>
<div id="menu">
<p>the menu</p>
</div>
<div id="mainarea">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html
Changes are being appeared when I change anything from #menu to #footer in CSS.
If Tony Barnes's idea didn't work (which you should try), you might just not be saving the file before you refresh your browser.
I see nothing wrong with your code. Until you post it in your question (https://meta.stackexchange.com/questions/22186/how-do-i-format-my-code-blocks) I'm not going to try it out, but it could be a caching problem. Ctrl+Shift+R (Win) Cmd+Shift+R (Mac) to refresh the page with a new cache. I noticed that you're using Dreamweaver. Don't. Especially do not use it's preview option. There are many better (free) text editors.
Caching probably isn't an issue though because it's all inline CSS.
The issue for me, is just that there is a cache file that is present in the browser. I had the same issue, so I had to remove that using CTRL + F5.
Otherwise, what does the red line means in the code? Does your text editors shows the error when you hover over to it? I am sure it would help you.
Third thing would be, to check the Html Inspector from your browser. To check that press F12, I am sure you will get the styled properties there, this way you will get to know which properties are being applied.
If the updated ones are not present in the Browser, then the cache is the issue. If they are being overridden then you will also know how!
Related
I tried to generate a PDF-file from a HTML/CSS-document by using the api of pdflayer.com. So far so good. everything worked fine. But there is one issue. If there is a page break, a line sometimes gets split like in the photo:
is there a way to get rid of this issue? I also tried html2pdfrocket.com it is the same there.
The text is placed within this html-construct:
<html>
<body>
<div class="overall">
<div class="content">
<div class="wrapper">
<div class="article">
Text
I found out that there exists a problem with compiling the content inside of multiple divs. CSS-rules did not affect the behaviour of the issue.
So I had an idea and what I made was to generate a "raw-html-output". In this html document is only
<html>
<head>
<style>
The only necessary css-rules.
</style>
</head>
<body>
Some text here.
</body>
</html>
Nothing more.
The API grabs the data from the simplyfied html-file and compiles them well.
i think the best solution would to prevent a break inside a paragraph on print.
Something like this:
#media print and (min-width:700px) {
/* you can change the selector to whatever you need */
.article {
break-inside: avoid;
page-break-inside: avoid;
}
}
If you use firefox, open the html doc with it and install the add-on named PDF Mage. Just click the icon to convert the page to PDF.
It always works for me without any problems.
Viele Grüße
You can try converting your HTML to PDF using the Syncfusion online demo. We are handling text and image split across the pages.
Note: I work for Syncfusion.
I have a very strange problem, i have a div with an anchor tag with an id in it, when i click on the anchor tag, it doesnt open the link in it, but if i right click it and open it in a new tab, it works perfectly, do you guys know why is that ?
here is my exemple :
<div class="toto">
<a id="tutu" href="https://www.google.com" >my cocorico</a>
<div>
cocorico
</div>
</div>
here is a jsfiddle: https://jsfiddle.net/mog8zf3t/5/
This issue is caused by using jsfiddle rather than your html.
The code runs in an iframe on jsfiddle and Google have specifically blocked you from being able to do this by setting 'X-Frame-Options' to 'sameorigin'
Either try running the code on your local machine or pick a different website which will allow you to display it in an iframe.
function go_to_href(href){
window.open(href,'_blank')
}
.toto{
background: grey;
color: white;
text-align: center;
font-size: 1em;
}
.toto a {
display:block;
}
<div class="toto" onClick="go_to_href('https://www.google.com')">
<a id="tutu" href="">my cocorico</a>
<div class="eps-Chip-content">
cocorico
</div>
</div>
Thank you all for your answers, i found the problem, and it was in my js, i had a event.preventDefault(); on the click of the anchor tag, and that's why it wasn't working. take it of and it works perfectly.
here is where i found my answer : https://api.jquery.com/event.preventdefault/
The reason is cause of frames and iframes. Two things.1 is same thing as #hairmot said. sameorigin.
But second reason is when you have your main site an https site like https://jsfiddle.net/mog8zf3t/7/ you cant have http links there. So you cant for example open an http://jsfiddle.net link on that page. So in real time usage you should consider both.
So in order to observe the reason this is what you can do. open inspect element on your browser go to console section. try to click on link and check the error.
for the fiddlejs code you provide the error is cause of same origin
problem ( the link you provide is not from same origin as the main
site).
In my case I had data-toggle="buttons" in the surrounding <div> which I discovered after a few frustrating hours. Posting as an answer as it may be helpful for someone.
I can't seem to get my header to display on the page where the jquery-steps form are displayed. And this only happens on certain mobile browser such as the 360Browser(v1.1.0) and also the WeChat Built In browser.
I don't have any clue what might be wrong here so any help guys?
My test website is at m.demo.rsi.sg. To get to the page, simply select any items (total checkout value must be > 40) and then proceed to checkout and click sign up.
Am nearly going bonkers over this - any help would be appreciated, thanks!
<div class="header">
<div class="logo"></div><div class="menu"></div>
</div>
<style>
.header{position:fixed;
top:0;
z-index:2;
}
</style>
UPDATE: This has been solved. My CSS selector was wrong. Thank you so much for all who responded!
I am just starting out building a site on a local server using MAMP. I have worked on other people's code but am a sort-of novice when it comes to starting from scratch so forgive my naivety. My CSS file wont apply and give me the proper background color for my header. I have two stylesheets, style.css and 960.css (downloaded from 960.gs).
Upon going to index.html, 960.css renders on the page but style.css is nowhere to be found. They are in the same folder, and called exactly the same on index.html. Please help.
My file structure:
-project
-styles
style.css
960.css
index.html
The code is as follows:
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles/style.css"/>
<link rel="stylesheet" type="text/css" href="/styles/960.css"/>
<title>title</title>
</head>
<body>
<div id="header_container" class="container_12">
<div class="grid_2">
<h1>Title</h1>
</div>
</div>
</body>
</html>
and style.css
#header_container .container_12 {
background-color: #000000;
}
If you are not familiar with the 960 grid system, all it does is provide div classes and measurements for them. The container_12 you are seeing is in 960.css but is only set with dimensions, not background color so I dont believe it is necessary to include 960.css as it is pretty long. It may be an issue with MAMP, but I'm sure this is a simple mistake somewhere in the code, but I've been working on this issue so long im just braindead at this point. Thank you so much for any input/suggestions you have. If I have not made myself clear anywhere or I need to explain something in more detail please let me know! Thanks again.
This CSS selector you have written is wrong.
#header_container .container_12 {
background-color: #000000;
}
Use
#header_container {
background-color: #000000;
}
or
.container_12 {
background-color: #000000;
}
Hope the class .container_12 belongs to "960.css" and you are trying to force the class in your style.css, if yes, try to update your css (!important) like below..
CSS:
.container_12 {
background-color: #000000!important;
}
you selector wasn't wrong, you were only violating group selector's rule and a couple of things. However to use group selectors, you need to separate each selector with a "," not space. so you should have something like this;
#header_container, .container_12 {
background-color: #000000;
}
But I wonder why you are passing the same property and value to the same div element with a class and an id?
Good luck.
On this site I'm gonna offer this Xmas to my brothers-in-law, I have a page structure like this:
<body>
<div id="container">
<div id="menu">[...]</div>
<div id="wrapper">
<div id="section1">[...]</div>
<div id="section2">[...]</div>
etc etc etc
</div>
</div>
</body>
All looks perfect on Firefox... but on my IE9, the page isn't aligned and the #font-face isn't loading either...
The CSS goes like this (looks to me there's no problem here)
#container{width:960px;margin:0 auto;position:relative}
#wrapper{width:780px;float:right;margin-bottom:30px}
#menu{width:180px;float:left;background:url(../img/site/menu_bg.jpg) repeat-y right;height:100%;position:fixed;padding-top:55px}
Already tried a different set-ups with no change at all ... and I'm starting to rip my hair off here ... any suggestions?
Thanks in advance.
PS: If it helps ... the page in question is: www.sweetdreams.pt/escondido.php
EDIT: As requested ... this is the beggining of the code in the page:
<?php if(!ob_start("ob_gzhandler")) ob_start(); ?>
<!DOCTYPE html>
<html lang="pt-PT">
Are you by any chance running IE in Compatibility Mode? (check this by pressing F12 and looking at the Developer tools below in the browser window.
EDIT:
In IE, it pays to have a DOCTYPE declaration, otherwise it will just go to Quirks mode.
Please do post full HTML source.
The document type declaration must be at the very first line in the file, otherways it's ignored. It also must not preceeded by any characters, i.e. no blank lines, spaces, tabs, nothing, just <!DOCTYPE html>.
instead of { margin: 0 auto; } try...
#container {
position: absolute;
left: 50%;
width: 960px;
margin-left: -480px; /* half of width */
}