Jump to content


  • Posts

  • Joined

  • Last visited

About DarkxPunk

  • Birthday 03/25/1994

Previous Fields

  • Languages
    HTML, CSS, Little JavaScript, Little PHP

Contact Methods

  • Website URL
  • Skype

Profile Information

  • Gender
  • Location
    Toronto, Ontario, Canada

DarkxPunk's Achievements


Member (2/7)



  1. Hey there, I am having a bit of an argument with myself on how best to organize a general page, in this specific instance for a blog. Reading online you get many different perspectives on how to organize the page, however generally you get something like this: <header> <nav> </nav> </header> <main> <article> <h2>Heading</h2> <p>Date: YY/MM/DD</p> <p>Author: Name</p> <p>Article Content</p> </article> </main> <aside> </aside> <footer> </footer> The article block would typically repeat for how many number of articles are on the page. Looking further online, reading the spec and understanding a big more how article, sections, and the like work I have come across other layouts like such: <header> <nav> </nav> </header> <main> <section> <article> <header> <h2>Heading</h2> <p>Date: YY/MM/DD</p> <p>Author: Name</p> </header> <p>Article Content</p> <footer> <p>Copyright Info</p> </footer> </article> </section> </main> <aside> </aside> <footer> </footer> This can even get further complicated with the introduction of comments, article navigation, etc. I am curious to hear from you all what is your preferred way to handle this sort of organization? Cant wait to hear back! Thanks!
  2. Thanks for both your input. It seems we always need to wrap it XD. Dsonesuk your method is the one I use most often. Hope to see some other ideas from others.
  3. Hey there, so I am faced as I usually am with the dilemma of aligning an image vertically with two sets of text. So the typical image on the left, a title and paragraph on the right. We have all heard the number of solutions, wrapping the text up as one element and using vertical-align: middle, but thats adding more elements. There is using a table and table cells markup which just isn't right cuz this data is not table data. I have heard ideas of using flex but never quite able to follow the two text elements stacking. There are probably many others you could think of. I am making this post to reach out and see if anyone else has found a more eloquent solution yet. I have done my research and haven't found anything too enticing, but we all know we find solutions and sometimes forget to share them with the world. Be cool to hear from the community if anyone has found the secret ingredient to make this work without all the incorrect usage of styles and the addition of more elements on the page. Hope to hear some amazing things, - Michael
  4. Thank you very much! Reading up on the flex property I see its short hand for flex-grow flex-shrink flex-basis. I didn't expect that to be necessary, I thought the flex-basis would be enough when I was reading through about flex-box. But this is a lessoned learned. Thanks again!
  5. Hi there, So I am trying to do something a little strange with flex boxes. I have 4 items in a container, I want the first item to take up the full width, and the three other items to flow side by side. Now I have been able to achieve it so long as I set the width of the last three items, however the whole point and fluidity of a flex box is I shouldn't have to do that! If I do not define the width and tell it to align to content everything fills the screen, if I take the content and strictly restrict its width the parent does not shrink as it should to the content. Here is an image to show what I mean: I am extremely new to flex box so I may be missing something simple. Below is the relevant HTML and CSS: <section id="services-brief-flex"> <div class="title"> <h1>How we can help</h1> </div> <article id="secruity-cameras-flex"> <div class="center-flex"> <h2>Security Cameras</h2> <p>What matters is longevity. We setup all our customers with the materials, and installation quality that leave you with a system that will last, and keep you future proof.</p> </div> </article> <article id="secruity-cameras-flex"> <div class="center-flex"> <h2>Security Assessment</h2> <p>Not feeling secure? Speak with us about reviewing your setup. We will work with you to find what is lacking in your system and connect you with the right solutions.</p> </div> </article> <article id="secruity-cameras-flex"> <div class="center-flex"> <h2>Access Control</h2> <p>One door, maybe ten, how about a hundred? Regardless of your scale we work with a wide range of systems to fit your needs. Cloud solutions, or in-house, we got you covered.</p> </div> </article> </section> #services-brief-flex { margin: 0 0 4.75rem; display: flex; flex-direction: row; flex-wrap: wrap; } #services-brief-flex .title { text-align: center; flex-basis: 100vw; } #services-brief-flex .title h1 { font-size: 1.8rem; font-weight: bold; text-transform: uppercase; } #services-brief-flex article { flex-basis: content; letter-spacing: 0.06rem; box-sizing: border-box; color: #fcfcfc; background-color: #021d44; } #services-brief-flex article .center-flex { width: 30%; display: inline-block; } #services-brief-flex article h2 { text-align: center; } Thanks for any help!
  6. Well I figured it out... It seems that it had difficulty rendering the corners when the buttons were stacked, I removed the stacking and everything resolved... *facepalm*
  7. Hey there, see the picture attached. You will notice the button on the left has smooth corners while the one on the right has jagged ones. The code as you can see is not quite different, but I have played and played and recreated and I cannot figure out what I have done wrong... Thanks for any ideas.
  8. Could you explain how you would achieve this while keeping semantic layout? Some ideas I would think is some wonky floats, but my experience with that has entered other limitations such as centering problems. You are correct, some of this can be solved using javascript such as the content stacking issue. However this doesn’t solve the transposing issue with the title and image for example. Also if you wanted to keep everything on the page and limit the javescript (as I tend to do) then how could it be solved with a pure css solution? I know how to do it by breaking semantic layout. You are absolutely correct that there are many solutions without the need of breaking semantic layout, this is why I never used the word impossible. My issue is with what you may have to give up or do extra that can be easily solved with ignoring semantic layout. I appreciate your feed back and if you have some interesting clean solutions that keeps with semantic layout id love to hear them.
  9. Hello everyone, I plan for this to be more of an open ended question rather than a specific inquiry about a problem so please discuss. I am curious about everyones opinions on semantic layout vs visual design, let me explain. With HTML5 we are all using semantic elements to better layout our sites, assist tools like reading lists, screen readers, seo, etc. In simple we are trying to make the web more accessible. In theory this is great but I have come to a bit of a crossroads; what is more important, laying out your html correctly using semantic elements or flowing the elements for visual design. Let me try and give you an example of this conundrum: Semantic Layout <header></header> <nav></nav> <article> <h1></h1> <section> <h2></h2> <figure></figure> <p></p> </section> <section> <h2></h2> <figure></figure> <p></p> </section> <aside></aside> <footer></footer> This layout makes sense based on a semantic layout. The article is the main focus, it is broken up into sections, the h1 opens the article, the h2 opens the section, and the p follows. Makes sense right? But what if you want your design to look like this: Visual Design <header></header> <nav></nav> <article> <h1></h1> <section> <h2></h2> <figure></figure> <p></p> </section> <section> <p></p> <figure></figure> <h2></h2> </section> <aside></aside> <footer></footer> In the design here we have a kind of flipped visual order where, instead of the second section having the title on the left, it would appear on the right. For a semantic layout this is a huge no no, the second section no longer has a h2 to open the p... Now my first thought when I came to this conundrum was well we have flex box ordering, relative and absolute positioning, why not use the semantic beauty of the proper layout and fix everything in the style sheet? Well anyone who has played enough with web design knows we are only opening a can of worms. Limitations with relative values, device compatibility, visual consistency, etc. This is where I am left, do I design around a semantic layout or around my visual design to make my css cleaner and easier to follow? Both sides have their benefits and drawbacks, but which is the right way to go? On a purely objective level I would almost argue it must be semantic layout first and fix the rest in CSS (don't be lazy). It sounds great until it is put in practice, when you need to create something adaptive or unique the problem crops back up again. Here is another example: Say you want a radio list that changes content around the list: <variable img> <variable title> <radio list> <variable description> To get the above design we have already broken semantic layout. The image is no longer following the title, but we need that image to the left of the title and description so obviously this makes sense on a purely visual level. This can even get more complicated: <variable img 1> <variable img 2> <variable img 3> <variable title 1> <variable title 2> <variable title 3> <radio list> <option1><option2><options3> </radio list> <variable description 1> <variable description 1> <variable description 1> What a further semantic nightmare. Try and read something laid out like this in a screen reader or one of those reading list apps. Everything is stacked out of place, it doesn't work semantically. However it does work when you stack the variables with css. Now how do we solve this with a semantic layout? <variable 1> <title><img><description> </variable 1> <variable 2> <title><img><description> </variable 2> <variable 3> <title><img><description> </variable 3> <radio list> <option1><option2><options3> </radio list> Okay so this is sound, we can have the variables stack and show as the options are selected, works with a screen reader or reading list app. Wait, but now the radio list and images are not in the right place! We have again sacrificed visual design for semantic layout... At the end of the day, it really is just up to designer preference... Do we want to fight with css to make it look pretty, or do we sacrifice semantic layouts to help accessibility and certain peoples reading preferences. I don't know if there is a right answer, maybe someone has one, maybe someone can convince me. At the moment I almost lean to choosing visual design over semantic layout simply to relieve headaches, but that only gets replaced with the sunken feeling in my gut that I am not doing enough to please customers and apps that need semantic layouts. I hope someone here has some further insight. Thanks for taking your time with this thought of mine and I hope to hear some feedback.
  10. 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!
  11. I get it, but my brain still hurts Once I finalize the design and effect ill post it here
  12. 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.
  13. 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.
  14. 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!
  • Create New...