Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

13 Good

About DarkxPunk

  • Rank
  • 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
  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>
  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 t
  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 sh
  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 layo
  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 v
  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
  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>
  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
  • Create New...