Trying to figure out whats causing this space at the top before the nav bar. www.omegadesignla.com There is a random nbsp; nbsp; space charater being generated into the html when you insepect the element, and I can't figure out whats causing it. Here is the beginning html:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omega Design | LA</title>
<meta name="description" content="Web development and printing services serving the greater los angeles area">
<meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-icons.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/logofinal.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<!-- <li>Promotional Items</li> -->
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
Related
First my original code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id=menu>
<ul> <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a></li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!-- <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
</html>
But I want it external so I can change it once for every page so I did the following;
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id="menu">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>$("#menu").html('<object data="menubaperium.html">');</script>
</div>
</html>
and to be complete the "menubaperium.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id=menu>
<ul> <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a></li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!-- <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
But when I use the script version my menu in not horizontally lined out I searched the internet but I can not find a solution. I hope someone can help me..
Ok after days of searching the internet and trying I found a working solution.
First I changed this part;
<div id=menu>
<ul> <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a
</li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!-- <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
For this part;
<body>
<nav id="navMenu"></nav>
<script src="menu.js"></script>
</body>
and to be complete the menu.js;
document.getElementById("navMenu").innerHTML =
'<ul>'+
'<li>Home</li>'+
'<li>News</li>'+
'<li>Shop</li>'+
'<li>Our journey</li>'+
'<li>Contact</li>'+
'</ul>';
Hopefully this will help someone with the same problem.
I am new to bootstrap and I am wondering why the image is overlapping the jumbotron, I need the image to stay in the Jumbotron class only.
Here is the image:
Image overlapping the class Jumbotron
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Coffee Cafe</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="icon" href="Images/Free-Coffee-Logo-1-999x999.png">
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<a class="navbar-brand active" href="#">
<img src="Images/Free-Coffee-Logo-1-999x999.png" width="30" height="30" class="d-inline-block align-top" alt="">
Insta Coffee
</a>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Who We Are</a></li>
<li class="nav-item"><a class="nav-link" href="#">What We Do</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<div class="jumbotron text-center">
<img class=" rounded float-left" src="Images/pexels-photo-437716.jpeg" alt="Coffee for front page">
<div class="page-header">
<h1>The More You Sip, the More You'll Love</h1>
</div>
<p>Lifes pleasurable moments is just one sip away!</p>
</div>
<div>
<p class="text-center">Who We Are</p>
<p>
We are a team of coffee makers dedicated to give you the best coffee.
Our team composes of people with 10 years of experience making coffee
</p>
</div>
<div>
<p class="text-center">What We Do</p>
<p>
We specialize with some of the most popular coffee in the market such as:
</p>
<ul>
<li>Caffè Americano</li>
<li>Café Latte</li>
<li>Cappuccino</li>
<li>Espresso</li>
<li>Flat White</li>
<li>Flat White</li>
</ul>
</div>
<div>
<p class="text-center">Contact Us</p>
</div>
</body>
</html>
Also, I am planning to do a website similar to this theme : https://blackrockdigital.github.io/startbootstrap-freelancer/
In this theme, Notice how the "portfolio" , "About" and "Contact"
is like the size of the browser.
I want my "Who We Are" "What We Do" and "Contact Us" to be like this. What class should I put?
You should give overflow:hidden to jumbotron class and manage css of img according to necessity
Make the parent anchor tag of image a block element using display:block;
Problem:
Fitting five links inside a navigation using Materialize CSS. Right now, three links fit and I can even add a fourth. But when I add five links in total, the last two break.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li><a href="javascript:void(0)">Contact</li>
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Desired output:
To get all five links to fit inside the navigation on the right side.
It's because your <a href="#">Contact is missing the close tag.
Here's the updated code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li> <!-- Note the </a> closing tag -->
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Why do the menu-icon below looks different from the foundation doc site?
This is the correct icon from the doc:
My code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation.css" />
<link rel="stylesheet" href="node_modules/foundation-icon-fonts/foundation-icons.css" />
</head>
<body>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<h1>Hello, world!</h1>
<i class="fi-social-twitter"></i>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Any ideas? Is it a bug?
My two section #wrapper and #stats are both being see as the wrapper by google dev tools. Now this is affecting my development as any changes to the css gets mangled within the two sections.
In google dev tools when i hover over the wrapper content, it shows the div as stats.
I have looked and looked but I cant find anything.
<!DOCTYPE html>
<html>
<head
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/responsive.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header class="main-header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</nav>
<span class="title">We offer garden building such as trellis and fencing, as well as outdoor lighting, water features and much more</span>
<h1> Garden Construction</h1>
<img class="arrow" src="img/arrow.svg" alt="arrow down">
</header>
<div id="wrapper">
<h2>Our Services</h2>
<section>
<ul id="gallery">
<li>
<a href="img/trellisandfence.jpg">
<p>Trellis and Fencing</p>
<img src="img/trellisandfence.jpg">
</a>
</li>
<li>
<a href="img/light.jpg">
<p>Outdoor garden lighting</p>
<img src="img/light.jpg">
</a>
</li>
<li>
<a href="img/gravelretention.jpg">
<p>Gravel renetion system</p>
<img src="img/gravelretention.jpg">
</a>
</li>
<li>
<a href="img/gardenbuilding.jpg">
<p>Outdoor building such as sheds and cabins</p>
<img src="img/gardenbuilding.jpg">
</a>
</li>
<li>
<a href="img/waterfeature.jpg">
<p>Water features - any size, any style</p>
<img src="img/waterfeature.jpg">
</a>
</li>
</ul>
</section>
</div>
<div id="stats">
<ul>
<li>
<h4>We can organise appointments at your convinence</h4>
<img src="img/appointments.png">
</li>
<li>
<h4>We offer free consulations and quotes</h4>
<img src="img/consultation.png">
</li>
<li>
<h4>We are fully licenced and qualifed with over 25 years experience.</h4>
<img src="img/licenced.png">
</li>
<li>
<h4>We have looked untaken multi-million euro projects</h4>
<img src="img/euro.png">
</li>
</ul>
</div>
</body>
</html>