[XHTML/CSS] How do I make this the easiest?

Audacious · 06-17-2012, 06:26 PM

Hi, Audacious here.

I've come to the conclussion that to make my idea come to life I have to learn to code to some extend. So first I am learning XHTML and CSS.

Then Java scrips, HTML 5

and then PHP.

In XHTML & CSS I am trying to make something look like this:

What do you suggest is the easiest way?

I know I might have to go back later and redo it as there might be better ways do it in another coding language.

But this is where I am at.

I hope someone can help me.

Best regards,

Audacious.

PS: I already got the title in the right place with CSS.

Though I can't seem to figure out how I get the last two boxes to place themselves in those spots.

Cheaterhater · 06-17-2012, 09:02 PM

I don't know how much you already know about (X)HTML & CSS, but the easiest and correct way would be to put each of your columns in a block and let them float (well, at least one of them). Something like that:

HTML Code:

<style type="text/css">
#a {
	float: left;
}
</style>
<div id="a">Left column with group name, etc.</div><div id="b">Right column with points, etc.</div>

The even easier, but incorrect way would be to use a table (then make two cells, one for the left and one for the right column). Could you post the HTML & CSS code you've already got?

Madchen · 06-18-2012, 03:48 PM

Tables would do it fine and as far as i know it's not incorrect. Imo it is easier way to do it.

You can float as Cheaterhater suggested but i think it's lil bit too much work for a simple thing.

Cheaterhater · 06-18-2012, 05:52 PM

Quote:

Originally Posted by Madchen

Tables would do it fine and as far as i know it's not incorrect. Imo it is easier way to do it.

It's incorrect in such a fashion that you shouldn't "abuse" HTML elements for things they aren't intended for. <table> tags are for actual tables, not for layouts (this is because HTML is a markup language and isn't related to the layout at all, since you should use CSS for that part). Thanks to CSS 2.1, there are options to display non-table blocks in a tabular design (which was introduced because, well, HTML isn't for the layout).

OT: But for now, you can use something like that:

HTML Code:

<style type="text/css">
td#a, td#b {
	border: 0;
	padding: 0;
	vertical-align: top;
}

td#a {
	padding-right: 10px;
}

td#b {
	padding-left: 10px;
}
</style>
<table><tr><td id="a">Left column with group name, etc.</td><td id="b">Right column with points, etc.</td></tr></table>

You can style that with CSS, depending on how you already know. Note that it's a misuse of tables, though.

Audacious · 06-23-2012, 02:23 PM

I dunno, I am really confused, but I got it to work in a table... If that is alright? :/

----------------------

I got another question. When do I determine where my form ends?

As it is now, I got my entire body within a form tag.

Cheaterhater · 06-23-2012, 04:41 PM

Quote:

Originally Posted by Audacious

I dunno, I am really confused, but I got it to work in a table... If that is alright? :/

It's valid, though it isn't considered a good coding style. As long as it works, keep it. Doing something like that without tables can be quite tricky, especially when you're new to HTML and CSS.

Quote:

Originally Posted by Audacious

I got another question. When do I determine where my form ends?

As it is now, I got my entire body within a form tag.

You start the <form> tag before the first <input> tag and end it after the last <input> tag that belongs to the same form. I usually make it as small as possible (since there's no need to make it bigger than it... needs to be). In your case, you would put the table within the <form> tag (the table is the smallest block that contains all of your elements, and thus you don't need to put more in your <form> tag). Apart from that, there isn't any limitation; The form can be as big as you want it to be.
However, don't put the body in the <form> tag, do it the other way round (HTML elements which form the body must be inside the <body> tag, hence the name).
So having something like

HTML Code:

<body>
  <form ...>
    <table ...>
      ...
    </table>
  </form>
</body>

is completely legit in your case.

Audacious · 07-10-2012, 04:42 PM

Thank you so much for your help and I am so sorry I haven't replied before, but I've been on a break so couldnt see what it was all about. :P

I got another question that you might have the answer for. For some reason I can't seem to find an easy understandable explanation for why nav tags are needed. ^^

Best regards,

Audacious.

Cheaterhater · 07-10-2012, 05:51 PM

Quote:

Originally Posted by Audacious

I got another question that you might have the answer for. For some reason I can't seem to find an easy understandable explanation for why nav tags are needed. ^^

Well, <nav> tags aren't exactly needed. You can use them to put your navigation links in there. For example, if you have a navigation bar like PD, you would put all the links ("Heroes", "Items", "Guides", ...) in a <nav> tag. Virtually every website has some kind of navigation block, but prior to HTML5, there was no universal format for that. The thought behind the <nav> tag is to make a navigation block easily recognizable for a parser. This is useful if the parser is, for instance, a screen reader for a blind user, and the user doesn't want to listen to the navigation links over and over again.
Apart from that, determining whether some text belongs to the navigation or the actual content could also be useful in other cases. You always have to keep in mind that HTML is a markup language after all, and the <nav> tag is an example for that: It doesn't add any fancy effect for your layout, but it adds some structure, which isn't directly visible to the user, but can be important for parsers.

06-17-2012, 06:26 PM	#1
Audacious Member Join Date: Jun 2009 Location: In the world Platon doesn't believe in. Posts: 5,603 Blog Entries: 10	How do I make this the easiest? Hi, Audacious here. I've come to the conclussion that to make my idea come to life I have to learn to code to some extend. So first I am learning XHTML and CSS. Then Java scrips, HTML 5 and then PHP. In XHTML & CSS I am trying to make something look like this: What do you suggest is the easiest way? I know I might have to go back later and redo it as there might be better ways do it in another coding language. But this is where I am at. I hope someone can help me. Best regards, Audacious. PS: I already got the title in the right place with CSS. Though I can't seem to figure out how I get the last two boxes to place themselves in those spots. Attached Thumbnails

06-17-2012, 09:02 PM	#2
Cheaterhater Member Join Date: Sep 2009 Location: GetUnitLoc(udg_Cheaterhater) Posts: 1,717 Blog Entries: 3	Re: How do I make this the easiest? I don't know how much you already know about (X)HTML & CSS, but the easiest and correct way would be to put each of your columns in a block and let them float (well, at least one of them). Something like that: HTML Code: <style type="text/css"> #a { float: left; } </style> <div id="a">Left column with group name, etc.</div><div id="b">Right column with points, etc.</div> The even easier, but incorrect way would be to use a table (then make two cells, one for the left and one for the right column). Could you post the HTML & CSS code you've already got? __________________ Review my suggestions: Buff Maelstrom & Mjollnir by making them stackable Fix Black Hole to silence items properly (there is a way!) You can check my Portfolio out for some DotA MS Paint art.

06-18-2012, 03:48 PM	#3
Madchen Member Join Date: Jun 2009 Location: Herzegovina Posts: 693	Re: How do I make this the easiest? Tables would do it fine and as far as i know it's not incorrect. Imo it is easier way to do it. You can float as Cheaterhater suggested but i think it's lil bit too much work for a simple thing. __________________

06-23-2012, 02:23 PM	#5
Audacious Member Join Date: Jun 2009 Location: In the world Platon doesn't believe in. Posts: 5,603 Blog Entries: 10	Re: How do I make this the easiest? I dunno, I am really confused, but I got it to work in a table... If that is alright? :/ ---------------------- I got another question. When do I determine where my form ends? As it is now, I got my entire body within a form tag.

07-10-2012, 04:42 PM	#7
Audacious Member Join Date: Jun 2009 Location: In the world Platon doesn't believe in. Posts: 5,603 Blog Entries: 10	Re: How do I make this the easiest? Thank you so much for your help and I am so sorry I haven't replied before, but I've been on a break so couldnt see what it was all about. :P I got another question that you might have the answer for. For some reason I can't seem to find an easy understandable explanation for why nav tags are needed. ^^ Best regards, Audacious.