mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 19.04.2024 15:13 Benutzername: Passwort: Auto-Login

Thema: Wieso funktioniert die Zentrierung der Div´s nicht :( vom 16.11.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Wieso funktioniert die Zentrierung der Div´s nicht :(
Autor Nachricht
emrah89
Threadersteller

Dabei seit: 25.07.2007
Ort: Aachen
Alter: 34
Geschlecht: Männlich
Verfasst Mo 16.11.2009 13:28
Titel

Wieso funktioniert die Zentrierung der Div´s nicht :(

Antworten mit Zitat Zum Seitenanfang

Guten Moin Medi´s^^

arrggh... ich komm wieder nicht weiter und ihr seit (wie jedesmal) meine letzte Rettung. *hu hu huu*
Leider hab ich hier im Betrieb keinen den ich sowas fragen kann, den keiner hat von CSS Ahnung (eigentlich ich auch nicht aber ich versuche es mir irgendwie beizubringen) :/ * Ich geb auf... * * Ich geb auf... *

also diese Homepage will ich bauen



doch ich will dass die spalte links links bleibt und spalte rechts rechts bleibt und die 3 boxen in der mitte zentriert am browserfenster sich anpasst... ich hoffe ihr wisst was ich damit meine^^

Eigentlich hatte ich mir immer damit geholfen dass ich im HTML Tag das "align"center"" gesetzt habe und dies dann automatisch im Browserfenster zentriert hat... doch iwie funz das nicht.. *hu hu huu*

mein HTML-Code für die 3 boxen:

Code:
 <div id="inhalt" align="center">
      <div class="boxen">
        <p class="ueberschrift Stil1">Autoren</p>
        <p>Autor werden<br />
        unsere Autoren</p>
      </div>
      <div class="boxen2">
      <p class="ueberschrift Stil1">Shop</p>
      <p> Online Bestellungen unserer B&uuml;cher und unser Gesamtkatalog</p>
      </div>
      <div class="boxen3">
      <p class="ueberschrift Stil1">Service</p>
      <p>F&uuml;r Buchh&auml;ndler Rezensionen<br />
       Newsletter<br />
       Linkliste</p>
      </p></div>
  </div>

der CSS-Code dafür:

Code:
.boxen   {
   height: 170px;
   width: 150px;
   padding-left: 10px;
   font-family: Georgia, "Times New Roman", Times, serif;
   left: 5px;
   position: relative;
   background-color: #804000;
   padding-bottom: 15px;
   padding-right: 10px;
   padding-top: 0px;
   float: left;
}
.boxen2   {
   background-color: #804000;
   float: left;
   font-family: Georgia, "Times New Roman", Times, serif;
   height: 170px;
   width: 150px;
   left: 10px;
   padding-bottom: 15px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 0px;
   position: relative;
}
.boxen3 {
   background-color: #804000;
   height: 170px;
   width: 150px;
   font-family: Georgia, "Times New Roman", Times, serif;
   right: 15px;
   padding-left: 10px;
   padding-bottom: 15px;
   padding-right: 10px;
   left: 15px;
   position: relative;
   float: left;
   padding-top: 0px;
}
#inhalt {
   height: auto;
   width: auto;
   position: relative;
   top: auto;
   left: 0px;
}


Ich wäre für eure Unterstützung seeeeeeeehr dankbar * Ja, ja, ja... *

P.S. oder funktioniert das nicht wegen die beiden spalten links rechts? o.O

[Thema verschoben von Programmierung - HTML/CSS sind keine Programmiersprachen]
[Bitte CODE-Tags verwenden]


Zuletzt bearbeitet von Kash am Mo 16.11.2009 14:13, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Whisper

Dabei seit: 13.03.2003
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Mo 16.11.2009 15:30
Titel

Antworten mit Zitat Zum Seitenanfang

sind die container links und rechts außen absolut positioniert oder gefloatet?
- vorne weg: nimm doch css für das ausrichten anstelle von html-attributen, als da wäre: text-align: center.
- in Deinem Code ist das letzte schließende p-Tag zuviel.

Davon abgesehen, dass es - wenn es möglich ist (ich hab es adhoc nicht browserübergreifend hinbekommen) - ein Heidenaufwand wird, stelle ich mir die Frage, ob das Design auch zu Ende gedacht wurde.
Was passiert, wenn ich das Fenster verkleinere oder mit einen extrem großen Bildschirm (2000px+) Fullscreen nutze?
Wenn ich Dein Layout richtig verstehe, zerfällt es in beiden Fällen. Nutze lieber eine Maximalbreite und richte die Seite dann links oder mittig aus.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
emrah89
Threadersteller

Dabei seit: 25.07.2007
Ort: Aachen
Alter: 34
Geschlecht: Männlich
Verfasst Mo 16.11.2009 17:13
Titel

Antworten mit Zitat Zum Seitenanfang

Whisper hat geschrieben:
sind die container links und rechts außen absolut positioniert oder gefloatet?
- vorne weg: nimm doch css für das ausrichten anstelle von html-attributen, als da wäre: text-align: center.
- in Deinem Code ist das letzte schließende p-Tag zuviel.

Davon abgesehen, dass es - wenn es möglich ist (ich hab es adhoc nicht browserübergreifend hinbekommen) - ein Heidenaufwand wird, stelle ich mir die Frage, ob das Design auch zu Ende gedacht wurde.
Was passiert, wenn ich das Fenster verkleinere oder mit einen extrem großen Bildschirm (2000px+) Fullscreen nutze?
Wenn ich Dein Layout richtig verstehe, zerfällt es in beiden Fällen. Nutze lieber eine Maximalbreite und richte die Seite dann links oder mittig aus.


ne die sind gefloatet die linke mit "left" und die rechte mit "right"

Ich weiß das HTML nicht für die Gestaltung zuständig ist, aber ich weiß nicht wie man in CSS sagen kann "diesen div lässt du zentriert im browserfenster, auch wenn es sich maximiert oder das fenster sich optional verändert wird" Au weia! * Ich geb auf... *

Ja vom Design her habe ich "leider" nix zu sagen gehabt, es ist jedeglich die Vorstellung des Kunden... er wollte dass diese linke spalte gaaaaaaaanz links ist und die rechte spalte gaaaaaaaanz rechts ist...und zwischen dieser spalten soll der benutzer sich navigieren... * Ich geb auf... * aber ich denke ich werde alles in einer box stecken damit sich dieser box bei einer größenveränderung mitverschiebt bzw. zentriert...weil wie du es sagst... das layout würde ansonsten zerfallen... *balla balla*
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mo 16.11.2009 17:27
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

foo {
  margin:0 auto;
}


Zuletzt bearbeitet von Kash am Di 17.11.2009 10:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Semerkant

Dabei seit: 16.11.2009
Ort: Wien
Alter: -
Geschlecht: Männlich
Verfasst Di 17.11.2009 09:05
Titel

Antworten mit Zitat Zum Seitenanfang

Wie schon der Vorposter erwähnt hat dem inhalt div container diesen CSS code zuweisen
z.B:
Code:

#inhalt {
    margin: 0 auto;
}


ist nur die Abkürzung für:

Code:

#inhalt {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}
  View user's profile Private Nachricht senden
 
Ähnliche Themen target_blank funktioniert nur einmal. wieso?
DIV Sichtbarkeit / Zentrierung
CSS und zentrierung von z-index
(CSS) Zentrierung eines Klappmenus
XHTML und CSS, Zentrierung und Positionierung?
(BARRIEREFREIHEIT) SWF zentrierung in HTML
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.