mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 17.11.2018 17:04 Benutzername: Passwort: Auto-Login

Thema: CSS Problem beim mittigen ausrichten von Divs vom 13.11.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS Problem beim mittigen ausrichten von Divs
Autor Nachricht
Traxxas
Threadersteller

Dabei seit: 13.11.2013
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 13.11.2013 20:21
Titel

CSS Problem beim mittigen ausrichten von Divs

Antworten mit Zitat Zum Seitenanfang

Hallo Leute,

ich spiele mich schon längere Zeit mit meinen 2 Divs, die einfach nicht so funktionieren wie ich es möchte:

Code:

         <div id="slideposition" class="slideposition">
            <div class="grid-block">
<?php echo $this['widgets']->render('slideposition', array('layout'=>$this['config']->get('slideposition'))); ?>
            </div>
         </div>

Code:

.slideposition{
position:absolute;
width: 100%;
min-width:1030px;
max-width:1700px;
left: 50%;
margin-left:-850px;
top: 124px;
text-align:center;
}

.wk-slideshow-default > div { position: relative; min-width:1030px;}



Also in "grid-block" wird dieses wk-slideshow.default angezeigt. (ist ein Joomla Modul)

Das ganze ist optimiert für 1700px Bilder und funktioniert so auch problemlos... wenn das Browserfenster größer wird macht es auch keine Probleme. Wird das Browserfenster jedoch kleiner, verschiebt sich das Bild links ins Nirwana.

Ich weiß das dann die -850px das Problem sind, aber wie soll ich es sonst lösen? mit -50% funktioniert es leider nicht.

Hoffe ihr könnt mir helfen :/[/code]


Zuletzt bearbeitet von Traxxas am Mi 13.11.2013 20:28, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mi 13.11.2013 21:31
Titel

Antworten mit Zitat Zum Seitenanfang

Dafür gibts keine Lösung, so funktioniert absolutes Positionieren nun mal. Du kannst den äußeren Container/Body ne Mindestbreite geben, dann wird im Zweifel ne Scrollbar angezeigt oder mit Media Queries o.ä. mehrere Layoutvarianten verwenden.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Traxxas
Threadersteller

Dabei seit: 13.11.2013
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 14.11.2013 08:19
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo,

Danke für deine Info, ich habe es jetzt von Grund auf überarbeitet und jetzt funktioniert es.

Sprich: body auf 100% statt 1030 px und alle innerhalb von body auf 1030px... außer den div "slideposition"
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 30
Geschlecht: Männlich
Verfasst Do 14.11.2013 10:27
Titel

Antworten mit Zitat Zum Seitenanfang

Man 'optimiert' auch nicht für HyperHyperDesigner iMac Auflösungen * grmbl *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein Status:0
Alter: 46
Geschlecht: Männlich
Verfasst Do 14.11.2013 10:59
Titel

Re: CSS Problem beim mittigen ausrichten von Divs

Antworten mit Zitat Zum Seitenanfang

Ungetestet:

Code:

.slideposition{
position:absolute;
width: 100%;
min-width:1030px;
top: 124px;
text-align:center;

   overflow: hidden;
}

.grid-block {
   width: 200%;
   margin-left: -50%;
   text-align: center;
}
.grid-block img {
   width: 50%;
   min-width: 1030px;
   max-width: 1700px;
}

  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS Problem mit Divs
CSS Problem - Divs überlagern sich.
CSS problem mit floatenden DIVS und der Höhe
css Div _Layer Problem / mehrere Divs nebeneinander und unte
[CSS] - divs sollen überlappen - machen se aber nicht
[CSS] Positionierung eines DIVs
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.