• Content count

  • Joined

  • Last visited

  • Days Won


DarkxPunk last won the day on December 9 2012

DarkxPunk had the most liked content!

Community Reputation

13 Good

About DarkxPunk

  • Rank
  • Birthday 03/25/1994

Contact Methods

  • Website URL
  • Skype

Profile Information

  • Gender
  • Location
    Toronto, Ontario, Canada

Previous Fields

  • Languages
    HTML, CSS, Little JavaScript, Little PHP
  1. Well poop. Thanks for that.
  2. I am experiencing something strange... I know if you incorrectly close tags you can cause weird duplication, however I have gone over this what feels like 100x and can't see/find an off closing tag. I am doubtful CSS is having an effect but I will include it too just in case. Here is the visual issue: How its being processed: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <base href=""> <title>Stuff</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <script defer src="images/icons/svgxuse.js"></script> <header> <div class="flex spacer"></div> <div class="flex logo"> <a href="">Stuff</a> </div> <div class="flex contact"> <div class="flex email"> <a href="">Stuff</a> </div> <div class="flex social"> <a class="blogspot" href=""><svg class="icon blogspotbutton"><use xlink:href="images/icons/symbol-defs.svg#blogspotbutton"></use></svg></a> <a class="facebook" href=""><svg class="icon facebookbutton"><use xlink:href="images/icons/symbol-defs.svg#facebookbutton"></use></svg></a> <a class="artstation" href=""><svg class="icon artstationbutton"><use xlink:href="images/icons/symbol-defs.svg#artstationbutton"></use></svg></a> </div> </div> </header> <section id="gallary" class="flex"> <a id="concept1" class="flex img" href="#concept1"> <div> <a href="">TEST</a> </div> </a> <a id="concept2" class="flex img" href="#concept2"> <div> <a href="">TEST</a> </div> </a> <a id="concept3" class="flex img" href="#concept3"> <div> <a href="">TEST</a> </div> </a> <a id="concept4" class="flex img" href="#concept4"> <div> <a href="">TEST</a> </div> </a> <a id="concept5" class="flex img" href="#concept5"> <div> <a href="">TEST</a> </div> </a> <a id="concept6" class="flex img" href="#concept6"> <div> <a href="">TEST</a> </div> </a> </section> <footer></footer> </body> </html> CSS: * { box-sizing: border-box; } html,body { width: 100%; height: 100%; background-color: #000000; font-family: 'alien_league',arial; color: #c7c7c7; } a,a:link,a:visited,a:hover,a:active,a:link:active,a:visited:active { text-decoration: none; color: #c7c7c7; transition: 0.4s ease color; outline: none; } a:hover { color: #862424; } a span { color: #862424; transition: 0.4s ease color; } a:hover span { color: #c7c7c7; } header { padding: 0.67vw 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; background: #2e2e2e; } .flex { display: flex; flex-grow: 1; flex-basis: 0; justify-content: center; align-items: center; } .logo a,.logo a span { margin: 0 !important; font-size: 4vw; line-height: 3.22vw; } .contact { justify-content: space-around; } .contact .flex { flex-grow: 0; } .email a,.email a span { margin: 0.1vw 0 0; } .social a { margin: 0 0.4vw; line-height: 1vw; } .icon { width: 2vw; height: 2vw; fill: currentColor; } #gallary { height: 80%; padding: 3vw 0; justify-content: center; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; } .img { margin: 0.5vw; height: 15.6vw; flex-basis: 15.6vw; flex-grow: 0; background-size: cover; background-position: top center; background-repeat: no-repeat; background-color: #2e2e2e; } .img div { display: none; } :target div { position: absolute; width: 100vw; height: 83vh; left: 0; top: 0; background-size: contain; background-repeat: no-repeat; background-position: center center; display: block; } :target div { background-color: #000000; } #concept1,#concept1:target div { background-image: url(../images/concepts/concept1.jpg); } #concept2,#concept2:target div { background-image: url(../images/concepts/concept2.jpg); } #concept3,#concept3:target div { background-image: url(../images/concepts/concept3.jpg); } #concept4,#concept4:target div { background-image: url(../images/concepts/concept4.jpg); } #concept5,#concept5:target div { background-image: url(../images/concepts/concept5.jpg); } #concept6,#concept6,:target div { background-image: url(../images/concepts/concept6.jpg); } #concept1:target div { background-image: url(../images/concepts/concept1.jpg); z-index: 99; } #concept2:target div { background-image: url(../images/concepts/concept2.jpg); z-index: 99; } #concept3:target div { background-image: url(../images/concepts/concept3.jpg); z-index: 99; } #concept4:target div { background-image: url(../images/concepts/concept4.jpg); z-index: 99; } #concept5:target div { background-image: url(../images/concepts/concept5.jpg); z-index: 99; } #concept6:target div { background-image: url(../images/concepts/concept6.jpg); z-index: 99; } @media screen and (max-width: 1023px) { a { font-size: 1rem; line-height: 1.125rem; } header { padding: 0.428rem 0; } .spacer:first-child { display: none; } .flex { flex-basis: 512px; } .contact { justify-content: center; padding: 0.428rem 0 0; } .contact .flex { flex-basis: 1vw; } .logo a,.logo a span { font-size: 2.563rem; line-height: 2.063rem; } .email a,.email a span { margin: 0.063rem 0 0; } .social a { margin: 0 0.256rem; line-height: 1vw; } .icon { width: 1.250rem; height: 1.250rem; fill: currentColor; } .img { height: 159px; flex-basis: 159px; flex-grow: 0; } } @media screen and (max-width: 415px) { #gallary { padding: 0; } .img { height: 50vw; flex-basis: 50vw; margin: 0; } } Thanks for the help!
  3. I get it, but my brain still hurts Once I finalize the design and effect ill post it here
  4. I managed to slim it out a bit further, but how does that work <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Slideshow Test"> <base href=""> <title>Slideshow Test</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/> <style> * { box-sizing: border-box; } html,body { background-color: #363434; } a { color: red; text-decoration: none; padding: 4px 10px; border: 1px solid red; } .slideshow { margin: 35px 0; width: 120px; height: 120px; border: 1px solid red; position: relative; overflow: hidden; } .slide div { margin: 35px 0; height: 50px; width: 50px; position: absolute; transition: all 0.5s ease; } #slide1 div { background-color: pink; } #slide2 div { background-color: green; } #slide3 div { background-color: blue; } #slide4 div { background-color: fuchsia; } .slide:target div { left: 35px; } .slide:not(:target) div { left: 120px; } </style> </head> <body> <header></header> <section> <a class="slideAnchor" href="#slide1">•</a> <a class="slideAnchor" href="#slide2">•</a> <a class="slideAnchor" href="#slide3">•</a> <a class="slideAnchor" href="#slide4">•</a> <div class="slideshow"> <div id="slide1" class="slide"> <div></div> </div> <div id="slide2" class="slide"> <div></div> </div> <div id="slide3" class="slide"> <div></div> </div> <div id="slide4" class="slide"> <div></div> </div> </div> </section> <footer></footer> </body> </html> My only guess is we are "glitching/hacking" the box model by taking the nested "div" out of the box(model). <-- Decode that gibberish But hey! It works! I appreciate it. If you are interested on trying to decode why this works, what exactly we are breaking, that be great.
  5. Well that is necessary to have those elements fill the ul so the max width is the size of the largest menu item. But I can't understand why the ul is sizing to 100% of an unassociated element.
  6. Hey there, So I am rebuilding a clients website and wanted to change something about the menu bar... Currently the sub menus are all the same width, I wanted the width to match the largest item in the sub menu, but having a weird issue. Here is the code: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Sunburst Beta"> <base href=""> <title>Sunburst</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <header> <div class="wrap"> <div class="split"></div> <div class="split"></div> <div class="split"></div> </div> </header> <nav> <ul> <li><a href="">Home</a></li> <li> <a href="">About Us</a> <ul> <li><a href="">President's Letter</a></li> <li><a href="">Shipping & Payment</a></li> <li><a href="">Guarantee</a></li> <li><a href="">Privacy Policy</a></li> <li><a href="">Terms & Conditions</a></li> <li><a href="">Disclaimer</a></li> </ul> </li> <li> <a href="">Diamonds</a> <ul> <li><a href="">Colour</a></li> <li><a href="">Clarity</a></li> <li><a href="">Cut</a></li> <li><a href="">Carat</a></li> <li><a href="">Certified</a></li> <li><a href="">5Cs</a></li> </ul> </li> <li><a href="">Gold</a></li> <li><a href="">Why Invest</a></li> <li><a href="">Members Only</a></li> <li><a href="">Contact Us</a></li> </ul> </nav> <section></section> <footer></footer> </body> </html> CSS: * { box-sizing: border-box; font-family: sans-serif; } a { text-decoration: none; color: #ffffff; } a:hover { color: #d9d09a; } html,body { background-color: #a09999; } header,nav,section,footer { margin: 0 auto; width: 100%; } header { height: 13vw; background-color: #565353; } header .wrap { margin: 0 auto; width: 96vw; } header .split { width: 32vw; height: 13vw; float: left; background-color: #292323; } header .split:nth-child(1), header .split:nth-child(3) { background-color: #5d4d5d; } nav { background-color: #605c5c; } nav ul,nav ul li ul { margin: 0; padding: 0; list-style: none; text-align: center; } nav ul li,nav ul li ul li { display: inline-block; position: relative; } nav ul li a,nav ul li ul li a { padding: 0.8vw 1vw 0.5vw; display: inline-block; text-transform: uppercase; font-size: 1.6vw; white-space: nowrap; } nav ul li:hover ul { } nav ul li ul { position: absolute; text-align: left; display: inline-block; top: 3.05vw; /* left: 0; */ } nav ul li ul li { width: 100%; } nav ul li ul li a { width: 100%; border: 1px solid #000000; border-top: 0.1vw solid #4c4c4c; text-transform: capitalize; background-color: #605c5c; } If you notice at the moment I am achieving what I want, except the menu is to the right of the parent. So the obvious way to fix that is set left: 0; as you will notice its commented out right now. If you set it to left: 0; the ul widens to the size of the parent! I can't figure out why this is happening or how to resolve it. Hope someone has an idea. Thanks!
  7. I need more to work with than a simple picture. .popup should work, but I am not sure how an iFrame affects the flow. Can you post the full HTML and CSS? Thanks.
  8. Yeah that is exactly where I stand... I have been researching like crazy trying to understand how some people have achieved this, except then we start getting into ill explained messy code and fancy animations when all I am trying to gather is the basics XD. Any ideas or resources you can think of? My endgame is I wanna build a slideshow with forward and backwards arrows while targeting anchors and I keep running into the same brick wall, overflow hidden crams everything in, or starts causing a scroll! Ill keep fighting.
  9. Upon further investigation it seems to be a designed effect as outlined in box model (scratches head) Does anyone have any ideas on another way to achieve the effect I'm looking for? Thanks for the help.
  10. Hey there, So I am toying around with a slideshow sort of display and discovered a strange result when I use position absolute in conjunction with overflow hidden on its parent. If any of you know why this is happening Id love to know, and possibly either a way around it or a better overall solution, that be great! To explain the issue I left it as overflow visible so you can see how it should function in theory, then you can see how it breaks when I attempt to hide it. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Slideshow Test"> <base href=""> <title>Slideshow Test</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <header></header> <section> <ul> <li> <a class="imageAnchor" href="#test-image-one">&#8226;</a> <a class="imageAnchor" href="#test-image-two">&#8226;</a> <a class="imageAnchor" href="#test-image-three">&#8226;</a> <a class="imageAnchor" href="#test-image-four">&#8226;</a> </li> </ul> <div class="gallary"> <div class="container"> <div id="test-image-one" class="image"></div> <div id="test-image-two" class="image"></div> <div id="test-image-three" class="image"></div> <div id="test-image-four" class="image"></div> </div> </div> </section> <footer></footer> </body> </html> CSS: html,body { background-color: #363434; } a { color: red; text-decoration: none; } ul,li,.imageAnchor { list-style: none; display: inline-block; vertical-align: middle; } .gallary { width: 120px; height: 120px; position: relative; background-color: maroon; overflow: visible; } .gallary .container { width: 1000px; position: relative: } .image { width: 50px; height: 50px; margin: 35px; background-color: grey; display: inline-block; position: absolute; left: 120px; transition: left .1s linear; } #test-image-one { background-color: pink; } #test-image-two { background-color: green; } #test-image-three { background-color: purple; } #test-image-four { background-color: blue; } .image:target { left: 0; } Thanks for any help!
  11. So surprise surprise I finally figure it out on my own, and I am actually surprised at what it is. So I kinda was wrong kinda was right about its not being the margins... It isn't the margins, but the margins cause it to appear... Its in fact cellpadding/padding... Now logically this shouldn't make sense but welcome to ancient html logic. Even though I have cellpadding set to 0, by having padding on the TD it turns it back on... regardless where the padding is... Then the margins is extending the open area between the cells and thus this line appears... And this line causes content to break below it if you try to place text beside it. It is messed up and makes no sense, but it works! Now since I have this understanding I decided to redesign it and post my optimized version here, open for any suggestions:
  12. I have played with the different styling methods just to be sure, I can't replicate. However this is an email signature so I need to keep everything inline and cover old styles for older email clients. Thanks for the tips, if you have any further direction it's appreciate.
  13. Hi there, Okay so this will sound incredibly confusing, but lets give it a try. I made an email signature a while back for a customer, it functioned correctly. However I wanted to optimize and improve it for better appearances on mobile. I rewrote it, brought it into Apple Mail, and everything seems to break it. Adding text, attachments, replying, etc. I couldn't figure out why my new signature was not functioning like the old. Then I noticed this on the old signature: The purple is a highlight of some sort of text line... But I can't figure out where it is coming from in the code. On I went, rewriting the email signature line by line to re create this text line... I couldn't do it. I absolutely can't figure out where this is coming from, but I am convinced this line is why the old signature works and the new one does not. It is providing some sort of separation to the email signature that prevents other elements from causing it to break. I have tried simulating it, recreating it, no luck... Ill attach the code, but if someone can find out what this is you will keep me from going insane. (Note I thought it was the margins too, however in the rewrite it does not create this text line) Thank you for all your help. If I spend another 6h on this like I have been I am going to go nuts...
  14. Couple things screwed up what you were doing... Did you build this step by step and watch what happened as you built it? The height restricts the sub items from appearing causing overlap, then the position absolute causing all the flowing to overlap as well. Hope this puts you on the right track.
  15. Your solution works, however that is not exactly what he was saying. The problem with using inline-block is that when the HTML is parsed it sees the line breaks (aka when you press enter to make a new line). This line break is parsed when using inline-block thus creating a space (that space being the line break). An even easier way to solve it without having to play around in CSS is simply remove the line break. <!DOCTYPE html> <html> <head> <style> div { background-color: lightgrey; width: 50px; border: 25px solid green; padding: 10px; } </style> </head> <body> <h2>Testing Margins</h2> <div style="display:inline-block;">Box 1</div><div style="display:inline-block;">Box 2</div> <br /> <div style="display:inline-block;">Box 3</div><div style="display:inline-block;">Box 4</div> </body> </html> You can also comment out the line break.