Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „elemente mittig zentrieren ohne css“

K

kid_robot

Guest

hallo leute,

habe was für alle, die probleme mit dem vertikalen und zugleich horizontalen zentrieren von elementen haben. da css nicht so eine gute lösung ist, habe ich einfach mal versucht eine tabelle einzubauen, die 100% breit und hoch ist, wobei ich bei "align" und "valign" "center" angegeben habe - das war's schon... bei mir klappt es, habe es schon bei verschiedenen auflösungen getestet, dürfte also nichts schief gehen.

Code:
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
  <tbody>
    <tr> 
     <td align="center" valign="middle">INHALT</td>
    </tr>
  </tbody>
</table>

hoffe mal, dass ich etwas weiterhelfen konnte.
 

Herr_D

offline

kid_robot schrieb:
hallo leute,

habe was für alle, die probleme mit dem vertikalen und zugleich horizontalen zentrieren von elementen haben. da css nicht so eine gute lösung ist, habe ich einfach mal versucht eine tabelle einzubauen, die 100% breit und hoch ist, wobei ich bei "align" und "valign" "center" angegeben habe - das war's schon... bei mir klappt es, habe es schon bei verschiedenen auflösungen getestet, dürfte also nichts schief gehen.

Code:
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
  <tbody>
    <tr> 
     <td align="center" valign="middle">INHALT</td>
    </tr>
  </tbody>
</table>

hoffe mal, dass ich etwas weiterhelfen konnte.



Na endlich... sowas suche ich schon lange... und wie krieg ich jetzt ein Bild hinter meinen Text?
 
K

kid_robot

Guest

[at] herr_d: soll das bild ebenso zentriert sein? wenn ja, dann bau das hier ein, sollte funktionieren:
Code:
style="background-repeat:no-repeat; background-position:center" background="BILD"


[at] duddle: habe einiges in goggle gefunden, was zentrieren mit css betrifft und bei sehr vielen stand, dass die methoden nicht 100%ig funkitionieren...
 

dute

Aktives Mitglied

@Herr_D
@Duddle
Bah, wat seid ihr gemein aber ne Lösung hätt ich trotzdem gerne. !-))))

@kid_robot
sorry das ich mich so einklinke aber das Problem beschäftigt mich schon ein paar Tage (wollte jetzt keinen neuen Thread eröffnen)

Zu meinem Problem:
Stellt euch vor, ein Rahmen um ein Bild (Bild=Content) soll mittig zentriert sein unabhängig von der Auflösung des Browsers (der Rahmen besteht aus 4 divs) soweit hab ich das ja hinbekommen aber leider klebt das alles oben links in der Ecke.
Allerdings darf der Rahmen nicht auseinandergezogen werden denn er besteht aus einem Bild (alles Grafiken).
Hier mal ein Beispiel:



Alles was grün ist, ist ein zusammenhängender Rahmen und innerhalb (das Weiße) ist wechselnder Inhalt, bis jetzt funktioniert das im IE und FF problemlos, allerdings nich mittig.
Für ne Lösung wäre ich sehr dankbar und schick euch im Gegenzug ein paar Nacktfotos meiner Nachbarin (90-120-80) 8)

..............nee ohne Scheiß, wär schön wenn ihr ne Lösung habt.
Mit Tabellen klappt das alles wunderbar aber das ist ja nicht so gefragt :oops:

Gruß dute 8)
 

Duddle

Posting-Frequenz: 14µHz

Dute, willst du es zentrieren oder vertikal mittig haben? Oder beides?

Wenn nur zentriert, mach einen Div drum herum und bau den Code so auf:

[php:1:58566ece51]
body {
text-align:center;
}

#zentrier_mich_container {
text-align:left;
width:60%;
margin:5em auto;
}

....

<body>

<div id="zentrier_mich_container">


Hallo</p>
</div>


</body>
[/php:1:58566ece51]

Wenn beides zugleich, versuch mal die Methode (selber noch nicht ausprobiert, sieht aber nett aus).


Duddle
 

dute

Aktives Mitglied

Duddle schrieb:
Dute, willst du es zentrieren oder vertikal mittig haben? Oder beides?

Nur zentriert.... und Danke schonmal für den Tipp aber leider krieg ich es nicht hin, es verschiebt mir die Grafiken auch in die Mitte (alles untereinander) :oops:

hier mal der Link zur Seite....



Falls Du mal Zeit und Lust hast kannste ja mal einen Blick in den Quellcode werfen und mir mit dem Zaunpfahl winken.

Bei ner 1024 Auflösung reicht es mir ja so wie es jetzt ist aber bei 1280 klebt das alles oben links. Vielleicht funktioniert das Ganze ja auch nicht so wie ich es mir vorgestellt habe, aufgrund der absoluten Positionierung.
Oder bin ich da grundsätzlich falsch rangegangen?

Gruß dute 8)
 

Duddle

Posting-Frequenz: 14µHz

Also im Firefox habe ich es . Bestimmt nicht ideal, aber es war ja nur ein Schnellschuss. Bspw. braucht man den extra-div "Bauch" wahrscheinlich garnicht.

Im IE allerdings... oh ja, dort es sieht witzig aus :lol:

Wenn ich in den nächsten Tagen die Zeit finde, werd ich es mal im IE versuchen (obwohl ich mit Browserweichen kaum Erfahrung habe, aber man lernt ja gern).
Dann erkläre ich auch, was ich gemacht habe. Aber hauptsächlich hab ich die absoluten Positionierungen entfernt und an 2 neuen Elternelementen (wie gesagt, eines wohl überflüssig) ausgerichtet.

Aber jetzt husch ich erstmal in den Keller und hol das Hackfleisch für die Bolognese, mache endlich fertig und skripte ein wenig. Urlaub rockt:p


Duddle
 

dute

Aktives Mitglied

Aaaaaaah das sieht ja schonmal sehr gut aus, ich Danke dir :D
Ich werde mich wohl nochmal intensiver (oder überhaupt mal :) ) mit dem Ausrichten an den Elternelementen beschäftigen.

Genieß deinen Urlaub und laß es dir schmecken 8)

Vielen Dank....

Gruß dute
 

lomion

Aktives Mitglied

ich glaube ich kann dir dabei helfen dute.. aber da ich momentan auf der firmal bin musst du dich mit einem link begnügen..^^


gruß lomion
 

Herr_D

offline

sowohl im IE als auch FF/Mozilla


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>dute</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

  <meta http-equiv="Content-Style-Type" content="text/css">

  <style type="text/css">
<!--

body {
color :black; background-color:#d4d1c7;
font-family:verdana, helvetica, sans-serif;
font-size:13px;
text-align:center; /* zentrierung für IE */
margin:0;
}

#gesamt {margin:auto;width:988px;} /* alles zentriert für FF/Moz. */

#head{
border:0px ;
margin:0;
width:988px;
height:117px;
background:url(http://home.arcor.de/dute/images/neugru2_074.gif);
background-position:0 0;
background-repeat:no-repeat;
overflow:hidden;
color:#fff;
background-color:#d4d1c7;
}

#navtop{
border:0px ;
width:988px;
height:29px;
background:url();
background-repeat:no-repeat;
font-size:1.2em;
overflow:hidden;
color:#fff;
background-color:#d4d1c7;
}

#foot{
border:0px ;
width:988px;
height:43px;
background:url(http://home.arcor.de/dute/images/neugru2_15.gif);
background-position:0 0;
background-repeat:no-repeat;
overflow:hidden; color:#fff;
background-color:#d4d1c7;
clear:both;
}

#navleft{
padding:0px;
margin:0;
width:177px ;
height:579px ;
background:url(http://home.arcor.de/dute/images/neugru2_12.gif);
background-repeat:no-repeat;
overflow:auto;
float:left;

}
#content{
overflow:auto;
width: 791px;
height:579px;
color: black;
background-color:#d4d1c7;
float:left;
}

#right{
background-image:url(http://home.arcor.de/dute/images/neugru2_14.gif);
background-repeat:no-repeat; overflow:auto;
width:20px;
height:579px;
margin:0px;
float:right;

}
-->
  </style></head><body>
<div id="gesamt">
<div id="head">
</div>

<div id="navtop">
</div>

<div id="navleft">
</div>

<div id="content">
<p style="margin:10px; text-align:justify">
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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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
diamLorem 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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.
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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 exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel willum lunombro 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.</p>
</div>

<div id="right">
</div>

<div id="foot">
</div>

</div>
</body></html>


Bildadressen bitte anpassen ;-)



Sieht etwa so aus:





P.S absolute sowie relative Positionierung ist in diesem Fall unnötig...
 

dute

Aktives Mitglied

@Herr_D

Äh, jetzt bin ich aber platt......hätt ich nicht irgendwann mal das Popup deiner PM gekriegt
säße ich heut Abend noch dran, vielen Dank dafür. 8) Das sieht ja alles um einiges aufgeräumter aus als bei mir, jetzt muß ich erstmal alles analysieren und kann mich dann endlich an die Grafiken machen (-gott-) (-gott-) (-gott-)

@Kid_Robot
Das ist doch auch bestimmt was für dich.....




Nochmals Vielen Dank euch dreien........(@Herr_D, Duddle, Lomion)

Gruß dute 8)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben