Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,149,852 members, 7,806,414 topics. Date: Tuesday, 23 April 2024 at 04:04 PM

How To Do Vertical Alignment With Div-based Layouts - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / How To Do Vertical Alignment With Div-based Layouts (1587 Views)

Bogger Has Introduced New Features And Adsense Layouts.. Check Your ADS. / Enough Of Table Based Layouts: Time To Migrate To Css-div Layouts / Need Tutorials(e-books) On How To Build Website Layouts(temp) Using Photoshop. (2) (3) (4)

(1) (Reply) (Go Down)

How To Do Vertical Alignment With Div-based Layouts by Nobody: 10:01am On May 27, 2012
<div style="display: table; height: 700px; width: 300px; background: #aaa; _position: relative; overflow: hidden;">
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<p style=" _position: relative; _top: -50%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt, sapien sit amet semper molestie, diam justo ullamcorper tortor, at aliquam neque est eget lacus. Etiam sit amet odio. Maecenas vulputate malesuada lectus. Morbi vestibulum.</p>
</div>
</div>
Analyze that. . . .i apologize to all my fans for my absentism, i am just pissed off with the board. And yes, my site is down for now - just too busy to sort things out. Will fix all that soonest.
But the increasingly popular nse api is on www.nse.dhtmlkits.com

1 Like 1 Share

Re: How To Do Vertical Alignment With Div-based Layouts by yawatide(f): 11:31am On May 27, 2012
This has always been an interesting phenomenon to me as googling will tell you that there is some CSS code to do it and it is cross-browser but it actually isn't true. I thought I was the only one who had this problem.

For me, I either do what you've just done or add top padding line height. In general though, I try to avoid positioning as much as I can.

Good luck!
Re: How To Do Vertical Alignment With Div-based Layouts by Seun(m): 11:50am On May 27, 2012
Heh. Programmers like to create work for themselves. It's cute. Tables are too easy, so let's use DIVs and mind-bending CSS!
Re: How To Do Vertical Alignment With Div-based Layouts by soloqy: 4:34pm On May 27, 2012
Seun: Heh. Programmers like to create work for themselves. It's cute. Tables are too easy, so let's use DIVs and mind-bending CSS!

grin grin
Re: How To Do Vertical Alignment With Div-based Layouts by freegistcom: 4:40pm On May 27, 2012
thanks for the tutorial

1 Like

Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 5:33pm On May 27, 2012
U are all welcome. Well, this solution solved a little challenge i faced on nooce.net - where the site had to use a cms - and that right area has to align center,
i wanted to use the line-height thinggy, but i felt it might cause some issues, but this method works fine - and is crossbrowser too (to my surprise),
and yes, works even in the dreaded and dreadful internet explorer (to my greatest shock).
Re: How To Do Vertical Alignment With Div-based Layouts by moderattor: 7:16pm On May 27, 2012
Seun: Heh. [b]Programmers like to create work for themselves. [/b]It's cute. Tables are too easy, so let's use DIVs and mind-bending CSS!
Very very Funny smiley
@Dhtml answer nah
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 8:17pm On May 27, 2012
Hmmn, i can see that you are looking for a fight to liven up the board eh? But i am tooo bored even to fight sef. . . .
Re: How To Do Vertical Alignment With Div-based Layouts by sisqology(m): 9:37pm On May 27, 2012
Tables!
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 10:17pm On May 27, 2012
It appears some of you are trying to do a debate over table-based layouts and DIV-based layouts.
Re: How To Do Vertical Alignment With Div-based Layouts by sisqology(m): 10:26pm On May 27, 2012
DIV is d best surely
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 11:30pm On May 27, 2012
DIV may seem better, but table is easier for beginners. . . (but not in the long run)
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 12:20am On May 28, 2012
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 4:35am On May 28, 2012
omo_to_dun: I actually agree with Seun. Some folks would swear by CSS-based layout and speak constantly of the ills of the table tag. At the extreme are those who would use a CSS layout for tabular data; their motto is: CSS is good, table is bad. I am a CSS proponent, but in this case, I'll use a table. Life is too short.
You are wrapping with 2 mouths jare. Anyway, i mix the two of them. . . .but i am more of a web programmer than a frontend person sha. But i do know that when i want to make cms themes, table-based layouts are serious headaches especially when tables are nested into each other.
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 4:42am On May 28, 2012
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 6:40am On May 28, 2012
Crap! Nothing is being criticize here at all. Wait o, i made a post on DIV-based layouts, it is very simple, if you dont like DIVs, leave the thread alone.
Why must you guys always derail a good thread? Kai!

Here we go again, i think some people are too lazy to learn how to make DIV-based layouts, and so they criticize those that use them (that is what i am seeing clearly here). Well, despite being a programmer, i use the two quite well - and i am proud to be a web programmer.
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 7:07am On May 28, 2012
Re: How To Do Vertical Alignment With Div-based Layouts by moderattor: 7:43am On May 28, 2012
its been 2 years i used tables last. Divs all the way. They are 'scalable' and reusable.
If you ever had to create a theme or layout from scratch, you'ld understand why divs are so important.
They can be over lapped and preprogrammed.
If you were porting a template from photoshop into html and css it would be very stupid to put anything in tables.
Tables are out dated, deprecated.
Its a short cut but some short cuts leave long scars.
Since i met divs i never ever used tables again!
Re: How To Do Vertical Alignment With Div-based Layouts by sisqology(m): 8:14am On May 28, 2012
moderattor: its been 2 years i used tables last. Divs all the way. They are 'scalable' and reusable.
If you ever had to create a theme or layout from scratch, you'ld understand why divs are so important.
They can be over lapped and preprogrammed.
If you were porting a template from photoshop into html and css it would be very stupid to put anything in tables.
Tables are out dated, deprecated.
Its a short cut but some short cuts leave long scars.
Since i met divs i never ever used tables again!



Stop fully criticising tables, they are still useful and its good to use both table and DIV together, in some cases whereby you do form, u need tablles if u need to put some maggi styling in the form
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 11:24am On May 28, 2012
Na wa o, this thread is getting more and more hilarious - with catapults and bangers (not bombs) being thrown. . .

Now where is that my doncigalo amigo??
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 12:22pm On May 28, 2012
Seun: Heh. Programmers like to create work for themselves. It's cute. Tables are too easy, so let's use DIVs and mind-bending CSS!

Waiting now?
Re: How To Do Vertical Alignment With Div-based Layouts by yawatide(f): 1:16pm On May 28, 2012
Folks:

You can choose to walk from VI to Ikeja and you can choose to put water in your radiator as opposed to anti-freeze. You can even choose to use spinach to cook your edikang ikong as opposed to waterleaf and you can use an e-reader to read your books as opposed to reading an actual book. Heck! You can even use DIVs to partition your paragraphs, as opposed to using actual P tags and it will still work, right? Let me go a bit further: You can use a while loop as opposed to a for loop or do-while loop. The issue of tables as it relates to this post, as opposed to CSS, is a matter of semantic coding.

We shouldn't use a piece of code as a cop out or "because it works" but because it is the right piece of code (and I am talking at all levels: front, back and business logic) for the situation. Tables semantically have their place (tabular data and HTML-based emails).

The mark of a true and disciplined coder is recognizing that one has tons of weapons at their disposal and uses the best one that fits the situation.

ON ANOTHER TOPIC: How come I can't create a new topic? Or is it location-specific? Just when I am starting to love coming back to NL more than 2ce a day, make una no kill my passion o

1 Like

Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 4:55pm On May 28, 2012
Intwesting
Re: How To Do Vertical Alignment With Div-based Layouts by soloqy: 5:11pm On May 28, 2012
@ Omo to dun and Dhtml, is the arguement for websites building generally or for data presentation?

Because we all know that its better to build websites with CSS(*DIVS*) these days for a number of reasons. However for presentation of Data, tables are easier and better and they can also be styled and presented better with css.

So one could have a site designed with CSS but also integrate styled Tables when it wants to present data that is perfectly aligned...

1 Like

Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 6:51pm On May 28, 2012
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 1:47am On May 29, 2012
^^^No way, the thread has been derailed, it is now a free for all. My view is that developers like omo_to_dun are oldskul with almost extinct skills. . . .
Re: How To Do Vertical Alignment With Div-based Layouts by freegistcom: 5:24am On May 29, 2012
@dhtml,

I want to start a classified site but I need ur advise about the software I can use.

I know some html,Css,PHP/MYSQL and joomla

Should one start from the ground or use something like joomla classified module.

Pls help
Re: How To Do Vertical Alignment With Div-based Layouts by Nobody: 10:36am On May 29, 2012
I use all of the above. It depends on many things really. One of them is your expertise using the above method.
Some people like a certain Leke Ojikutu (http://www.lekeojikutu.com/) can use Joomla for well almost anything, while i can use drupal for almost anything.

If i want to do a classified site, i will look at the functionalities i want it to have and decide if it is best done by drupal or from ground-up.

I also consider how much i am being paid and how much stress i am going to go through (some people like yawatide will disagree with me on this one).

1 Like

Re: How To Do Vertical Alignment With Div-based Layouts by samierage: 6:52pm On Apr 07, 2015
Please guys, i need tags that my users could create their own group and invite his/her friends and user can join the group please help thanks

(1) (Reply)

How I Make Money Online (A True Experience) *tell Your Story Too** / Are You A Top Programmer/ Web-developer? / How Can I Upload/install Mybb To 000webhost

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