Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Help with a few things regarding textboxes and multiple tabs in HTML/CSS

I want to design a page with html/css that'll have two different tabs, both of which will contain multiple textboxes to grab data from the code behind. I'm fairly new to both html/css and so asking for some help here.

Can someone enlighten me a bit on how can I bring a number of textboxes, put them one after the other on a page, for both the tabs?

P.S The design in this case doesn't have to be state-of-the art. I just want to know how to do the thing stated above.

Thanks.

6 Answers

david johnson
david johnson
7,371 Points

Sorry it took me a while to get back to you Aquib...

so here is an illustration of the box model:

box model diagram

I updated the code that I had up on the workspace that I previously made, and it is at this link

I hope it helps, I put in comments for all of the stuff that I thought would be less than self explanatory, but this is literally my first ever response to anyone on a forum anywhere, so if you need more from me, please feel free to ask for clarification.

Again hope it helps! Cheers!

Thanks a bunch david! one last question, would it be a bit easy if I go through the Photoshop Foundation course and then try to create the layout on Photoshop? Just asking. (besides learning the foundations of css)

david johnson
david johnson
7,371 Points

http://web-eraq8rv1tj.treehouse-app.com/tabs.html

Is this what you meant with the tabs... This is kind of the easiest way to accomplish that.

Basically you are assigning the id="selected' manually to your active page. That means with this method you would have to switch that id to correspond to the page that the user would be on link-wise.

The rest is done in the style.css file i can add comments for you to that file if anything is unclear.

The sections of text that are in the 'content' area of the wireframe you linked to would also be styled with the css, but I am wondering if the question is about how to dynamically pull that information in or rather you just want to know how to create the layout of the page.

The tab confusion is clear now, thanks for that. Would definitely appreciate if you could add some comments in the css file(if you wish to), mostly because I still don't know about padding and margins. But most importantly I want to know how to deal with the textboxes(only the layout thing, NOT how to dynamically pull data). I mean how to create the textboxes and how can I play with their positioning (again, I'm asking this because I'm a total newbie to css). I think I will be able to decorate the textfields and buttons later on.

And one last question, would it be a bit easy if I go through the Photoshop Foundation course and then try to create the layout on Photoshop? Just asking.

david johnson
david johnson
7,371 Points

Aquib, I would totally recommend taking the photoshop foundations course, absolutely. I also think that html and css would be a great idea. If you are in a rush you can hit those three and have a basic idea of how to put together a page for the most part.

That said, I would totally recommend going through the whole Web Design track. I haven't taken it, but I looked at the courses and it is all great material.

Good luck!

I hope everything is easy to learn and it goes well.

david johnson
david johnson
7,371 Points

What do you mean when you say 'tabs'?

Like the ones in browsers, only in this case the tabs will be in the app. Like this

P.S doesn't have to be Exactly like this, just help me out with the tab thing and the textboxes thing if you can :)

david johnson
david johnson
7,371 Points

sure, i will totally do that, give me a few minutes