i'm trying set max-height image. works in safari , chrome, not in firefox/opera/ie. read html , body heights should put @ 100%, , did work when used jsfiddle. however, doesn't work in page (memo-designs.com/portfolio.php).
the following source of page:
<!doctype html> <html> <head> <title>memodesigns</title> <link rel='stylesheet' href='style/stylesheet.css'> <script type = 'text/javascript'> function displayimage(image, link) { document.getelementbyid('img').src = image; document.getelementbyid('mylink').href = link; } function displaynextimage() { if (x < images.length-1){ x++; } else { x = 0; } displayimage(images[x], links[x]); } function displaypreviousimage() { if (x > 0){ x--; } else { x = images.length-1; } displayimage(images[x]); } function starttimer() { setinterval(displaynextimage, -1); } var images = [], links = [], x = 0;images[0] = "http://memo-designs.com/items/doublek-01.png" links[0] = "http://memo-designs.com/items/doublek-01.png" images[1] = "http://memo-designs.com/items/memodesigns.png" links[1] = "http://memo-designs.com/items/memodesigns.png" </script> </head> <body style = 'background-color: #000000'><div id = 'menucontainer'> <div id = 'menu'> <p> <ul> <li><a class = 'menu' href = '/'>home</a></li> <li><a class = 'menu' href = 'about.php'>about</a></li> <li><a class = 'menu' href = 'portfolio.php'>portfolio</a></li> <li><a class = 'menu' href = 'rates.php'>rates</a></li> <li><a class = 'menu' href = 'contact.php'>contact</a></li> </ul> </p> </div> </div> <div id = 'contentcontainer' style = 'padding-top: 0%; max-height: 100%; overflow: hidden; background-color: #000000'> <p> <img id= 'img' src = 'http://memo-designs.com/items/doublek-01.png' style = 'max-height: 100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;'> <img class = 'arrow' onclick = 'displaypreviousimage()' id= 'img' src = 'style/graphics/larrow.png' style = 'position: absolute; left: 0; top: 40%;'> <img class = 'arrow' onclick = 'displaynextimage()' id= 'img' src = 'style/graphics/rarrow.png' style = 'position: absolute; right: 0; top: 40%;'> </p> </div> </body> </html> and css stylesheet (only part of shown here):
*{ margin: 0; padding: 0; } html{ margin: 0; min-width: 100%; height: 100%; min-height: 100%; } body{ margin: 0px; background-color: #f3f4f4; min-width: 100%; height: 100%; min-height: 100%; } would appreciate i'm doing wrong :)
first of recommend start using css-reset normalize.css . makes browsers render elements more consistently , in line modern standards.
your html notation might cause inconsistency across browsers. turn things <div id = 'menu'> <div id="menu">. makes more readable imho.
inline style attributes make maintaining pages pain , may override things didn't intent to. need applied every single element increasing download time. using classes / id's way go. pseudo-elements can't used inline styles. advice use them quick changes during development. use element inspector chrome / firefox change things , instantly see how changes look, copy/pasting edits afterwards.
so, make sure put css stylesheet. it's considered best practice maintainability , better download speed (minify files production) of pages.
you surely have heard jquery before. try using it. jquery makes developing things image sliders breeze (once understand syntax, it's low learning curve). furthermore, there lots of ready-to-use plugins jquery.
another "good practice" put javascripts @ end of document before </body> tag. read more here , here.
ok, enough tips. let's hands dirty:
the html part:
<!doctype html> <html> <head> <title>memodesigns</title> <link rel="stylesheet" href="/assets/css/normalize.css"> <link rel="stylesheet" href="/assets/css/style.css"> </head> <body> <div id="menucontainer"> <div id="menu"> <p> <ul> <!-- instead of writing in capitals use text-transform:uppercase; css property --> <li><a class="menu" href="/">home</a></li> <li><a class="menu" href="about.php">about</a></li> <li><a class="menu" href="portfolio.php">portfolio</a></li> <li><a class="menu" href="rates.php">rates</a></li> <li><a class="menu" href="contact.php">contact</a></li> </ul> </p> </div> </div> <div id="contentcontainer"> <p> <!-- note: use ids once, else use classes share css styles --> <img id="img" src="http://memo-designs.com/items/doublek-01.png"> <img class="arrow left" src="style/graphics/larrow.png" onclick="displaypreviousimage()"> <img class="arrow right" src="style/graphics/rarrow.png" onclick="displaynextimage()"> </p> </div> <!-- put javascript @ end of document before closing body tag --> <script> var images = [], links = [], x = 0, baseurl = "http://memo-designs.com/items/"; images[0] = baseurl + "doublek-01.png"; links[0] = baseurl + "doublek-01.png"; images[1] = baseurl + "memodesigns.png"; links[1] = baseurl + "memodesigns.png"; function displayimage(img, link) { document.getelementbyid('img').src = img; document.getelementbyid('mylink').href = link; } function displaynextimage() { if (x < images.length-1) x++; else x = 0; displayimage(images[x], links[x]); } function displaypreviousimage() { if (x > 0) x--; else x = images.length-1; displayimage(images[x]); } function starttimer() { setinterval(displaynextimage, -1); } </script> </body> </html> ...and css:
/* assuming you'll use css-reset */ body { background-color: #f3f4f4; font: ... width: 100%; height: 100%; padding: 0; margin: 0; } #menucontainer { ... } #menu { ... } #menu ul { ... } /* making menu labels uppercase */ #menu ul > li { text-transform: uppercase; } #contentcontainer { background-color: #000; padding-top: 0; overflow: hidden; /* important: set fixed pixel height here make images use given space */ height: 200px; /* change 200 needs */ } #img { display: block; width: 100%; height: 100%; margin-left: auto; margin-right: auto; } #contentcontainer .arrow { position: absolute; top: 40%; } #contentcontainer .arrow.left { left: 0; } #contentcontainer .arrow.right { right: 0; } ok, try out suggestions , code example. tell if , helped.
good luck , happy coding!
Comments
Post a Comment