Stats: 3,192,093 members, 7,946,701 topics. Date: Thursday, 12 September 2024 at 03:49 AM |
Nairaland Forum / Science/Technology / Webmasters / Help With This Layout And Implementation (1189 Views)
The New Layout Of GtBank's Internet Banking Portal / Finally, Another CSS Challenge. Who Can Code This Layout? / Nairaland's New Background And Layout Style (2) (3) (4)
Help With This Layout And Implementation by dansmog(m): 7:42pm On Feb 18, 2013 |
please do any body know how this was design? thanks... your help will be appreciated.
|
Re: Help With This Layout And Implementation by dansmog(m): 7:44pm On Feb 18, 2013 |
i dont mean the navigation in the header, the div below(those icons) they are not images. |
Re: Help With This Layout And Implementation by yawatide(f): 4:47am On Feb 19, 2013 |
With HTML and CSS. There are 1001 ways to skin this cat. This is how I would do it: 1) 4 DIVs, each with a reusable CLASS attribute, floated left, with some left, right and bottom padding to boot 2) Each DIV gets another CLASS attribute named after the image to the left, which I would make a background image 3) H1 tag for the headers 4) P tag for the paragraphs An easier way to figure out how the page was coded: View source ![]() Good luck! 1 Like |
Re: Help With This Layout And Implementation by GraphicsPlus(m): 1:18pm On Feb 19, 2013 |
yawa-ti-de: 2) Those icons are not images. They are bunch of CSS3 "button icons without images". There are codes responsible for those icons. For instance, the bulb icon was generated with this: .divclass::before { content: '\2600'; { Then the font-size was increased, and displayed as inline-block. It's quite fun. |
Re: Help With This Layout And Implementation by nairawall: 1:34pm On Feb 19, 2013 |
GraphicsPlus: You are really funny!!! Guess you are new to CSS and HTML, if not can you please tell which HTML Tag or CSS attribute create light bulbs and others. The interface is quite simple and straightforward. Do you want the CSS written here? |
Re: Help With This Layout And Implementation by GraphicsPlus(m): 2:25pm On Feb 19, 2013 |
nairawall: Dude, you just exposed your ignorance and arrogance and they are quite smelling awfully. I don't boast, but I can tell you that I have cut my teeth in HTML/HTML5-CSS/CSS3. Now take a look at these icons. None of them are images. Thank you.
|
Re: Help With This Layout And Implementation by nairawall: 2:39pm On Feb 19, 2013 |
What you just listed are special characters or symbols. They are not images. The images on the layout the OP posted are not HTML special characters or symbols. It is very obvious they are not images. If really the images you listed below are part of the CSS definition, I wouldn't mind learning about the attributes that generated them. Just listing some images and claiming they were generated in CSS is not enough. |
Re: Help With This Layout And Implementation by GraphicsPlus(m): 3:01pm On Feb 19, 2013 |
nairawall: What you just listed are special characters or symbols. They are not images. Guy, you are really an amateur, but since you begged me to teach, let me teach you. I knew you will think these icons are webdings typeface. No. They are pure CSS. Just copy these codes, save as .html and run in your browser. Thank me later. <!DOCTYPE html> <html> <head> <style> .container{float:left; display:inline; width:1200px; border:1px solid #00B88A; color:#00B88A; margin-top:100px; font-size:60px;} .add:before { content: "\271A"; float:left; margin:20px;} .edit:before { content: "\270E"; float:left;margin:20px;} .delete:before { content: "\2718"; float:left;margin:20px;} .save:before { content: "\2714"; float:left;margin:20px;} .email:before { content: "\2709"; float:left;margin:20px;} .cross:before { content: "\2716"; float:left;margin:20px;} like:before { content: "\2764"; float:left;margin:20px;} .star:before { content: "\2605"; float:left;margin:20px;} .spark:before { content: "\2737"; float:left;margin:20px;} .play:before { content: "\25B6"; float:left;margin:20px;} .skull:before { content: "\2620"; float:left;margin:20px;} .blacksun:before { content: "\2600"; float:left;margin:20px;} .cloud:before { content: "\2601"; float:left; margin:20px;} .umbrella:before { content: "\2602"; float:left;margin:20px;} .peace:before { content: "\262E"; float:left;margin:20px;} .yingyang:before { content: "\262F"; float:left;margin:20px;} .frowning_face:before { content: "\2639"; float:left;margin:20px;} .smiling_face:before { content: "\263A"; float:left;margin:20px;} .first_quarter_moon:before { content: "\263D"; float:left;margin:20px;} .last_quarter_moon:before { content: "\263E"; float:left;margin:20px;} .recycle:before { content: "\267D"; float:left;margin:20px;} </style> </head> <body> <div class="container"> <div class="add"> </div> <div class="edit"> </div> <div class="delete"> </div> <div class="save"> </div> <div class="email"> </div> <div class="cross"> </div> <div class="like"> </div> <div class="star"> </div> <div class="spark"> </div> <div class="play"> </div> <div class="skull"> </div> <div class="peace"> </div> <div class="blacksun"> </div> <div class="cloud"> </div> <div class="umbrella"> </div> <div class="recycle"> </div> <div class="last_quater_moon"> </div> <div class="first_quater_moon"> </div> <div class="frowning"> </div> <div class="yingyang"> </div> </div> </body> </html> |
Re: Help With This Layout And Implementation by FromScratch: 3:39pm On Feb 19, 2013 |
Can you see the markups? |
Re: Help With This Layout And Implementation by soloqy: 4:25pm On Feb 19, 2013 |
nairawall: You for ask first before attacking him. Have you heard of Glyphs? Yawatide's option can be used also to get that layout and she is using images. Perfectly ok. Graphics plus suggested another way of adding something like that but without using images as such. |
Re: Help With This Layout And Implementation by dansmog(m): 4:48pm On Feb 19, 2013 |
@all thank you for those tips and ways to solve this. yawa-ti-de: thanks for the insight, i will try yours too. when i view their source code, this is what is there <section class="stripe stripe--border-bottom"> <div class="container spacer-page-top break-section"> <div class="row"> <div class="span6 break-article"> <div class="row"> <div class="span4"> <i class="f-icon f-icon--1pc f-icon--x-large f-icon--border-heavy blue-mid"></i> </div> <div class="span8"> <h3 class="h4 h-weight h-minisubheadline">Incredible pricing</h3> <p class="p-flush"> We charge just 1% per transaction, capped at £2. There are no other fees whatsoever, so you can try our service risk free. </p> <a href="/pricing" class="link-icon link-icon--more">View pricing</a> </div> </div> </div> <div class="span6 break-article"> <div class="row"> <div class="span4"> <i class="f-icon f-icon--bulb f-icon--x-large f-icon--border-heavy blue-mid"></i> </div> <div class="span8"> <h3 class="h4 h-weight h-minisubheadline">Instant, free sign up</h3> <p class="p-flush"> No complicated fees or requirements. Sign up online for free in 60 seconds. Accept your first payment today. </p> <a href="/merchants/new" class="link-icon link-icon--more">Sign up now</a> </div> </div> </div> </div> <div class="row"> <div class="span6 break-article"> <div class="row"> <div class="span4"> <i class="f-icon f-icon--direct-debit f-icon--x-large f-icon--border-heavy blue-mid"></i> </div> <div class="span8"> <h3 class="h4 h-weight h-minisubheadline">Direct Debit, simplified</h3> <p class="p-flush"> Stop chasing customers for payment. With Direct Debit, future payments are authorised without your customer having to lift a finger. </p> <a href="/direct-debit" class="link-icon link-icon--more">Find out more</a> </div> </div> </div> <div class="span6 break-article"> <div class="row"> <div class="span4"> <i class="f-icon f-icon--lock f-icon--x-large f-icon--border-heavy blue-mid"></i> </div> <div class="span8"> <h3 class="h4 h-weight h-minisubheadline">Safe & secure</h3> <p class="p-flush"> We take great care to ensure the security & compliance of your payments so you can focus on your business. </p> <a href="/security" class="link-icon link-icon--more">Find out more</a> </div> </div> </div> </div> </div> </section><!-- /.stripe --> i can always copy and edit this code to my own taste, but i want to understand it. |
Re: Help With This Layout And Implementation by soloqy: 5:05pm On Feb 19, 2013 |
^^^ Please learn some CSS first. You would understand the above better. Just google css tutorials beginning to Intermidiate. |
Re: Help With This Layout And Implementation by dansmog(m): 5:09pm On Feb 19, 2013 |
soloqy: ^^^ thank you, google is not always my friend, please what site is better for css intermidiate tutorial |
Re: Help With This Layout And Implementation by GraphicsPlus(m): 7:53am On Feb 20, 2013 |
dansmog++: tizag.com w3schools.com Ok? |
Re: Help With This Layout And Implementation by dansmog(m): 3:09pm On Feb 20, 2013 |
GraphicsPlus:thank @all for you help.. GraphicsPlus, thanks for the links, but i have been using it, (not too good for me) tizag try sha.. Anyways i have gotten a better one. Thank you once again |
Re: Help With This Layout And Implementation by yawatide(f): 3:23pm On Feb 20, 2013 |
@GraphicsPlus: 1) As I stated way at the top, there are 1001 ways to skin a cat 2) Some times, when you code, you have to choose ease of maintenance, efficiency, etc etc over "it works". Your code may be legit but if you were to hand it off to me for instance, would I readily understand it? I once worked with a lady who rather than create a class for an LI, in an unordered list with 10 items, she went for something like so, in the name of "the point of CSS is to separate presentation from content": ul ul ul li li li li { } Does the code above work? Yep. But is it efficient (as in if I added another LI, would it still work)? Is it easy to maintain? etc etc. So again, I was merely presenting 1 of 1001 ways to skin the cat above. |
Re: Help With This Layout And Implementation by GraphicsPlus(m): 6:19am On Feb 21, 2013 |
^^ U ar right. but i went on to show those unicode icons becos the Poster wanted to know how those icons were achieved since they ar nt images. he was nt particularly asking about floating. so i tried to show him how to get some icons that ar nt images. |
Re: Help With This Layout And Implementation by jenifertaler: 7:25am On Feb 21, 2013 |
Try on w3school Thanks |
Re: Help With This Layout And Implementation by dansmog(m): 9:55am On Feb 21, 2013 |
jenifertaler: Try on w3schoolplease stop directing me or (anybody you have in mind) to W3schools. It is more like a reference website, it does not have thorough tutorials, and mind you, it didnt even teach anything concerning ''How to use Icons'' just like the image i posted above. I have found a better alternative. I will paste the links here incase there are others like me too. |
Re: Help With This Layout And Implementation by DualCore1: 10:48am On Feb 21, 2013 |
dansmog++:Such arrogance. ...just cuz someone is trying to help? Some threads are not worth a pin and people wonder why they don't get responses even after several views on a thread. Before I reply a thread I check the OP's history. There are some posters threads that will never get a reply from me even if I could be of help. You sef just made yourself one (not like you should be bothered, what do I know?). |
(1) (Reply)
Develop Your Full E-commerce Website In Magento For Just N100,000 / I Need An E Commerce Store / Do You Want To Know Why You Have Less Traffic On Your Blog?
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 70 |