XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   blockelement zentrieren (http://xhtmlforum.de/showthread.php?t=60298)

linlan 19.02.2010 20:03

blockelement zentrieren
 
hallo
http://www.imagebanana.com/img/ho5hn0o/thumb/darsr.png



ich möchte das blaue element , egal in welcher auflösung,immer zentriert haben
so wie hier : Frank Stolle - Rechtsanwaltskanzlei


das ist mein css code bis jetzt
Zitat:

background: #C4FDCB;
margin: 20px auto;
width:900px;
height:800px;
kann mir jem einen wink geben ?

fricca 19.02.2010 20:08

FAQ Punkt 5

linlan 19.02.2010 21:53

versuche schon die ganze zeit den header sichtbar zu machen mit z-index etc und der ist nie zu sehen -Nur der blaue container ist sichtbar..

ausserdem möchte ich ,dass der header über die grenze des main containers kommt und das geht auch nicht

Zitat:

<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>


<div id="main">
<div id:"header">

</div>

<div id="left">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</div>

</body>
</html>
Zitat:

body {
background:#AE0904;
padding-left:4%;
padding-right:4%;
padding-top:4%;
padding-bottom:4;
}
#main{
background: #C4FDCB;
margin: auto;
height:470px;
width:800px%;
}
#header {
background:#AEAEAE;
position:absolute;
left:450px; top:350px; width:300px; height:150px;

linlan 19.02.2010 22:30

ok hab den dummen fehler gefunden

linlan 20.02.2010 02:07

hallo

mit punkt 5 im faq lässt sich eine seite anscheinend nicht zentrieren bzw da gibt es keine anleitung nur eine fertige seite

wie soll ich denn das align usen ?

Plumpy 20.02.2010 02:25

Hi,

im Punkt 5 wurde eine Beispiel Webseite genannt (Link) in der das realisiert wurde.

Das Vorgehen ist so ( verkürzt auf das wesentliche ). man hat zwei Div Elemente. Das eine hat eine Höhe von 50% und definiert nur den oberen Abstand. Danach wird mithilfe von margin-bottom die Box um so viele Pixel nach oben verschoben wie die darzustellende Box groß sein soll.
Eine Allgemeingültige Vertikale Zentrierung ist nur mit CSS und HTML nicht machbar, da muss man dann auf JavaScript zurückgreifen, aber wenn man die Größe der Box weis, dann geht es.
HTML-Code:

<style>
#abstand {
  position: relative;
  height: 50%;
  margin-bottom: /* -Größe der Box die Zentriert werden soll. */
}
</style>
...
<div id="abstand"><!-- Das ist der Abstand --></div>
<div id="content">
  <!-- Dein Content -->
</div>

Liebe Grüße

Walter IT-Services 21.02.2010 01:47

Zitat:

Zitat von linlan (Beitrag 459532)
ok hab den dummen fehler gefunden

Schön wäre es noch, wenn du den "dummen" Fehler hier hinschreibst.
Das ist immer nützlich für Leute, die den Thread über die Suchfunktion, Google oder ähnlichem gefunden haben.
Ein "Hat sich erledigt", "Problem gelöst", "Fehler gefunden/behoben" reicht meist nicht, um deine Lösung auf das eigene Problem zu übertragen ;)

linlan 21.02.2010 16:30

ich hatte einfach ein simicolon vergessen und das wurde dann garnicht bearbeitet ...

ich habe jetzt aber ein anderes dummes problem

ich möchte den MAIN container hiden

visibility:hidden;

wird er aber nicht :(
HTML-Code:

<div id=raj>
 <div id="main">
  <div id="content"></div>
 
  <div id="header"> header  </div> 
  <div id="left"> left</div>
  <div id="content">  </div>
  <div id="footer"> footer </div>
 </div>
</div>


fricca 21.02.2010 16:34

linlan, deine Codeschnipsel bringen nichts. Was sollen wir denn nur mit dem HTML-Schnipsel, wenn du doch über ein CSS-Problem reden willst?
Gib immer einen Link an. Und validier deinen Code. Dann findest du auch deine Tippfehler.
Lesestoff: http://xhtmlforum.de/40080-f-r-frage...twortende.html

Weitere Leseempfehlung: Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS
Glaub mir, du sparst viel Zeit, wenn du erstmal Zeit ins Lernen der Grundlagen investierst.

linlan 21.02.2010 17:34

der fehler bestand darin , dass dreamweaver anscheinend keine tags ließt die man einfügt ...


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:22 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023