XHTMLforum - Wie mit CSS Objekt in der MITTE positionieren, aber mit Mindestabstand zum li Rand??

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

Wie mit CSS Objekt in der MITTE positionieren, aber mit Mindestabstand zum li Rand??

Hallo Leute,
mache mich gerade erst vertraut mit CSS-Positionierung und check eine Sache nicht. Wenn ich ein Objekt horizontal in der Mitte der Seite positioniere, kann es passieren (wenn das Browserfenster sehr verkleinert wird), dass das Objekt auf der linken Seite aus dem sichtbaren Bereich rausrutscht). Wie kann ich es in der Mitte halten BIS zu dem Punkt der Fenstergröße, wo es rausrutschen würde? D.h. eine Art garantierten Mindestabstand zum linken Fensterrand einhalten??
DANKE für eure Hilfe!!!

PS: mein derzeitiger Code im CSS-Sheet:

#kreis {
position: absolute;
top: 10px;
left: 50%;
margin-left: -600px;
z-index: +1;
}

Hallo,

verzichte auf "position: absolute"
verzichte auf negative margin-Werte

Ansonsten ist deinem Quellcodeschnipsel und deiner Problembeschreibung leider nichts konkretes zu entnehmen. Am besten stellst du den bisherigen Quellcode bei einem Freewareprovider wie bplaced.net online bereit.

Gruss

MrMurphy

vielen dank schonmal!

also hier ist das beispiel online:
Peter Schorn, Schauspieler

ziel: ich möchte den kreis etwas außerhalb (ein stückchen weiter links) von der mitte einer etwa 1000px breiten seite positionieren, aber verhindern, dass er links rausrutscht, wenn das browserfenster entsprechend verkleinert wird... d.h. sowas wie einen garantierten MINDESTABSTAND vom linken fensterrand einbauen, wenn das geht...

den negativen margin hab ich eingebaut, weil der kreis nicht GENAU in der seitenmitte sein soll, sondern GENAU 600px links von der seitenmitte, AUSSER eben die fenstergröße wird so klein, dass 600px links von der mitte nicht mehr sichtbar sind...

versteht man das?
DANKE für die geduld :))

p

...oder, anders gefragt:

wie kann ich generell meinen inhalt - SOFERN die breite des browserseitenfensters gerade GRÖSSER ist als die breite meines inhalts - diesen inhalt MITTIG darstellen? ist das seitenfenster weniger breit als der inhalt, soll der inhalt natürlich am linken seitenrand kleben bleiben und nicht darüber hinaus rutschen in die linke unsichtbarkeit, sondern vielmehr nach rechts rüber scrollbar sein...

merci vielmal, nochmal!!
p

Hallo,

der Quellcode deiner Seite ist leider sehr veraltet. Die Probleme auszuzählen ginge ja noch, die Erläuterungen dazu würden aber den Rahmen des Forums sprengen.

Deshalb habe ich einfach mal ein komplette Seite mit aktuellem HMTL5 und CSS3 erstellt, die die Grundlagen berücksichtigt, zum Beispiel das Text möglichst nicht als Grafik eingefügt werden soll. Oder das so weit wie möglich auf Java-Script verzichtet werden soll Oder...

Etwas Feintuning ist natürlich noch erforderlich, aber ich will ja nur die aktuellen Grundlagen aufzeigen.

HTML-Code:

<!DOCTYPE html>

<html lang="de">

<head>



   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->



   <title>HTML5 - Kreis positionieren</title>



   <meta name="description" content="HTML5 - Kreis positionieren">



   <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->

   <meta name="viewport" content="width=device-width, initial-scale=1.0">



   <style>

      * {

         -moz-box-sizing: border-box;

         box-sizing: border-box;

      }

      html {

         font-family: Helvetica, Arial, sans-serif;

         font-size: 120%;   /* Die Einheit rem greift auf die Angabe in html zurück, nicht auf body */

         line-height: 1.3;   /* line-height wird ohne Einheit angegeben */

         -moz-box-sizing: border-box;

         box-sizing: border-box;

      }

      body {

         background-color: #996633;

         padding: 0;

         margin: 0;

      }

      header {

         height: 10rem;

         background:linear-gradient(to right, #285375, #7994a9);

         padding: 0;

         border-bottom: 20px solid black;

         margin: 0;

      }

      header div {

         background-color: white;

         height: 250px;

         width: 250px;

         text-align: right;

         border-radius: 50%;

         position: relative;

         top: 1rem;

         left: 10%;

         padding-top: 2rem;

         padding-right: 2.3rem;

      }

      header div p {

         font-size: 2rem;

         margin: 0;

         padding: 0;

      }

      header div:hover {

         background-color: #6699cc;

         color: white;

      }

      main {

         width: 90%;

         max-width: 1000px;

         padding: 3%;

         padding-top: 4rem;

         margin: 0 auto;

      }

   </style>



</head>



<body>

   <header role="banner">

      <div>

         <p>PETER</p>

         <p>SCHORN</p>

         <p>.COM</p>

      </div>

   </header>

   <main role="main">

      <article>

         <p>Lorem ipsum dolor sit amet consectetuer at Sed malesuada urna Suspendisse. Proin libero auctor convallis turpis senectus vitae mi nec eu elit. Ut convallis Curabitur elit faucibus dis semper fringilla adipiscing metus eu. Nibh consequat Duis elit magna arcu ut mus tellus congue leo. Ac nibh tincidunt sit condimentum ac sed dolor nec quis leo. Vel Donec Aliquam Curabitur orci a tincidunt in Sed dui Quisque. Faucibus condimentum id Vivamus cursus tristique.</p>

         <p>Ipsum at Proin eros In ac interdum leo Nam est lobortis. Ac pellentesque elit laoreet nunc a pede velit montes orci Nam. Et Nulla elit Nunc Lorem adipiscing wisi lacus libero nec ut. Convallis sed at sem ante urna Ut eleifend libero id id. Aenean nonummy ante Phasellus ut nunc urna augue sit ante sagittis. Natoque turpis magnis turpis dictum ac congue Nulla aliquam id Curabitur. Et Phasellus tincidunt Phasellus Pellentesque risus velit nibh Donec ac ac. </p>

         <p>Ridiculus ante dis turpis magna tellus non semper montes enim ante. Et massa Quisque Mauris euismod neque nulla aliquet fames sed sit. Velit Pellentesque morbi ornare accumsan fringilla Maecenas volutpat ipsum et gravida. Orci tortor ac venenatis ante enim ullamcorper egestas congue nisl at. Fames Nulla non ut porttitor nibh est interdum accumsan pede Nam. Leo platea leo eget nascetur gravida quis elit eget Mauris convallis. Cursus malesuada lacus at Aenean aliquet commodo.</p>

         <p>Consectetuer eget mauris et In tincidunt enim quam libero ac Aenean. Consectetuer justo vel leo pulvinar Nam lorem tincidunt ipsum aliquam sed. Non nec mi risus metus nibh dui habitant porttitor ligula vel. Pede Sed nec quis libero leo volutpat Nam ac enim consectetuer. Convallis quis lobortis ut id id turpis tempus tincidunt eget quis. Massa Curabitur nunc mus laoreet.</p>

      </article>

   </main>

</body>

</html>

Das Fenster ist bereits ohne Responsive Desgin sehr flexibel und zoombar.

Gruss

MrMurphy

lieber mr.murphy,

da hast du dir samstagabend ja richtig viel mühe gemacht für mich, vielen vielen dank! :)

ich bin ja kein webdesign-profi, also arbeite ich nach dem prinzip: whatever works... am ende sollte es einfach so aussehen wie ich es haben will. dein beitrag ist da wertvoller input, wie das eleganter geht, danke!

habe jetzt trotzdem noch eine einfache (vielleicht auch veraltete, aber effektive) lösung für mein zentrierungsproblem gefunden: div-container um alles drum herum mit
width: 1200px;
margin: 0 auto;
position: relative;
das funktioniert momentan ganz gut.

außerdem werd ich sicher einige von deinen beispielen umsetzen!

danke nochmal und schönen sonntag
p