Alternative zu ifrrames
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
blocken
code
container
display
element
http
image
index
kasten
list
mache
navigation
normal text
position
rahmen
span
tab
text
tip
url
-
Hallo ich habe mal wieder ein problem: ich habe mir eine website erstellt: http://computercomputer.lima-city.de/index.html
damit die navigation nicht bei unterschiedlichen bildschirmauflösungen aus dem halbtransparenten kasten rutscht habe ich die ganze seite in ein iframe getan. Aber das kann nunmal keine Lösung seien. Gibt es noch irgendeinanderes Element das wie eine art rahmen ist und dass ich zu diesem rahmen einen abstand definieren kann?
ich hoffe ihr versteht was ich meine
danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Geht mal bitte auf die seite: http://computercomputer.lima-city.de/start.html (ohne iframe)
ihr seht rechts einen halbtransparenten kasten da soll das menü drin sein
wenn ich in css ohne iframe die angabe position: absolute top xx px right xx px mache verruscht die navigation aus dem halbtransparenten kasten bei verschiedenen bildschirm auflösungen.
oder kann man das anders mit css machen?
ich weiß dass ich mich etwas komisch ausdrücke ;)
Beitrag zuletzt geändert: 21.5.2009 11:43:46 von computercomputer -
Versuchs mal ohne position: absolute, und mach die Pixelangaben relativ zu dem nächsthöheren Element.
-
also so?
<div id="body"> hier kommt seiteninhalt hin</div>
und dann in der css beim menü mit padding oder wie?
ich kenn mich nur wenig mit css aus -
so hier:
<div id="body"> <div id="nav"> </div> </div>
#nav { margin-right: 50px; }
Dann ist nav 50px vom rechten Rand vom Container body entfernt. -
ich glaub ich bin zu doof dafür
hier mein quelltext:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html><head><title>background-position</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="chrome.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.bgpos.js"></script> </head> <body> <div id="body"> <div id="background"> <div id="MainMenu"> <div id="tab"> <ul> <li><a href="home.html"><span>Home</span></a></li> <li><a href="about.html"><span>About</span></a></li> <li><a href="contact.html"><span>Contact</span></a></li> </ul> </div> </div></div> <div style="clear:both; text-align:center; padding:10px;"></div> <script type="text/javascript"> jQuery(function(){ jQuery("#tab a") .css( {backgroundPosition: "right 0"} ) .mouseover(function(){ jQuery(this).stop().animate({backgroundPosition:"(right -33px)"}, {duration:400}) }) .mouseout(function(){ jQuery(this).stop().animate({backgroundPosition:"(right 0)"}, {duration:400}) }) jQuery("#tab a span") .css( {backgroundPosition: "left 0"} ) .mouseover(function(){ jQuery(this).stop().animate({backgroundPosition:"(0 -33px)"}, {duration:400}) }) .mouseout(function(){ jQuery(this).stop().animate({backgroundPosition:"(left 0)"}, {duration:400}) }) }); </script> </body></html>
und meine css datei:#background { background-image:url(images/img03.jpg); background-repeat:no-repeat; height:720px; width:1152; border-width:0px;} #MainMenu { width:150px; background:#FFF url border:0; margin:0; } #tab { top:0; height:0; margin-right: 50px; } #tab ul { list-style:none; float:left; margin:0; padding:0; } #tab li { float:left; clear:both; margin:0; padding:0; } #tab a { background:url(images/bright_110.gif) no-repeat right top; text-decoration:none; width:180px; border:0; display:block; float:left; margin:0; padding:0; } #tab a span { display:block; background:url no-repeat left top; font-family:\"Trebuchet MS\", Arial, Helvetica, sans-serif; font-size:13px; color:#FFF; font-weight:700; line-height:33px; padding:0 25px; } #tab a:hover,#tab li.item_active a { background-position:right bottom; } #tab a:hover span,#tab li.item_active a span { background-position:left bottom; color:#FFF; font-weight:700; font-style:normal; text-decoration:none; } .dropmenudiv { position:absolute; top:0; float:left; display:block; visibility:hidden; border:0; background:#FFF url(images/bmid_110.gif); color:#FFF; z-index:100; text-decoration:none; padding:0; } .dropmenudiv ul { list-style:none; margin:0; padding:0; } .dropmenudiv li { display:inline; margin:0; padding:0; } .dropmenudiv a:link,.dropmenudiv a:visited { width:180px; display:block; border:0; color:#FFF; background:url(images/bleft_110.gif) no-repeat left top; font-weight:700; font-style:normal; text-decoration:none; margin:0; padding:0; } .dropmenudiv a span { display:block; line-height:33px; background:url(images/bright_110.gif) no-repeat right top; font-family:\"Trebuchet MS\", Arial, Helvetica, sans-serif; font-size:13px; color:#FFF; float:none; padding:0 25px; } .dropmenudiv a:hover { border:0; background-position:left bottom; font-weight:700; font-style:normal; text-decoration:none; color:#FFF; } .dropmenudiv a:hover span { background-position:right bottom; color:#FFF; font-weight:700;
"tab" ist bei mir das menü, das menü klebt aber immer noch links oben was habe ich falsch gemacht? -
#tab { margin-top: 50px; height: 100px; margin-left: 50px; } -
sry das ich mich erst so spät wiedermelde
das klappt auch nicht dann ist navi immer unter dem background könnte vielleicht mal jemand den fertien quelltext /css code reinschreiben? weil entweder mache ich was falsch oder die lösung von cockie klappt nicht
vielen dank -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
. Ohne Frames mag Google Deine Seite auch gleich vieeel mehr.Zudem sieht es professioneller aus 
