Jump to content

jlindblom

Members
 View Profile  See their activity

  • Posts

    26

  • Joined

  • Last visited

jlindblom's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. jlindblom

    Text over images

    jlindblom posted a topic in CSS

    Hey! Hope someone could help me threw this problem! I have a page with thumbnails of photos, find it here; https://dl.dropboxus...orum/index.html. I want to put some text over the images, but when make that, it just now look like this; https://dl.dropboxus...rum/index_.html. Someone could help me to set the position for the text over the images, without move the pictures like the last example-link. Thanks for all kind helping! Have a nice day! Sincerly,J index.html code; <!DOCTYPE html><html><head> <title>Photos</title><style>html, body {width:100%;height:100%;margin:0;padding:0;overflow-x: hidden}ul, li {padding:0;margin:0;list-style:none;display: inline;}ul img {width:50%;}img {float: left;}#container a img, a {border: 3px solid black;margin: -3px;}.img-box {width: 100%;}.img-info {position: relative;font-size: 20px;} @media only screen and (min-width :320px) and (max-width :480px){ul img{width:100%}}</style></head><body><ul id="container"> <li> <a href="#"> <img src="bild.jpg"> </a> </li> <li> <a href="#"> <img src="bild.jpg"> </a> </li> <li> <a href="#"> <img src="bild.jpg"> </a> </li> <li> <a href="#"> <img src="bild.jpg"> </a> </li></ul></body></html> index_.html code; <!DOCTYPE html><html><head> <title>Photos</title><style>html, body {width:100%;height:100%;margin:0;padding:0;overflow-x: hidden}ul, li {padding:0;margin:0;list-style:none;display: inline;}ul img {width:50%;}img {float: left;}#container a img, a {border: 3px solid black;margin: -3px;}.img-box {width: 100%;}.img-info {position: relative;font-size: 20px;} @media only screen and (min-width :320px) and (max-width :480px){ul img{width:100%}}</style></head><body><ul id="container"> <li> <a href="#"> <div class="img-box"> <span class="img-info"></span> <img src="bild.jpg"> </div> </a> </li> <li> <a href="#"> <div class="img-box"> <span class="img-info">TEXT</span> <img src="bild.jpg"> </div> </a> </li> <li> <a href="#"> <div class="img-box"> <span class="img-info">TEXT</span> <img src="bild.jpg"> </div> </a> </li> <li> <a href="#"> <div class="img-box"> <span class="img-info">TEXT</span> <img src="bild.jpg"> </div> </a> </li></ul></body></html>
  2. jlindblom
    https://dl.dropboxusercontent.com/u/101235437/100procent/index2.html
  3. jlindblom
    Hello! Thanks for your nice helping! Sorry to tell, but now when resizing the window, the scroll function stops working, and it bugs a little bit. It's not easy this! Have you any more ideas? Thanks!
  4. jlindblom
    Yes, I did. It looks like this now, perfect! Until resizing the window, then the sections doesn't "update" to the window size.
  5. jlindblom
    Hello! Thanks dzhax! Really thankful for your kind help! One problem left! When resizing the window, the sections height/widht doesn't "update" as it did in this script; $(document).ready(function() {$(window).resize(function() {Resize();});var Resize = function() {var windowHeight = $(window).height(),windowWidth = $(window).width();$("section").css("width", windowWidth);$("section").css("height", windowHeight);}$(window).resize(function() {Resize();});setTimeout(Resize, 20);Scrolling();}); Is is possible to fix?
  6. jlindblom
    Thanks for your answer dzhax. Yes, exactly. When pressing arrow key, I want it to scroll to next top of div. Your script works fine. The question is how to "translate" it to keyboard-arrows. Do you know anyway? Thanks again!
  7. jlindblom
    Hello! Hope you're fine! First I will excuse for my bad english. Have some problem with a keyboard-scroll-script. I don't know what I'm doing wrong. I want it to work like this (link1), press "UP" and "DOWN"-arrows to test. But right now it doesn't work here (link2). I have made a script who set the height and width to 100% of the screen. Then I have a script which will listen for keyboard-press of "UP" and "DOWN" key, and then scroll from section, to section (class: keyboardscroll). But it doesn't work on the second link (link2). Someone who know why? Or can help me fix this working? If I forgot to explain something, please tell me!Thanks for all kind of help! Script for resizing to 100% sections: $(document).ready(function() {$(window).resize(function() {Resize();});var Resize = function() {var windowHeight = $(window).height(),windowWidth = $(window).width(); $("section").css("width", windowWidth);$("section").css("height", windowHeight);}$(window).resize(function() {Resize();});setTimeout(Resize, 20);Scrolling();}); Script for keyboard-scroll: $(window).load(function(){$(function() { var boxLefts = []; $('div.keyboardscroll').each(function(i, el){ boxLefts.push(this.offsetTop); }); $(document).keydown(function(e) { var dir = false, targetTop = -1; switch (e.keyCode) { case 38: dir = -1; break; case 40: dir = 1; break; default: break; } if (dir) { e.preventDefault(); winDown = window.scrollY; $.each(boxLefts, function(i, v){ if ((dir == 1 && winDown < v && targetTop < 0) || (dir == -1 && winDown > v)) { targetTop = v; } }); if (targetTop >= 0) { $('html, body').animate({scrollTop: targetTop}, 200); } } });});}); Have a nice day! Sincerly,J
  8. jlindblom
    DarkxPunk. Haha! My next question I will ask is: How to get this to work on iphone/ipad. Because I also test it, but didn't get it to work.
  9. jlindblom
    Otherwise I can put the space in the image-file maybe? I tried to put the logo into another div called "logo" and tried to set position for this. But the function will be broken then. I found the script here from the beginning, http://stackoverflow.com/questions/7273348/invert-change-logo-on-scroll
  10. jlindblom
    Hello. Thanks for your helping DarkxPunk. Here is the new result. Now the logo is positioned. But the invert effect doesn't work anymore, like it did in this link. If you scroll smoothly down in first version, you see the logo be inverted when coming in a new section. So when between two section, the logo is 50% pink, and 50% white. But I can't set a position of it and "floating" over all sections. Understand how I mean?
  11. jlindblom
    Thanks for your answer DarkxPunk. Here is the code. I have tried to do positioning with both absolute and relative. But when making it, the invert-function stop working, or the square will be hiding.When putting margins to it, it doesn't work as it is right now. <!DOCTYPE HTML><html><head><style>/* RESET STYLES */body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td { margin: 0; padding: 0; }table { border-collapse: collapse; border-spacing: 0; }fieldset,img { border: 0; }address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var { font: inherit; }del, ins { text-decoration: none; }li { list-style: none; }caption, th { text-align: left; }/* MAIN STYLES */html {margin: 0;height: 100%;/* overflow: hidden; */}body { margin: 0;height: 100%;}section {height: 100%;position: relative;}section#top {background-color: #f26d93;z-index: 0;}section#middle {background-color: #ffffff;z-index: 0;}section#bottom {background-color: #f26d93;z-index: 0;}.white, .pink {behavior: expression( !this.before ? this.before = this.innerHTML = '<div class="after"></div>' + this.innerHTML : '' );}.white:after, .pink:after, .white .after, .pink .after {position: absolute;content: '';top: 0; left: 0;height: 100%;width: 118px;background: transparent url('logo_pink.png') no-repeat fixed 0 0;z-index: 5;}.white:after, .white .after {background-image: url('logo_white.png');}​</style></head><body> <section id="top"> <div class="white"></div> </section> <section id="middle"> <div class="pink"></div> </section> <section id="bottom"> <div class="white"></div> </section></body></html>
  12. jlindblom
    Hello! Hope you're fine! And really hope you can help me! The example. I've got a problem to set the position for my "logo", right now it's a square. Is it possible to get a position for this square, about 40px from the left and maybe 40px from the top, and still have the function with invert logo and 100% height sections? If i use "position: fixed;", the invert-function not work any longer. How to do? Or can I make this effect in another way? Please see the example here, scroll threw the website to see the effect on the square. If I forgot to explain something correct, please ask me, and I will try to explain it in a better way. Thanks for all kind helping! Have a nice day! Sincerly,J
  13. jlindblom
    Hello dsonesuk! Thanks for your nice helping! Really nice! See the result here now. But how to do then, lets say that I add a menu/navigatin-bar at top. Is it possible then to "push" the box down some pixels too, to make the box centered again? See here. Thanks for your kind help!
  14. jlindblom
    Here is what it looks like right now https://dl.dropbox.com/u/101235437/center/center3_result.htmlI tried the whole day. Can't figure it out, how to center it both horizontal and vertical. Anyone?
  15. jlindblom
    Morning! I just tested the: html {height: 100%;} Now all sections is 100% height. But. Again the box will not be centered both horizontal and vertical in the section. I can't work it out, why it not works. Please, say that you have more ideas? Have a nice day!
×
×
  • Create New...