Anordnung der einzelnen DIVs

[Chriko]

AW: Anordnung der einzelnen DIVs

Du darfst kein <ul> innerhalb eines <p> einfügen. Ansonsten sieht es schon besser aus. Hab es allerdings nur kurz überflogen

edit: wozu überhaupt den p-tag um die liste rum?

 

[FlashCreative]

AW: Anordnung der einzelnen DIVs

Danke für die Antwort. Auf meinem Rechner hatte ich den Fehler sogar schon behoben, jedoch nicht hochgeladen und deshalb konnte ich nicht verstehen, was falsch ist. Da ist der Upload wohl einfach nur schief gelaufen. Jetzt klappt auf die Validierung, danke

 

[cebito]

AW: Anordnung der einzelnen DIVs

Jep, valide ist die Seite jetzt, aber:

• h1 ist die Überschrift ersten Ranges, sozusagen der Buchtitel, du solltest weiter gliedern - h2 = Kapitel, h3 = Absatz usw.
• "Lieber Bücherfreund und Leser, ich lade Sie ein:" sollte deshalb bspw. eine h2 oder h3 sein und nicht in einem p-tag rumhängen
• wozu sich in deinen "box0x"-divs nochmal zusätzliche "content0x"-divs befinden will mir auch noch nicht ganz einleuchten? Welche Funktion erfüllen die, außer zusätzlicher Markup zu sein?

Und noch ein kleiner Tipp am Rande, statt alle Buchstaben groß zu schreiben in den Überschriften, versuch mal "font-variant:small-caps;", sieht einfach hübscher aus, oder einfach "text-transform: uppercase;", wandelt alle Buchstaben in Großbuchstaben um...

 

[Chriko]

AW: Anordnung der einzelnen DIVs

@cebito und co Ich bin ja auch nur Laie. Muß man eigentlich in diesem Fall am Ende das float wieder clearen? Denn wenn ja, müsste das auch noch gemacht werden.

 

[kornyclown]

AW: Anordnung der einzelnen DIVs

tachchen

ich hab auch mal ne frage zum thema div positionieren, wollte aber keinen unnötigen neuen thread öffnen.

ich meine mich erinnern zu können, dass es die möglichkeit gibt einen div-container pixelgenau zu platzieren. also nich dieses align="left,right,bottom...." kram sondern das man einen pixelwert für x und y angibt, um den container so dann ganz genau dahin zu schieben wo er hin soll.

erinnere ich mich da richtig und wenn ja wie lautet der befehl dafür?

 

[ans316]

AW: Anordnung der einzelnen DIVs

hallo kornyclown,

zur px genauen positionierung von div`s verwendet man den tag margin z.B.

margin: 10px 20px 30px 150px;
oder
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 150px;

 

[maxxscho]

AW: Anordnung der einzelnen DIVs

Ich muß hier auch meinen Senf dazugeben
@FlashCreative: Wie meine Vorredner schon mehrmals erwähnten, die Basics mußt du dir selbst beibringen. Ich bin der Meinung, das geht auch nur so. Hier auch noch eine kleine Hilfe.
Little Boxes Teil 1.
Damit hab ich meine Basics damals gelernt. Jetzt gibts das Buch online sogar gratis. Dazu gibt es auch noch Teil 0 (für den totalen Anfänger) und Teil 2(fortgeschritten, nicht Pro). Kann dir diese Bücher nur empfehlen.

Zum Code allgemein: Ich mach erst seit 2-3 Monaten wieder vermehrt HTML/CSS, hab einen kleinen Ausflug zu PHP gemacht, ist einfach geil. Und was ich beim Programmieren gelernt habe, ist alles so einfach als möglich zu halten. Ich hab durch PHP besseres HTML/CSS gelernt. Versuch z.B. in der CSS möglichst viele Anweisungsblöcke zu kombinieren. Nicht für jeden p-Tag eine eigene Anweisung zu schreiben. Man kann je nach Layout mehr oder weniger Anweisungen kombinieren. Das ist am Anfang etwas mühsam, aber man hat es schnell im Blut und erspart sich in weiterer Folge viel Tipperei.

Das gleiche bei HTML. Schau dir ein Design an, bevor du es umsetzt, mach dir über die Einteilung gedanken und dann schreibe HTML. Du wirst sehen, der ein oder andere Gedanken im Voraus erspart dir das ein oder andere unnötige div-Tag.

Noch einen englischsprachigen Link möchte ich dir empfehlen. Eine englischsprachige HTML/CSS Referenz. Find ich besser als "SelfHTML".
Sitepoint.com

Das ganze soll hier nicht belehrend wirken, ich mach selbst auch noch genug Fehler. Sieh es einfach als kleine "Inspiration"

 

[kornyclown]

AW: Anordnung der einzelnen DIVs

hallo kornyclown,

zur px genauen positionierung von div`s verwendet man den tag margin z.B.

margin: 10px 20px 30px 150px;
oder
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 150px;

oh super, danke, läuft wie geschmiert. bis auf eine kleinigkeit:
das positionieren an sich funktioniert aber ich habe bemerkt, dass wenn ich meinen browser nicht im vollbildmodus habe, an die den rand oder die unterkante gehe und sie verschiebe, sprich das fenster von meinem browser kleiner mache dann bleibt mein button, wie angemeißelt an seinem platz und das hintergrundbild bewegt sich darunter.

ich hab mal ein eine kleiner bilderserie zusammengestellt:


kann man dieses auseinanderdriften verhindern und warum habe ich keinen scrollbalken?

 

[cebito]

AW: Anordnung der einzelnen DIVs

kann man dieses auseinanderdriften verhindern und warum habe ich keinen scrollbalken?

Kann man, ja, und warum du keinen Scrollbalken hast kann man dir auch sagen, wenn du meine Signatur geklickt, gelesen und verstanden hast. Anhand von ein paar Bildchen wissen wir jetzt zwar, was bei dir schief läuft, warum können wir aber nur sagen, wenn du uns auch die Quelle des Problems hier postest - deinen Code...

 

[kornyclown]

AW: Anordnung der einzelnen DIVs

Kann man, ja, und warum du keinen Scrollbalken hast kann man dir auch sagen, wenn du meine Signatur geklickt, gelesen und verstanden hast. Anhand von ein paar Bildchen wissen wir jetzt zwar, was bei dir schief läuft, warum können wir aber nur sagen, wenn du uns auch die Quelle des Problems hier postest - deinen Code...

sorry, mein fehler.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thomas Manz | Digitale Postproduktion</title>
<meta name="KeyWords" content="blablabla - blebleble - blöblöblö" />
<style type="text/css">
<!--
body {
    background-image: url(../media/home.jpg);
    background-position:top;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
}
body,td,th {
    color: #333333;
}
-->
div.home { margin-top:195px; margin-left:214px;}
div.showreel { margin-top:-16px; margin-left:318px;}</style></head>

<body>
<div class="home"><a href="...."><img src="../media/home-button.png" border="none"/></a></div>
<div class="showreel"><a href="...."><img src="../media/showreel-button.png" border="none" /></a></div>
</body>

</html>

 

[Chriko]

AW: Anordnung der einzelnen DIVs

Das du keinen Scrollbalken hast, liegt vielleicht einfach daran, dass es nichts zu scrollen gibt.
Was die Positionierung angeht - neu machen.
Die Navigation würde ich als Liste machen und mit CSS formatieren anstatt jeden Menüpunkt in einem Div mit einer fixen Pixelzahl zu positionieren.

 

[kornyclown]

AW: Anordnung der einzelnen DIVs

das mein hintergrundbild größer ist als der bildausschnitt des monitors ist keine basis dafür, das ich nen scrollbalken krieg?
das mit den listen wäre ganz gut wenn mir das einer erklären könnte denn mit listen hab ich vorher noch nie gearbeitet.

 

[ans316]

AW: Anordnung der einzelnen DIVs

schau doch mal unter

oder
CSS 4 You - The Finest in Stylesheets: Tipps und Tricks

 

[kornyclown]

AW: Anordnung der einzelnen DIVs

hm, ok...danke erstmal dafür aber jetzt wo ich sehe was das mit diesen listen ist frag ich mich, wie hilft mir das?
es ist doch lediglich eine aufzählungsform aber es hat doch keinen direkten einfluss darauf, das meine oberfläche und mein hintergrund zusammenbleiben wenn man das browserfenster verzieht.

 

[Chriko]

AW: Anordnung der einzelnen DIVs

Du formatierst das ganze ja dann nicht als Aufzählung wie bei einem Einkaufszettel, sonder so:
CSS Navigation Techniques (37 entries)
oder so

 

[kornyclown]

AW: Anordnung der einzelnen DIVs

danke für die seite, die sieht sehr interessant aus. hab mir die 37 navigationstechniken angesehen. leider versteh ich nur bahnhof und die sachen da sind viel zu komplex, mit drop-down menüs, slidedoors, etc.
ich will doch einfach nur meine 3 png's als links über die reiter legen und da sollen sie dann auch bleiben wenn ich das browserfenster verkleinere, mehr nicht.

 

[Chriko]

AW: Anordnung der einzelnen DIVs

Deswegen macht man ne Liste mit den PNG's als Grafiken und floatet sie. Mit margin setzt du den Abstand - fertig.

edit:
So in der Art:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#wrapper {
  width: 600px;
  margin: 0 auto;
}
div#menue {
  width: 600px;
  height: 20px;
  background-color: #eee;
}
div#content {
  width: 592px;
  height: 400px;
  background-color: #999;
  border: 4px solid #333;
}
ul#navigation li {
  list-style: none;
  float: left;
  margin-right: 20px;
  background-color: #000;
  color: #fff;
}

</style>
</head>
<body>
<div id="wrapper">
  <div id="menue">
    <ul id="navigation">
	  <li>bild 1</li>
	  <li>bild 2</li>
	  <li>bild 3</li>
	</ul>
  </div>
  <div id="content">
  </div>

 

[kornyclown]

AW: Anordnung der einzelnen DIVs

Deswegen macht man ne Liste mit den PNG's als Grafiken und floatet sie. Mit margin setzt du den Abstand - fertig.

edit:
So in der Art:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#wrapper {
  width: 600px;
  margin: 0 auto;
}
div#menue {
  width: 600px;
  height: 20px;
  background-color: #eee;
}
div#content {
  width: 592px;
  height: 400px;
  background-color: #999;
  border: 4px solid #333;
}
ul#navigation li {
  list-style: none;
  float: left;
  margin-right: 20px;
  background-color: #000;
  color: #fff;
}

</style>
</head>
<body>
<div id="wrapper">
  <div id="menue">
    <ul id="navigation">
      <li>bild 1</li>
      <li>bild 2</li>
      <li>bild 3</li>
    </ul>
  </div>
  <div id="content">
  </div>

oh, cool. danke, das sieht echt gut aus. hab grad mörderische kopfschmerzen, deshalb wars das für heute mit mir.
werde es morgen ausprobieren und bescheid sagen was draus geworden ist.

besten dank.

 

[kornyclown]

AW: Anordnung der einzelnen DIVs

so ich hab es jetzt doch nochmal versucht aber irgendwie tut sich garnichts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thomas Manz | Digitale Postproduktion</title>
<meta name="KeyWords" content="blablabla, blebleble, blobloblo" />
<style type="text/css">
<!--
body {
background-image: url(../media/home.jpg);
background-position:top;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
body,td,th {
color: #333333;
}
div#wrapper{
width:600px;
margin:auto;
}
div#menue{
width:600px;
height:20px;
}
div#content{
width:592px;
height:400px;
}
ul#navigation li{
list-style:none;
float:left;
margin-right:20px;
}
-->
</style></head>

<body>
<div id="wrapper">
<div id="menue">
<ul id="navigation">
<li><img src="../media/home-button.png" /></li>
<li><img src="../media/showreel-button.png" /></li>
<li><img src="../media/kontakt-button.png" /></li>
</ul>
<div id="content">
</div>

</body>

</html>

 

[Chriko]

AW: Anordnung der einzelnen DIVs

Du mußt auch die tags wieder schließen. Nach der Liste fehlt ein </div> und nach dem Content ist der wrapper auch nicht geschlossen.

edit:

<div id="wrapper">
 <div id="menue">
  <ul id="navigation">
   <li><img src="http://www.psd-tutorials.de/modules/Forum/media/home-button.png" /></li>
   <li><img src="http://www.psd-tutorials.de/modules/Forum/media/showreel-button.png" /></li>
   <li><img src="http://www.psd-tutorials.de/modules/Forum/media/kontakt-button.png" /></li>
  </ul>
 </div>
  <div id="content">
  </div>
</div>

Ansonsten, bevor es einer von den Mods sagt. Edit Button und Codewerkzeug nutzen