Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Liste zentrieren!“

S

shivas77

Noch nicht viel geschrieben

Hi,

versuche eine Gallerie auf eine Tabelle zu zentrieren.


Es gelingt mir nur nicht so richtig. Hier die externe CSS
Code: 
/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/
a
{
 text-decoration: none;
}
 
h1
{
 background: inherit;
 border-bottom: 1px dashed #ccc;
 color: #933;
 font: 17px Georgia, serif;
 margin: 0 0 0px;
 padding: 0 0 5px;
 text-align: center;
}
p
{
 clear: both;
 font: 10px Verdana, sans-serif;
 padding: 10px 0;
 text-align: center;
}
p a
{
 background: inherit;
 color: #777;
}
p a:hover
{
 background: inherit;
 color: #000;
}
/* =Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox
{
 cursor: default;
 list-style: none;
 margin-left: auto;
 margin-right: auto;
 text-align:center;
}
.hoverbox a
{
 cursor: default;
}
.hoverbox a .preview
{
 display: none;
}
.hoverbox a:hover .preview
{
 display: block;
 position: absolute;
 top: -33px;
 left: -45px;
 z-index: 1;
}
.hoverbox img
{
 background: #fff;
 border-color: #aaa #ccc #ddd #bbb;
 border-style: solid;
 border-width: 1px;
 color: inherit;
 padding: 2px;
 vertical-align: top;
 width: 100px;
 height: 75px;
}
.hoverbox li
{
 background: #eee;
 border-color: #ddd #bbb #aaa #ccc;
 border-style: solid;
 border-width: 1px;
 color: inherit;
 display: inline;
 float: left;
 margin: 3px;
 padding: 5px;
 position: relative;
 text-align:center
}
.hoverbox .preview
{
 border-color: #000;
 width: 200px;
 height: 150px;
}

könnte ihr bitte mal drüber schauen?
 
Zuletzt bearbeitet:
S

shivas77

Noch nicht viel geschrieben

AW: Liste zentrieren!

Klar kann ich machen.
HTML: 
<html>
<head>
<title>fotogalerie</title>
<meta name="robots" content="index">
<meta http-equiv="expires" content="0">
<meta name="description" content="BenimSayfa.de - Meine ganz persönliche Seite">
<meta name="author" content="Serdal (alias Jeremy)">
<meta name="keywords" content="BenimSayfa.de, BenimSayfa, Foto-Galerie">
<meta name="date" content="2008-04-22 T08:49:37+00:00">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
<!-- 
body { 
   margin-left: 0px; 
   margin-top: 0px; 
   margin-right: 0px; 
   margin-bottom: 0px; 
   }
a {color:#000;}
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:visited {color:#000;}
a:hover { text-decoration:none; }
a:active { text-decoration:underline; }
a:focus { text-decoration:blink; } 
border {none}
--> 
</style>
<script type="text/javascript" src="Lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox2.04/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="Lightbox2.04/js/lightbox.js"></script>
<link rel="stylesheet" href="Lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href='hoverbox/css/hoverbox.css' type="text/css" media="screen, projection" />
<!--[if IE]>
<link rel="stylesheet" href='hoverbox/css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
a:hover {
 color: #FFFFFF;
}
#Tabelle_01 table {
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('Mousover/Mousover_01.gif','Mousover/Mousover_02.gif','Mousover/Mousover_03.gif','Mousover/Mousover_06.gif','Mousover/Mousover_07.gif','Mousover/Mousover_08.gif',
'Mousover/Mousover_11.gif','Mousover/Mousover_12.gif','Mousover/Mousover_13.gif','Mousover/Mousover_14.gif','Mousover/Mousover_15.gif','Mousover/FotoGallerie-Leiste-MouseOv.gif','Mousover/FotoGallerie-Leiste-Mous-02.gif')">
<!-- ImageReady Slices (fotogalerie.psd) -->
<table id="Tabelle_01" width="801" align="center" height="778" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="6"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image39','','Mousover/Mousover_01.gif',1)"><img src="Bilder/index_01.gif" name="Image39" width="638" height="23" border="0"></a></td>
<td><a href="faq.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image40','','Mousover/Mousover_02.gif',1)"><img src="Bilder/index_02.gif" name="Image40" width="81" height="23" border="0"></a></td>
<td><a href="impressum.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image41','','Mousover/Mousover_03.gif',1)"><img src="Bilder/index_03.gif" name="Image41" width="81" height="23" border="0"></a></td>
<td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="23" alt=""></td>
 </tr>
 <tr>
  <td colspan="6" rowspan="5">
   <img src="Bilder/index_04.gif" width="638" height="183" alt=""></td>
  <td colspan="2">
   <img src="Bilder/index_05.gif" width="162" height="49" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="49" alt=""></td>
 </tr>
 <tr>
  <td colspan="2"><a href="uebermich.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image42','','Mousover/Mousover_06.gif',1)"><img src="Bilder/index_06.gif" name="Image42" width="162" height="27" border="0"></a></td>
<td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="27" alt=""></td>
 </tr>
 <tr>
  <td colspan="2"><a href="kontak.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image43','','Mousover/Mousover_07.gif',1)"><img src="Bilder/index_07.gif" name="Image43" width="162" height="26" border="0"></a></td>
<td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="26" alt=""></td>
 </tr>
 <tr>
  <td colspan="2"><a href="login.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image44','','Mousover/Mousover_08.gif',1)"><img src="Bilder/index_08.gif" name="Image44" width="162" height="25" border="0"></a></td>
<td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="25" alt=""></td>
 </tr>
 <tr>
  <td colspan="2">
   <img src="Bilder/index_09.gif" width="162" height="56" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="56" alt=""></td>
 </tr>
 <tr>
  <td colspan="8">
   <img src="Bilder/index_10.gif" width="800" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
  <td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image45','','Mousover/Mousover_11.gif',1)"><img src="Bilder/index_11.gif" name="Image45" width="125" height="29" border="0"></a></td>
<td><a href="events.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','Mousover/Mousover_12.gif',1)"><img src="Bilder/index_12.gif" name="Image46" width="136" height="29" border="0"></a></td>
<td><a href="fotogalerie.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image47','','Mousover/Mousover_13.gif',1)"><img src="Bilder/index_13.gif" name="Image47" width="122" height="29" border="0"></a></td>
<td><a href="gaestebuch.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image48','','Mousover/Mousover_14.gif',1)"><img src="Bilder/index_14.gif" name="Image48" width="130" height="29" border="0"></a></td>
<td><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image49','','Mousover/Mousover_15.gif',1)"><img src="Bilder/index_15.gif" name="Image49" width="124" height="29" border="0"></a></td>
<td colspan="3">
   <img src="Bilder/index_16.gif" width="163" height="29" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="29" alt=""></td>
 </tr>
 <tr>
  <td colspan="6"><img src="Bilder/index_17.gif" width="638" height="35"></td>
   <td colspan="2" rowspan="2"><img src="Bilder/index_18.gif" width="162" height="36" alt=""></td>
<td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="35" alt=""></td>
 </tr>
     <td colspan="6" rowspan="2" bgcolor="#FFFFFF"><table width="492" height="338" border="0"align="center" cellpadding="0" cellspacing="0">
 
            <td width="534" height="338"><h1>Galerie I</h1>
<ul class="hoverbox">
                  <li> <a href="img/photo01.jpg" rel="lightbox [serie]" title="photo01"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="img/photo02.jpg" rel="lightbox [serie]" title="photo02"><img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="img/photo03.jpg" rel="lightbox [serie]" title="photo03"><img src="img/photo03.jpg" alt="description" /><img src="img/photo03.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="img/photo04.jpg" rel="lightbox [serie]" title="photo04"><img src="img/photo04.jpg" alt="description" /><img src="img/photo04.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="img/photo08.jpg" rel="lightbox [serie]" title="photo08"><img src="img/photo08.jpg" alt="description" /><img src="img/photo08.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="img/photo09.jpg" rel="lightbox [serie]" title="photo09"><img src="img/photo09.jpg" alt="description" /><img src="img/photo09.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="img/photo10.jpg" rel="lightbox [serie]" title="photo10"><img src="img/photo10.jpg" alt="description" /><img src="img/photo10.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="#"><img src="img/photo11.jpg" alt="description" /><img src="img/photo11.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="#"><img src="img/photo12.jpg" alt="description" /><img src="img/photo12.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="#"><img src="img/photo13.jpg" alt="description" /><img src="img/photo13.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="#"><img src="img/photo14.jpg" alt="description" /><img src="img/photo14.jpg" alt="description" class="preview" /></a></li>
                  <li> <a href="#"><img src="img/photo15.jpg" alt="description" /><img src="img/photo15.jpg" alt="description" class="preview" /></a></li>
              </ul></td>
          </tr>
        </table></td>
     <td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
  <td colspan="2">
   <img src="Bilder/index_20.gif" width="162" height="505" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="505" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="125" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="136" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="122" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="130" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="124" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="81" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="81" height="1" alt=""></td>
  <td></td>
 </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
 
Zuletzt bearbeitet:
P

Patman

Nicht mehr ganz neu hier

AW: Liste zentrieren!

also muss ja sagen, es ist schon ziemlich spät und bin nicht mehr ganz so fit aber hast du hast ja gar nicht die in der html-source verwendete "table01" definiert. wenn die deine gallerie ist, zentriere die doch einfach und dann müsste es doch passen.
 
bigpaul

bigpaul

Aktives Mitglied

AW: Liste zentrieren!

Du kannst einfach um Deine Tabelle ein
Code: 
<div align="center">
<table>
</table>
</div>
machen.. Dann ist sie auch zentriert.
Ach ja.. und wenn du schon code auslagerst, wieso dann nicht gleich den ganzen?

Lg,
Moritur
 
S

shivas77

Noch nicht viel geschrieben

AW: Liste zentrieren!

Ich glaube, ihr habt mich falsch verstanden. Die Tabelle wodrin die Galerie ist, ist schon zentriert.
Code: 
[COLOR=#008080]<table width=[COLOR=#0000ff]"492"[/COLOR] height=[COLOR=#0000ff]"338"[/COLOR] border=[COLOR=#0000ff]"0" [/COLOR]align="center" cellpadding=[COLOR=#0000ff]"0"[/COLOR] cellspacing=[COLOR=#0000ff]"0"[/COLOR]>[/COLOR]
Ich möchte das die Elemente innerhalb der tabelle zentriert sind. Ich habe für besseres Verständniss ein Bild eingefügt. Schaut euch das mal an bitte.


@bigpaul
Was meinst du damit? Ich bin leider noch ein Anfänger deswegen sagt das mir jetzt nichts.

Gruß
Serdal
 
S

Schuessel

Guest

AW: Liste zentrieren!

hi,

muss gestehen hatte jetzt nicht den Nerv deinen Quellcode durchzuschauen. aber ich denke mit dem befehl padding (bsp. deine gallerie ist 800px lang, deine liste 760px dann machste den padding abstand rechts und links auf 20px und haste es in der mitte. oder du arbeitest mit margin: 0px auto;

hoffe das nützt dir was.

gruss
 
S

shivas77

Noch nicht viel geschrieben

AW: Liste zentrieren!

Hab es schon ausprobiert, funktioniert leider nicht. Ach ja die Galerie ist Hoverbox. Habe versucht auf meine Bedürfnisse anzupassen. Ich wollte eine 3 X 3 Galerie haben deswegen habe ich es in eine Tabelle eingefügt. Jetzt möchte ich die Galerie aber innerhalb der Tabelle zentriert haben.
Meiner meinung nach müsste der Fehler irgendwo hier in der CSS liegen. Bin aber nicht ganz sicher da Anfänger.
Code: 
/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/
a
{
 text-decoration: none;
}
 
h1
{
 background: inherit;
 border-bottom: 1px dashed #ccc;
 color: #933;
 font: 17px Georgia, serif;
 margin: 0 0 0px;
 padding: 0 0 5px;
 text-align: center;
}
p
{
 clear: both;
 font: 10px Verdana, sans-serif;
 padding: 10px 0;
 text-align: center;
}
p a
{
 background: inherit;
 color: #777;
}
p a:hover
{
 background: inherit;
 color: #000;
}
/* =Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox
{
 cursor: default;
 list-style: none;
 margin-left: auto;
 margin-right: auto;
 
}
.hoverbox a
{
 cursor: default;
}
.hoverbox a .preview
{
 display: none;
}
.hoverbox a:hover .preview
{
 display: block;
 position: absolute;
 top: -33px;
 left: -45px;
 z-index: 1;
}
.hoverbox img
{
 background: #fff;
 border-color: #aaa #ccc #ddd #bbb;
 border-style: solid;
 border-width: 1px;
 color: inherit;
 padding: 2px;
 vertical-align: top;
 width: 100px;
 height: 75px;
}
.hoverbox li
{
 background: #eee;
 border-color: #ddd #bbb #aaa #ccc;
 border-style: solid;
 border-width: 1px;
 color: inherit;
 display: block;
 float: left;
 margin: 3px;
 padding: 5px;
 position: relative;
}
.hoverbox .preview
{
 border-color: #000;
 width: 200px;
 height: 150px;
}
 
D

D4eMoN

Noch nicht viel geschrieben

AW: Liste zentrieren!

Hey ich weiß nicht ob es den gewünschten Effekt bringt aber versuch doch mal es klappt zumindest bei mir allerdings habe ich es noch nicht mit einer Liste probiert aber für mal vor jedem <li> ein <center> ein und nach dem </li> jeweils ein </center> ich hoffe es hilft ein Versuch ist es wert ;-)
 
S

shivas77

Noch nicht viel geschrieben

AW: Liste zentrieren!

Leider hat das auch nicht funktioniert. Danke trotzdem. Wie gesagt muss der Fehler in der hoverbox.css liegen stadt in der HTML-Quellcode.
 
D

D4eMoN

Noch nicht viel geschrieben

AW: Liste zentrieren!

Hast du schon mal probiert in das

Code: 
.hoverbox
{
 cursor: default;
 list-style: none;
 margin-left: auto;
 margin-right: auto;
}
ein

Code: 
 align: center
einzufügen????

Kling jetzt vielleicht ein bisschen Stumpf aber manchmal ist es ganz einfach :p
 
D

D4eMoN

Noch nicht viel geschrieben

AW: Liste zentrieren!

Könntest du es beides mal auf einem Webspance hochladen damit ich mal gucken kann wie es im Moment funktioniert und wie das Skript reagiert? Vielleicht hab ich dann ja eine Idee.
 
D

D4eMoN

Noch nicht viel geschrieben

AW: Liste zentrieren!

Hmm ok schon mal versucht statt bei margin-left/right auto zu schreiben feste Werte zu verteilen weil ich mein so wie ich das sehe hast du ja auch die Homepage selber mit festen Werten versehen.
 
S

shivas77

Noch nicht viel geschrieben

AW: Liste zentrieren!

D4eMoN schrieb:
Hmm ok schon mal versucht statt bei margin-left/right auto zu schreiben feste Werte zu verteilen weil ich mein so wie ich das sehe hast du ja auch die Homepage selber mit festen Werten versehen.
Zum Vergrößern anklicken....

Das wäre zwar eine Lösung aber in Dreamweaver wird es wiederum ganz anders dargestellt. Ich frage mich warum der linke abstand in der Tabelle viel geringer ist als der rechte. Wo sind dafür die Werte? Wenn ich margin-left und -right auf auto setze müsste doch auf beiden seiten der Abstand gleich groß sein oder? Klappt aber nicht.
 
Zuletzt bearbeitet:
D

D4eMoN

Noch nicht viel geschrieben

AW: Liste zentrieren!

@sokie

Ja war mir nicht sicher habe in letzter Zeit kaum mit CSS gearbeitet. Aber das mit den verschiedenen Abständen ist echt komisch. Mir fällt so spontan auch nichts ein.
 
coolsascha

coolsascha

Nicht mehr ganz neu hier

AW: Liste zentrieren!

Also ich werde gleich mal schauen, aber es ist einwenig Wirrwar in deinem HTML ;)
Also am besten wäre es vielleicht auch, mal deine Breitendifinition, wenn die z.B. bei einer Spalte gleich der Tabelle ist einfach 100% zu nutzten.. (Das beugt schonmal tippfehler vor)..
 
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
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 834 (Mitglieder: 3, Gäste: 831)
Robots: 210

Statistik des Forums

Themen
175.187
Beiträge
2.582.068
Mitglieder
67.257
Neuestes Mitglied
Can Ergin
Oben