• 07.07.2025, 14:46
  • Registrieren
  • Anmelden
  • Sie sind nicht angemeldet.

 

Lieber Besucher, herzlich willkommen bei: Aqua Computer Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

speedy909

Full Member

Re: CSS Layout erstellen

Sonntag, 6. Mai 2007, 22:17

sorry, hab wohl das bild versehentlich mit dem layout gelöscht, jetzt sollte es wieder funktionieren ;D

Anisachse

God

Re: CSS Layout erstellen

Montag, 7. Mai 2007, 12:26

layout

einfach runterladen

angucken kannstes dir hier: layout gucken

speedy909

Full Member

Re: CSS Layout erstellen

Montag, 7. Mai 2007, 14:05

danke, sowas wollte ich.

nur ein problem --> mit firefox gehts immer noch nicht :'(

habe nun einen kompromiss, dann funktionierts halbwegs,
nur habe ich jetzt ein problem mit den innenabständen (zb. padding:10px) dann vergrößert es mir die fixe größe (zb von 100px auf ungefähr 120px)

Anisachse

God

Re: CSS Layout erstellen

Montag, 7. Mai 2007, 14:13

also bei mir gehts unter firefox -.-

poste doch mal die url zu deinem layout, vielleicht kann man dir ja helfen

edith sagt: wer noch mehr layout´s sucht kann sich ja mal intensivstation.ch angucken ;)

Y0Gi

God

Re: CSS Layout erstellen

Montag, 7. Mai 2007, 14:26

Zitat von »speedy909«

habe nun einen kompromiss, dann funktionierts halbwegs,
nur habe ich jetzt ein problem mit den innenabständen (zb. padding:10px) dann vergrößert es mir die fixe größe (zb von 100px auf ungefähr 120px)

Und das ist auch richtig so. Siehe dazu: Internet Explorer box model bug

Da dieses Problem nur im Quirks Mode, nicht aber im Standards-Compliant Mode auftritt, empfiehlt es sich, letzteren nutzen zu lassen. Das geht mit XHTML und ohne die XML-Präabmel (<?xml version="1.0" [...] ?>). IIRC existiert aber eine sehr gute Tabelle, die aufzeigt, wann sonst welcher Modus bei welchem Browser verwendet wird.

speedy909

Full Member

Re: CSS Layout erstellen

Montag, 7. Mai 2007, 14:38

@ Anisachse
dein css mit überlangem text (schau mal im IE und anschließend in firefox)
seite nicht mehr verfügbar!


mein derzeitiger style (nur versuchsweise):
seite nicht mehr verfügbar!

Anisachse

God

Re: CSS Layout erstellen

Montag, 7. Mai 2007, 15:35

dann nutz erstmal mehr als 800px breite, laut statistik surfen nurnoch 2-3% mit 800x600 auflösung.

und wenn dann immer noch zu langer text drin ist kannste den ja scrollbar machen ;)

Max_Payne

God

Re: CSS Layout erstellen

Dienstag, 8. Mai 2007, 00:53

Zitat von »Anisachse«

dann nutz erstmal mehr als 800px breite, laut statistik surfen nurnoch 2-3% mit 800x600 auflösung.

und wenn dann immer noch zu langer text drin ist kannste den ja scrollbar machen ;)

Also ich verwende wenn möglich so 760px Breite weil die angesprochen es gibt diese User noch wobei man so langsam 1024x768 erwarten darf, natürlich noch abzüglich all der sinnlosen TollBuntLeisten ...

Gruß Max Payne

speedy909

Full Member

Re: CSS Layout erstellen

Dienstag, 8. Mai 2007, 09:11

ich dachte dabei so:

fast alle user verwenden eine auflösung >1024x... (bei denen soll links und rechts noch ein rand bleiben

und wenn einer 800x600 verwendet, muss er hald etwas scroolen (aber nur so um die 20px)

und in 20px passt viel text

Y0Gi

God

Re: CSS Layout erstellen

Dienstag, 8. Mai 2007, 12:50

Zitat von »speedy909«

fast alle user verwenden eine auflösung >1024x... (bei denen soll links und rechts noch ein rand bleiben

Nö, keineswegs.

Horizontal scrollen zu müssen, suckt mal richtig. Aber andererseits muss man auch nicht mehr auf 800x600 Rücksicht nehmen - Voraussetzungen wie Flash, JavaScript oder ähnliches sind da noch viel schlimmer.

Wenn es kein Float-Layout sein soll, ist eine Breite von 9xx Pixeln heutzutage bei Designern recht beliebt, weil auch bei 1024 Breite am Rand für das Auge noch Fläche zum Ausruhen bleibt und das ganze auch bei höheren Auflösungen noch gescheit aussieht (während ein fließendes Layout, das den Text auf einem Widescreen-Display auf 40 cm Breite zieht, Müll ist; 12 cm maximale Spaltenbreite werden empfohlen).

speedy909

Full Member

Re: CSS Layout erstellen

Donnerstag, 10. Mai 2007, 14:03

so, bin jetzt vorerst mit meinem design fertig!

http://www.pre1.eu/

nun sollte es nur noch auf allen browsern laufen:

Quellcode

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<style type="text/css">
/*body*/
      body {background:url(hintergrund/aussen.png);padding:0px;margin-top:0}

/*schriften*/
      /*schriftvoreinstellungen*/
      div {font-family:Arial;}
            /*für copyright hinweis*/
            div#copy {font-size:9px;}
            /*für standardtext*/
            div#standard {font-size:11px;}
            /*für überschrift 1*/
            div#u1 {font-size:13px;font-weight:bold;line-height:25px;}
      
      /*für links*/
      a{text-decoration:none;}
      a:link {color:#000000;}
      a:visited {color:#000000;}
      a:hover {color:#0000FF;}
      a:active {color:#0000FF;} 

/*design*/
      /*menu*/
      #menu_oben{width:156px;height:24px;background:url(menu/oben.png);text-align:left;font-weight:bold;padding:5px 0px 0px 13px;font-size:11px}
      #menu_mitte{width:156px;background:url(menu/textbereich.png);text-align:left;padding:5px 0px 0px 13px;font-size:11px}
      #menu_unten{width:156px;height:12px;background:url(menu/unten.png)}
      
      /*hauptcontainer*/
      #container {width:900px;background:url(hintergrund/hintergrund.png)}
            /*oben*/
            #oben {width:860px;height:57px;background:url(hintergrund/oben.png)}
            #balken_ob {width:860px;height:40px;background:url(hintergrund/balken_ob.png)}
            /*innencontainer*/
            #wrapper{width: 860px;margin: 0 auto;}
                  #linkespalte{width:156px;float:left;} 
                  #mittlerespalte{width:548px;float:left;text-align:left;padding:5px;font-size:11px}  
                  #rechtespalte{width:156px;float:left;}
            /*unten*/      
            #unten {clear: both;width:860px;height:32px;background:url(hintergrund/balken_un.png)}
            #copyright {width:400px;;font-size:9px}                  
</style>

<div align="center">
      <div id="container">
              <div id="oben"></div>
              <div id="balken_ob"></div>
            <div id="wrapper">
                  <div id="linkespalte">
                        <div id="menu_oben">Menu</div>            
                        <div id="menu_mitte">text</div>
                        <div id="menu_unten"></div>
                        
                        <div id="menu_oben">Menu</div>            
                        <div id="menu_mitte">text</div>
                        <div id="menu_unten"></div>
                </div>
                  
                  
                  <div id="mittlerespalte"> Seite derzeit noch im Aufbau!</div>
                  
                  <div id="rechtespalte">      
                    <div id="menu_oben">Menu</div>            
                        <div id="menu_mitte">text</div>
                        <div id="menu_unten"></div>
                        
                        <div id="menu_oben">Menu</div>            
                        <div id="menu_mitte">text</div>
                        <div id="menu_unten"></div>
                        
                        <div id="menu_oben">Menu</div>            
                        <div id="menu_mitte">text</div>
                        <div id="menu_unten"></div>
                  </div>                        
            </div>
            <div id="unten"></div>
      </div>
      <div id="copyright">copyright hinweis</div>
</div>


stehe immer noch vor dem problem (padding)!
wer kann mir bei meinem problem helfen?

bin für verbesserungsvorschläge, kommentare,... offen

Y0Gi

God

Re: CSS Layout erstellen

Donnerstag, 10. Mai 2007, 16:36

Zitat von »speedy909«

stehe immer noch vor dem problem (padding)!
wer kann mir bei meinem problem helfen?

*Das* "Problem" mit Padding, auf das ich in meinem vorletzten Beitrag Bezug genommen habe?


Update:
Das Layout ist bei mir in Firefox 1.5 ziemlich hinüber. Und wenn das damit schon nicht geht, ist die Aussage "sollte mit allen Browsern gehen" schon *sehr* gewagt ;)

Was die Schriftgrößen angeht: Da sollte man tunlichst als Einheiten em, % oder andere relative Angaben nehmen. px sieht oft hässlich aus und skaliert nur unzureichend. Dazu findest du an jeder Ecke im Web Infos. Etwas allgemeiner auch: The 100% Easy-2-Read Standard

speedy909

Full Member

Re: CSS Layout erstellen

Samstag, 12. Mai 2007, 15:40

@ Y0Gi
habe ja geschrieben "nun sollte es nur noch auf allen browsern laufen"

heißt so viel wie ich weiß nur das es auf dem IE funktioniert.
und das aussehen in firefox liegt am padding, ohne padding sieht alles ok aus
und die problemlösung die du mir vorgeschlagen hast kapier ich noch nicht so ganz!

Y0Gi

God

Re: CSS Layout erstellen

Samstag, 12. Mai 2007, 17:12

Zitat von »speedy909«

@ Y0Gi
habe ja geschrieben "nun sollte es nur noch auf allen browsern laufen"

Nur weil du schreibst, dass es sollte, tut es das noch lange (laaaaaange) nicht ;)

Zitat von »speedy909«

heißt so viel wie ich weiß nur das es auf dem IE funktioniert.
und das aussehen in firefox liegt am padding, ohne padding sieht alles ok aus
und die problemlösung die du mir vorgeschlagen hast kapier ich noch nicht so ganz!

Ursache ist, dass der Internet Explorer das sog. Box-Model traditionell *falsch* interpretiert. Zur Veranschaulichung die Grafik aus dem genannten Wikipedia-Artikel:

Korrekt ist es also, vom Wert für die Breite den Wert des verwendeten Padding abzuziehen.

Der IE hat einen Modus, in dem er "aus Scheiße HTML macht", den sog. Quirks Mode (s. vorherige Beiträge von mir). Wenn du ihn aber dazu bringt, den Standards-Compliant Mode zu verwenden, interpretiert der IE das Box-Model korrekt, so wie es Firefox, Opera und andere Browser tun.

Um das zu erreichen, solltest du vor Allem erst einmal *grundlegend* für eine korrekte Struktur deiner Website sorgen. Neben der DOCTYPE-Deklaration fehlen ja bei dir sogar die essentiellen Elemente <html>, <head> und <body>! Siehe dazu SelfHTML: http://de.selfhtml.org/html/allgemein/grundgeruest.htm

Anschließend solltest du die Website validieren lassen, z.B. beim W3C: http://validator.w3.org/ - es gibt aber auch andere Validatoren.