Schrift
Wiki:Tipp zum Debugging: use Data::Dumper; local $Data::Dumper::Useqq = 1; print Dumper \@var;
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]11876[/thread]

Zwei runde Rahmen nebeneinander?!

Leser: 1


<< >> 7 Einträge, 1 Seite
RPerl
 2008-05-22 12:55
#110114 #110114
User since
2006-11-26
384 Artikel
BenutzerIn

user image
Hi,

hier weiss doch bestimmt jemand wie man sauber zwei runde Rahmen (Navi und Content) nebeneinander positionieren kann, oder?
Folgenden CSS-Code hab ich:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body {
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-style: normal;
  background-color:#efefef;
}

#navi {
  font-size:    8pt;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  -moz-border-radius:15px;
  -khtml-border-radius:15px;
  max-width:  90px;
  min-width:  90px;
  min-height: 450px;
  margin:     150px 5px 5px 150px;
  padding:    2.5em;
  text-align: justify;
}

#content {
  font-size:    8pt;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  -moz-border-radius:   15px;
  -khtml-border-radius: 15px;
  max-width:  200px;
  min-width:  800px;
  min-height: 470px;
  margin:     -54px 5px 5px 130px;
  padding:    1.5em;
  text-align: left;
  position:   absolute;
}


Und html 4:

Code: (dl )
1
2
3
4
5
6
   <div id="navi">
   <br /><br/>
   <div id="content">
   aaaaaa
   </div>
   </div>


Aber da sind die div-tags verschachtelt und wenn ich in die Rahmen was reinschreibe, verschieben sich beide.
Gibt es da eine sauberere Loesung als meine? Muss es doch :-)
RalphFFM
 2008-05-22 13:09
#110115 #110115
User since
2006-11-16
258 Artikel
BenutzerIn
[Homepage] [default_avatar]
Besteht die Möglichkeit die Divs zu entschachteln? Dann könntest Du nämlich die Dinger bleistiftweise nebeneinander floaten lassen..
RPerl
 2008-05-22 13:18
#110116 #110116
User since
2006-11-26
384 Artikel
BenutzerIn

user image
Hi Ralph,

danke fuer die schnelle Antwort :-)
Wenn ich folgendes mache:

Code: (dl )
1
2
3
4
5
6
7
 <div id="navi"> 
   aaaa
   </div>
   <div id="content">
   aaaaaa<br />
   aaa
   </div>

klafft der content Rahmen ganz oben links.
Wie kann ich das denn jezt nebeneinander floaten?
Hast du da eine Idee?

// EDIT:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#navi {
  font-size:    8pt;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  -moz-border-radius:15px;
  -khtml-border-radius:15px;
  max-width:  90px;
  min-width:  90px;
  min-height: 450px;
  margin:     150px 5px 5px 150px;
  padding:    2.5em;
  text-align: justify;
  position:   absolute;
}

#content {
  font-size:    8pt;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  -moz-border-radius:   15px;
  -khtml-border-radius: 15px;
  max-width:  200px;
  min-width:  800px;
  min-height: 470px;
  margin:     150px 5px 5px 300px;
  padding:    1.5em;
  text-align: left;
  position:   absolute;
}

so ging es auch.
Aber ist das eine saubere Loesung?
RalphFFM
 2008-05-22 13:37
#110117 #110117
User since
2006-11-16
258 Artikel
BenutzerIn
[Homepage] [default_avatar]
Es gibt wie so oft im Leben viele Möglichkeiten. Ersetze mal in beiden Abschnitten "position:absolute;" durch ein "float:left;", und reduziere die margin-Werte in beiden Abschnitten.

Btw,
o die runden Ecken mit ..-border-radius kann der Internet Exploder m.W. bislang _noch_ nicht,
o font-size: 8px; -> Du hast ganz schön gute Augen. Em als Einheit zu nehmen ist häufig empfehlenswerter.
o border-Anweisungen könntest Du auch zusammenfassen falls Du möchtest: "border: 1px solid black;"
Gast Gast
 2008-05-22 13:50
#110119 #110119
RalphFFM+2008-05-22 11:37:33--
o font-size: 8px; -> Du hast ganz schön gute Augen. Em als Einheit zu nehmen ist häufig empfehlenswerter.

Definitiv. Ich habe hier einen Monitor in hoher Auflösung, da sind 8px ~3mm.
Struppi
 2008-05-22 14:04
#110121 #110121
User since
2006-02-17
628 Artikel
BenutzerIn
[Homepage]
user image
Es ist noch schlimmer, er nimmmt nicht 8px sondern 8pt, das ist eine Einheit für die Druckausgabe, am Monitor richtet sie sich nach der eingestellten DPI Größe und das kann verdammt klein sein
GwenDragon
 2008-05-22 14:22
#110127 #110127
User since
2005-01-17
14555 Artikel
Admin1
[Homepage]
user image
Was manchst du, wenn jemand einen 200 dpi oder noch höher auflösend (gibte es mittlerweile schon) Monitor hat?
Da schrumpft ein Pixel dann zu einem 1/200 Zoll zusammen; da sind dann ~0,13 mm!


Nein, 8px sind nicht 8pt!
1 DTP-Punkt sind 1/72" (Zoll)!
1 px sind je nach Monitor 1/72", 1/96", 1/110" oder gar 1/200" je nach Modell.
die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel
<< >> 7 Einträge, 1 Seite



View all threads created 2008-05-22 12:55.