I have a navigation bar on my homepage that has gone a bit wild. The final button link appears to have expanded below where it is meant to and it has also created a link out of the text I have underneath it. I would appreciate some help on this as I am not by any means a programmer and I am very new to the whole thing and I've most likely made a really obvious error (obvious to anyone but me, that is!). I have also changed any instance to where my real name is mentioned to 'Jon Snow' for obvious reasons and also just because.
<!DOCTYPE html>
<head>
<p>Jon Snow
Blah + A Student</p>
<link rel="stylesheet" type="text/css" href="jonsnow.css">
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="navigation">
<ul>
<li>About Me</li>
<li>Gallery</li>
<li><a href="contactme.html">Contact Me</li>
</ul>
</div>
<div id="intro">
<p>Hi, I'm Jon Snow, a student at Blah, University of Blah. This is my online portfolio!</p>
</div>
</body>
If this is a direct copy/paste from your web site, you need to close you last <a> tag within your <li> for "Contact Me
this tag:
<li><a href="contactme.html">Contact Me</li>
Should be this:
<li>Contact Me</li>
In this line:
<li><a href="contactme.html">Contact Me</li>
You have forgotten to close the <a> tag and this is causing your issue.
To correct it simply close the tag:
<li>Contact Me</li>
Related
I've been putting this site together, and the series of six images (graphic1.jpg, graphic2.jpg etc) I would like to put into a sort of frame, like the attached image, so that the text always stays under the image, even on mobile if the images were squeezed down single file, and also to give some visual clarity to which bit of text goes to what image.
I'm also having trouble with the two buttons at the bottom of the page centering, despite the fact that I'm using the center code.
Also, is there a resource I can be pointed to to set the width of the nav-bar to a maximum, so that the site can have edges and a background behind/outside of that? I think there's something up with my code there.
Thanks for any help you can provide!
Brookes
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tribal Droid Studio</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="twelve columns centered">
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Tribal Droid Studio</h1></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Visual Development</li>
<li>Sign Work</li>
<li>Our Process</li>
<li>Contact Us</li>
<li>About Tribal Droid</li>
</ul>
</section>
</nav>
<div class="row">
<div class="row">
<div class="large-5 columns">
<h2>Tribal Droid Studio</h2>
<p> asdf asd fasdfasdf asfghwgreqtrgafdbsfgqeth asdf gqfad </p>
</div>
<div class="large-7 columns">
</div>
<div class="large-12 columns">
<img src="img/tribalhead3.jpg"/>
</div>
<hr />
<div class="row">
<h2>Why Tribal Droid Studio?</h2>
<div class="large-12 columns">
<ul class="large-block-grid-3">
<li><img src="img/graphic1.jpg" />Graphic Design, Logo Design, and Branding all go into creating a visual identity.</li>
</panel>
<li><img src="img/graphic2.jpg" />But it can be hard to get noticed in a sea of things demanding attention.</li>
<li><img src="img/graphic3.jpg" />You may find developing one of your own to be lacking in professionalism or soul.</li>
<li><img src="img/graphic4.jpg" />At the heart of your visual identity is a story.</li>
<li><img src="img/graphic5.jpg" />Tribal Droid Studio is a team of artists and storytellers determined to turn your visions into visuals.</li>
<li><img src="img/graphic6.jpg" />Once your identity is ready, we have the signmaking tools and experience to bring it to life.</li>
</div>
<div class="row">
<divclass="small-8 small-centered columns">
<a class="button round"="contact.html">Contact us to get started!</a>
<a class="button round"="#">View our gallery of work</a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
<script>
$(document).foundation();
</script>
</body>
</html>
![what I'd like the images and text to do together (font unimportant)][1]
First I'd go through and check your syntax... <divclass="small-8... is invalid. This can cause a break in the layout. Also... check your divs with "row" classes as it seems there are a lot of extras in this example...
I count 9 open <div> tags and only 6 close /div> tags...
For your image issues, set up some sort of css for the images to position them as you need, and then place that image, and the text for it, within a block element on the page. Right now your text is free to flow within the <li> tag and the image is free to float as well. Without some sort of container around them you are going to get separation.
Very beginner code here. But my bootstrap isn't linking to my html. I am trying to create a nav bar where the four list elements are pulled so that they are on the same row.
<! DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>ONE</li>
<li>TWO</li>
</ul>
<ul class="pull-right">
<li>LOG IN</li>
<li>HELP</li>
</ul>
</div> <!--End nav container-->
</div> <!--End nav-->
</body>
</html>
As of right now the list is displaying at the default way HTML displays lists. the second link to a main.css is just a blank file I am not doing anything in it. These files are structured as such:
Documents/Web
There are both in my web folder.
Leaving out the protocol tells the browser to fetch the link over the same protocol the webpage is currently being viewed in (http://www.paulirish.com/2010/the-protocol-relative-url/).
You're viewing your HTML locally (over file://), so your browser is interpreting:
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
As:
href="file://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
Which I'm pretty sure doesn't exist on your computer.
Just add the http: protocol for local development, or download bootstrap.min.css to your Documents/Web and change the href to a relative path.
I've checked my javascript files and I think I have all the right ones. But I am not getting anything to dropdown.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
...
<div class="span3"><center>
Buy A Contract
<ul class="dropdown-menu">
<li>Hello World</li>
<li>Why am I not seeing this?</li>
</ul>
</div>
</center>
</div>
...
Looks like one obvious issue: no jQuery reference. Also, since you included this:
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
you don't need to reference bootstrap-dropdown.js (the min file contains all the plugins).
EDIT:
To be clear, you need to have a script tag pointing to a copy of the jQuery library somewhere before the Bootstrap references, so your head should look similar to:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
You might need to back the jQuery version down, since you're linking to an older version of Bootstrap. If you're getting errors from the Bootstrap source, change the jQuery version to 1.8.3.
Jquery is important to be declared before every other script on your page.
In header insert the below line before every script.:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
But you also have the wrong syntax to create a dropdown menu . It has to be like below:
<ul class="nav">
<li>Link</li>
<li>Link</li>
<li class="dropdown"> <!-- this is the item where your dropdown menu will popup-->
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"><!-- your drop-down -menu-->
<li>nav1
</li>
<li>nav2
</li>
</ul><!-- dropdown menu ends-->
</li><!-- li with dropdown ends-->
</ul><!-- Main nav ends-->
I'm creating my own wordpress template and I've coded a jQuery drop down menu that works statically but now I'm trying to make it dynamic the css is messed up. The drop down works but the menu doesn't displaying correctly.
The main menu displays vertical instead of horizontal and the secondary menu is horizontal, instead of vertical. Also the orange type for the main menu isn't displaying.
Here's a working static version
I hope I'm explaining myself thoroughly, if you need any more info please let me know.
Here is my wordpress template code
<div class="box">
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Menu</span>
<!-- Increases to 510px in width-->
<div class="sub_wrap">
<div class="ldd_submenu">
<nav>
<li class="ldd_heading"></li>
<?php wp_nav_menu(array('menu' => 'main_nav')); ?>
</nav>
<a class="ldd_subfoot" href="#"> Accessibility Link</a>
</div>
</li>
</ul>
</div>
<div></div>
I would suspect your code is not handling the output format of the wp_nav_menu method. Now I am not sure of your exact version, but newer versions will out put like this. So you will get extra div added in that you might not expect and the way the child menus are output may not be what you expect. Also, as the previous people said your code is not quite right, missing some tags.
<div class="menu-id-container">
<ul class="nav-menu" id="menu-id">
<li class="..." id="..">LINK
<ul class="sub-menu">
<li>Child LINK1</li>
</ul>
</li>
<li class="..." id="...">LINK2</li>
</ul>
</div>
How can we hide all list element from first form in following html structure using mootools
<form method="post" action="/signup" class="global_form" enctype="application/x-www-form-urlencoded">
<div>
<div>
<ul class="form-errors">
<li>First Name
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
<li>Last name
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
</ul>
</div>
</div>
</form>
<form method="post" id="user_form_login" action="/login" class="global_form" enctype="application/x-www-form-urlencoded">
<div>
<div>
<ul class="form-errors">
<li>Uername
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
<li>Password
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
</ul>
</div>
</div>
</form>
This is completely untested and I switched to jQuery a while ago so there might be a cleaner way to do this, but this should give you a basic idea.
If you are trying to select multiple elements use the mootools dollars method.
If you were to append an id to the first form you could do something like this...
$$('#form1 li').setStyle('display', 'none');
OR
If you do not want to add an id tag this might work.
var firstForm = $$("form").getFirst(),
listElements = firstForm.getChildren('li');
listelements.setStyle('display', 'none');