Textfeld

html.de-Forum HTML, XHTML & CSS
1

http://hurtful.de/KDA/index.html

Weiß jemand warum es das tut und was ich falsch gemacht hab? :frowning: Textfeld soll logischerweise mittig sein …

[code]

lay-psd-fertig

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

[/code]
2

ich rate dir schon mal in deckung zu gehen, denn die anderen kollegen hier an board werden dir als erstes dein tabellenlayout um die ohren hauen :wink:
als nächstes frage ich mich was du bei einer absoluten positionierung mit klar definierten abstand nach oben und links erwartest…doch sicher keine zentrierung oder?
da liegt der hase im pfeffer…
text-align:center und/oder margin:auto sollten zu einer zufriedenstellenden lösung führen

3

Jaa… hat mein Dozent auch schon gemacht :smiley: Egal, so lang es geht xD

als nächstes frage ich mich was du bei einer absoluten positionierung mit klar definierten abstand nach oben und links erwartest…doch sicher keine zentrierung oder?
da liegt der hase im pfeffer…
text-align:center und/oder margin:auto sollten zu einer zufriedenstellenden lösung führen

ohhhh… das hab ich natürlich nicht gesehen. ^^
Naja Abstand von oben muss ich ja logischerweise definieren. Abstand von links hab ich dann auf 50% gestellt, dann isses zu weit rechts. text-align funktioniert auch nicht (dann bleibts ganz links). margin auch nicht… was mach ich jetzt schon wieder falsch? oO

4

ich seh garnicht dass du irgendwas verändert hast grübel

probier mal so:

<style type="text/css">
<!--
body{
 text-align:center;
 margin:0;
 background-color:#FFFFFF;
 }
 
#apDiv2 {
 position:absolute;
 width:380px;
 height:349px;
 z-index:1;
 top: 251px;
 margin:auto;
}
-->
</style>
</head>
<body onLoad="preloadImages();">
<div id="apDiv2">

auf dem weg kannst du auch gleich die formatierungen aus dem bodytag in die css packen :wink:

5

Ich würde es so machen:[CODE]body{
text-align:left !important;
margin:0;
background-color:#FFFFFF;
}

#apDiv2 {
position:absolute;
width:380px;
height:349px;
z-index:1;
top: 251px;
left:50%;
margin:0 0 0 -85px;
text-align:left !important;
}[/CODE]

Das größte Problem ist, dass die Schrift so klein ist, dass sie nicht mehr richtig dargestellt wird:[ATTACH]1414.vB[/ATTACH]
außerdem ragt sie ins Zierbild rein.

6

klick

Es geht immer noch nicht… ich verstehs nicht -.-

Habs jetzt alles in die css gepackt und die sieht jetzt so aus:

[CODE]body {color : #000;
font-size:10px;
background-image: url(bg.jpg);
background-position: 50% 133px;
background-repeat: repeat-y;
background-color : #d2d2d2;
font-family:„Courier New“, Courier, monospace;
text-align:left !important;
margin:0;}

a:link {text-decoration : none;
color : #184D63;}

a:hover {color : #000;
font-size : 15pt;
letter-spacing : 0.25em;}

a:visited {color : #D8C43F;}

#apDiv2 {
position:absolute;
width:380px;
height:349px;
z-index:1;
top: 251px;
left:50%;
margin:0 0 0 -85px;
text-align:left !important;
}[/CODE]

Das größte Problem ist, dass die Schrift so klein ist, dass sie nicht mehr richtig dargestellt wird:[ATTACH]1414[/ATTACH]
außerdem ragt sie ins Zierbild rein.

Ja das ist ja alles noch nicht fest… ich hab nur die Schriftgröße geändert um was auszuprobieren ^^ soll eigentlich größer werden. :slight_smile:

7

versuchs mal mit


margin:0px auto;
position:relative;

Der Abstand von Oben kann bei der ersten Angabe bei margin oder seperat bestimmt werden

Ich hab mal den CSS Code geändert. Jetzt tritt ein anderer Fehler auf. Das liegt daran, dass du deine Elemente semantisch nicht Korrekt machst. Ich werds mal freundlicherweise versuchen zu ändern. Hier der CSS Code:


body {color : #000;
font-size:0.8em;
background-image: url(bg.jpg);
background-position: 50% 133px; 
background-repeat: repeat-y;
background-color : #d2d2d2;
font-family:"Courier New", Courier, monospace;
 margin:0;}


a:link {text-decoration : none;
          color                 : #184D63;}

a:hover {color : #000;
font-size : 15pt;
letter-spacing : 0.25em;}

a:visited {color : #D8C43F;}

 
#apDiv2 {
 position:relative;
 width:380px;
 height:349px;
 z-index:1;
 margin:251px auto;
 text-align:left !important;
}
8

Vielen Dank schonmal :slight_smile: Mittig ist es jetzt durchaus… klick nur der Hintergrund stimmt jetzt nicht mehr :frowning:
Ich hab leider keinen Plan, wie ich meine Elemente semantisch korrekt mache (: Was bedeutet das?

Tut mir Leid, dass ich so absolut keine Ahnung habe, bin noch ziemlicher Anfänger was das angeht…

9

Und wer sagt, dass es geht? Es wird bei Dir vielleicht so dargestellt, wie Du das willst, aber es „geht“ sicher nicht, denn da wird ja dem Inhalt eine Bedeutung vorgetäuscht, die so nicht gemeint ist. Das kann in manchen Clients fatale Folgen haben.

10

Hm okay, ich habe das Gefühl, dass das so nichts wird. :confused: Liegt das daran, dass ich das mit imageready gemacht habe? Wenn ich versuche das rollover ohne imageready zu machen (weil das würd ich eigentlich ganz gerne behalten), wie mache ich das denn dann? Brauche ich im Endeffekt nicht trotzdem die Slices?