One size fits all ?!

huiuiui.. kenne mich leider mit css nicht aus könntest du da mal n auszug machen ?
also wei das dann ungefähr aussieht der Quelltext ?
Switch.kid
 
ok das habe ich geschafft, nur leider liegt das Fenster vom Finder nun unter Dem Hintergrundbild...
wie kann ich das jetzt ändern ??
 
Switch-Kid schrieb:
huiuiui.. kenne mich leider mit css nicht aus könntest du da mal n auszug machen ?
also wei das dann ungefähr aussieht der Quelltext ?
Switch.kid

ich hab dir mal ganz grob was zusammengeloppt ;)

ist ein skalierbares bild und oben eine menueleiste (dein finderfenster machst du im prinzip genauso, halt nicht in ein ul sondern in ein div.

den rechten scrollbalken hab ich noch nicht weggemacht (geht aber auch) und getestet hab ich's auch nur mit safari - wär noch einiges an arbeit zu leisten bevor es fertig wär ... vielleicht hilft dir aber das prinzip :)

die seite liegt hier local (also geduld beim aufrufen - mein dsl upload ist echt mau :D ) - ausserdem werd ich sie in ein/zwei tagen wieder entfernen ...

http://lyric-comic-art.de/art/triaden

stylesheet: http://lyric-comic-art.de/art/triaden/tria.css
 
Zuletzt bearbeitet:
wow... super.. das war genau das wonach gesucht habe *THUMBS UP*
aber wieso sieht das auf der startseite jetzt so aus http://www.zauberer-von-os.de.ms ??
was habe ich jetzt schon wieder falsch gemacht ?
Bitte ein letztes mal helfen ;)
Switch
 
Switch-Kid schrieb:
Kann man zwei map's übereinander haben ???
siehe meine seite http://www.zauberer-von-os.de.ms
Das wäre nämlich sehr wichtig

Danke

geht schon per position - denk an die z achse ... wenn du sie irgendwo definierst solltest du das überall machen ;)

aber geht ja schon in die richtige richtung!

an und für sich ist es sinnvoller die styles extern zu verlinken - so kannst du z.b. styleänderungen auf einen schlag für viele seiten erreichen (gibt noch etliche andere vorteile) - am besten du machst das von anfang an :)

/* das */ sind auskommentierte styles :D
 
ups :D
hab kaum ein wort inhaltlich verstanden was du meintest...
wie sollte ich das denn dann umsetzen ?
 
Switch-Kid schrieb:
ups :D
hab kaum ein wort inhaltlich verstanden was du meintest...
wie sollte ich das denn dann umsetzen ?

du hast ein z1 und ein z3 und du willst eigentlich drei sachen übereinanderstapeln ;) ...

wenn du das style extern verlinkst, kannst du zum testen die html im browser offen lassen und das css in textwrangler (my favorite editor :D) - dann das css ändern und beim browser auf aktualisieren - alldieweil das was du vorhast ist mit viel experimentieren und *rumgefrickel* verbunden :cool:
 
hmm.. ich kriegh das auch nicht hin, kpönntest du da mal bitte ein beispeil anfertigen ?
wäre dir sehr dankbar
ach und, wieso lädt sich das Hintergrundbild immer neu ?? kann das nicht enfach bleiben ? Wenn ich mache im frame darstellen dann lädt das nicht immer neu... aber so..

bis dann
switchi
 
Zuletzt bearbeitet:
du möchtest doch 5 objekte auf deiner site:
a. hintergrund
b. menue
c. finder
d. finderinhalt
e. dock

der html source müsste dann so aussehen (achte auf die reihenfolge ;) )
HTML:
<img src="deinbild" ....>
< div id="menue">
xxxx
</div>
< div id="finder">
xxxx
</div>
< div id="inhalt">
xxxx
</div>
< div id="dock">
xxxx
</div>

da wo die xxx sind kannst du text oder andere divs oder imagemaps ... einsetzen. wenn du die reihenfolge im sourcecode einhältst, hast du gute karten, ohne z index [der dann in der css datei stehen müsste :D ] auszukommen (ansonsten testen, testen, ...)

im header hast du
HTML:
<link rel="stylesheet" type="text/css" href="dein.css"/>
der verweis auf eine textdatei mit der endung .css in der die formatierungsbefehle (position etc.) stehen.

zu dem problem des neuladens:
so wie ich es verstehe ändert sich ja nur der inhalt div. wenn ja könntest du ja - da du sowieso mit frames arbeitest - in diesen div einen iframe einsetzen (ich hör schon den aufschrei der css puristen :D es gibt da noch etliche andere möglichkeiten ... )
 
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



<html>

<head>
<link rel="stylesheet" type="text/css" href="dein.css"/>
	<title>Zauberer-von-OS</title>

<style>

body    {  background-color: black; margin: 0px; padding: 0px }

/*body    { font-family: "Courier New", Courier, Monaco; background-color: black; text-align: center; margin: 0px; padding: 0px }*/

img { border: none 0px }

#bgimg { width: 100%; height: 100%; margin: 0px; padding: 0px }



.was       { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 0px }
.was:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 0px }
.what  { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 72px }
.what:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 72px }
.who { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 120px }
.who:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 120px }
.wer    { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 163px }
.wer:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 163px }
.wie    { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 205px }
.wie:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 205px }
.how  { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 244px }
.how:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 244px }
.where { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 287px }
.where:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 287px }
.wo    { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 341px }
.wo:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 341px }
.warum    { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 379px }
.warum:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 379px }
.why  { border-top: 4px solid #696969; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 435px }
.why:hover { border-top: 4px solid maroon; border-right: 0px; border-bottom: 0px; border-left: 0px; position: absolute; top: 0px; left: 435px }

/*
.top { color: #dcdcdc; background-color: #dcdcdc; text-align: center; position: absolute; bottom: 110px; left: 10px; width: 200px }
.link { color: #dcdcdc; background-color: #dcdcdc; text-align: center; position: absolute; bottom: 80px; left: 90px; width: 200px }
.down { color: #dcdcdc; background-color: #dcdcdc; text-align: center; position: absolute; bottom: 50px; left: 180px; width: 200px }
.imp { color: #dcdcdc; background-color: #dcdcdc; text-align: center; position: absolute; bottom: 20px; left: 260px; width: 200px }
*/

ul  { list-style-type: none }

/*ul  { list-style-type: none; position: absolute; top: 0px; left: 0px }*/



</style>







<style type="text/css"><!--
 .examplediv
 {
  background-color:#efefef;
  border-style:solid #000000 1px;
 }
#divid
{
 position:absolute;
 left:450px; top:350px; width:300px; height:150px;
}
// --></style>









</head>



<body scroll="no">










<div style="position: absolute; z-index: 3; overflow: auto; width: 100%; height: 100%;">

<p>&nbsp;</p>

<div align="center">



<map name="Start">



<area shape="rect" coords="5,59,78,84" href="index.html" alt="Ab zur Hauptübersicht">

<area shape="rect" coords="5,94,105,117" href="Dateien.html" alt="Übersicht über alle Dateien">

<area shape="rect" coords="5,133,104,160" href="http://community.forenshop.net/forums/index.php?mforum=Hagbard" alt="Forum !">

<area shape="rect" coords="5,175,115,205" href="http://475079.guestbook.onetwomax.de" alt="Gästebuch !">

<area shape="rect" coords="5,227,100,255" href="Programme.html" alt="Programme für mac und windows">

<area shape="rect" coords="5,258,97,284" href="Dokumente.html" alt="Einige uninteressante Dokumente">

<area shape="rect" coords="5,291,75,318" href="Videos.html" alt="Funclips">

<area shape="rect" coords="5,322,78,348" href="Music.html" alt="Einige uninteressante Dokumente">

<area shape="rect" coords="5,353,76,377" href="Pics.html" alt="Funclips">

<area shape="rect" coords="6,1,24,17" href="index.html" alt="Exit">

<area shape="rect" coords="244,140,336,211" href="Impressum.html" alt="Exit">



<img src="mama.png" usemap="#Start" border="0" align"center">

</div>

</map>





</div>


<map name="Hinter">




<area shape="rect" coords="1432,46,1536,170" href="index.html" alt="Ab zur Hauptübersicht">

<area shape="rect" coords="5,94,105,117" href="Dateien.html" alt="Übersicht über alle Dateien">

<area shape="rect" coords="5,133,104,160" href="http://community.forenshop.net/forums/index.php?mforum=Hagbard" alt="Forum !">

<area shape="rect" coords="5,175,115,205" href="http://475079.guestbook.onetwomax.de" alt="Gästebuch !"


<img src="aqua.jpg" usemap="#Hinter" border="0" align"center">


</div>




</body>

</html>




was ist denn daran falsch, ich kapier das nicht, da wird das bild unter dem anderen angezeigt, es geht jetzt erstmal nur darum das eine aufs andere zu packen
 
Zurück
Oben Unten