zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie mit CSS Objekt in der MITTE positionieren, aber mit Mindestabstand zum li Rand??

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.02.2015, 17:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.02.2015
Beiträge: 4
pitoman befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.02.2015, 17:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.101
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.02.2015, 18:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.02.2015
Beiträge: 4
pitoman befindet sich auf einem aufstrebenden Ast
Standard danke :)

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
Mit Zitat antworten
  #4 (permalink)  
Alt 21.02.2015, 18:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.02.2015
Beiträge: 4
pitoman befindet sich auf einem aufstrebenden Ast
Standard oder

...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
Mit Zitat antworten
  #5 (permalink)  
Alt 21.02.2015, 21:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.101
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (21.02.2015 um 21:53 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 22.02.2015, 12:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.02.2015
Beiträge: 4
pitoman befindet sich auf einem aufstrebenden Ast
Standard vielen dank!

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
Mit Zitat antworten
Antwort

Stichwörter
abstand, mindestabstand, mitte, positionierung

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
oben und fest am Rand, nur mitte flexibel mit scrollbar wolfenK Site- und Layoutcheck 2 07.01.2006 18:22
problem ausrichtung grafik und rand (css layout) celine@23 Barrierefreiheit 1 28.12.2005 13:05
CSS: Boxen positionieren sancho CSS 5 30.08.2005 23:34
wie bekomme ich das gesamte Layout mit css in die mitte alex1 CSS 8 18.05.2005 10:44
Thumbnails mit CSS positionieren?? mrflat CSS 7 15.03.2004 14:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:02 Uhr.