css style: super im mozen, garnicht im ie

20.08.2004, 18:18

hallo
ich habe mir da mal was zusammengepackt, soll ein design werden:
(bitte nicht auf die farben schaun, is alles nur zum erstellen

)

Code:

/* großes div-fenster in den alles gehalten werden soll, wird per id="" aufgerufen */

#bigdiv
{
position:absolute;left:15%; right:15%; top:15%; bottom:15%; 
width:70% height:70%;
background-color:#10C1CE;
border:1px dotted; #000000;
}

/* kleine div´s für die 2 fensterchen mit rand, auch über id="" */

#linksobendiv
{
margin: 1px; 1px; 1px; 1px;
position:absolute; right:50%; left:1px; top:1px; bottom:50%;
background-color:#9FC8CA;
border:1px dotted; #000000;
z-index:1;
}

#rechtsobendiv
{
margin: 1px; 1px; 1px; 1px; 
margin-left:1px;
position:absolute; left:50%; right:1px; top:1px; bottom:50%; 
background-color:#9FC8CA;
border:1px dotted; #000000;
z-index:2;
}


#linksuntendiv
{
margin: 1px; 1px; 1px; 1px; 
position:absolute;left:1px; right:50%; top:50%; bottom:1px;
background-color:#9FC8CA;
border:1px dotted; #000000;
z-index:3;
}

#rechtsuntendiv
{
margin: 1px; 1px; 1px; 1px; 
position:absolute;left:50%; right:1px; top:50%; bottom:1px;
background-color:#9FC8CA;
border:1px dotted; #000000;
z-index:4;
}

das rufe ich auf mit

Code:

<div id="bigdiv"> 
<div id="linksobendiv" class="divschrift">linksoben </div>
<div id="linksuntendiv" class="divschrift">linksunten </div>
<div id="rechtsobendiv" class="divschrift">rechtsoben </div>
<div id="rechtsuntendiv" class="divschrift">rechtsunten</div>
</div>

im mozilla klappts super, aber im ie überhauptnicht! da zeigt er garnichts an wie es soll

könnt ihr mir sagen was ich da falsch mache? ich habe die sachen eigentlich (so denke ich) so erstellt, dass es in beiden gehen müsste...

20.08.2004, 20:39

Hallo,

Code:

#bigdiv
{
position:absolute;
left:15%; 
right:15%; 
top:15%; 
bottom:15%; 
width:70% ;
height:70%;
background-color:#10C1CE;
border:1px dotted; #000000;

Nach width+Wert fehlt ein Strichpunkt.
Nach 'dotted' KEIN Komma setzen.

Code:

}

/* kleine div´s für die 2 fensterchen mit rand, auch über id="" */

#linksobendiv
{
margin: 1px; 1px; 1px; 1px;
position:absolute; right:50%; left:1px; top:1px; bottom:50%;
background-color:#9FC8CA;
border:1px dotted; #000000;
z-index:1;
}

Bei margin muss es heißen:

Code:

margin: 1px

Da alle Seiten den gleichen Wert haben kannst'e das zusammenziehen wie oben geschrieben.

Nach dotted wieder Komma....

Code:

#rechtsobendiv
{
margin: 1px; 1px; 1px; 1px; 
margin-left:1px;
position:absolute; left:50%; right:1px; top:1px; bottom:50%; 
background-color:#9FC8CA;
border:1px dotted; #000000;
z-index:2;
}

Bei margin wie oben.
Hier kannst'e sogar die ersten beiden Zeilen zusammenfassen bzw. die zweite eigentlich weglassen, weil das das gleiche wie die erste ist.

Und wieder dotted....

Code:

#linksuntendiv
{
margin: 1px; 1px; 1px; 1px; 
position:absolute;left:1px; right:50%; top:50%; bottom:1px;
background-color:#9FC8CA;
border:1px dotted; #000000;
z-index:3;
}

-> margin ...
-> dotted ...

Code:

#rechtsuntendiv
{
margin: 1px; 1px; 1px; 1px; 
position:absolute;left:50%; right:1px; top:50%; bottom:1px;
background-color:#9FC8CA;
border:1px dotted; #000000;
z-index:4;
}

-> margin ...
-> dotted ...

Code:

<div id="bigdiv"> 
<div id="linksobendiv" class="divschrift">linksoben </div>
<div id="linksuntendiv" class="divschrift">linksunten </div>
<div id="rechtsobendiv" class="divschrift">rechtsoben </div>
<div id="rechtsuntendiv" class="divschrift">rechtsunten</div>
</div>

Entweder nimm das ID oder das CLASS - beides zusammen ist überflüssig.

Bei ID -> im CSS div#ID_NAME
Bei CLASS -> im CSS div.CLASS_NAME

Zitat:

im mozilla klappts super, aber im ie überhauptnicht! da zeigt er garnichts an wie es soll

Bessere mal die Sachen oben aus und schau ob der Fehler noch auftaucht.

20.08.2004, 22:58

hi
danke erstmal für die hilfe! hab heut erst "richtig" mit css angefangen

ich hab jetz ertmal die änderungen übernommen:

Code:

/* großes div-fenster in den alles gehalten werden soll, wird per id="" aufgerufen */

div#bigdiv
{
position:absolute;
left:15%; 
right:15%; 
top:15%; 
bottom:15%; 
width:70%;
height:70%;
background-color:#10C1CE;
border:1px dotted #000000;
}

/* kleine div´s für die 2 fensterchen mit rand, auch über id="" */

div#linksobendiv
{
margin: 1px;
position:absolute; 
right:50%; 
left:1px; 
top:1px; 
bottom:50%;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:1;
}

div#rechtsobendiv
{
margin: 1px;
position:absolute; 
left:50%; 
right:1px; 
top:1px; 
bottom:50%; 
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:2;
}

div#linksuntendiv
{
margin: 1px;
position:absolute;
left:1px; 
right:50%; 
top:50%; 
bottom:1px;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:3;
}

div#rechtsuntendiv
{
margin: 1px;
position:absolute;
left:50%; 
right:1px; 
top:50%; 
bottom:1px;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:4;
}

die divs rufe ich jetzt per id auf, das mit class hab ich erstmal weggelassen, da das sowieso nur die schrift definiert hat

leider hat sich nicht viel getan
kannst ja mal schaun:
http://www.marco-ilgner.de/des/

der ie kommt damit einfach nicht zu rande

21.08.2004, 00:33

Hi,

bin schon viel zu müde, hier nur eine kleine Veärnderung, bewirkt zumindest etwas:

Code:

/* css datei für design no3 
copyright by Marco "Dodo" Ilgner */


/* body definieren */

body
{
white-space:pre-wrap;
padding-left:10px;
background-color:#C3F6F9;
}


/* großes div-fenster in den alles gehalten werden soll, wird per id="" aufgerufen */

div#bigdiv
{
position:absolute;
left:15%; 
right:15%; 
top:15%; 
bottom:15%; 
width:70%;
height:70%;
background-color:#10C1CE;
border:1px dotted #000000;
}

/* kleine div´s für die 2 fensterchen mit rand, auch über id="" */

div#linksobendiv
{
margin: 1px;
position:absolute; 
width: 49.5%;
height: 49.5%;
left: 1px;
top: 1px;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:1;
}

div#rechtsobendiv
{
margin: 1px;
position:absolute; 
width: 49.5%;
height: 49.5%;
/*left: 1px;*/
right: 1px;
top: 1px;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:2;
}

div#linksuntendiv
{
margin: 1px;
position:absolute;
width: 49.5%;
height: 49.5%;
left: 1px;
bottom: 1px;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:3;
}

div#rechtsuntendiv
{
margin: 1px;
position:absolute;
width: 49.5%;
height: 49.5%;
right: 1px;
bottom: 1px;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:4;
}

Du kannst statt der Pixel-Angaben auch top:50% bzw. left: 50% nehmen, dann dürfte es evtl. sogar noch besser werden, probier ich aber evtl. erst morgen....

21.08.2004, 10:17

Hallo,

also wenn Du beim

-- rechten/oberen Kasten: left: 50%
-- links/unten: top: 50%
-- rechts/unten : top: 50% und left: 50%

nimmst passt es in IE und Gecko-Browsern.

Die Überlänge links/unten kannst'e z. B. mit dem overflow Attribut verändern (Scrollleisten hinzufügen); sh. dazu unter SelfHTML, Link weiter oben.

21.08.2004, 11:30

hi
ich hab jetz erstmal deinen letzten vorschlag übernommen:

Code:

/* css datei für design no3
copyright by Marco "Bodo" Ilgner */


/* body definieren */

body
{
white-space:pre-wrap;
padding-left:10px;
background-color:#C3F6F9;
}


/* großes div-fenster in den alles gehalten werden soll, wird per id="" aufgerufen */

div#bigdiv
{
position:absolute;
left:15%;
right:15%;
top:15%;
bottom:15%;
width:70%;
height:70%;
background-color:#10C1CE;
border:1px dotted #000000;
}

/* kleine div´s für die 2 fensterchen mit rand, auch über id="" */

div#linksobendiv
{
margin: 1px;
position:absolute;
width: 49.5%;
height: 49.5%;
left: 1px;
top: 1px;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:1;
}

div#rechtsobendiv
{
margin: 1px;
position:absolute;
width: 49.5%;
height: 49.5%;
left: 50%; 
right: 1px; 
top: 1px;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:2;
}

div#linksuntendiv
{
margin: 1px;
position:absolute;
width: 49.5%;
height: 49.5%;
top:50%;
left: 1px;
bottom: 1px; 
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:3;
}

div#rechtsuntendiv
{
margin: 1px;
position:absolute;
width: 49.5%;
height: 49.5%;
right: 1px;
bottom: 1px; 
top:50%;
left:50%;
background-color:#9FC8CA;
border:1px dotted #000000;
z-index:4;
}

es hat sich zwar was getan, aber ist immernoch nicht wie im mozilla, hab ich da was vergessen/falsch gemacht?

21.08.2004, 16:28

Hallo,

lokal geht's nur online nicht.

Code:

<link rel="stylesheet" type="text/css" href="format.css">
<!--[if lt IE 6]>
 <style type="text/css"> 
  <link rel="stylesheet" type="text/css" href="ieformat.css">
 </style>
<![endif]-->
<!--[if gt IE 6]>
 <style type="text/css"> 
  <link rel="stylesheet" type="text/css" href="ieformat.css">
 </style>
<![endif]-->

Das sieht mehr als komisch aus - woher hast Du das?

<link> kann nicht innerhalb von <style> sein http://de.selfhtml.org/html/referenz/elemente.htm#link

Vielleicht ändert das etwas - ansonsten sehe ich im Moment keine anderen Fehler, die das online anders darstellen lassen würden...

22.08.2004, 12:16

hi
das sollte ne browserweiche sein, hab ich beim googeln gefunden...

naja, ich habs erstmal rausgenommen, jetzt hat sich was geändert, aber immernoch nicht so wie es soll
http://www.marco-ilgner.de/des/
css: http://www.marco-ilgner.de/des/format.css

22.08.2004, 12:24

Hallo,

Zitat:

Zitat von freundesfreund

das sollte ne browserweiche sein, hab ich beim googeln gefunden...

naja, ich habs erstmal rausgenommen, jetzt hat sich was geändert, aber immernoch nicht so wie es soll
http://www.marco-ilgner.de/des/
css: http://www.marco-ilgner.de/des/format.css

Komische Browserweiche...

Im IE und im Mozilla Firefox sehen beide Darstellungen jetzt gleich aus - mit Scrollbars für überlangen Inhalt.

Soll'n die Scrollbars weg? Dann wären bei unterschiedlich langen Inhalten die Boxen evtl. wieder größer als gewollt...

22.08.2004, 12:36

hi
neinnein, die scrollbars sollen (erstmal) so bleiben (weiß ja wie das geht, mit auto, scroll, noscroll)

bei mir ist es im ie allerdings immernoch total zerrissen!
was hast du denn für ne ie version? ich hab die 6

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wie Erstelle ich Einen neuen Style	MSV	PHP Tipps 2008	2	03.05.2008 13:34
Style Ansicht, Benutzerbilder und Signaturen	hoefti	Board-Support	2	08.10.2007 10:59
Style		Beitragsarchiv	3	14.07.2005 15:00
style for phpbb-action 1.3m		Beitragsarchiv	1	06.06.2005 22:36
Style bzw. tpl Wechsel mit $_GET		PHP Tipps 2005	12	14.04.2005 12:06
Frage zu Style Sheets		HTML, Usability und Barrierefreiheit	9	03.03.2005 13:58
[Erledigt] nur in tabelle style benutzen!		HTML, Usability und Barrierefreiheit	10	17.12.2004 20:23
Formularfelder auswerten, bei Fehler andere Style	GN	PHP Tipps 2004-2	5	14.12.2004 00:19
[Erledigt] css style für <tr>?		HTML, Usability und Barrierefreiheit	5	02.12.2004 16:52
[Erledigt] Style Sheets und Firefox, Verständnisfrage.		HTML, Usability und Barrierefreiheit	11	24.11.2004 21:25
Style von php.de?		Off-Topic Diskussionen	7	22.11.2004 12:07
bei Fehler anderen Style	GN	PHP Tipps 2004-2	7	16.11.2004 17:24
Auswahllisten + style?		HTML, Usability und Barrierefreiheit	0	16.11.2004 08:41
CSS Style Problem		HTML, Usability und Barrierefreiheit	5	09.08.2004 10:35
Problem mit Link Style		HTML, Usability und Barrierefreiheit	8	05.08.2004 17:59


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.08.2004, 10:17
Gast Beiträge: n/a	Hallo, also wenn Du beim -- rechten/oberen Kasten: left: 50% -- links/unten: top: 50% -- rechts/unten : top: 50% und left: 50% nimmst passt es in IE und Gecko-Browsern. Die Überlänge links/unten kannst'e z. B. mit dem overflow Attribut verändern (Scrollleisten hinzufügen); sh. dazu unter SelfHTML, Link weiter oben.

21.08.2004, 16:28
Gast Beiträge: n/a	Hallo, lokal geht's nur online nicht. Code: <link rel="stylesheet" type="text/css" href="format.css"> <!--[if lt IE 6]> <style type="text/css"> <link rel="stylesheet" type="text/css" href="ieformat.css"> </style> <![endif]--> <!--[if gt IE 6]> <style type="text/css"> <link rel="stylesheet" type="text/css" href="ieformat.css"> </style> <![endif]--> Das sieht mehr als komisch aus - woher hast Du das? <link> kann nicht innerhalb von <style> sein http://de.selfhtml.org/html/referenz/elemente.htm#link Vielleicht ändert das etwas - ansonsten sehe ich im Moment keine anderen Fehler, die das online anders darstellen lassen würden...

22.08.2004, 12:16
Gast Beiträge: n/a	hi das sollte ne browserweiche sein, hab ich beim googeln gefunden... naja, ich habs erstmal rausgenommen, jetzt hat sich was geändert, aber immernoch nicht so wie es soll http://www.marco-ilgner.de/des/ css: http://www.marco-ilgner.de/des/format.css

22.08.2004, 12:36
Gast Beiträge: n/a	hi neinnein, die scrollbars sollen (erstmal) so bleiben (weiß ja wie das geht, mit auto, scroll, noscroll) bei mir ist es im ie allerdings immernoch total zerrissen! was hast du denn für ne ie version? ich hab die 6