zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ratschläge bei Publizierung eines fertigen Layouts gesucht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #41 (permalink)  
Alt 31.08.2004, 12:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2004
Beiträge: 65
Black Fladder befindet sich auf einem aufstrebenden Ast
Standard

Und wie ich den gelesen hab, ich dachte nur der bezieht sich wieder auf die anderen Grafiken und da wär n Unterschied - nya was solls, dann halt nommal
Mit Zitat antworten
Sponsored Links
  #42 (permalink)  
Alt 31.08.2004, 20:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2004
Beiträge: 65
Black Fladder befindet sich auf einem aufstrebenden Ast
Standard

Warum ich glaubte, dass der Code net passt - die obere Leiste hats net angezeigt, aber nur, weil ich vergessen hab die absolute URI durch ne relative auszutauschen --> Ziel der absoluten Addy existiert nimmer

Beim aktuellen Stand gibts nur ein Prob - Darstellung im Großen und Ganzen bei Opera korrekt - nur wird beim zusammenschieben des Fensters auf der rechten Seite der Übergang zwischen roter Grafik und Rest des Balkens ersichtlich --> verschiebt sich - allerdings nur beim IE (6.0, anderen hab ich net) und leider au beim Mozilla 1.72 ;_; . Außerdem ist das hier ein anderer Fall wie bei der anderen Verschiebung - denn "damals" stimmten die Grafiken in sich nicht, hier handelt sichs nur um eine "ein-pixelgroße, temporäre Verschiebung".

Hier der Code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Musikverein Herlikofen 1930 e.V.</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
<!-- 
body {background-color:#FFFFFF;} 
#bigdiv {   position:relative; 
margin:5% 10% 0 10%; 
background:#fff url(Bilder/streifenh.gif) repeat-x  top; 
 } 
  
/* Tan Hack */ 

* html #bigdiv   /* dies wird nur von den IEs interpretiert*/ 
{ 
   width: 100%; /*Wert für den IE5*/ 
      w\idth: 80%; /*Wert für den IE6*/ 
} 

#leftdiv { 
background:url(Bilder/streifenv.gif)  repeat-y left; 
height:100%; /*braucht der IE*/ 
 } 
#rightdiv { 
background:url(Bilder/streifenv.gif)  repeat-y right; 
height:100%; /*braucht der IE*/ 
} 
#inhalt { 
padding-top:100px; 
margin:0 190px; 
min-height: 400px; 
} 

*html  #inhalt {height:400px; }    /*nur für den IE*/ 
--> 
</style> 
</head> 
<body>    
<div id="bigdiv"> 
[img]Bilder/ol.gif[/img] 
[img]Bilder/or.gif[/img] 
  <div id="leftdiv"> 
    <div id="rightdiv"> 

      <div id="inhalt"> und hier der Inhalt hin</div> 
    </div> 
     
  </div> 
   
</div> 
 
</body> 
</html>
Hier zu sehen:

http://www.mv-herlikofen.de/testindex5/index.htm


Hier ein Screenie, ders verdeutlicht:

Mit Zitat antworten
Sponsored Links
  #43 (permalink)  
Alt 31.08.2004, 20:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Ja, so hab ich das gemeint!

Wenn Du aus den -57px einfach -58px machst, dann paßt es im IE und Mozilla, im Opera ist es dann aber um ein Pixel verschoben (jedenfalls zwischen 800 und 1024px Breite).

Genau das hab ich gemeint, als ich Dir empfohlen hab, gifs zu nehmen, bei denen es nicht auf ein Pixel ankommt. So macht irgendein Browser mal einen Rundungsfehler beim Rendern, und schon verschiebt es sich ein wenig. Und das fällt halt auf und ist unschön.

Eine echte Lösung hab ich da aber nicht. Stell es auf den IE ein, der wird immer noch am meisten genommen. Wenn es sich dann in anderen Browsern manchmal um 1 pixel verschiebt, dann ist das halt Pech.

So, dann verschöner jetzt noch mal den Code, indem Du den Bildern class zuweist und lager die Positionierung aus (erstmal in den Head).

Und dann warte ich auf Vorschläge für Menü und Inhaltsblöcke!
Mit Zitat antworten
  #44 (permalink)  
Alt 31.08.2004, 21:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2004
Beiträge: 65
Black Fladder befindet sich auf einem aufstrebenden Ast
Standard

Unglaublich, dass bei mir auch gar nix funktioniert:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Musikverein Herlikofen 1930 e.V.</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
<!-- 
body {background-color:#FFFFFF;} 
#bigdiv {   position:relative; 
margin:5% 10% 0 10%; 
background:#fff url(Bilder/streifenh.gif) repeat-x  top; 
 } 


#ol { display:block; position:absolute; top:-16px; left:-66px; }
#or { display:block; position:absolute; top:-16px; right:-57px; }


  
/* Tan Hack */ 

* html #bigdiv   /* dies wird nur von den IEs interpretiert*/ 
{ 
   width: 100%; /*Wert für den IE5*/ 
      w\idth: 80%; /*Wert für den IE6*/ 
} 

#leftdiv { 
background:url(Bilder/streifenv.gif)  repeat-y left; 
height:100%; /*braucht der IE*/ 
 } 
#rightdiv { 
background:url(Bilder/streifenv.gif)  repeat-y right; 
height:100%; /*braucht der IE*/ 
} 
#inhalt { 
padding-top:100px; 
margin:0 190px; 
min-height: 400px; 
} 

*html  #inhalt {height:400px; }    /*nur für den IE*/ 
--> 
</style> 
</head> 
<body>    
<div id="bigdiv"> 


[img]Bilder/ol.gif[/img] 
[img]Bilder/or.gif[/img] 


  <div id="leftdiv"> 
    <div id="rightdiv"> 

      <div id="inhalt"> und hier der Inhalt hin</div> 
    </div> 
     
  </div> 
   
</div> 
 
</body> 
</html>
Hab doch die class richtig definiert, alle Angaben übernommen, # nicht vergessen, css-Angaben richtig definiert - wieso geht des net?

EDIT: Sorry im Code-Block werden keine Editierungen interpretiert, sonst hätt ichs fett gemacht
Mit Zitat antworten
  #45 (permalink)  
Alt 31.08.2004, 21:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Was ist der Unterschied zwischen id und class?

Wie zeichne ich eine id aus, und wie eine class?

So als Hinweis........
Mit Zitat antworten
  #46 (permalink)  
Alt 31.08.2004, 22:44
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2004
Beiträge: 65
Black Fladder befindet sich auf einem aufstrebenden Ast
Standard

No Comment *g*

Voilà, hab n ganzes Stück weitergemacht - durch die Ausrichtung, wie dus hier siehst, gibts auch nur im Mozilla das Ausrichtungsprob - allerdings zeigen Opera und der IE den linken Balken nicht mehr an, der Mozilla dagegen schon.

Site:

http://www.mv-herlikofen.de/testindex2/index.htm

Code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Musikverein Herlikofen 1930 e.V.</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
<!-- 

#linkenavi {background-color:#FF0000; position:absolute; top:150px; left:20px; width:80px; }

#navioben {background-color:#FF0000; position:absolute; top:50px; width:100%; }

#uschrift {margin:0 55% 0 45%; }

body {background-color:#FFFFFF;} 
#bigdiv {   position:relative; 
margin:5% 10% 0 10%; 
background:#fff url(Bilder/streifenh.gif) repeat-x  top; 
 } 

.ol { display:block; position:absolute; top:-16px; left:-66px; }
.or { display:block; position:absolute; top:-16px; right:-57px; }
  
/* Tan Hack */ 

* html #bigdiv   /* dies wird nur von den IEs interpretiert*/ 
{ 
   width: 100%; /*Wert für den IE5*/ 
      w\idth: 80%; /*Wert für den IE6*/
   font-family: Arial, Helvetica, sans-serif;
} 

#leftdiv { 
background:url(Bilder/streifenv.gif)  repeat-y left; 
height:100%; /*braucht der IE*/ 
 } 
#rightdiv { 
background:url(Bilder/streifenv.gif)  repeat-y right; 
height:100%; /*braucht der IE*/ 
} 
#inhalt { 
padding-top:100px; 
margin:0 190px; 
min-height: 400px; 
} 

*html  #inhalt {height:400px; }    /*nur für den IE*/ 
--> 
</style> 
</head> 
<body>    
<div id="bigdiv"> 
[img]Bilder/ol.gif[/img] 
[img]Bilder/or.gif[/img] 
  <div id="navioben"><p id="uschrift">&Uuml;berschrift</p></div
  <div id="leftdiv">
  <div id="linkenavi">Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test</div> 
    <div id="rightdiv"> 
	  
      <div id="inhalt"> und hier der Inhalt hin</div> 
    </div> 
     
  </div> 
   
</div> 
 
</body> 
</html>
Mit Zitat antworten
  #47 (permalink)  
Alt 31.08.2004, 22:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Black Fladder
allerdings zeigen Opera und der IE den linken Balken nicht mehr an, der Mozilla dagegen schon.
Naja, so kannst Du's ja nicht lassen, oder?

Dann tüftel mal noch ein wenig. Überlege mal, wofür wir diese drei ineinanderverschachtelten Container gebraucht hatten?

Und noch was zum Menü selber: am sinnvollsten gestaltest Du das als Liste - lies mal ein wenig im Forum, da solltest Du einiges darüber finden.
Mit Zitat antworten
  #48 (permalink)  
Alt 01.09.2004, 19:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2004
Beiträge: 65
Black Fladder befindet sich auf einem aufstrebenden Ast
Standard

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Musikverein Herlikofen 1930 e.V.</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
<!-- 
#linkenavi {list-style-type:none; background-color:#FF0000; position:absolute; top:150px; left:-25px; }

#navioben {background-color:#FF0000; position:absolute; top:50px; width:100%; }

#uschrift {margin:0 55% 0 45%; }

body {background-color:#FFFFFF;} 

#bigdiv {   position:relative; 
margin:5% 10% 0 10%; 
background:#fff url(Bilder/streifenh.gif) repeat-x  top; } 

.ol { display:block; position:absolute; top:-16px; left:-66px; }
.or { display:block; position:absolute; top:-16px; right:-57px; }
  
/* Tan Hack */ 

* html #bigdiv   /* dies wird nur von den IEs interpretiert*/ 
{ 
   width: 100%; /*Wert für den IE5*/ 
      w\idth: 80%; /*Wert für den IE6*/
   font-family: Arial, Helvetica, sans-serif;
} 

#leftdiv { 
background:url(Bilder/streifenv.gif)  repeat-y left; 
height:100%; /*braucht der IE*/ 
 } 
#rightdiv { 
background:url(Bilder/streifenv.gif)  repeat-y right; 
height:100%; /*braucht der IE*/ 
} 
#inhalt { 
padding-top:100px; 
margin:0 190px; 
min-height: 400px; 
} 

*html  #inhalt { height:400px; }    /*nur für den IE*/ 
--> 
</style> 
</head> 
<body>    
<div id="bigdiv"> 
[img]Bilder/ol.gif[/img] 
[img]Bilder/or.gif[/img] 
  <div id="navioben"><p id="uschrift">&Uuml;berschrift</p></div>
  <div id="leftdiv">
     <div id="rightdiv"> 
	        <div id="inhalt"> und hier der Inhalt hin</div> 
	<div>
    <ul id="linkenavi">
	[*]Men&uuml;punkt
	[*]Men&uuml;punkt
	[*]Men&uuml;punkt
	[*]Men&uuml;punkt	
	[/list]	</div>
	</div> 
     
  </div> 
   
</div> 
 
</body> 
</html>

So siehts grad aus.

Hier die Addy:

http://www.mv-herlikofen.de/testindex5/Index.htm

Allerdings:

im Mozilla und Opera wern die Schriftdefinitionen, so wie sie jetzt sin, das heißt die Schriftart, nicht übernommen - außerdem stellt mir der Mozilla den linken Menüdiv auch n bissel komisch dar, muss aber kein Problem sein, weil sie ja nachher nicht rot, sondern transparent sind

Über die Angaben für Schriften werd ich mir eh nommal Gedanken machen - wohl eine dokumentweite ID definiern or so

Gruß
Fladdy
Mit Zitat antworten
  #49 (permalink)  
Alt 02.09.2004, 11:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Mühsam ernährt sich das Eichhörnchen, aber o.k.. Weiter geht's im Workshop.

Hier ein paar Denkanstöße:
Betrachte die drei Container #bigdiv, #leftdiv und #rightdiv mal als einen einzigen. Ich habe drei machen müssen, weil man pro Container nur einen Hintergrund definieren darf.

Alles weitere passiert jetzt eigentlich innerhalb dieser Aussencontainer (die Bilder kannst Du im Quelltext dort lassen).

Für das Menü würde ich einen extra Container definieren und dort die Liste hineinsetzen. Später kannst Du das Ganze noch verschönern (s. hier: http://css.maxdesign.com.au/listutorial/index.htm ) - aber für's erste lass das nochmal, zuerst muss die Grundstruktur sitzen. Du hast jetzt absolut positioniert. Das geht zwar, ist aber nicht nötig. Du könntest auch mit float:left positionieren (nachlesen, wie's geht!). Und überlege, wie dann der Inhaltscontainer positioniert werden muß - was ich gemacht hab, war nur schnell und vorläufig, noch nicht zuende gedacht.

Und nochwas: Wie werden Überschriften mit HTML ausgezeichnet?
So jedenfalls nicht: <p id="uschrift">&Uuml;berschrift</p></div>

Genug Hausaufgaben für die nächste Runde! - Ich hoffe, Du verstehst allmählich auch ein wenig, wie es funktioniert.

Bezüglich der Schriften: da ist noch gar nichts definiert. Dokumentenweit kann das einfach im Body definiert werden. Bitte auch nachlesen. Machen wir später, wenn die Grundstruktur sitzt.

Ach übrigens: das Forum hier hat eine Suchfunktion und fast alle Themen sind schon besprochen worden. Nutzen!
Mit Zitat antworten
Sponsored Links
  #50 (permalink)  
Alt 02.09.2004, 20:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2004
Beiträge: 65
Black Fladder befindet sich auf einem aufstrebenden Ast
Standard

Die Site oben hab ich auf meiner Suche nach Menüs mit Listen auch gefunden - ich hab die Überschrift in nen <h1>-Tag gesteckt und dendann im Header oben näher definiert.

Beim Floaten häng ich aber - bin schon einiges durchgegangen und hab auch versucht was umzusetzen,aber des will net so recht. Hab mir zum besseren Verständis auch noch andere Divs mit unterschiedlichen Hintergrundfarben hervorgehoben aber es hakt trotzdem noch.

Kannst mir da nochmal nen Tipp geben?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 22:21 Uhr.