CSS-Differenzen beim Positionieren - (X)HTML & CSS & DHTML & Javascript

Tripel-As

Dabei seit: 02.01.2011

21

Sonntag, 5. Juni 2011, 12:08

Schriftgröße ist bei Firefox unter Extras und da bei Inhalt. Ansonsten kannst du "strg" dücken und das Mausrad bewegen. Ich glaube "strg" und "+" bzw "-" geht genauso. Die Tastenkombination funktionieren in den meisten Browsern. Wenn Du ne feste Schriftgröße, wie 16px, angegeben hast, kann es sein, dass sie nicht funktionieren.
Und mit em, wie gesagt. Ich benutze die Werte relativ selten, da ich fast nur mit %-Werten arbeite. Sie bieten sich halt nur besser an als px-Werte, deswegen habe ich die hier mal in den Raum geschmissen

Gruß, Toast

Vulpire GbR - Marketingagentur in Köln und Dülmen

PhosGEN

König

Dabei seit: 21.02.2003

Beiträge: 767

22

Montag, 13. Juni 2011, 14:55

So...entschuldige die lnage Wartezeit aber hab wie immer viel um die Ohren.
Habe dein Konstrukt jetzt mal so nach gebaut, dass es wesentlich schlanker ist und trotzdem funktioniert. Musst es optisch natürlich noch an deine Wünsche anpassen. Die verschiedenen Farben habe ich zu deinem besseren Verständnis verwendet, damit du siehst welches Element wo hängt.

Da kannst du jetzt deine Hovereffekte etc einbauen - Menus, Bilder etc.

Habe es in Safari, Chrome, Opera und FF auf dme Mac getestet. Aber sollte unter Windows ebenfalls funzen.

HTML

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="js" lang="de" dir="ltr" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Ein SEO freundlicher Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="shortcut icon" href="mpw-favicon.ico">
    <link rel="stylesheet" type="text/css" href="style3.css" />
  </head>
 <body>
  
  <div id="wrapper">
  	<!-- ##### START - KOPFBEREICH #####-->
  	<h1 class="headline">Headline</h1>
  	<ul id="menu_main">
  		<li><a href="#">Home</a></li>
  		<li><a href="#">Inhalt</a></li>
  		<li><a href="#">Multimedia</a></li>
  	</ul>
  	<!-- ##### ENDE - KOPFBEREICH #####-->
  	
  	
  	<div id="content">
  	  	<!-- ##### START - LINKE SIDEBAR #####-->
  		<ul id="menu_sub">
  			<li><a href="#">Hauptseite</a></li>
  			<li><a href="#">Facebook</a></li>
  			<li><a href="#">Gaestebuch</a></li>
  		</ul>
  		<!-- ##### ENDE - LINKE SIDEBAR #####-->
  		
  		  		
  		<!-- ##### START - RECHTE SIDEBAR #####-->
  		<div id="content_right">login</div>
  	  	<!-- ##### ENDE - RECHTE SIDEBAR #####-->	
  		
  		
  		<!-- ##### START - MITTLERER CONTENTBEREICH #####-->
  		<p class="contentarea">
  			as hier soll mein persönlicher Platz im Web werden, da ich auf vielen Seiten die Individualität vermisse, die ich mir hier zum Beispiel mit einer eigenen Linksammlung schaffen möchte. Außerdem sind noch andere Features vorgesehen , die aber erst erdacht und gescriptet werden müssen. Aber alles in allem macht mir das ja auch Spaß, weswegen ich hierbei nicht so schnell locker lassen werde :-D

haha! falsch geraten
  		</p>	
  		 <!-- ##### ENDE - MITTLERER CONTENTBEREICH #####-->
  		
  	</div>
 
  </div>
   
 </body>
</html>

CSS

Quellcode

* {
margin:0;
padding:0;
border:0;
font: normal normal normal 16pt "Arial";
}
#wrapper{
width:100%;
height:100%;	
}
.headline {
position:absolute;
top:20px;
right:0;
margin:0 20px 100px 0;
}
#menu_main {
width:100%;
margin:100px 0 0;
padding-left:220px;
display:block;
background:#00ff00;
}
#menu_main li {display:inline;}
#content {
width:100%;
background:#00ffff;
}
#menu_sub {
float:left;
display:block;
width:200px;
background:#ffff00;
}
.contentarea {
margin:0 220px 0 220px;;
}
#content_right {
float:right;
width:200px;
background:#ff0000;
}

Gruß
Phos

All rights reserved, all wrongs observed.
···•(_.·´¯)··•¦PhoS¦•··(¯`·._)•···

Inceptor

Mitglied

Dabei seit: 25.05.2011

Beiträge: 38

23

Montag, 13. Juni 2011, 17:55

Zuerst mal möchte ich dir dafür danke, das du dir soviel mühe gemacht hast um mir bei meinem Problem zu helfen. :thumbup:

Hleichzeitig möchte ich aber noch zwei Sachen ansprechen, die sich mir noch nicht so gnaz erschließen...

Zitat

.headline {
position:absolute;
top:20px;
right:0;
margin:0 20px 100px 0;
}
#menu_main {
width:100%;
margin:100px 0 0;
padding-left:220px;
display:block;
background:#00ff00;
}

wieso gibst du beiden einen margin von 100px?
und wäre es nicht sinnvoller, wenn man die headline schon absolut positioniert, diese auch Nur absolute zu positioniern, sprichen den 20px-margin an der rechten seite lieber in Form von right:20px; zu definieren.
Außerdem wird das ganze bei mir nicht ganz korrekt dargestellt. ich habe egal bei welcher fenstergröße einen horizontalen scrollbalken.
Der kommt nach meiner Ansicht nach dadurch zustande, das du dem #menu_main die Weite 100% zugeordnet hast und gleichzeitig noch einen 220px breiten Innenabstand für das menu_sub definiert hast.
Aber das sind eher keinere Mängel... ich werde mal versuchen mein Projekt... sprich meine bilder auf dein konzept zu übertragen.
Wenn ich damit soweit fertig bin melde ich mich nochmal hier :thumbsup:

EDIT: ich habe jett in meiner Signatur mal den Link zu meiner Seite, da ich jetzt auch eine webspace habe!! ihr könnt ja mal reinschauen ;-)

mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Inceptor« (13. Juni 2011, 17:55)

Inceptor

Mitglied

Dabei seit: 25.05.2011

Beiträge: 38

24

Montag, 13. Juni 2011, 22:39

Ich zweifel langsam an mir selbst ... (Klapse ich komme :cursing:

)
@phos ich habe jetzt mal ein neues Konzept in Anlenung an deine Anregungen aufgestellt... (also was heißt neu, ich orientiere mich natürlich an dem Endergebniss was ich eigentlich erreichen will)
aber ich habe einfach mal die sache ein wenig entschlackt. ich wieder ein bisschen herumexperimentiert und wieder tauch dieser mysteriöse Pixel Abstand auf :wacko:

ch habe jetzt die möglichkeit euch das mal so zu zeigen wie es ist. Es ist zwar total schematisch aber man erkennt auf der test-Seite ganz gut worum es geht.
hier ist mal der Link: Klick
Wenn ihr Slot 1,2 oder 3 hovert erscheint eine weiter Liste, die lila hinterlegt ist. Schaut euch jetzt bitte mal die seite zuerst im FF und dann im Opera an.
ich häng den code in den Spoiler hier unten:

Spoiler
HTML
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="js" lang="de" dir="ltr" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="test.css" />
  </head>
 <body>
  
<div id="title">TITLE</div>



<div id="navigation">

<ul id="list">
<li>Slot1 <ul><li>Slot1.1</li><li>Slot1.2</li><li>Slot1.3</li><li>Slot1.4</li></ul></li>

<li>Slot2 <ul><li>Slot2.1</li><li>Slot2.2</li><li>Slot2.3</li><li>Slot2.4</li></ul></li>

<li>Slot3 <ul><li>Slot3.1</li><li>Slot3.2</li><li>Slot3.3</li><li>Slot3.4</li></ul></li>


</ul>

</div>



<div id="left">LEFT</div>

<div id="right">RIGHT</div>

<div id="content">CONTENT</div>
   
 </body>
</html>
Cascading Style Sheet
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
* {
margin:0;
padding:0;
border:0;
font: normal normal normal 16pt "Arial";
}

#title{
position:absolute;
top:0;
right:0;
background-color:red;
}

#navigation {
margin:5em 0 0;
background-color:blue;
height:2.5em;
text-align:center;
}

#left {
float:left;
background-color:green;
width:5em;
height:3em;
}

#right {
float:right;
background-color:brown;
width:5em;
height:3em;
}

#content {
background-color:orange;
height:2em;
}



#list li {
display:inline;
}

#list li ul li {
display:block;
text-align:left;
height:1.25em;
}

#list li ul  {
position:absolute;
top:0;
display:none;
background:purple;
width:100%;
}

#list li:hover ul {
display:block;
}

ich bin echt langsam am verzweifeln

und @ toast : ich hab des mit dem em mal versucht umzusetzten und ich komm langsam dahinter das die sache doch ganz angenhem ist :thumbsup:

und @phos: bitte editier mal deinen post und füg ein paar zeilenumbrüche bei dem text im contentarea ein... der post verzieht die ganze Seite

(oder packs in nen Spoiler)

EDIT: Ich glaube die sache hängt sich an den horizontalen listen ( ul ) auf aber ich weiß nicht was man da definieren muss um das Problem zu beseitigen. Kennt sich da jemand speziell aus?

mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Inceptor« (13. Juni 2011, 22:39)

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

25

Montag, 13. Juni 2011, 23:01

Zitat von »Inceptor«

Wenn ihr Slot 1,2 oder 3 hovert erscheint eine weiter Liste, die lila hinterlegt ist. Schaut euch jetzt bitte mal die seite zuerst im FF und dann im Opera an.
ich häng den code in den Spoiler hier unten:

was stört dich da die weiße Linie zwischen der blauen und der Lila box? Die entsteht durch Rundungsfehler da FF die em auf 3 stellen hinterm Komma in Pixel rundet enstehen sie da nicht bei anderen Browsern die das nicht machen entsteht diese weiße Linie da deine 4 Zeilen slot1-slot4 nur 104px hoch sind und der bereich oben aber 106px groß ist wird nicht alles abgedeckt

-LA

Inceptor

Mitglied

Dabei seit: 25.05.2011

Beiträge: 38

26

Montag, 13. Juni 2011, 23:10

Kann man es definieren ab wann der browser runden soll, sodass es einehitlich wird?
und wenn nicht... kann man als alternative nur auf px umsteigen. sehe ich das richtig? denn bei prozentualen Anagen würde ja uch gerundet werden oder?

mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport

PhosGEN

König

Dabei seit: 21.02.2003

Beiträge: 767

27

Montag, 13. Juni 2011, 23:37

Hey Inceptor, den Margin der Headline kannst du komplett entfernen, das war nur ein Überbelibsel meines Vorgedankens das ganze ohne eine absolute Positionierung zu machen. Habs nur hinterher vergessen es wieder zu entfernen.
Das Ganze soll nur ein Grundgerüst gewesen sein um zu zeigen, dass man das Ganze auch wesentlich einfacher und semantischer halten kann. Je weniger unnötige Elemente du haste desot weniger Fehler kannst du machen.

Gruß
Phos

stfschaefer

Routinier

Dabei seit: 21.08.2010

Beiträge: 251

28

Sonntag, 19. Juni 2011, 15:02

Zitat von »Inceptor«

und @toast ... wenn man die posts von dir so liest denkt man, das em eher nicht so geschickt ist, weil man ja auch % zur verfügung hat ;-) und btw wo kann man eigentlich die Schrift vergrößern?? ich hab mich mal durch sämtliche einstellungen von Opera und dem Ie durchgekämpft und nichts gefunden außer beim IE... aber da haben die Einstellungen nichts an meiner Seite verändert nicht mal die Schriftgröße

Die Einheit em ist besser, wenn man mit Vergrösserungen und Verkleinerungen der Schrift arbeitet, denn diese arbeiten da genauer. Die Einheit em ist speziell für die Schriften. Da du aber hauptsächlich Grafiken hast, fällt es wahrscheinlich nicht so ins Gewicht.

Quellcode

Quellcode

Zitat

HTML

Cascading Style Sheet

Zitat von »Inceptor«

Zitat von »Inceptor«

Ähnliche Themen