I am trying to autosize text (labelled: CONTENT) to fit in image containers (Dialogue4.png) using a JS script called textFit. The problem is I cannot get the JS script to run and am getting no change in text size.
My html is as follows:
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<meta charset="UTF-8">
<script src="textFit.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet">
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="banner">
<video autoplay="" muted="false" loop="">
<source src="Media/BackgroundClip.mp4" type="video/mp4">
</video>
<div id="scrollarea" class="content">
<div class="content-wrapper">
<div class="textbox"> <img src="Media/Dialogue4.png"> </div>
<div class="text-wrapper">
<div id="container" style="width:100%;height:auto">
<p>
CONTENT CONTENT CONTENT
</p>
</div>
</div>
</div>
</div>
</div>
<script>
function doFit(){
textFit(document.getElementById('container'), {maxFontSize: 200});
}
</script>
</body>
</html>
Any advice would be seriously appreciated as I am at the bottom of a deep-dive trying to figure it out.
Thanks for your time and have a happy new year.
Betty.
Here is a demo:
(I simplified your HTML and made sure the element that contains the text has a defined width&height)
textFit(document.querySelector('.text-wrapper'), {
maxFontSize: 200,
alignHoriz: true,
alignVert: true
});
body {
font-family: sans-serif;
}
.content-wrapper {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid blue;
width: 60%;
height: 250px;
display: block;
}
.text-wrapper {
display: block;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.min.js"></script>
<div class="banner">
<div id="scrollarea" class="content">
<div class="content-wrapper" style="background-image: url('https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/05/joseph-barrientos-49318-unsplash-e1558728034701.jpg')">
<div class="text-wrapper">
CONTENT CONTENT CONTENT
</div>
</div>
</div>
</div>
Related
I got this problem that I've been trying to solve for quite a while. Ideally, I would love particles.js to have its "spawn box" stretch down to the bottom the page (7 x viewport as calculated by fullpage.js) so that when scrolling down with fullpage.js, the whole page's content just moves up one slide (hence having particles.js covering the entire height of the website from top to bottom)
This is what I got so far:
CODE
body, html {
margin: 0;
padding: 0;
}
#container {
max-width: inherit;
background: rgb(111, 210, 255);
}
#particles-js {
width: 100%;
height: 100%;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
width: 256px;
height: 256px;
margin-top: -128px;
margin-left: -128px;
z-index: 2;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="PachiSquid">
<title>PachiSquid</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" type="text/css">
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script src="https://raw.githubusercontent.com/VincentGarreau/particles.js/master/particles.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'release', 'about', 'music', 'live', 'shop', 'contact'],
scrollingSpeed: 1000,
})
})
</script>
</head>
<body id="container">
<ul id="menu">
<li data-menuanchor="home">HOME</li>
<li data-menuanchor="release">RELEASE</li>
<li data-menuanchor="about">ABOUT</li>
<li data-menuanchor="music">MUSIC</li>
<li data-menuanchor="live">LIVE</li>
<li data-menuanchor="shop">SHOP</li>
<li data-menuanchor="contact">CONTACT</li>
</ul>
<div id="fullpage">
<div id="particles-js">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<div class="section active" id="section1">
<div class="intro">
<img class="logo" src="https://gdurl.com/7GCM">
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<p>
Release
</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<p>
About
</p>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<p>
Music
</p>
</div>
</div>
<div class="section" id="section5">
<div class="intro">
<p>
Live
</p>
</div>
</div>
<div class="section" id="section6">
<div class="intro">
<p>
Shop
</p>
</div>
</div>
<div class="section" id="section7">
<div class="intro">
<p>
Contact
</p>
</div>
</div>
</div>
<script>
particlesJS("particles-js",{"particles":{"number":{"value":13,"density":{"enable":true,"value_area":1000}},"color":{"value":"#ffffff"},"shape":{"type":"image","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"https://gdurl.com/0VzA","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":41.6,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":0.6,"direction":"top","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"window","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
</script>
</body>
</html>
Basically my idea is: height: 100% is not working due to FullPage.js, so let's set a fixed height.
Here's your JSFiddle: https://jsfiddle.net/MrMavin/0gop9xp9/
Thanks to #Nic from How to get height of entire document with JavaScript?
I have this jquery page where I have used Swiper library to show my contents by sliding vertically. I want to go to a specific slide by clicking any link from side panel.When I slide up or down there is no scrolling of page, but when I click to go to specific link from panel,the page scrolls down and I can't slide up from that slide.
Is there any way out of showing only the desired slide without scrolling the page and keeping header and panel fixed?
Here is my code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"/>
<!--jquery mobile links -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-theme="a">
<ul data-role="listview">
<li>Slide 1</li>
<li>Slide 2</li>
<li><a href = '#link3'>Slide 3</a></li>
</ul>
</div>
<div data-role="header" data-theme="b" data-position="fixed" data-id="header">
<h1>Home</h1>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="link1">Slide 1</div>
<div class="swiper-slide" id="link2">Slide 2</div>
<div class="swiper-slide" id = 'link3'>Slide 3</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container',{
direction : 'vertical',
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
window.location.hash = target;
});
});
</script>
</body>
</html>
Your fixed header is probably not be working because your content isn't wrapped inside a JQuery mobile page element. Can you try wrapping your panel, header and swiper divs in a JQuery mobile page e.g. -
<body>
<div data-role="page">
<div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-theme="a">
<!--panel content-->
</div>
<div data-role="header" data-position="fixed">
<h1>Fixed header</h1>
</div>
<div role="main">
<!-- Put your swiper here -->
</div>
<div data-role="footer" data-position="fixed">
<h1>Fixed footer</h1>
</div>
</div>
</body>
You can check out the JQM documentation on fixed headers here: JQM Fixed header
and fixed panels here: JQM fixed panels
I am working on a project and as my knowledge in javascript are very limited, I decided to use owlcarousel. everything was working fine but now I am facing a problem.
I have set the dots to true but they do not appear. My work so far is the following:
.container {
width: 90%;
margin: 0 auto;
}
/*Text over image*/
.item {
width: 100%;
}
.item img {
display: block;
max-width:100%;
}
/*Carousel Nav Buttons*/
.carousel-nav-left{
height: 30px;
font-size: 30px;
position: absolute;
top: 0%;
bottom: 0%;
margin: auto 0;
margin-left: -40px;
}
.carousel-nav-right{
height: 30px;
font-size: 30px;
position: absolute;
top: 0%;
bottom: 0%;
right: 0%;
margin: auto 0;
margin-right: -40px;
}
#media (max-width: 700px) {
.carousel-nav-left{
margin-left: -30px;
}
.carousel-nav-right{
margin-right: -30px;
}
.container {
width: 85%;
}
}
#media (max-width: 410px) {
.carousel-nav-left{
margin-left: -25px;
}
.carousel-nav-right{
margin-right: -25px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>owlcarousel</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="carousel">
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
(function($){
$('.carousel').owlCarousel({
items: 4,
loop:true,
margin:10,
nav:true,
navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
dots: true,
paginationSpeed: 300,
rewindSpeed: 400,
responsive:{
0:{
items:1
},
490:{
items:2
},
770:{
items:3
},
1200:{
items:4
},
1500:{
items:5
}
}
})
})(jQuery);
</script>
</body>
</html>
Please let me know how I can fix this issue
I also faced the same problem while using Owl slider for the first time on my webpage. I could not see the dots navigation and I thought to myself this may be a bug and decided to do some investigation.
I figured later that there are 2 css files required to be included. One is the own-carousel.min.css and the other is owl.theme.default.min.css. After this the container div should have the owl-carousel and owl-theme class in their class list. For e.g:
<div id="slider" class="owl-carousel owl-theme">
<img src="/dist/assets/img1.jpg" />
<img src="/dist/assets/img2.jpg" />
<img src="/dist/assets/img3.jpg" />
<img src="/dist/assets/img4.jpg" />
</div>
Hope this helps for people who are facing this issue later.
Classes owl-carousel and owl-theme on main container are necessary for the dots to appear.
Ensure that you have included all of the necessary resources:
jquery-2.1.1.min.js
owl.carousel.min.js
owl.carousel.min.css
Also, make sure your CSS includes the appropriate owl-page and owl-controls
Here is one example of vital CSS code:
.owl-theme .owl-controls .owl-page {
display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
background: none repeat scroll 0 0 #869791;
border-radius: 20px;
display: block;
height: 12px;
margin: 5px 7px;
opacity: 0.5;
width: 12px;
}
As seen in This JSFiddle.
Note that if you remove the dots: true from the JSFiddle code (and run it) the pagination "dots" still display. However, if you remove the above CSS, the dots do not display.
Additional Answer
As this is the accepted answer I will add another potential fix as provided by #Kevin Vincendeau and brought to attention by #Amr Ibrahim in the comments.
Check to make sure your HTML is including all of the necessary classes. Such as owl-carousel and owl-theme on the main container.
The point was the lack of the owl-theme class in your code!
Include CSS & JS resources
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
Set up your HTML
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>
Note: if you dose not include the owl-theme class in the parent Div then the Dots dose not appear to you. So it is necessary to make them visible to end
users.
Call the plugin
Now call the Owl initializer function and your carousel is ready.
$(function(){
$(".owl-carousel").owlCarousel();
});
Demo:
$(function(){
$(".owl-carousel").owlCarousel();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>
Adding css worked for me!
.owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #D6D6D6;
display: block;
-webkit-backface-visibility: visible;
transition: opacity .2s ease;
border-radius: 30px;
}
.owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #869791;
}
According to Owl Carousel docs, you have to call the 2 CSS files below (inside head tag):
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
then near to footer tag, call JQuery and Owl Carousel JS scripts:
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
I was facing the same issue on my code, then i just empty all owl and jquery files, read the owl docs, following the installation process step by step. Now it works fine for me.
Please note that the Owl Carousel dots will only show up when you have enough items.
Forexample, if you show 3 items at the same time, the dots will only show up if there is 4 or more items in that carousel.
$(function(){
$(".owl-carousel").owlCarousel();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
dots: false,
margin: 5,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 4
}
}
})
});
Try : dots: false,
I have a list of images but i want all the images next to each other. and than with horizontal scroll.
I tried to set a max height for the scroll menu but that his hide the 2 images below. I also disabled vertical scroll but that doesn't work to.
If it is possible I want only use css. if I need javascript to fix it I use Jquery.
My html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="css/index.css" rel="stylesheet"/>
<link href="css/global.css" rel="stylesheet"/>
<meta charset="UTF-8">
</head>
<body>
<div id="list">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/6.jpg" class="img">
<img src="img/7.jpg" class="img">
<img src="img/8.jpg" class="img">
</div>
<div id="output">
</div>
<script src="js/jquery.js"></script>
<script src="js/image.js"></script>
</body>
</html>
my css:
body{
padding:0px;
margin:0px;
overflow-y:hidden;
}
.img{
height:100px;
width:200px;
display:inline-block;
margin-left:0px;
}
.loaded{
width:100%;
}
#list{
overflow-y:hidden;
width:auto;
}
Simply add
white-space: nowrap;
to #list
Since your .img images are correctly set to inline-block you can now control the parent element's whitespace with https://developer.mozilla.org/en-US/docs/Web/CSS/white-space (which applies to the inner inline, inline-block children.)
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
As #roko-c-buljan said simply add white-space: nowrap; to the #list. This suppresses line-breaks in the text, which the images are as they have display: inline-block.
body{
padding:0px;
margin:0px;
overflow-y:hidden;
}
.img{
height:100px;
width:200px;
display:inline-block;
margin-left:0px;
}
.loaded{
width:100%;
}
#list{
overflow-y:hidden;
width:auto;
white-space:nowrap;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="css/index.css" rel="stylesheet"/>
<link href="css/global.css" rel="stylesheet"/>
<meta charset="UTF-8">
</head>
<body>
<div id="list">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/6.jpg" class="img">
<img src="img/7.jpg" class="img">
<img src="img/8.jpg" class="img">
</div>
<div id="output">
</div>
<script src="js/jquery.js"></script>
<script src="js/image.js"></script>
</body>
</html>
Are you looking for something like this?
http://codepen.io/kozumii/pen/IoAFb
#list{
overflow-x:scroll;
white-space:nowrap;
}
If you're familiar with floats,you can add
#list img {
float:left;
}
I am working on a 960 px-design at the moment, and I am trying to do a menu in where it is supposed to be 6 "buttons" with a 5 px margin between each one. I know how to do this, and I cannot seem to find what is wrong with my code. It would be very helpful if someone could look through my code with some fresh eyes and tell me where the issue is...
http://jsfiddle.net/9tx8v/
HTML:
<!doctype html>
<html>
<head>
<title> ----- </title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>ASDER</header>
<nav>
<div id="ett"> <img src="menu.jpg"/>
<div id="två"> <img src="menu.jpg"/>
<div id="tre"> <img src="menu.jpg"/>
<div id="fyra"> <img src="menu.jpg"/>
<div id="fem"> <img src="menu.jpg"/>
<div id="sex"> <img src="menu.jpg"/>
</nav>
<article class="art-1"> </article>
<footer> - - - - - - - - - - - - - - </footer>
</div>
</body>
</html>
CSS:
header {
width: 100%;
height: 60px;
margin-bottom: 10px;
background-color: white;
float: left;
}
nav {
width: 100%;
height: 60px;
float: left;
}
article {
width: 462px;
height: 300px;
float: left;
margin-top: 10px;
}
footer{
width: 100%;
height: 60px;
float: left;
margin-top: 10px;
}
#ett, #två, #tre, #fyra, #fem, #sex {
width: 130px;
height: 60px;
margin-left: 5px;
}
Sorry for include a shitload of unnecessary code, but I'm so fed up atm I might just include the whole thing...
Thanks in advance
How about closing your DIV's? And you need a float:left for any DIV
HTML
<nav>
<div id="ett">
<img src="menu.jpg" />
</div>
<div id="två">
<img src="menu.jpg" />
</div>
<div id="tre">
<img src="menu.jpg" />
</div>
<div id="fyra">
<img src="menu.jpg" />
</div>
<div id="fem">
<img src="menu.jpg" />
</div>
<div id="sex">
<img src="menu.jpg" />
</div>
</nav>
CSS
nav div {
float:left;
width:130px;
height:60px;
margin-left:5px;
}
First at all as a better practice keep the closing tags for </div> elements.
<div id="ett"> <img src="menu.jpg"/></div>
<div id="två"> <img src="menu.jpg"/></div>
...
Then just float each element you don't need to float the nav:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float:left; /* Add this*/
}
Check this Demo Fiddle
First, close your divs:
<div id="två"><img src="menu.jpg"/></div>
<div id="tre"><img src="menu.jpg"/></div>
<div id="fyra"><img src="menu.jpg"/></div>
<div id="fem"><img src="menu.jpg"/></div>
<div id="sex"><img src="menu.jpg"/></div>
Add float: left in you css:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float: left;
}
<nav> should contains <a> , else it is not a <nav>.
Do not forget to close your tags and adapt their display if needed on a row , sized or on top of each others :)