So I'm practicing some beginner HTML and CSS and I'm working on this demo site. I got everything to look like I want it in Chrome, and when I went to test it in other browsers (Edge, Firefox and Internet Explorer) the menu bar at the top was misplaced on every one of them. It was either too high up or too low.
What's going on here?
https://jsfiddle.net/o51km0ub/
<head>
<title>how to make a web site : demo site</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="site_title">
<span>Making a Web Site from Start to Finish</span>
</div>
<div id="primary_content">
<div id="menu">
</div>
<div id="page_content">
<h1>Design</h1>
<p>We're not going to get into how to design a web site, technically or artistically. (We've sort of done that already.) You should have your site design figured out already, but there are a few things we do need to talk about before you start figuring out how to translate it into code.</p>
<p>First, the most important thing to know is that your font choices are sort of restricted online. While you can use the #font-face rule in CSS to externally load fonts, this isn't supported by older browsers. You also may need rights to use certain typefaces with this tag. That said, you <em>can</em> use #font-face to solve the problem of limited font choices on the web, but if you're not ready to jump into that world quite yet you should either use a web fonts service like WebType (which can be free depending on your use) or limit yourself to web-safe fonts. Which fonts are web-safe? Times New Roman and Arial are the most common options, but most operating systems come with several other built-in fonts that are considered web-safe. These include fonts like Tahoma, Verdana, Lucida Grande, Gill Sans, Trebuchet MS, Courier New, and Georgia. Do a search for web-safe fonts if you're looking for additional options.</p>
<p>Second, you need to consider what is going to be an image and what isn't. Nowadays you don't really need to use images for much more than complex graphics and photos as HTML and CSS can handle many of the complex things that we used to do with images. Menus, for example, can be created very easily in CSS with an unordered list. Generally you do not need text to be rendered as an image, but there may be some circumstances where you will need to do that (e.g. if the text is combined with a graphic).</p>
<p>Finally, you need to consider which images are going to be displayed as actual images or as backgrounds for one of your DIVs. How do you determine this? If you have text that's going to go on top of an image (e.g. with a menu), then you have your answer: your image will be a background. The reason this is important to know is because you need to export it unadorned with any text, images, or anything you're going to add later in the code. Once you've got that figured out, head on to the next step ("Preparation") where we discuss preparing your layout for coding and exporting any necessary images.</p>
</div>
</div>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><span class="color01">01</span> DESIGN</li>
<li>
<span class="color02">02</span><a style="font-size 15px" href="#">PREPARATION<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li><span class="color03">03</span> DEVELOPMENT</li>
<li><span class="color04">04</span> DEPLOYMENT</li>
</ul>
</nav>
</div>
</body>
Every browser has a default CSS. You will have to write a reset css before any other styles.
Most common reset css is Eric Meyer's reset.
You can also write the following for a quick check.
*{
margin:0;
padding:0
}
Related
I have a multi-language Web application that is due to support all languages. My current problem is that when Middle-East languages are being displayed (e.g. Arabic, Persian, Hebrew, etc.) the font is much smaller than when showing Western languages.
The application is developed using Angular and hence the font is globally declared once as <font face="verdana">. Of course, there are places where I change the size of the font but, consistently, everywhere it is shown much smaller than the westerns.
Is there any simple way I could have all languages shown with the same size?
I'm if course willing to switch to a different font if required.
Thanks in advance.
Languages are assigned a class and "subtag" automatically that you can use to style individual languages.
For example, in your case you would set your css to be,
body {font-family: "Times New Roman",serif;}
:lang(en) {font-family: "Scheherazade",serif;
font-size: 190%;}
:lang(ar) {font-family: "Scheherazade",serif;
font-size: 120%;}
<div id="main">
<ul>
<li class="top_btn_class mr2e">日本語</li>
<li class="top_btn_class"><span lang="en">English</span></li>
<li class="top_btn_class"><span lang="ar">الأَبْجَدِيَّ</span></li>
</ul>
</div>
<!-- /#main --></div>
Here is a link to all the language subtags. http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry (WARNING: Big list, could take a bit to load)
I am looking for a way to have a navigation bar in all my .html pages without having to copy and paste it multiple times.
Here is the code:
<center>
<nav>
<ul>
<li>Home</li>
<li>Education </li>
<li>Employment History</li>
<li>Volunteer Work</li>
<li>Contact Information</li>
</ul>
</nav>
</center>
Every time I make a change in one of the links, I need to make changes in all my HTML files. I was wondering if I could have this chunk of code be a "class" of some sort, and have a reference to it in all my html files with some sort of attribute representing it. So, when I change the list "class" all the html files will be reflected in that change.
You can give you navigation a class this way.
<link src="style.css"/>
<body>
<center>
<nav class="navClass"> //giving the nav element a class
<ul>
<li>Home</li>
<li>Education </li>
<li>Employment History</li>
<li>Volunteer Work</li>
<li>Contact Information</li>
</ul>
</nav>
</center>
</body>
If you do this to all your nav's and use the same css document for all the pages you can call them in css this way. You will need an external css doucment.
//style doucment
<style>
.navClass{background-color:#FF0000}
</style>
You could also try using a jquery template plugin
Check one out here:
https://github.com/codepb/jquery-template
You could make your menu with JavaScript or as suggested by using a server side technology.
But in clean html you'll probably have to use frames which I wouldn't recommend. There might be a solution in html5 but I'm not sure.
If you're used to OOP I'd recommend the server side aproach.
Good luck!
Most text editors have a Find and replace in files or directory function. Other people have mentioned the likely solutions for server-side solutions - Jeremy Keith's book Bulletproof AJAX proved to be useful for me but requires server-side technologies such as PHP or IIS installed.
Otherwise, I used to create templates using dreamweaver which allowed you to update a menu which then updated all the places that menu was included, but there are probably open source solutions that allow the same thing that people may suggest?
I have a question which I searched but could not find an answer yet.
I need to embed content of an html page within a html page. I basically want iframe functionality without using a separate page but just the content itself.
I also need mother style sheet won't effect child style sheet in the same page.
so it will be like below and I need the magic_tag
<body style=1> mother page
<magic_tag><body style=2> child page content </body></magic_tag>
</body>
I wonder if this is possible or do I want something impossible
You're approaching this the wrong way, try this ->
Don't give anything in the child "page" the same class or id as the parent "page"
http://jsfiddle.net/8pFMe/6/
<body>
<div class="container">
<div class="nav">
<ul>
<li>Home </li>
<li> Link </li>
<li> Link2 </li>
<li> Link3 </li>
</ul>
</div>
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Sidebar Stuff</li>
<li>Link</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
<div class="body">
<div class="second-page">
<div class="second-container">
<div class="second-nav">
<ul>
<li>Home</li>
<li>Link</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
<div class="second-wrapper">
<div class="second-sidebar">
<ul>
<li>Sidebar Stuff</li>
<li>Link</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
</div>
<div class="second-body">
<p> This looks similar to an iframe, but it's not an iframe.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
css:
.container{
width:500px;
margin:0 auto;
}
.nav li, .second-nav li{
display:inline;
list-style:none;
padding:0 5px;
}
.sidebar{
float:left;
width:150px;
}
.body{
width:340px;
float:left;
padding 5px
}
.second-page{
border:1px solid #999;
padding:10px;
}
Most likely, you should use iframes anyway - most likely, you were having a communication problem with your supervisor. Maybe their degree is in managerial stuff or so, or it is in CS, but they don't know much of JavaScript. Maybe they don't even know what an iframe is. That is most likely, and that's why you got all those down-votes. It is simply hard to fathom any scenario where sane people (who aren't having a communication problem right there) would really want to do something like "do what iframe does --that is, embed a page--, but without using iframe". And you are saying you want to "embed a page", right? So, use iframe, there you go. I could say, in order to "do what iframe does, but without using it", use an svg tag, and then a foreignObject tag inside that, that is kind-of half way like an iframe. But again, it seems unlikely that this is what you really want.
But you deserve the benefit of the doubt. Maybe I'm wrong, and you really should embed the page using "copy and paste" - which is a lot more work than iframe. It could be about your page staying the same when the embedded page goes down or changes, who knows.
In that case, you would indeed get "body inside body" in your HTML, from copying the body you want to embed from the foreign page's HTML into your own page's HTML. (you'll also have to copy some-but-not-all JavaScript, and some-but-not-all CSS, and all that can take quite some time.)
"body inside body" most likely isn't "well-formed", but it is OK to ignore that, because browsers (having to be backwards compatible) are very very robust when it comes to non-"well-formed"ness.
Then, when you want to ensure that the foreign CSS will apply to the embedded part, while the CSS of your page doesn't apply, the "body in body" quirk might just be a blessing in disguise. Namely, you could then prepend body>body to every path in the copied foreign CSS (except if it contains body, then replace body with body>body). And then, give the outer body a class which the foreign page is certain not to use (such as, use your own name), and prepend body.coskan everywhere in "your" CSS. This is very similar to what Jacques is suggesting.
Maybe a better idea (if indeed "creating an offline copy" of the foreign page is the issue) is this: Open the page you want to embed in a separate window/tab. Then, write some JavaScript, which uses window.getComputedStyle and element.style.lorem=ipsum in order to modify each dom node (within the part of the page you wish to embed) so that it has the style used in rendering (the computed style) as an inline style, so that all the CSS is "pushed into" the HTML (or DOM). Then, insert your modified HTML into your page. Most likely, someone has already written such a "CSS inline-ifyer" tool. The resulting HTML is "ugly", but who cares. It does what you want, and this method is a lot faster (development time) compared to the "Jacques method", and the embedded page really is static, unlike it would be, were you using iframe. ("static" meaning, if Oracle changes their page, it does not affect your page.)
On second thought, above "better idea" is really only/mostly suited if the embedded page doesn't have JavaScript; otherwise, better stay with "Jacques method". Yet another approach (if indeed, the to-be embedded part is non-interactive): make a screen shot, and include the image.
But maybe it's not "static" at all, and you actually need to communicate with the foreign page (e.g. query external database). Then, my initial "miscommunication assumption" is even more likely. Why on earth, in that case, not iframe? Well, you could do an XMLHttpRequest, and then dissect the result with JavaScript. It's then much more flexible than the iframe. But much more work, also.
I just had about twenty technical interviews for internships and most of my interviewers had printed off my resume. I've noticed some serious inconsistencies in how it turns out in printed form and I'm assuming the culprit is differences in how different browsers "render" html/css.
The two major issues were (common, and not too big of a deal) bullet point size and the (rare, but a huge deal) width of my resume not fitting into one page so a TON of stuff gets thrown into the next line.
My entire resume is 800px wide, has many bullet points, a few borders, and bunch of divs (some of which are floated left so I can have two columns of stuff). Is there a resource that documents things you need to watch out for in making pages that need to look identical across multiple browsers? Is there a way to scale the page when someone's print margins are 3 inches rather than the alternative of ruining the design?
Thanks!
BTW, Here's the lengthy html/css source (I'm not expecting you to go through it here, but more likely copy paste it into notepad and open up the page for yourself).
edit: or see the jsfiddle page
<html>
<head>
<title>Andrew Rasmussen</title>
<style type="text/css" media="all">
* {margin:0;padding:0;color:#000;font-size:1em}
body {font:11px Verdana;line-height:13px}
h2 {margin:0.8em 0 0.2em;text-transform:uppercase;font:bold 1.4em verdana;border-bottom:dotted 1px #777}
h4 {display:inline;padding-right:4px}
p, ul {margin-bottom:1.4em}
ul {margin-left:1.2em;padding-left:1.2em;margin-bottom:0}
li {margin-bottom: .2em}
#experience h3 {font-weight:normal}
#title {text-align:center}
#title p {margin:0}
#title h1 {font:normal 1.8em verdana}
#skills {clear:both}
#skills p {display:inline;margin:none}
#other h3, #other p {display:inline}
#wrapper {width:800px}
.entry {float:left;height:140px;border-bottom:1px dotted black}
.odd {border-right:1px dotted black;width:394px;padding-right:5px}
.even {width:390px;padding-left:10px}
.five {height:125px;border-bottom:none}
.six {height:125px;border-bottom:none}
.for {font:bold 1em verdana;position:relative}
.for span {font-style:oblique;font:normal 1em verdana;position:absolute;right:0;top:0}
</style>
<style type="text/css" media="screen">
body {padding:2em}
</style>
</head>
<body>
<div id="wrapper">
<div id="masthead">
<div id="title"><h1>Andrew Rasmussen</h1><p>3A Software Engineering - University of Waterloo</p><p>arasmussen [at] katworks.com</p></div>
</div>
<div id="skills" class="section">
<h2>Technical Skills</h2>
<ul>
<li>Eight years of programming experience
<ul>
<li><h4>C/C++ (8 years)</h4>- 3D games (OpenGL), industry experience with pointers, STL, OOP, templates</li>
<li><h4>PHP, MySQL (2 years)</h4>- Backend of web applications with thousands of rows in the database</li>
<li><h4>OpenGL/GLSL (1 year)</h4>- Modern OpenGL using vertex buffer objects, fragment/vertex shaders</li>
<li><h4>C# (8 months)</h4>- Windows Forms GUI applications, backend of ASP.NET web applications</li>
<li><h4>JavaScript, jQuery (6 months)</h4>- Interactive web plugins</li>
<li><h4>Python (6 months)</h4>- 2D games using PyGame (Astroids and Breakout clones)</li>
</ul></li>
<li>Familiarity: XML, JSON, Regex, HTML, CSS, Scheme, ASP.NET, Perl, Lua, Bash</li>
<li>Platforms: Linux (Ubuntu, Red Hat, Fedora), Windows</li>
<li>Editors: Vim, Visual Studio 2008/2010, Eclipse</li>
</ul></div>
<div id="experience" class="section"><h2>Relevant Work Experience</h2>
<div class="entry odd">
<div class="for">Digital Extremes: London, ON<span>September-December, 2011</span></div>
<h3>Star Trek Gameplay Programming</h3>
<div class="details">
<ul>
<li>Independently designed, implemented, and tested many new features and bug fixes</li>
<li>Touched a broad spectrum of codebase from low-level network serialization in the engine to high-level visible gameplay features</li>
<li>Technologies: C++, Lua</li>
</ul>
</div>
</div>
<div class="entry even">
<div class="for">Morgan Stanley: New York, NY<span>January-April, 2011</span></div>
<h3>Electronic Trading Infrastructure</h3>
<div class="details">
<ul>
<li>Enhanced and fixed a C++ project which serializes C++ objects into specific formats</li>
<li>Project was distributed for use in internal trading applications in production</li>
<li>Solely responsible for the design and testing of my enhancements and bug fixes</li>
<li>Technologies: C++, Bash, Perl, Python, JSON</li>
</ul>
</div>
</div>
<div class="entry odd">
<div class="for">Qualcomm Incorporated: San Diego, CA<span>May-August, 2010</span></div>
<h3>QDSP6 Audio Test Framework</h3>
<div class="details">
<ul>
<li>Designed and developed a Perl script to automate audio testing with extensive capabilities, including running overnight stress tests, recording audio playback, and comparing audio output using bit exactness</li>
<li>Ran stability and stress tests for bi-weekly builds</li>
<li>Assisted our development team in developing these C++ tests</li>
<li>Technologies: Perl, C++, Bash</li>
</ul>
</div>
</div>
<div class="entry even">
<div class="for">Microsoft Corporation: Redmond, WA<span>June-August, 2009</span></div>
<h3>Visual Studio 2010 Globalization</h3>
<div class="details">
<ul>
<li>Developed and tested a web-based Silverlight application that could be localized for multiple locales as a presentation piece to help explain the process of Globalization</li>
<li>Pseudo-localized a daily build of Visual Studio 2010 for familiarity with the globalization process</li>
<li>Technologies: ASP.NET, Silverlight, C#, HTML, CSS</li>
</ul>
</div>
</div>
<div class="entry odd five">
<div class="for">Microsoft Corporation: Redmond, WA<span>June-August, 2008</span></div>
<h3>Windows Embedded, Point of Service</h3>
<div class="details">
<ul>
<li>Developed an application that kept an inventory of POS devices and associated information</li>
<li>Designed a neat, systematic, GUI that could be accessed throughout the entire team (over network)</li>
<li>Technologies: C#, Windows Forms, SQL, ADO.NET</li>
</ul>
</div>
</div>
<div class="entry even six">
<div class="for">Freelance Work</div>
<div class="details">
<ul>
<li>Real Estate Listing - currently developing an interactive real estate site (PHP, jQuery, MySQL) - for Tungsten Property</li>
<li>Content Slider - a jQuery plugin that slides between any generic unordered list of div's you give it - for Katworks Inc.</li>
<li>Xliff Target Editor - a C# WinForms application to edit XML-like files with a GUI - for Katworks Inc.</li>
<li>Directory Remover - an easily configurable DOS Batch script to schedule the removal of certain directories - for Global Labs</li>
</ul>
</div>
</div>
</div>
<div id="other">
<div id="activities" class="section"><h2>Related Activities</h2>
<ul>
<li><h3>Game/Graphics Programming:</h3>
<ul>
<li>3D games (C++, modern OpenGL) using vertex buffer objects and shaders (GLSL)</li>
<li>Rendered ~3 million textured triangles using VBOs with >300fps in a minecraft-like game (including physics)</li>
<li>Designed and implemented a game using a heightmap and associated collision detection</li>
</ul>
</li>
<li><h3>Web Programming:</h3>
<ul>
<li>Interactive web plugins using vanilla JavaScript or jQuery</li>
<li>Applications with a PHP/MySQL backend and careful, secure, graphical interface to the database</li>
</ul>
</li>
<li><h3>Stack Overflow: </h3>Over 130 answers, have a reputation in the top 12% of users; mostly from answering C++/OpenGL questions</li>
<li><h3>Project Euler: </h3>Completion of the dozens of challenges on this programming challenge/contest site for fun</li>
<li><h3>UW/Google AI Challenge: </h3>Participation in two Google sponsored, UW hosted, AI programming competitions. Overall ranking in both challenges were in the top quartile. Competition subjects include Rock Paper Scissors and Tron.</li>
</ul>
</div>
<div id="education" class="section"><h2>Education</h2>
<ul>
<li><h3>Candidate for Bachelor of Software Engineering </h3>at the University of Waterloo, June 2014. Relevant courses include Operating Systems, Algorithms, Object Oriented Software Development, Data Structures</li></ul></div>
</div>
</div>
</body>
</html>
There's the CSS3 Module: Paged Media, where you could define the margin and other properties yourself. However, I recommend you to convert your resume into a PDF and put it on your website for offline use, because (1) you can't be sure whether the recipient's browser will understand your stylesheet and (2) whether the font 'Verdana' is installed on the recipients PC.
If you want to achieve the same behavior on all browsers your interviewers could use, then you'll have to work through dozen of compatibility tests, install several browser, print on different operation systems... Even then you can't be sure your recipient isn't using a browser that behaves in a strange way. HTML and CSS are - after all - only markup/style languages and the standards are only recommendations. A PDF is determined to look the same on all compatible devices and is an ISO standard. I would rather stick to PDF, than use HTML/CSS for this kind of design you provided.
(Extra information - on decent browser, you can achieve .odd .even with .entry:nth-of-type(odd), .entry:nth-of-type(even).)
Bullet point size anomalies are caused by quirks mode. Put a DOCTYPE declaration on top to trigger standards mode and the bullets will be OK.
Apart from margin:none, I don't really see any errors in your source.
Well, it's recommended to treat font names as case sensitive, so that would be 'Verdana', the way the system has it.
I don't think there's really a comprehensive list of that kind of recommendations somewhere. Maybe I should put up something myself.
Anyway, see the other answer.
I am building a website, www.vitaminjdesign.com
In IE7, you will notice that in the footer, the first line of list items are indented a little bit. Does anyone know what CSS fix I need for this? THanks
try setting list-style-position: outside on your LI elements. Put it in a conditional stylesheet so it's only seen by IE7.
BTW, there are a lot of typos in your copy throughout the site -- you'll want to clean those up if people are to take your pitch seriously.
You could create an IE hack. Create a new stylesheet (e.g. ie-hacks.css) with the following (example class used, use whatever you want):
.ie-hack ul {
margin-left: -5px;
}
You may need to change the value of the margin-left in the style.
And in the footer, update the following code:
<ul id="info" class="ie-hack">
<li class="header">Vitamin J Design</li>
<li>a web & graphic design studio</li>
<li>info#vitaminJ.com</li>
<li>(609) 238-4513</li>
</ul>
<ul id="rfi" class="ie-hack">
<li class="header" class="ie-hack">Ready To Get Started?</li>
<li>Fill out our Request for Proposal form and tell us a little bit about your proejct</li>
<li style="margin-top:4px">How Much Will My Site Cost?</li>
</ul>
<ul id="navigate" class="ie-hack">
<li class="header">Navigate</li>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
And, in the "head" section of your markup, you need to add the following:
<!--[if IE 7]> <link href="path/to/above/stylesheet.css" rel="stylesheet" type="text/css"> <![endif] -->
You have different css files for IE7. When I load the page in IE I notice there is a warning triangle down in the status bar. It complains about css_ims not being defined at line 55, char 3. Check the IE-specific files for syntax errors (I mean what MS considers syntax errors).