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).
Related
I've learned to make the main navigation with a list like that:
<ul>
<li>nav-item</li>
</ul>
Now additionally, I need two top navigations, one left for social buttons and another right for other things. Someone told me better to build those top navigations by 2 like that:
<div>
top-nav-item
</div>
And I'm confused. Why is that better? Could someone tell me the advantage of the second way?
Thank you~
I would recommend using <nav> elements, which is HTML5 spec (see also here). Semantically it fits better with navigational elements, and it might help understand search engines better what elements of your website they are looking at. You can put <a> elements inside the <nav>. A search engine might be able to better understand that those are links to other pages, because that is what anchor elements are made for (linking to other pieces of content).
For how it looks, it doesn't matter; pretty much all elements can be made to look like a menu with buttons. Furthermore, search engines are pretty smart nowadays, and they will probably understand most of your website anyway, even if you don't use the proper elements all the time.
That being said, those elements are there for a reason, so why not use them?
The mozilla developer network's example that I reference above uses the following, but to me personally it does not necessarily always make sense to put everything in a <ul> element.
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Why is that better?
It isn't.
HTML is a semantic markup language. It is designed to describe the semantics of your data.
You have a list of links.
The markup should express that it is a list of links not a series of generic blocks with links in them.
I have created example that you want please check below link.
Click on Run.
.nav{float:left;}
.nav li,.social li{float: left;margin-right: 22px;list-style: none;}
.social{float:right;}
<header>
<ul class="nav">
<li>Home</li>
<li>About us</li>
<li>Contact</li>
</ul>
<ul class="social">
<li>Facebook</li>
<li>Google</li>
</ul>
</header>
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
}
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?
So long story short, for ages, ive been using some CSS reset on my projects.
i was trying to make a regular sitemap page(you know with links in an unordered list) and when i do this (code below)
<div id="smap">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Products
<ul>
<li>Cantaloupes</li>
<li>Watermelons</li>
<li>HoneyDews</li>
</ul>
</li>
<li>Sales Team</li>
<li>Contact / Directions</li>
<li>Growers</li>
<li>Packers</li>
<li>Shippers</li>
<li>Importers</li>
<li>Distributors</li>
</ul>
</div>
The list comes out but the products sub-items are not indented.
In the CSS reset, the line that's doing this is
vertical-align: baseline;
When i removed it,although it restored the indentation on my sitemap list, it messed up my menus throughout the site.
i want to target that lists specifically so, choosing that lists parent div which is "smap"
What im wondering is, by default, what is a lists vertical alignment value??
like for example, if i do this
#smap ul, li {vertical-alignment: SOMETHING; }
what is the default value for a list to be indented?
Thanks in advanced.
If you want to revert to the default value for any property after a reset, then you should use the value initial - you might want to read this article for more on it.
However, the ul indentation is given by the padding-left of the ul - see http://dabblet.com/gist/3144582. I think vertical-align shouldn't influence that.
I'm new to jQTouch -- it's pretty awesome -- but I'm finding that I'm not able to get it to work out of the box for my HTML, even though I'm following the getting started guide as well as the markup guidelines.
Specifically, each of my screens is a <section> element (direct child of <body>) with a unique ID, and I have links to those IDs, e.g. <a href="#screen-a">. This seems to follow the convention of the demo code, but yet the demo code works and my code doesn't.
Here is the HTML structure of my <body>:
<section id="main-menu">
<header class="toolbar"><!-- ... --></header>
<nav>
<ul>
<li class="arrow">Screen A</li>
<li class="arrow">Screen B</li>
<li class="arrow">Screen C</li>
</ul>
</nav>
<footer><!-- ... --></footer>
</section>
<section id="screen-a"><!-- ... --></section>
<section id="screen-b"><!-- ... --></section>
<section id="screen-c"><!-- ... --></section>
<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>
<script src="init.js"></script>
And my init.js simply initializes jQTouch (no custom options):
var jQT = new $.jQTouch({});
When I load my page, the UI appears fine, and I can confirm jQTouch was initialized because my jQT variable exists.
But when I click any link, the location bar changes to the new hash (e.g. "#screen-a"), but the UI doesn't change. And the JavaScript console starts throwing repeated multiple No pages in history errors.
(When I use the unminified jQTouch.js, these errors come from inside the jQTouch goBack() function, which is being called from the dumbLoopStart() timer.)
Note that this happens for me both in desktop Safari and in Mobile Safari on the iPhone. But that's very strange, because their demo works just fine for me on both.
I've banged my head against this for hours to no avail. Does anyone have ideas or suggestions or tips for what I might be doing wrong? Thanks!
I created an test from your provided example (with the addition of the style imports). Simply removing the <nav> elements resolved the issue for me.
I believe your main elements have to be div's. Additionally, you need a class of "current" on the div that should be displayed first.
I don't know if the version you are using requires this, but what I pulled via git a while back requires that all of your main elements be contained in a div with an id of "jqt".
<div id="jqt">
<div id="main-menu" class="current">
<ul>
<li class="arrow">Screen A</li>
<li class="arrow">Screen B</li>
<li class="arrow">Screen C</li>
</ul>
</div>
<div id="screen-a"><!-- ... --></div>
<div id="screen-b"><!-- ... --></div>
<div id="screen-c"><!-- ... --></div>
</div>
<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>