Jump to content

otakublade

Members
  • Content Count

    6
  • Joined

  • Last visited

Community Reputation

0 Neutral

About otakublade

  • Rank
    Newbie

Previous Fields

  • Languages
    english

Profile Information

  • Gender
    Male
  • Location
    usa
  • Interests
    anime, web design, kindle ebook creation using web design
  1. you were right and that makes Ingolme right too about it being a margin or padding problem. I just didn't know that the body tag had a default margin. I tested it and 100vh and 100vw work once I added a css for body to have margin: 0. however I do have to include width of 100% or 100vw to the outer flex-container to create perfect center for the title, subtitle, and author.
  2. thanks for the info about the body default. perhaps adding a css to body to remove the margin will allow me to go back to using 100vh. I don't know if I can remove the width properties or not and get a good result. I will test it out as well. no I won't be using javascript for this but I would still like to learn how to get css and javascript to communicate variables for the future if and when I need to create a variable property in some other way.
  3. I just tested it to three decimal places and it still works. so a vw and vh of 99.998 still didn't give me any scroll bar. I did 99.98 because I wanted to keep things centered so when I reduced the vw and the vh I added properties of left and top so it is height of 99.998vh with top of .001vh and the same for width and left properties. so that problem is solved but I would still love to know how to have css and javascript interact as initially asked for future reference for when I need to input a variable into css that the css var can't handle.
  4. okay I have fixed the problem and it was not padding or margins but the coding of web browsers and scroll bars I think. I think that you can't have anything touching the limit of the window or you get a scrollbar regardless of if you have more content or not. all I did was reduce the vw and vh by 1 from the edge and it works perfectly. I think that the program adds scroll bars as soon as the content touches the edge not once it goes over the edge. that is my theory. I am going to test it a little by reducing the vw and vh into the decimals and see how it goes.
  5. but the title element doesn't effect the copy element because to make sure they were both aligned with the full page I changed the z-index of the title element to -1 so that the two elements didn't interact at all. they overlap each other. the problem is that the vh measurement includes the entire available screen including the toolbar at the bottom of the screen where the start menu is in windows. however the innerheight measurement would give the entire available space of a window but would also include any scroll bar there might be. however, thanks for commenting on the device width shrink concern although because of the z-index the elements won't stack but I have to go through and make sure that the text wrap doesn't push the elemtn even further down. I need to make sure that the element expands up instead of down kind of a text wrap up or something but not quite. I will go look at that now and adjust the code if necessary and when I find the right way to adjust the code.
  6. I am looking for either in css a way to take data from the device used to input as an attribute or a way to combine css and javascript to do the same thing. there may be a variable in css now but it isn't a true variable as far as I have found so far in the tutorial and the info I want I have only seen accessed using javascript so wanted to try combining it with the css I already have. I am looking to basically create a title page with css at the top of a website or in my case an actual ebook. I have this most of the way done. I want it to survive multiple devices so I want a variable height and width and I found that but the height is not quite perfect yet. I am using 100vh for 100% viewport height meaning the entire screen height but what I really want is the full window height. there is a javascript function in the tutorial that gives you the window.innerheight but I don't know how to input that number into my height attribute. right now that 100vh height is making it so that the footer is just beyond the screen and I have to scroll down a little to see it. but what I want it to do is that there is no scrolling needed because it fits perfectly on the screen. here is the code as is. <html> <head> <title>Title Page Template</title> <style> .title { display: flex; position: absolute; height: 100vh; width: 100vw; flex-direction: column; align-items: center; justify-content: center; z-index: -1; } .title > div { width: 100%; margin: 10px; text-align: center; } .copy { display: flex; height: 100vh; width: 100vw; align-items: flex-end; justify-content: center; } .copy > div { width: 100%; text-align: center; } p.large { font-weight: bold; margin-top:1em; font-size: 200%; text-indent: 0em; text-align:center; } p.medium { margin-top:1em; font-weight: bold; font-size: 150%; margin-top:1.0em; text-indent: 0em; text-align:center; } p.small { font-weight: bold; margin-top:1em; font-size: 125%; text-indent: 0em; text-align:center; } </style> </head> <body> <div class="title"> <div><p class="large" id="start">Title</p></div> <div><p class="medium">The Sub-title</p></div> <div><p class="small">By <i>Author</i></p></div> </div> <div class="copy"> <div><p class="small">Publisher &#169; 2019</p></div> </div> </body> </html> and here is the javascript code I found that gets the info I want <html> <body> <p>Click the button to display this frame's height and width.</p> <button onclick="myFunction()">Try it</button> <p><strong>Note:</strong> The innerWidth and innerHeight properties are not supported in IE8 and earlier.</p> <p id="demo"></p> <script> function myFunction() { var w = window.innerWidth; var h = window.innerHeight; document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h; } </script> </body> </html> is there a way to get the innerheight and innerwidth into my css to finish this title page design?
×
×
  • Create New...