mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 08.12.2016 01:40 Benutzername: Passwort: Auto-Login

Thema: ccs->positionieren->mittig vom 23.11.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> ccs->positionieren->mittig
Seite: Zurück  1, 2, 3  Weiter
Autor Nachricht
miras
Threadersteller

Dabei seit: 19.05.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 23.11.2005 11:25
Titel

Antworten mit Zitat Zum Seitenanfang

aller Anfang ist schwer, also ich bin jezt schon ein wenig weitergekommen. Aber....

...ist es nicht so das sich die Elemente an ihrem Elternelement orientieren? Wenn ich also einem DIV eine Höhe von 100% gebe, dürfte er sie doch nur so hoch machen wie das Elternelement hoch ist, oder habe ich da einen denkfehler?

Zur Erklärung:
Ein DIV aussenrum, zentriert und hat einen Rahemn von einem Pixel, in diesem dann mehrere andere Divs.

der Code
html
Code:

<div id="wrapper">
   <div id="header">
   <img src="img/re_1.jpg" width="189" height="93" alt="" border="0"><img src="img/slogan.gif" width="521" height="93" alt="" border="0">
   </div>
   
   <div id="rechts">
   <img src="img/re_2.jpg" width="189" height="174" alt="" border="0"><br />
   <img src="img/re_3.jpg" width="189" height="140" alt="" border="0"><br />
   <img src="img/re_4.jpg" width="189" height="120" alt="" border="0">
   </div>
</div>


css:
Code:

#wrapper{
border: 1px solid #840400;
width:900px;
height:600px;
position: absolute;
left: 50%;
margin-top:10px;
margin-left:-450px;
}

#rechts{
position:absolute;
height:100%;
top:93px;
background-color:830707
}


es geht jetzt um das DIV #rechts, mit der Angabe der top:93px orientiert es sich am Übergeordneten DIV, das klappt.
Nun habe ich dort 3 Bilder drin und wollte als background eine Farbe nehmen, so das immer bis zum rahmen von #wrapper halt diese Farbe ist, nehme ich jetzt height 100%, macht er die Größe aber bis zum Browserrand, lässt sich also von der Größe des Elternelementes nicht beeindrucken. Ich könnte ihm jetzt eine feste Größe geben, das bringt aber wieder nichts, da ja der Content immer unterschiedlich ist.

Was kann ich da tun das er die 100% zum übergeordneten DIV bezieht, gehts überhaupt?

Hoffe habs halbwegs verständlich erklärt.

hier mal noch nen Link

klick

besten dank schonmal


Zuletzt bearbeitet von miras am Mi 23.11.2005 13:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Mi 23.11.2005 11:43
Titel

Antworten mit Zitat Zum Seitenanfang

miras hat geschrieben:
Was kann ich da tun das er die 100% zum übergeordneten DIV bezieht, gehts überhaupt?


Also: Ich würde versuchen, auf absolute DIVs so gut es geht zu verzichten, das was du versuchst zu erreichen geht wunderbar mit float und Positionierung über margin. Da dein Eltern-Element eine fest Höhe hat, kannst du dem DIV #rechts doch einfach

Code:
height: inherit;


zuweisen oder du setzt direkt eine Größenangabe ein, die dem des Eltern-Elements #wrapper entspricht.

Soll die Seite sich in der Höhe nachher dem Inhalt anpassen oder bleibt die bei 600px? Grundsätzlich würde ich so oder so auf die absolute Positionierung verzichten und stattdessen den #wrapper einfach mittels

Code:
width: 900px;
height: 600px;
margin: 10px auto 0 auto;


definieren.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Nimroy
Community Manager

Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 38
Geschlecht: Männlich
Verfasst Mi 23.11.2005 11:56
Titel

Antworten mit Zitat Zum Seitenanfang

miras hat geschrieben:
@raumwurm
klick

@nimroy
habs jetzt so, funzt auch net

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
   <title>Unbenannt</title>
</head>

<body>
<div style="position:absolute;background-color:green;blue;width:500px;height:300px;margin-right:auto;margin-left:auto">
blabla


</div>


</body>
</html>


Mach mal
Code:
 position: relative
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Mi 23.11.2005 11:59
Titel

Antworten mit Zitat Zum Seitenanfang

Nimroy hat geschrieben:
Mach mal
Code:
 position: relative


Oder lass es ganz weg. Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
miras
Threadersteller

Dabei seit: 19.05.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 23.11.2005 12:02
Titel

Antworten mit Zitat Zum Seitenanfang

danke erstmal, wie gesagt bin GANZ neu auf dem Gebiet:

hab jetzt dem #rechts "height: inherit;" verpasst es ändert sich aber leider nichts, so hattest du es doch aber gemeint oder?

EIne feste Größe kann ich nicht zuweisen das der Content mal kurz oder mal lang (zum scrollen) sein kann.


Wie meinst du das mit auf "absolute" verzichten?Nur mit relativ arbeiten? Aber dann bezieht er sich doch gar nicht mehr auf die übergeordneten Elemente oder hab ich mich da falsch belesen?
  View user's profile Private Nachricht senden
miras
Threadersteller

Dabei seit: 19.05.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 23.11.2005 12:04
Titel

Antworten mit Zitat Zum Seitenanfang

mit relative oder ganz ohne, funzt es auch nicht Menno!
  View user's profile Private Nachricht senden
miras
Threadersteller

Dabei seit: 19.05.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 23.11.2005 13:40
Titel

Antworten mit Zitat Zum Seitenanfang

achso und dann schaut euch mal bitte die Seite im IE und im FF an, im IE ist der Navibalken 1-2px länger als im FF (da schließt er genau ab), was hab ich denn da schon wieder falsch gemacht? *Schnief*

Aber das größere Problem bleibt immer noch das mit der Backgroundfarbe rechts *hu hu huu*

link

code css:
Code:

/*BEGINN index*/
#start{
position: absolute;
top: 50%;
left: 50%;
width: 378px;
margin: -120px 0 0 -185;
}

p.start{
text-align:center;
color:ED8A8A;
font-family:Arial;
font-size:8pt;
}
/*END index */


/*BEGINN main*/
#wrapper{
border: 1px solid #840400;
width:900px;
height:500px;
position: absolute;
left: 50%;
margin-top:10px;
margin-left:-450px;
}

#rechts{
position:absolute;
height: inherit;
top:93px;
background-color:830707;
}


/*END main*/

/*BEGINN navi*/
#navi{
position:absolute;
top:93px;
left:189;
width:712px;
height:19px;
background-color:830707;
}

.nav1{
padding-left:80px;
}

.nav2bis4{
padding-left:100px;
}
/*END navi*/


code html:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Unbenannt</title>
   <link rel=stylesheet type="text/css" href="styles.css">
</head>

<body>

<div id="wrapper">
   <div id="header">
   <img src="img/re_1.jpg" width="189" height="93" alt="Vektor-Massivhaus" border="0"><img src="img/slogan.gif" width="521" height="93" alt="Vektor-Massivhaus, Wir bauen fuer Sie..." border="0">
   </div>
   
   <div id="rechts">
   <img src="img/re_2.jpg" width="189" height="174" alt="Vektor-Massivhaus" border="0"><br />
   <img src="img/re_3.jpg" width="189" height="140" alt="Vektor-Massivhaus" border="0"><br />
   <img src="img/re_4.jpg" width="189" height="120" alt="Vektor-Massivhaus" border="0">
   </div>
   
   <div id="navi">
   <span class="nav1"><img src="img/navi/ueber_uns.gif" width="55" height="18" alt="Vektor-Massivhaus, Ueber uns" border="0"></span>
   <span class="nav2bis4"><img src="img/navi/referenzen.gif" width="66" height="18" alt="Vektor-Massivhaus, Referenzen" border="0"></span>
   <span class="nav2bis4"><img src="img/navi/angebote.gif" width="57" height="18" alt="Vektor-Massivhaus, Angebote" border="0"></span>
   <span class="nav2bis4"><img src="img/navi/kontakt.gif" width="45" height="18" alt="Vektor-Massivhaus, Kontakt" border="0"></span>
   </div>
   
</div>
</body>
</html>


muss ich da jetzt ne Browserabfrage machen und dann halt ne css-file für FF und IE (wo der navibalken dann 2px kleiner ist)haben?

thanx


Zuletzt bearbeitet von miras am Mi 23.11.2005 13:48, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
miras
Threadersteller

Dabei seit: 19.05.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 23.11.2005 14:43
Titel

Antworten mit Zitat Zum Seitenanfang

oh man, ich glaub Tabellen liegen mir doch einfacher *heul*

link

warum passt der das umliegende DIV nicht an den Content an, och menno

wie gesagt bin für jede HIlfe dankbar

die miras


Zuletzt bearbeitet von miras am Mi 23.11.2005 15:21, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen mittig positionieren ...
CSS : Mittig positionieren. Hilfe!
grafik mit css mittig positionieren
jquery slideshow mittig positionieren
Seite mittig positionieren via css
CCS Problem in der Navigation mit IE
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3  Weiter
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.