You are not logged in.

  • Login

aside ausrichten

Dear visitor, welcome to Coder Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Fragz

Professional

  • "Fragz" started this thread

Posts: 255

  • Send private message

1

Tuesday, March 22nd 2011, 9:44am

aside ausrichten

Hallo,

Wie in einem anderen Thread zu lesen ist arbeite ich derzeit mit HTML5.
Nun versuche ich 2 boxen nebeneinaner zu bekommen aber egal ie ich es anstelle <aside> will nicht so wich ich will. Entweder wird der Text über oder unter dem Inhalt angezeigt, aber nicht daneben.

Hier mal mein Code

HTML Code

 
1
2
3
4
5
6
7
8

<section class="s_container">
    <p>test</p>
 
  </section>
 
  <aside>
      <p>test</p>
  </aside>


Cascading Style Sheets

 
1
2
3
4
5
6
7
8
9
10

.s_container {
	position:relative; 
	margin:0 auto; 
	width:960px;
	padding-top: 40px;
}
 
aside {
	float:left;
}

vince

Master

Posts: 1,103

  • Send private message

2

Tuesday, March 22nd 2011, 10:03am

lass die "p-tags" weg und dann musst du das vorige Elemente floaten lassen

HTML Code

 
1
2
3
4
5
6
7

<section class="s_container" style="float:left;">
    <article>test</article>
</section>
 
<aside>
  <article>test</article>
</aside>

Fragz

Professional

  • "Fragz" started this thread

Posts: 255

  • Send private message

3

Tuesday, March 22nd 2011, 10:22am

Hallo,

Nein dies führte zum gleichen Ergbniss und setzte die ganze Page nicht mehr mittig was aber wohl mein Fehler bei der Beschreibung war.

HTML Code

 
1
2
3
4
5
6
7
8
9
10
11

<section class="s_container">  <!-- Setzt die Seite mittig -->
 
    <section style="float:left;">  <!-- Rechter div -->
    	<article>test</article>
    </section>
 
    <aside> <!-- Linke Navigation -->
  		<article>test</article>
	</aside>
 
</section>

vince

Master

Posts: 1,103

  • Send private message

4

Tuesday, March 22nd 2011, 11:31am

Quoted

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.


Zum zentrieren des Containers ist das div klar besser (siehe Definition), dann beissen sich auch deine sections nicht mehr.

HTML Code

 
1
2
3
4
5
6
7

<div class="s_container">
 
	<aside style="float:left">ich stehe links</aside>
 
	<article>und ich floate links ran (o_O) </article>
 
</div>




Ich kenne den Umfang nicht, aber du kannst den Inhalt selber nochmal in Sektionen unterteilen.

HTML Code

 
1
2
3
4
5
6
7
8
9
10
11

<div class="s_container">
 
	<section style="float:left">
		<aside>ich stehe links</aside>
	</section>
 
	<section>
		<article>und ich floate links ran (o_O) </article>
	</section>
 
</div>

Fragz

Professional

  • "Fragz" started this thread

Posts: 255

  • Send private message

5

Tuesday, March 22nd 2011, 11:48am

Ah nu haut es hin. Dank dir

Quoted

Zum zentrieren des Containers ist das div klar besser (siehe Definition), dann beissen sich auch deine sections nicht mehr.

Hm, in der PHP File wo alles zu html5 beschrieben ist wird es mit dem DIV nicht erwähnt, nur das es besser ist alles in section zu packen

vince

Master

Posts: 1,103

  • Send private message

6

Tuesday, March 22nd 2011, 12:05pm

Die Definition der <section> ist ein wenig schwammig.

http://www.w3.org/TR/html5/sections.html#the-section-element

Das Sectionelement ist nur zum aufteilen, nicht zum stylen, zum scripten oder als Container gedacht.


HTML Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>


HTML Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<section>
 <article>
  <hgroup>
   <h1>Apples</h1>
   <h2>Tasty, delicious fruit!</h2>
  </hgroup>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
   <h1>Red Delicious</h1>
   <p>These bright red apples are the most common found in many
   supermarkets.</p>
   <h1>Granny Smith</h1>
   <p>These juicy, green apples make a great filling for
   apple pies.</p>
  </article>
</section>

Fragz

Professional

  • "Fragz" started this thread

Posts: 255

  • Send private message

7

Tuesday, March 22nd 2011, 12:29pm

Hm, Beide Lösungen, sowohl DIV als auch SECTION sind laut W3C Valide.

Ich denke mal ich änder die Punkte auf div, das macht es auch übersichtlicher.

vince

Master

Posts: 1,103

  • Send private message

8

Tuesday, March 22nd 2011, 12:33pm

Quoted from "Fragz"

Hm, Beide Lösungen, sowohl DIV als auch SECTION sind laut W3C Valide.

Ich denke mal ich änder die Punkte auf div, das macht es auch übersichtlicher.


Klar sind beide valide. Das wäre ein logischer "Fehler" (wobei Fehler nicht richtig ist, da es ja "nur" eine Richtlinie ist, die man einhalten sollte) , den ein Validator nicht erkennen kann.

Siehe die offizielle Definition:

Quoted

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
Quelle: http://www.w3.org/TR/html5/sections.html#the-section-element

Similar threads

Tagging

Social bookmarks