- This topic is empty.
October 29, 2015 at 5:42 pm #210333
Check out Drew Wilson’s GitHub entry for a nifty little hack which I discovered on my favourite subreddit the other day:
Here is Drew Wilson’s default live demo: http://kloc.pm/
It renders and functions perfectly as it should, the way it does on his website.
I’m trying to adapt it for my personal website. Here is my adapted codepen: http://codepen.io/anon/pen/NGMbYr
It functions fine but renders like crap. I changed the image source from Wilson’s image to images that I will be using. My image links are sourced from my webserver. The problem is not permissions because it renders perfeclty with a direct link. See here: http://angeles4four.info/drewwilson-atvImg_homepage_exp/
This leads me to question #1 for you guys is: Why do my green icon images render fine on my website but not when referenced in my codepen?
Question #2: How do I hyper link the ‘Enter’ button? I tried adding Enter within the h1 element’. But this doesn’t make the button a hyper link.
Question #3: How do I align my button and content vertically so it fits exactly 50% from the top and bottom, as it already does to the right and left?
Thanks for your attention.November 4, 2015 at 2:42 pm #210555michaelleeParticipant
I’m not quite sure what you meant by “render fine” for me the images didn’t show up at all. By adding
http://which was missing from the src, I got the images to load correctly from your server
Q2: So h1 doesn’t create a link. All it does is create a text header. Instead you want to use an anchor tag
<a href="http://google.com">Text</a>. I’d wrap it around all the
divs marked for layers. See pen above for reference.
Q3. I personally like this solution.
Cheers!November 7, 2015 at 8:33 pm #234692
Adding http:// to my src links loads the images in my pen.
Now when I click the Enter button, it takes me to some where else on the interwebz. In my production environment, now clicking “Enter” descends a directory featuring more content.
I do thank-you michaellee for giving me a clue for my most important question (#3) instead of fixing it for me because I learn more this way. So I shuffled the centerer class element from your pen to underneath my inner-wrap class element. I immediately noticed that thhe top and left values of 50% don’t center the Enter box and welcome message very nicely. I experimented with different values and settled with top:30% and left: 20%. This works OK. If you pinch the browser window size to emulate smaller screens like mobile devices, the spacing between the Enter button is off slightly. I remedied this spacing inadequacy by adding two line breaks above my h2 element in my markup. This is just a quick fix. I suppose there is probably a more elegant solution to be had with css. What would you recommend? Could you or someone else provide another helpful hint or nudge in the right direction?
Here is my pen with all my changes: http://codepen.io/Angeles4four/pen/YyJxxzNovember 7, 2015 at 8:40 pm #234693michaelleeParticipant
Hey @drone4four looking good so far.
So with the centerer, you’re missing the transform. The
leftwill off set the element by
50%on both x and y axis. But you need to compensate for the width and height of the element. So you add in
transform: translate(-50%, -50%);which will do just that.
If you’re not seeing the results, it may be because of missing vendor prefixes.
-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
One other observation that I made was that you put the “Enter” element into the
headerelement. Any reason for this?November 9, 2015 at 9:40 pm #234755
Yeah, I deliberately left out the transform because in playing around with it initially right after you made your suggestion, I could have sworn it made the button and the words disappear. But moments ago I just tried adding the transform property again with your translation value and it looks great in my pen and in the html and css on my test-case website. So yeah, the box is now perfectly centered from the top and from the sides. Thank-you @michaellee for your suggestions.
The Enter element is in the header, as you noticed and I am not sure why. I didn’t write most of this html. I borrowed it from Drew Wilson’s GitHub page. He would probably have a really good answer. What do you think of keeping it in the header? Would it be better to re-arrange the elements out of the header and into the subsequent dividers in accordance with best practices?
Here is my pen with the latest changes: http://codepen.io/Angeles4four/pen/YyJxxz
If you pinch the browser window size to emulate smaller screens like mobile devices, notice how the spacing between the Enter button is off slightly? The paragraph text is way too close to the Enter button sometimes. This can be remedied by adding two line breaks above my h2 element in my markup. This is just a quick fix though. I suppose there is probably a more elegant solution to be had with css. What would you recommend, michaellee?
By the way, I’d like to reverse the orientation of the button and text so that the text appears on the right and enter appears on the left at wider browser sizes. Further more, at narrower browser sizes, I’d like to have the button appear below the text rather than above (as is the case right now). In my text editor I actually replaced all the instances of ‘right’ with ‘left’ and vice versa. That didn’t achieve what I set out to do. Is achieving this as simple as flipping or adding a few key properties or changing some values?November 14, 2015 at 3:21 pm #234902
Anyone? What would the merits be of re-arranging the elements out of the header and into the subsequent dividers in accordance with best practices? Whats the deal with best practices and headers in this case?
- The forum ‘CSS’ is closed to new topics and replies.