Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,442 members, 7,816,008 topics. Date: Thursday, 02 May 2024 at 11:27 PM

Help With This Layout And Implementation - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Help With This Layout And Implementation (1128 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)

(1) (Reply) (Go Down)

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 wink

Good luck!

1 Like

Re: Help With This Layout And Implementation by GraphicsPlus(m): 1:18pm On Feb 19, 2013
yawa-ti-de:
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 wink

Good luck!

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:

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.

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:

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?

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.

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.

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 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?

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:
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 wink

Good luck!

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 &pound;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 &amp; secure</h3>
<p class="p-flush">
We take great care to ensure the security &amp; 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: ^^^

Please learn some CSS first. You would understand the above better.

Just google css tutorials beginning to Intermidiate.

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++:


thank you, google is not always my friend, please what site is better for css intermidiate tutorial

tizag.com
w3schools.com

Ok?
Re: Help With This Layout And Implementation by dansmog(m): 3:09pm On Feb 20, 2013
GraphicsPlus:

tizag.com
w3schools.com

Ok?
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 w3school

Thanks
please 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++:
please 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.
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)

Kindly Help I Need To Buy A Domain Name / Need Help With A Voting Website / Email Address Database ‰ GSM Number Database

(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. 53
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.