Why doesn't the below Z-INDEX order work?
What I want is the DIV tag to overlay the H1 and P tags. Instead, when the DIV's innerHTML is initialized, the other tags shift down the page. As you can see, all elements on the page are positioned and the DIV has a higher Z-INDEX. What else am I missing? (both the HTML and CSS validate)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>z-index test</title>
<style type="text/css">
#media screen {
#myTitle {position: relative; margin-top:20px; margin-left:20px; z-index:1;}
#overLay {position: relative; margin-top:20px; margin-left:20px; z-index:999;}
.btn {position: relative; margin-left:20px;}
p {position: relative; margin-left:20px; z-index:1;}
}
</style>
</head>
<body>
<div id="overLay"></div>
<h1 id="myTitle">An H1 Header</h1>
<p>A paragraph....</p>
<p>And another paragraph....</p>
<button class="btn" onclick="on_Clear();">clear div element</button>
<button class="btn" onclick="on_Init();">init div element</button>
<script type="text/javascript">
<!--
document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";
function on_Clear() {document.getElementById("overLay").innerHTML = "";}
function on_Init() {document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";}
//-->
</script>
</body>
</html>
if you want elements to overlay on top of other elements you're going to have to use z-index along with position: absolute; or use negative margins/padding.
You also shouldn't need to put position:relative; on everything in your css.
Try absolute positioning inside a relative container (div). This takes the element outside the normal document flow and z-index should work.
Also,remove the z-idnex from the relative elements.
The below works as expected. I made the changes based on one of #Catfish comments.
Note, I added one wrapper DIV around the overLay DIV. The wrapper does not need to contain any of the other elments on the page and it can be relatively positioned. Its z-index is set to one. It contains the overLay DIV which is absolutely positioned, but what is useful (I think) is #overLay does not need to have any position attributes set. So, affectively, it is still relatively positioned. Finally, the positioning and z-index styling was removed from all other elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>z-index test</title>
<style type="text/css">
#media screen {
#wrapper {position: relative; margin-top:20px; margin-left:20px; z-index:1;}
#overLay {position: absolute; z-index:999; background-color:#fff;}
#myTitle {margin-top:20px; margin-left:20px;}
.btn {margin-left:20px;}
p {margin-left:20px;}
}
</style>
</head>
<body>
<div id="wrapper"><div id="overLay"></div></div>
<h1 id="myTitle">An H1 Header</h1>
<p>A paragraph....</p>
<p>And another paragraph....</p>
<button class="btn" onclick="on_Clear();">clear div element</button>
<button class="btn" onclick="on_Init();">init div element</button>
<script type="text/javascript">
<!--
document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";
function on_Clear() {document.getElementById("overLay").innerHTML = "";}
function on_Init() {document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";}
//-->
</script>
</body>
</html>
Now, let's see if this works on a real page.
Related
I created a <div> element and I'm going to use below css style withing the <div> element.
#girls {
background-image: url("girl.gif");
}
Here is my HTML <div> element (This element contains in index.html page):
<div id="girls">
<p>
<b>Girls chat:</b> at the lounge, we're committed to providing you, our guest, with an exceptional
experience every time you visit. Whether you're just stopping by to check in on email over an elixir,
or are here for an out-of-the-ordinary dinner, you'll find our knowledgeable service staff pay attention to every
detail. If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
</div>
But when I load index page, the background image (girl.gif) doesn't show up. Anyone can help me with this?
Try this:
#girls {
background-image: url("../girl.gif");
}
I'm guessing that the css is inside that stylesheet folder, that's why you need to go up a level to access girl.gif, thus the usage of ../
<!DOCTYPE html>
<html>
<head>
<title>GIF DEMO</title>
</head>
<style type="text/css">
#girls {
background-image: url('demo.gif');
height: 200px;
width: 50%;
}
</style>
<body>
<div id="girls">Sample Text
</div>
</body>
</html>
If you are using external CSS then Change your directory path of the image & try again.
else Inline Stlying go with the sample code
image link
https://s-media-cache-ak0.pinimg.com/originals/25/81/28/258128ed71595efc9b561ed7d88b89f2.gif
I hope this isn't too vague of a question, but I feel like I'm running into a brick wall, so I'd really appreciate any and all feedback.
In a nutshell, what I'm trying to do is create a simple webpage, wherein the content is maintained by someone else (who has very little coding knowledge). My thought was to set up a page with a big frame in the middle, and to have tabs up top that would change the content in the frame. (This way, the person who maintains the page will only need to worry about the individual pages that are displayed in the frame; they'll never have to make changes to the main webpage itself.) So far, I've gotten this to mostly work pretty well.
The problem I'm having is with the height of the frame. More accurately, I'm having a problem with the div it's inside of. I'd like it to be adjustable - based on the height of the content it's pulling in - but I can only seem to set the height manually. The reason I want it adjustable is because the content it's pulling in for each tab is going to vary.
Thank you in advance for any suggestions you may have... even if it's to tell me to try another solution altogether. My main goal here is to create something that can be maintained by someone who doesn't really know any html. I figured using a frame would be perfect, since they could update that piece in Word, but there may be some other method I'm not thinking of. I'm open to all suggestions.
*edit: Here's some sample code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Indexfiles\style.css" />
</head>
<body>
<div id="wrapper" style="text-align: center;">
<div id="menubar" style="display: inline-block;text-align: center;">
<a href="Indexfiles/iframe1.htm" target="Mainframe"><div id="tab"><h6>Tab 1
</h6></div></a><a href="Indexfiles/iframe2.htm" target="Mainframe"><div id="tab"><h6>Tab 2
</h6></div></a><a href="Indexfiles/iframe3.htm" target="Mainframe"><div id="tab"><h6>Tab 3
</h6></div></a><a href="Indexfiles/iframe4.htm" target="Mainframe"><div id="tab"><h6>Tab 4
</h6></div></a><a href="Indexfiles/iframe5.htm" target="Mainframe"><div id="tab"><h6>Tab 5
</h6></div></a><a href="Indexfiles/iframe6.htm" target="Mainframe"><div id="tab"><h6>Tab 6
</h6></div></a>
</div><br />
<div id="maincontent">
<iframe src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
</div>
</div>
</body>
</html>
If you use iframe you can dynamically adjust the size of the iframe to fit the content using javascript as follows:
var iframe = document.getElementById(iFrameId);
iframe.width = iframe.contentWindow.document.body.offsetWidth;
iframe.height = iframe.contentWindow.document.body.offsetHeight;
Edit:
You can try to see if this will work:
<script>
function resizeIFrame() {
var iframe = document.getElementById("MainFrame");
iframe.width = iframe.contentWindow.document.body.offsetWidth;
iframe.height = iframe.contentWindow.document.body.offsetHeight;
}
</script>
<div id="maincontent">
<iframe id="MainFrame" onload="resizeIFrame();" src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
</div>
This is what my iframe*.htm files looks like as an example:
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
<style type="text/css">
body {
padding:0px;
margin:0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
float:left;
border:1px solid rgb(200,200,200);
}
</style>
</head>
<body>
<div style="float:left; width:160px; height:500px;">Frame</div>
</body>
</html>
Important: when testing this you must run these files through a web server and have the files in the same domain otherwise your browser will block the request due to security issues.
If you have Chrome installed you will see the following error message when you view the javascript console:
As long as the div has an id, it's height can be updated in an included css file.
your_page.html:
<link rel="stylesheet" href="your_style.css" />
<div id="your_frame">
[Frame Contents]
</div>
your_style.css:
#your_frame{
height: 40px // Just tell your developers to change this number (they'll never have to open the html file). Also, if you have google chrome, you can fiddle with this number in the Developer tools.
}
Depending on the scenario, you can use javascript to set the height more intelligently.
EDIT:
Here's an approach that requires even less maintenance:
The div inside of your html page:
<div id="your_frame">
<div id="your_contents">
Contents Go Here
<br>
<br> More Contents
<br> Even more contents
</div>
</div>
The css:
#your_frame{
border-style:solid; # <-- using a solid border so you can play with these code chunks in JSfiddle.net
#height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents)
}
#your_contents {
#height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents)
margin-top:10px; # <-- I think what you're really after is the margin adjustments
margin-bottom:10px;
margin-left:10px;
}
By default a div will automatically extend to the height of its parent container. Changes in this behavior often relate the the position property of its children. For instance if all of a divs children are absolutely positioned the height of the div will be at its default height. I don't have an example of what you are doing so I can only guess at the cause of your issue.
Alternatively, if you are open to alternatives. The scenario that you present is typically solved by the use of Content Management Systems. You would just need to customize the look and feel for your purposes.
http://en.wikipedia.org/wiki/Web_content_management_system
I've been designing websites for a while now and haven't had any complaints, surprisingly. But, there's one thing that bothers me quite a bit. I'm slow. It takes me, on average about an hour to style 1 webpage (a full webpage incl. content, images, text and so on) - and I don't know if that's how long it takes most people?
And I always run into the same problems over and over again (even though each time I use a different way, based on what I learned last time), which causes me to constantly re-align, re-adjust, re-write.
I know I'm doing something wrong, but I just don't know where anymore. When my pages are finished, they're great, but there's always some very tiny, but noticeable differences between each browser - and it really * me.
Below is HTML & CSS for a generic, empty webpage. Maybe you could be so kind as to tell me what you think is wrong with it, and how I might be able to better it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="" />
<meta name="author" content="My Name" />
<meta name="keywords" content="sample, keywords, keyphrase" />
<meta name="description" content="A sample description." />
</head>
<body>
<div class="Wrapper">
<div class="Header">
<div class="PresentationArea">
<div class="LeftSide">
<img src="" alt="" class="" />
</div>
<div class="RightSide">
<h1>Heading</h1>
<p class="PresentationDescription"></p>
Learn More
</div>
</div>
</div>
<div class="ContentArea">
<h2></h2>
<p></p>
</div>
<div class="Footer">
</div>
</div>
</body>
</html>
CSS
/* RESET -SOME- STUFF */
*{border:0;border:none;padding:0;margin:0;}
body {
}
a {
}
p {
}
h1,h2 {
}
.Wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
.Header {
width: 100%;
height: 31px;
}
.PresentationArea {
padding: 5px 0 0 0;
}
.LeftSide {
width: 65%;
height: 250px;
}
.RightSide {
width: 35%;
height: 250px;
}
.PresentationDescription {
}
.StyledButtonLink {
}
.ContentArea {
width: 100%;
height: 350px;
}
.Footer {
width: 100%;
height: 31px;
}
Any help is greatly appreciated
Thank you
How long to style a web page?
It all depends on what is in the page! When I assess a project to set a project price, I assign a time value of anywhere from 2 to 4 hours per page. On average, for a 10 to 20 page website, I found that allowed me enough time to develop semantically meaningful mark-up, concise and robust CSS, and integration into a content management system.
Some pages are complex and take more time, for example, image gallery pages or tables of structured data. Depending on the amount of JavaScript/jQuery or PHP/MySQL that the page might need, it could took a day or more to build a page.
In other cases, for example, biographical pages where you have a simple header, headshot/image and two paragraphs, you can easily get a set of 10 pages done in an hour.
How to speed up the mark-up process
I try to keep a consistent approach to using padding and margins. For example, I tend to use non-zero margin-bottom values for headers and paragraphs and zero out margin-tops, although others do it the other way. I also use a proper reset style sheet (see above suggested by Andrew Marshall).
I also pre-style my headers (h1 ... h6) and lists and so on so that I have a generic default typographic style that I can use as scaffolding for each site that I build.
Cross Browser Pixel Perfection
I am a great admirer of Dan Cederholm (author of Bulletproof Webdesign, Hand-Crafted CSS) and I agree with his approach that web pages just need to look good in all browsers and work properly. They don't need to be pixel perfect across all browsers. Most of my clients will not pay for the meticulous coding needed to make pages perfect across all browsers.
Having said that, I use one or two hacks to fix IE oddities now and again, but I don't get too concerned otherwise. The main thing that I look out for are block element widths (IE box model issues) that can break a float-based layout.
My HTML/CSS Framework
I tend to use a fairly generic 3 column design so I have a basic page layout and associated style sheets that I use to start all my website builds. This saves me time.
In the future, I will have more standardized 1 or 2 level menus (horizontal and vertical layouts) and some generic turn-key contact forms with client/server side validation.
Closing Comments
I am a one-person shop and I often build websites for other graphic designers. I fall on the developer end of the web professional spectrum.
I have been in business over 7 years and love the work.
I also read a lot of books on CSS and HTML, much to the despair of my immediate family.
For one you should include
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
in your HTML <head> (and also ensure that everything is actually UTF-8 encoded).
I'd recommend using a separate, "full-on" CSS reset stylesheet. You might want to look into using a CSS framework such as Blueprint or 960.gs (these usually include a reset by default).
I think it's convention to have HTML IDs and classnames be all lowercase, with hyphens (or underscores) where spaces would be.
It's a good idea to run the W3C HTML Validator on your HTML as well, this ensures that you're not doing anything that violates the HTML specification and thus reduces the potential for unexpected behavior.
div is a block element and span is an inline element so according to xhtml 1.0 validation it is not right but still several websites uses this method for styling is it all right ? or it will cause some problem please help me ?
It is not right + You never need to do this => thus never should.
Websites that do that wont be 'strict xhtml compliant' but in reality HTML like this will work just fine in any modern browser. That doesn't mean you should do it though - because theres no need to.
As of today 11th March 2014, modern browsers WILL give you problem as they render block element differently from inline element.
I encountered this incident myself, read my experience and solution: http://diophung.blogspot.sg/2014/03/web-developer-conform-to-w3c-standards.html
It's wrong, and embarrassing for not knowing such standard (your web designers will laugh at you) !
Nesting div within span may cause serious problem in firefox when you need to get the offsetTop(offsetLeft) of the span.
However this performs normal in chrome(v57.0.2987.98).
so I agree with the answer of Konerak:
"the browser will try to interpet it in their own
(unspecified/unpredictable) way. It might work out fine, it might
break. It might work now, break later. "
It all depends on the browser itself.
The specification about the offsetTop/offsetLeft is here:
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop
The following is my testing code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="margin:100px">
<span id="span-divWrapper">
<div id="div-nestedInSpan" style="border:1px solid black;">I am the div nested in span</div>
</span>
</div>
<button onclick="showDivOffsetTop()">show div offsetTop</button>
<button onclick="showSpanOffsetTop()">show span offsetTop</button>
<script type="text/javascript">
var div = document.getElementById("div-nestedInSpan");
var span = document.getElementById("span-divWrapper");
var showDivOffsetTop = function(){
alert(div.offsetTop);
}
var showSpanOffsetTop = function(){
alert(span.offsetTop);
}
</script>
</body>
</html>
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>