CSS (der_webi) - Computerhilfen.de

der_webi
Gast

« am: 02.03.06, 17:53:38 »

Hallo
Ich habe leider ein Problem mit meinen div- Containern .
Ich weiß echt nicht mehr weiter ich hab extra drauf geachtet nur befehle zu benutzen die alle browser verstehen bzw anzeigen können

Folgende problem:

1. der "navigition 1" container ist im i-explorer zu groß ...
2. im Firefox ist der banner nicht bis ganz nach oben duchgezogen
3. der "navigation 2" container ist im Firefox zu nah am inhalt (also am linken rand)

kann irgndjemand mir helfen muss ich vielleicht den äußeren container weglassen ....
Ich hab das mal online gestellt:

http://www.ewetel.net/~wilhelm.lienstromberg/henrikstyle

und den quelltext gibts gratis dazu:

code:



<html>
<head>

<style type="text/css">

body
        {
        background-color: #9F855E;
        color: #000000;
        margin: 0em 2cm 0.5cm 2 cm;
        padding: 0px;
        }

pre {
font-size:14pt;
font-family:Comic Sans MS;
color: #000000;
}

b
{
font-size:14pt;
font-family:Comic Sans MS;
color: #000000;
}

.banner
{
font-size:56pt;
font-family:Comic Sans MS;
color: #000000;
text-decoration: underline;
align: center;
}

.ubs
{
font-size:20pt;
font-family:Comic Sans MS;
color:#000000;
text-decoration: underline;
font-weight:bold;
}
.navi
{
font-size:14pt;
font-family:Comic Sans MS;
color:#000000;
font-weight:bold;
}
.navi1
{
font-size:12pt;
font-family:Comic Sans MS;
color:#000000;
font-weight:bold;
}

div#banner
{
margin: 0cm 4cm 1.5cm 3cm;
background-color:#AEAFFF;
font-weight:bold;
border:2pt solid #000000;
border-top:none;
}

div#seite
{
margin: 0cm 2cm 2cm 3cm;
padding: 0cm;
background-color:#9F855E;
}

div#inhalt
{
margin: 10px 2cm 0cm 0.5cm;
padding: 0.5cm 1cm 0.5cm 3.5cm;
border:2pt solid #000000;
background-color: #FFFFCC;
}

div#navigation1
{
margin:0.5cm 0cm 0cm 4cm;
border:2pt solid #000000;
background-color:#AEAFFF;
padding: 0cm;
height:2cm;

}

ul#navigation2
{

border:2pt solid #000000;
background-color:#AEAFFF;
        padding: 0.5em;
        margin: 2px 0cm 1px 20px ;
        float: left;
        width: 3cm;

}
table#navi1
{
border="0"
width: 755px;
height: 53px
}

td
{
align: center;
height: 15 ;
front-familiy: Comic Sans MS;

</style>
<title>div- Container</title>
</head>

<body>

<div id="seite">

<div id="banner">
<p align="center">
<b class="banner" align="center">Banner</b>
</div>

<div id="navigation1" style="width: 755px; height: 59px">

<table id="navi1">
               <tr>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" >navigation1</b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
               </tr>
               <tr>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
                  <td height="15px" width="125px" align="center">
                  <b class="navi" ></b>
                  </td>
               </tr>
            </table>

</div>
<ul id="navigation2">
<b class="navi1">Navigatio 2 </b>
<br><br><br><br><br>
</ul>

<div id="inhalt">

<b>inhalt</b>

<br><br><br><br><br>

</div>

</div>

</body>

</html>

danke schonmal

Moderator informieren

eBill (†) (8.625)

112x Beste Antwort

159x "Danke"

Re: CSS

« Antwort #1 am: 02.03.06, 19:54:37 »

Hat dir diese Antwort geholfen?

Hi,

? hast du den Code "zu Fuß" editiert oder
? hat dich ein HTML-Generator / Werkzeug / Proggi unterstützt
? wenn JA welches ?

Moderator informieren

Stif-Meister
Gast

Re: CSS

« Antwort #2 am: 02.03.06, 20:48:43 »

Hm, habe es zwar nicht ausprobiert, jedoch könnte es an den cm liegen. Ich würde immer nur pixel verwenden. Könnte sein, dass der IE eine andere cm interpretation hat. Würde mich nicht wundern...

Moderator informieren

Der olle Schwoebel (3.917)
Special-Member

18x Beste Antwort

21x "Danke"

Re: CSS

« Antwort #3 am: 02.03.06, 20:58:12 »

Hat dir diese Antwort geholfen?

Darüber hinaus würde ich auch nur EINE Maßeinheit verwenden. Du verwendest hier ja Querbeet cm, pt, px und em...

Ich benutze bei meinen Webseiten eigentlich immer em, das ist eine "variable" Größe und man kann sie anpassen, z.B. die Schriftgröße verändern, px und pt sind da schon eher "fest". Pixel als Einheit verwende ich auch nur, wenns unumgänglich ist. Aber das ist nur meine Meinung.

Aber trotzdem bleib ich dabei, dass man so wenig unterschiedliche Einheiten verwenden sollte, wie möglich.

Moderator informieren

der_webi
Gast

Re: CSS

« Antwort #4 am: 02.03.06, 22:30:22 »

Zitat von: eBill am 02.03.06, 19:54:37

Hi,

? hast du den Code "zu Fuß" editiert oder
? hat dich ein HTML-Generator / Werkzeug / Proggi unterstützt
? wenn JA welches ?
Zitat von: Stif-Meister
[/quote
frontpage aber mehr so um zu kucken ob es tut weil ich code halt net gerne was das ich net sehe...

Also ich werde mal die einheiten alle in em ändern...

Vielen Dank schonmal
obwohl ich keine großenhoffungen habe da ich ja bei margin-top eh 0 stehn habe ...

nuja mal kuckn

Moderator informieren

der_webi
Gast

Re: CSS

« Antwort #5 am: 02.03.06, 22:32:01 »

sorry hab ich mich in den quote sachen verschrieben

Zitat von: eBill am 02.03.06, 19:54:37

Hi,

? hast du den Code "zu Fuß" editiert oder
? hat dich ein HTML-Generator / Werkzeug / Proggi unterstützt
? wenn JA welches ?

frontpage aber mehr so um zu kucken ob es tut weil ich code halt net gerne was das ich net sehe...

Also ich werde mal die einheiten alle in em ändern...

Vielen Dank schonmal
obwohl ich keine großenhoffungen habe da ich ja bei margin-top eh 0 stehn habe ...

nuja mal kuckn

frontpage

Moderator informieren

eBill (†) (8.625)

112x Beste Antwort

159x "Danke"

Re: CSS

« Antwort #6 am: 02.03.06, 22:53:40 »

Hat dir diese Antwort geholfen?

Hi webi

- darf ich als kl. Unterstützung f. zukünft. Arbeiten einen "Umrechner" anbieten ?

Umrechner - aus HomePage

Moderator informieren

der_webi
Gast

Re: CSS

« Antwort #7 am: 03.03.06, 14:32:51 »

Hallo danke für den umrechner..
nur so als nebenfragen was ist em also wieviel px oder mm ...

Also ich hab einfach mal ausprobiert(ich binm it dem problem mit dem banner angefangen

anfangs war es noch...:

Code: [Auswählen]

div#banner
                   {
                   margin: 0cm 4cm 1.5cm 3cm;
                   background-color:#AEAFFF;
                   font-weight:bold;
                   border:2pt solid #000000;
                   border-top:none;
                   }

dann habe ich alles ausprobiert und habe den befehl "border-top:none" gestrichen

man glaubt es kaum aber der banner ist am oberen rand nur mit rahmen...

nächste lösungsversuch:

Code: [Auswählen]

div#banner
                   {
                   
                   background-color:#AEAFFF;
                   font-weight:bold;
                   border-left:2px solid #000000;
                   border-bottom:2px solid #000000;
                   border-right:2px solid #000000;
                   border-top:0px ;
                   
                   }

wieder selbes problem , er zeigt wieder nen rahmen

also ganz stumpf einfach die selbe farbe beim "border-top" eingetragen
wie beim banner

Code: [Auswählen]

div#banner
                   {
                   
                   background-color:#AEAFFF;
                   font-weight:bold;
                   border-left:2px solid #000000;
                   border-bottom:2px solid #000000;
                   border-right:2px solid #000000;
                   border-top:1px solid #AEAFFF;
                   
                   }

Nunja jetzt ist zwar am rand en kleine lücke(ohne rahmen aber mir fällt nichts beseres ein oder hat jemand noch ne idee??????????

Danken schonmal

PS: Das ist mir heute auf dem fahrrad zur schule eingefallen

Als nächstes wandle ich dann mal alles in em bzw. wo es net anders geht in px um !
kann man denn für schrift weiterhion pt benutzen ?

Moderator informieren

Der olle Schwoebel (3.917)
Special-Member

18x Beste Antwort

21x "Danke"

Re: CSS

« Antwort #8 am: 04.03.06, 14:18:09 »

Hat dir diese Antwort geholfen?

Hallo der_webi

ich hab hier mal eine Seite, wo ein paar Maßeinheiten dargestellt sind:
http://www.free-solutions.de/w3/layout_fontsize.html

Für die Schrift kannst du eigentlich benutzen was du willst, ich würde dir empfehlen pro "Kategorie" jedoch immer nur eine Einheit zu verwenden.
Ich setz die immer so ein:

Rahmen (border)
Pixel
Abstände (margin, padding)
em
Breite (width)
Em oder 100% wenns über die ganze Breite gehn soll
Schriftgröße (font-size)
em

Bei em ist es halt der "Vorteil", dass man durch STRG+Mausrad die Schriftgröße verändern kann. Im "Normalschriftgrößenzustand" gilt dabei (in etwa):

0.8em = <small>
1.0em = normale Schriftgröße (~ 100% ~ 10px ~ 9pt)
1.2em = <big>
1.8em = <h1>

Moderator informieren

der_webi (444)

4x Beste Antwort

2x "Danke"

Re: CSS

« Antwort #9 am: 04.03.06, 17:27:36 »

Hat dir diese Antwort geholfen?

Danke danke ich setz mich da dann mal dran und das mit dem banner werde ich wohl so lassen müssen...

bis dann

Moderator informieren

der_webi (444)

4x Beste Antwort

2x "Danke"

Re: CSS

« Antwort #10 am: 04.03.06, 17:42:38 »

Hat dir diese Antwort geholfen?

Ach eine frage hab ich noch :Ist es eigentlich besser mit divs zu abrieten oder mit tabellen....??

??? ??? ???
Danke schonmal

Moderator informieren

Der olle Schwoebel (3.917)
Special-Member

18x Beste Antwort

21x "Danke"

Re: CSS

« Antwort #11 am: 04.03.06, 18:21:52 »

Hat dir diese Antwort geholfen?

"Divs" zeigen halt von "Zukunftsgeist", da sie Bestandteil von CSS sind.
Tabellen sind vielleicht "einfacher" zu handhaben, aber damit lässt sich nicht so viel und nicht so dynamisch arbeiten, Tabellen sind eher "fest", vor allem dieser "Float" Effekt von CSS ist NUR mit Tabellenzellen nicht möglich.

Für deinen Zweck würde ich dir auf jeden Fall eher CSS empfehlen.

Moderator informieren

der_webi (444)

4x Beste Antwort

2x "Danke"

Re: CSS

« Antwort #12 am: 04.03.06, 18:30:52 »

Hat dir diese Antwort geholfen?

na denn abfahrt dann fang ich mal an alles umzuwandeln mit der hoffnung das alles tut ich meld mich sonst wohl

also ...

vielen dank an alle