• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Objekte, Bilder, Texte, Links etc in Tabelle positionieren?

M

MaxG

Neues Mitglied
Hallo Zusammen...Ich habe auf einer Seite eine Tabelle die sich immer in der Mitte der Seite befindet....Heisst wenn jemand die Seite kleiner macht geht die Tabelle so mit das sie weiterhin in der Mitte bleibt...

jetzt ist meine Frage:
Ich kann Objekte, Bilder, Texte, Links etc mit Positionsangaben (Top....) positionieren...
diese Objekte richten sich dann allerdings an den Bildschirmrand.....wie kann ich in einer Tabelle den Objekten eine Feste Position zuweisen z.B. in der Tabelle 5px von unten und 3px von rechts?

Liebe Grüße
 
Um Elemente innerhalb anderer Elemente absolut zu positionieren, muss das umgebende Element einen anderen Wert als "position: static;" haben. Also z.B. "position: relative;".

Auf eine Tabelle würde ich jedoch verzichten. Die macht bei absoluter Positionierung in einigen Browsern Probleme.
 
Vieleicht kannst du mir auch anders helfen...die Tabelle ist nicht zwingend notwendig.... Ich habe einfach nur ein Bild...nämlich das hier:p
test.jpg

und ich möchte das es sich immer in der Mitte der Homepage bewegt....allerdings werden auf das Bild noch Links gelegt.....das wäre auch schon das erste Problem da in HTML Elemente übereinander legen nicht so einfach ist...deswegen habe ich mir überlegt das ich eine Tabelle nehme....die mit <center> in der Mitte der Seite gehalten sind.....da das Bild das Backgroundimage der Tabelle ist kann ich Ohne Probleme Elemente in die Tabelle und somit über das Bild legen....Problem ist jetzt nur die Links auch wenn sie die Seite bewegt auf der richtigen Stelle zu halten.....in der "Menü" Zeile oben bei den Buttons sollen neben den Kreisen immer ein Link sein.....wie kann ich die links an diese Stelle bewegen sodass diese sich auch parallel mit dem Bild bewegen?
 
Da es ein Hintergrundbild ist, binde es auch als solches ein. Am besten im <body>, denn dort kannst Du es auch gleich noch zentrieren.

Code: 
body { 
 background-image: url(bild.jpg);
 background-position: center center;
 background-repeat: no-repeat;
}

Und streich Tabellen und <center> aus deinem Kopf ..
 
alles klar danke;)
jetzt aber das wichtigste....wie du auf dem Bild vieleicht siehst soll oben in die "Menü Leiste" neben die Kreise mit den Zahlen drin auch noch Text stehen welcher als Link dient....wenn das Bild immer an der selben position ist wäre dies einfach mit position: absolut zu lösen....wegen dem:
background-position: center center;
ist das Bild nicht immer am selben ort...soll es ja auch nicht,...ist ja gut das es mit geht aber die Links müssen natürlich auch über dem Bild an der richtigen stelle sein...wie mache ich das denn?
 
Das Bild das du da hast, solltest du nicht im body als hintergrundbild definieren. Gib zB einem div dieses Bild als Background-image. Den div positionierst du so mittig:

#container {
margin: 0px auto;
}



dem div gibts du jetzt die id container und zwar so: <div id="container">. Jetzt setzt du in diesen div eine <ul> mit insgesamt 4 <li>. Übers CSS bekommen die li's float left verpasst. Dadurch werden sie schonmal horizontal angezeigt. Dann noch mit padding und margin ein wenig rumprobieren, bis die Navi auf der richtigen Stelle ist.
 
Hey....mein aktueller Stand:
Bild.JPG


Ich habe nun eine .css Datei erstellt und mit meiner HTML Datei verknüpft....Jetzt verstehe ich nur nicht wie genau ich das jetzt Coden soll das ich meine Links über das Bild bekomme...auf dem Bild habe ich mit Rot eingekreist wo die Links hin sollen.....Und alles soll sich immer im Berreich Center bewegen.....Weil wenn ich die Seite momentan Maximiere bleibt das Bild rechts....Wenn alles Fertig ist soll das Bild immer in der Mitte der Seite sein und die Links an der entsprechenden Stelle über dem Bild;)
 
Stopf die Links in eine <ul>-Liste und positioniere diese per CSS entsprechend deinen Wünschen (zur Not auch absolut). Mit padding und margin kannst Du dann die Abstände der <li>'s zueinander regeln, so dass die Links an der richtigen Stelle sitzen.
 
aber wenn ich die position mit position absolut angebe bleiben die Links doch nicht immer in der Mitte über dem Bild:D
Ich gebe euch mal hier meinen Code....das du mir den vieleicht so modifizieren könntest das es funktioniert?

Code der CSS Datei:

#container {
margin: 50px auto;
}




Code der html Datei:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="Theme.css" rel="stylesheet" type="text/css" />
<title></title>
</head>

<body>

<div id="container">
<ul>
<li>
<p><img src="http://datatransporter.bplaced.net/test.jpg" alt="Tanzmaus"></p>
</li>
</ul>
</div>


</body>


</body>
</html>
 
Hab ich mich so unklar ausgedrückt? :(
PHP: 
#container {
margin: 0px auto;
background: url('PAD_DESBILDES_UND_DER_NAME.jpg');
width: 500px; /* Hier die breite des Bildes angeben */
height: 1000px; /* Hier die höhe des Bildes angeben */
}
 
#navi {
padding: 0;
margin: 0;
width: auto;
}
 
#navi li {
padding: 20px; /* Hier solange rumprobieren bis die Links am richtigen Fleck stehen */
list-style: none; /* dadurch verschwinden die aufzählungszeichen der listen-links (standard ist die runde Kugel) */
width: 60px; /* Hier die width (breite) der weißen Flächen angeben, auf die die Menüpunkte stehen solln */
float: left; /* Dadurch werden die <li>'s die wiederum die Links beinhalten HORIZONTAL angeordnet*/
^
|
das kommt ins css rein

HTML:
HTML: 
<div id="container">
<ul id="navi">
<li><a href="">Seite1</a></li>
<li><a href="">Seite2</a></li>
<li><a href="">Seite3</a></li>
<li><a href="">Seite4</a></li>
</ul>
</div>
 
VIELEN DANK...du bist aus allen Foren der erste der es geschafft hat die Links ÜBER das Bild zu legen:D Daumen hoch:)
mein Code sieht jetzt so aus:

#container {
margin: 0px auto;
background: url(bg.jpg);
width: 620px; /* Hier die breite des Bildes angeben */
height: 852px; /* Hier die höhe des Bildes angeben */
}

#navi {
padding: 0;
margin: 0;
width: auto;
}

#navi li {
padding: 50px; /* Hier solange rumprobieren bis die Links am richtigen Fleck stehen */
list-style: none; /* dadurch verschwinden die aufzählungszeichen der listen-links (standard ist die runde Kugel) */
width: 10px; /* Hier die width (breite) der weißen Flächen angeben, auf die die Menüpunkte stehen solln */
float: left; /* Dadurch werden die <li>'s die wiederum die Links beinhalten HORIZONTAL angeordnet*/

Das klappt auch einigermaßen nur ich bekomme die Links nicht an die richtige stelle denn wenn ich z.B. den padding wert ändere rutschen die links auch nach unten....also der Abstand zwischen den Links stimmt! Gibt es jetzt vieleicht noch einen wert mit dem ich den abstand von oben bzw von links ändern kann....die Links haben jetzt quasie nur noch ein paar zentimeter abstand zu Ihrer optimalen Position;) Hier nochmal ein screenshot:)

last.JPG
 
Ja weil padding: 50px; schiebt dir die links von allen seiten 50px weg - also padding: 50px; is das gleiche wie:

padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;

Also anstatt padding: 50px; schreib folgendes:

padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;

Und jetzt änderst du bei den verschiedenen paddings den abstand. Bis es halt passt :)
 
Super dein Nickname passt zu dir:D Echt Top Danke....sorry wenn ich noch eine Frage stellen muss aber ich Programmiere eigendlich NUR Windows Forms und kein bisschen HTML....Deswegen die letzte "Dumme" Frage:D

Das ist der aktuelle Code:

#container {
margin: 0px auto;
background: url(bg.jpg);
width: 620px; /* Hier die breite des Bildes angeben */
height: 852px; /* Hier die höhe des Bildes angeben */
}

#navi {
padding: 0;
margin: 0;
width: auto;
}

#navi li {
padding-top: 37px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 90px; /* Hier solange rumprobieren bis die Links am richtigen Fleck stehen */
list-style: none; /* dadurch verschwinden die aufzählungszeichen der listen-links (standard ist die runde Kugel) */
width: 0px; /* Hier die width (breite) der weißen Flächen angeben, auf die die Menüpunkte stehen solln */
float: left; /* Dadurch werden die <li>'s die wiederum die Links beinhalten HORIZONTAL angeordnet*/

Und so siehts aus:
Image.JPG


Wie kann ich die Links nun zueinander Ziehen das die Texte nicht mehr so einen großen Abstand zueinander haben.....Momentan stehen die Links voneinander zu weit entfehrnt:(
Also wie kann ich sie noch stauchen?:):):)
 
Passe das padding links und rechts bei #navi li soweit an bis es passt.

Kleiner Tipp: da hilft die Firebug-Erweiterung im Firefox. Dort kannst Du sowas direkt austesten ohne deine CSS-Datei für jeden Pixel bearbeiten zu müssen.
 
Mach folgendes:

bei #navi li löscht du erstmal padding right, padding bottom und padding top weg.
Es soll nur padding left bleiben - und mit padding left solang rumprobieren bis es passt.

Und bei #navi machst du aus dem margin: 0; folgendes:

margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 37px;


außerdem gibst du bei #navi anstatt width: auto; folgendest an:

width: 620px;


grüße
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben