mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 12:29 Benutzername: Passwort: Auto-Login

Thema: DIV Sichtbarkeit / Zentrierung vom 13.12.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> DIV Sichtbarkeit / Zentrierung
Autor Nachricht
juizzle
Threadersteller

Dabei seit: 06.11.2006
Ort: karlsruhe
Alter: 41
Geschlecht: Männlich
Verfasst Mo 13.12.2010 16:18
Titel

DIV Sichtbarkeit / Zentrierung

Antworten mit Zitat Zum Seitenanfang

Hallo liebe gemeinde,

bin zur zeit dabei mich ein bisschen mit html/css vertraut zu machen.
Das alles kratzt bisher nur am allergröbsten der Oberfläche, aber schon jetzt komme ich nicht mehr weiter... *Huch*


Es dreht sich um folgende Seite:
Test-Seite

Da klappte bisher alles einigermaßen so wie ich es mir auch vorgestellt habe (mittlerweile sogar auch im ie, den ich jetzt schon hasse). Nun zum Problem:

Ich möchte nun einen Rahmen zentriert platzieren, über den ich dann text und Bilder legen möchte. Vom Grundprinzip ähnlich wie beim Header mit dem Logo. Ich habe auch alles exakt aufgebaut wie beim header, aber es treten zwei Probleme auf:
Das rahmen.png, wird gar nicht erst angezeigt, sondern erst, wenn ich innerhalb des divs inhalt drinhabe, wir zum Beispiel Zeilenumrüche. Dann wird das png zeilenweise "freigelegt", eben soweit wieviel auch Zeilen vorhanden sind. Wenn es dann dadurch zu sehen ist, ist es allerdings auch noch linksbündig.

Verstehe es wirklich nicht, da alles wie beim logo-div ist.

Anbei der Code und die css, würde mich sehr freuen, wenn jemand den Fehler sieht.
Sollte sonst etwas sehr unsauber sein, gerne bescheid sagen.... Ooops



HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<!-- HEADER ANFANG -->
   
      <div class="header" align="center">
      
                  <div id="logo">
                  </div>      
      
      </div>

      
<!-- HEADER ENDE -->

<!-- MENU ANFANG -->

      <div class="menu" align="center">
                  
                  <div id="balken">
                  
                            <ul id="menu">
                           <li><span style="color:#FFFFFF";><a href="">Home</li>
                           <li><a href="/about.html">SMV</li>
                           <li><a href="">Mediadaten</li>
                           <li><a href="">Downloads</li>
                           <li><a href="">AGB</li>
                           <li><a href="">Disclaimer</li>
                           <li><a href="">Kontakt</li>
                           <li><a href="">Impressum</span></li>
                           </ul>

                  </div>      
            </div>
      </div>


<!-- MENU ENDE -->


<!-- CONTENT ANFANG -->

      <div class="rahmen" align="center">
      
            <div id="rahmen" align="center">
            </div>
      
      </div>


<!-- CONTEND ENDE -->

</body>
</html>



CSS:
Code:
@charset "UTF-8";

body {
   margin:0px; padding:0px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:10px;
   text-decoration:none;
   background-color:#f6f6f6;
   position:inherit;

}






a:link {
 color:#FFFFFF;
 text-decoration:none;
 }

a:visited {
 color:#FFFFFF;
  text-decoration:none;
}

a:focus {
  color:#CCCCCC;
  text-decoration:none;
}

a:hover {
 color:#CCCCCC;
 text-decoration: none;
}

a:active {
 color:#999999;
 text-decoration:none;
}







.header {
   height:107px;
   background-image:url(images/header_bg.png);
   background-repeat:repeat-x;
}

.menu {
   margin-top:20px;
   word-spacing:24px;
}
   
.rahmen {
   height:387px;
   width:569px;
}










#rahmen {
   background-image:url(images/rahmen.png);
   background-repeat:no-repeat;
   background-position:center;
   width:569;
   height:387;
}


#logo {

   background-image:url(images/logo.png);
   background-repeat:no-repeat;
   width:400px;
   height:151px;
}

#balken {
   background-image:url(images/navi.png);
   background-repeat:no-repeat;
   width:720px;
   height:56px;
}
   

ul#menu {
   padding-top:15px;
   right:0px;
   text-align:center;
   }


ul#menu li {
   display:inline;
   font-size:13px;
   font-style:normal;
   font-family:Arial, Helvetica, sans-serif;
   text-align:center;
   }


  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Nothingness

Dabei seit: 20.03.2007
Ort: -
Alter: 35
Geschlecht: Weiblich
Verfasst Mo 13.12.2010 16:44
Titel

Antworten mit Zitat Zum Seitenanfang

Hi juizzle,

#rahmen {
background-image:url(images/rahmen.png);
background-repeat:no-repeat;
background-position:center;
width:569px;
height:387px;
}

Dir fehlen hier die Einheiten.

Edit: Du öffnest viele Tags, die du nicht wieder schließt (zB in der Liste). Und lagere das CSS doch komplett aus, align=center ist zB veraltet.

Immer nützlich


Zuletzt bearbeitet von Nothingness am Mo 13.12.2010 16:56, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
timonn

Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 13.12.2010 16:54
Titel

Antworten mit Zitat Zum Seitenanfang

Außerdem sollte die rahmen-class noch ein margin-auto bekommen, damit es auch im firefox zentriert wird.
  View user's profile Private Nachricht senden
timonn

Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 13.12.2010 18:26
Titel

Antworten mit Zitat Zum Seitenanfang

Was mir gerade noch einfällt:
Ich habe es anfangs immer so gemacht, dass ich jedem Container eine andere Hintergrundfarbe gegeben habe, die sich gut voneinander abtrennen, also kein hexadezimal-code sondern die vorgefertigten Farben. So konnte ich immer direkt sehen, wo was angeordnet wurde, wie breit und hoch was ist und wo vielleicht noch ein paar Fehler sind. Wenn das alles stimmt, kannst du dann ja die Bilder und Farben anpassen. Hat mir immer sehr geholfen, vielleicht hilfts dir ja auch.

PS: Kann man hier seine eigenen Beiträge nicht editieren?
  View user's profile Private Nachricht senden
juizzle
Threadersteller

Dabei seit: 06.11.2006
Ort: karlsruhe
Alter: 41
Geschlecht: Männlich
Verfasst Di 14.12.2010 08:47
Titel

Antworten mit Zitat Zum Seitenanfang

wunderbar, vielen lieben Dank für die Tipps!
Das Auto-Margin war gold wert...
Verstehe trotzdem noch nicht, warum das beim Rahmen nötig ist, beim Logo allerdings nicht - dort ist es auch ohne das zentriert. Kann mir das jemand erklären *zwinker*


ps.: doch kann man *zwinker* oben rechts in deinem post ist ein edit-button


Zuletzt bearbeitet von juizzle am Di 14.12.2010 08:48, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 14.12.2010 09:30
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
align="center"

Solltest du entfernen.

Zentriert werden Blockelemente mit
Code:
margin: 0 auto;


Textelemente / Inhaltselemente (img, p, ...):
Code:
text-align: center;


Und für die farbigen Rahmen gibts was besseres: Firebug (Firefox), WebInspector (Safari/WebKit/Chrome), Dragonfly (Opera). Damit kannst du auch gut testen und versuchen zu verstehen, was wie aussieht *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen CSS und zentrierung von z-index
XHTML und CSS, Zentrierung und Positionierung?
(CSS) Zentrierung eines Klappmenus
(BARRIEREFREIHEIT) SWF zentrierung in HTML
zentrierung per CSS: inhalt verschwindet links
Problem bei Zentrierung eines DIV-Tags
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.