owlcarousel - dots do not appear - javascript

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,

Related

Auto-sizing text to fit image container using JS in HTML

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>

How to conditionally add next and prev arrows based on slick carousel width?

I am attempting to add the next and prev arrows for the Slick Carousel (latest version) conditionally when the content takes up more space then the outer container (<div class="container">).
Example:
Content fits inside container (expected results)
Content does not fit inside container (expected results)
Goal:
If the content overflows beyond the container then add the arrows else do not
Here is what I have setup but it does not work to add the arrows conditionally.
This code highlights the current results and issue.
I have attempted to use the responsive setting but that will always add the arrows if the breakpoint is met, which is not what i want
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab 1
</div>
<div class="item">
tab 2
</div>
<div class="item">
tab 3
</div>
<div class="item">
tab 4
</div>
<div class="item">
tab 5
</div>
<div class="item">
tab 6
</div>
</div>
</div>
</div>
</div>
Current output:
I found the answer to this.
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
slidesToShow: 5,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
var childrenWidth = 0;
$('.carousel .slick-track').children().each(function() {
childrenWidth += $(this).width();
});
var outerContainerWidth = $('.carousel').width();
if(childrenWidth < outerContainerWidth) {
var nextArrow = $('.next-arrow');
if(!(nextArrow.hasClass('slick-disabled'))) {
nextArrow.addClass('slick-disabled');
}
}
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab number 1
</div>
<div class="item">
tab number 2
</div>
<div class="item">
tab number 3
</div>
<div class="item">
tab number 4
</div>
<div class="item">
tab number 5
</div>
<div class="item">
tab number 6
</div>
</div>
</div>
</div>
</div>

Slick Carousel Not Centering Image

I've got slick carousel on my page and working. I'm trying to make the images center though I'm not having much luck. I've looked at other questions and tried their solutions but still no luck.
Class for carousel
<div class="your-class">
<div class="ad1img">
<img src="images/ad1.jpg" /></div>
<div class="ad2img">
<img src="images/ad2.jpg" /></div>
<div class="ad3img">
<img src="images/ad3.jpg" /></div>
</div>
Javascript code
<script type="text/javascript">
$(document).ready(function () {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
</script>
CSS
.ad1img {
margin: 0 auto;
}
.ad2img {
margin: 0 auto;
}
.ad3img {
margin: 0 auto;
}
Carousel Example
You may need to set an outer div width and then can center the inner contents:
$(document).ready(function() {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
.your-class {
width: 800px;
border: 1px solid black;
}
.img-div {
width: 100%;
}
.img-div img {
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="your-class">
<div class="img-div" id="ad1img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad2img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad3img">
<img src="https://via.placeholder.com/300x150" />
</div>
</div>
You have to center you image> See code below
HTML
<div class="your-class">
<div class="adimg ad1img">
<img src="" />
</div>
<div class="adimg ad2img">
<img src="" />
</div>
<div class="adimg ad3img">
<img src="" />
</div>
</div>
CSS
.adimg img{
margin: 0 auto;
}
Use CSS like this:
$(document).ready(function() {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/><!-- Add the slick-theme.css if you want default styling --><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>.your-class {
width: 20px;
border: 1px solid black;
}
.ad1img {
margin: auto;
width: 50%;
padding: 10px;
}
.ad2img {
margin: auto;
width: 50%;
padding: 10px;
}
.ad3img {
margin: auto;
width: 50%;
padding: 10px;
}
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="your-class">
<div class="img-div" id="ad1img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad2img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad3img">
<img src="https://via.placeholder.com/300x150" />
</div>
</div>

How to ensure the relative positioning of responsive images?

I am working on building a website and below is my desired outcome.
Desired: http://i.stack.imgur.com/JI7tQ.png
Note: there is an image on the left making it 5 images in total.
However when I resize the broswer the grid-images stack together like so..
Actual: http://i.stack.imgur.com/tNSLP.png
Below is my code
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>RM</title>
<meta charset="utf-8"
<meta name= "viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/custom.css" >
</head>
<body>
<div class="container">
<div class="port">
<div id="vertical-title" class="column-1">
<img src="http://www.placehold.it/60x650" >
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive">
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive" >
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
</html>
CSS CODE
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
div#vertical-title{
display: block;
float: left;
margin-left:0%;
}
img.img-responsive {
display: inline;
max-width: 75%;
height: auto;
}
.column-1 {
display: inline;
max-width:5%;
}
.row-1 .container{
display : inline;
max-width: 95%;
}
img.row-1{
display:inline;
max-width:100%;
}
#media (min-width: 500px) {
div.test h1{
color:blue;
}
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
img.inline-div {
width : 25%;
}
}
Desired Behavior
I would like for the four images to keep their position relative to each other and shrink as the window gets smaller. In other words, I want the 2x2 grid to reduce in size and not become a 4*1 grid.
Also I would like the left most image to have the height equal to the height of the screen.
Note The images are responsive when they are stacked together.
Questions
What is the best way to achieve this behavior ?
My gut is screaming JavaScript.
I cleaned up your code with more reusable and responsive one.
Here's the JsFiddle demo link.
HTML
<div class="container">
<h3>Welcome</h3>
<div class="port">
<div id="vertical-title" class="col-left">
<img src="http://www.placehold.it/60x650" class="img-responsive" alt="" />
</div>
<div class="col-right">
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
CSS
h3 {
color: blue;
margin: 5px;
}
.row {
width: 100%;
}
.img-responsive {
width: 100%;
}
.col-left {
max-width: 60px;
float: left;
}
.col-right {
max-width: calc(100% - 60px);
float: left;
}
.col-half {
width: 49%;
margin-left: 4px;
float: left;
}
#media (max-width: 500px) {
.col-half {
width: 100%;
}
}
Hope it helps.
Do you need images to be stacked in iPhone? You can add a media query
#media only screen
and (min-device-width : 568px) { img.img-responsive {
max-width: 49%;
}}
So in iPhone it will stack up and in other it will display the desired effect
Thanks to #iam-decoder for this answer.
All I had to do was change img.img-responsive to
img.img-responsive {
display: inline;
max-width: 40%;
height: auto;
}
Thanks to all the took time to respond to my question. I am curious however how this is done in JS.

Float left menu, where am I wrong?

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 :)

Categories