banner

hi..hab grade ne ne homepage hochgeladen.

Nur jetzt verschiebt sich bei versch. Auflösungen der Banner jedes mal,
wie kann den banner anpassen an alle Auflösugen?

driver

ohne link oder quelltext können wir schlecht helfen....

wie bindest denn den banner ein ?

natürlich, entschuldigung!
(Hab für zwei Freunde ne kleine Homepage gebastelt,
da sie ein Jahr in Australien sind und uns gerne Bilder und Stories
zeigen/erzählen wollten )

http://www.gunnar-till.de.vu

So ich bin davon ausgegangen, das die meisten 1024x768 als Auflösung haben,
jetzt hör ich aber von immer mehr leuten, dass sie 800x600 bzw 1280x1024 haben.
Doch dann verschiebt sich logischerweise der Banner immer.
Jetzt bräuchte ich irgenteinen Code, der das verhindert.
Vll habt ihr ja Ideen!
Hier nochmal das Css-File

Code

body{
color:black;
background-image:url(background2.jpg);
margin:0;
padding:0;
font:13px verdana, sans-serif;}




#container{
background-image:url(sand.jpg);
padding:0;
margin:0 10% 0 10%;}






#head{
height:140px;
background:#98bed1;
background-image:url(banne2.jpg);}




#menu{
margin:0;
padding:0;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:center;}
#menu ul{
background-image:url(bg.jpg);
margin:0;
padding:5px;
list-style:none;
white-space: nowrap;}
#menu li{
display:inline;}
#menu a{
color:white;
background:#98bed1;
padding:2px 20px 2px 20px;
border:1px solid black;
font:bold 12px verdana, sans-serif;
text-decoration:none;
text-align:center;}
#menu a:hover{color:white;background-image:url(bg.jpg);}




#submenu{
float:left;
width:100px;}
#submenu ul{
margin:0px;
padding:0 30px 0 10px;
list-style:none;}
#submenu li{
padding:0 0 4px 0;
margin:0;}
#submenu a{
color:#000099;
background:transparent;
font-weight:bold;
font-size:12px;
text-decoration:none;}
#submenu a:hover{color:blue;text-decoration:underline;}
#submenu p{
font-weight:bold;
font-size:12px;
padding:20px 0 10px 10px;
margin:0;}




#content{
color:black;
background:white;
padding:40px 20px 20px 20px;
margin:0 0 0 120px;
border-left:1px solid black;}
#content h1{
margin:0 0 10px 0;
padding:2px 0 2px 5px;
font:bold 16px verdana, sans-serif;
border-left:10px solid #003399;
border-bottom:1px solid #003399;}
#content h2{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 14px verdana, sans-serif;
border-left:8px solid #003399;
border-bottom:1px solid #003399;}
#content h3{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 12px verdana, sans-serif;
border-left:6px solid #003399;
border-bottom:1px solid #003399;}
#content p{padding:15px;}




#foot{color:black;
background-image:url(bg.jpg);
padding:0;
margin:0;
border-top:1px solid black;}
#foot p{margin:0;padding:4px;text-align:right;}

Alles anzeigen

Vielen Dank!

driver

hm... ich würd sagen... du machst um die ganze seite noch nen großen
div-container, der praktisch alles einschließt. den zentrierste und gibst ihm
ne feste größe. dann is alles auflösungsunabhängig...

wie zentriere ich denn? wie geb ich ihm ne Feste größe??
kannste das vll anhand meines codes machen?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>..::Gunnar-till.de.vu::..</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="old.css" />
<style type="text/css">
<!--
@import url(main.css);
-->
</style>
</head>
<body>
<div id="container">
<div id="head"></div>
<div id="menu">
<ul>
	[*][url='index.htm']home[/url]
	[*][url='news.htm']news[/url]
	[*][url='fotos.htm']Fotos[/url]
	[*][url='gb.htm']Gästebuch[/url]
	[*][url='about.htm']about australia[/url]

[/list]
</div>


<div id="submenu">


</div>


<div id="content">
<h1>Herzlich Willkommen!</h1>
Herzlich Willkommen auf tillundgunnar.de! 


Auf dieser Homepage könnt ihr das gesamte Leben 


von Gunnar und Till in Australien verfolgen.


Sowohl aktuelle News, als auch Fotos werden 


hier in Kürze zusehen sein. 


Außerdem könnt ihr im Gäste Buch einen kurzen 


oder auch langen Beitrag oder Kommentar  


hinterlassen.


<HR></HR>
Die Homepage wurde erst einmal für die 


Auflösung 1024x768 programmiert und aus 


zeitlichen Gründen ein "einfaches" Design 


erstellt. 


In den nächsten Tagen werde ich das gesamte 


Konzept noch einmal überarbeiten. 


Die ersten Bilder und News werden 


voraussichtlich Freitag bereit stehen. 










Falls noch irgentwelche Mängel vorhanden sind 


werden die natürlich auch behoben, aber ich denke mal 


das die Seite auch so ihren Zweck erfüllen wird. 




Viel Spaß auf der Seite! 


Bis bald! 






[b]
Gunnar & Till
[/b]
</div>


<div id="foot">
<div align="center>
<marquee>
e-mails an: [email]gunnar-till@web.de[/email]  
</marquee>








</div>
</div>


</div>
</body>
</html>

Alles anzeigen

wär nett;)
Thx

driver

gib mal in den container die css ein:

Code

position:absolute;
width:800px;
margin-left:-400px;
left:50%;

die breite musst halt anpassen (margin-left is immer die hälfte davon)

mhhh funktioniert immer noch nich....
Das Problem ist halt, das ich selber die Auflösung 1024x768 habe,
dh. das sich bei einer größeren Auflösung der Banner immer wiederholt.
Rechts dort wo der Übergang zum Ende gekommen ist (gelb) fängt dann der Orange Teil wieder von vorne an und das sieht dumm aus...!
Vll fällt euch ja noch was ein...
Danke!

driver ich hab mir grade ma deine Homepage angeguckt,
die ist vom Html-Code her ja auch nich sooooo aufwendig,
trotzdem bleibt dein Banner immer gleich....
Was haste denn beim Css-File "eingestellt"?

driver

des wo ich oben wiedergegeben hab. is so 1:1 aus meiner homepage...

König Florian von Franken

dass sich das banner wiederholt ist wahrscheinlich, weil dus als HG eingesetzt hast.

probiers mal mit nem simplen

background-repeat: no-repeat;

ich weiss, ich hab nich so viel ahnung wie driver, aber er hats scheinbar überlesen

dazu packst du ein

background-position: center;

und es sollte hinhauen (in die css)

d.h. deinen "#head" suchen und wie folgt ergänzen:

Code

#head{
height:140px;
background:#98bed1;
background-image:url(banne2.jpg); 
background-repeat: no-repeat;
background-position: center;
}

erschlagt mich, wenn ich lüge

::RMB::

driver
Wenn es mir recht ist hat der IE n Problem mit left:50%; margin-left:-400px;
wenn das Fenster kleiner ist/wird gerät der Div Container links raus aus der Seite.

Die einfachere und bessere Variante, die ich seit einiger Zeit einsetzte ist:
margin:0px auto 0px auto;

Aso dann so:

Code

#container {
background-image:url(sand.jpg);
margin:0px auto;
margin:0pt 10%;
padding:0pt;
padding:0px;
width:800px;
}

Und worauf du achten solltest.
du definierst tags für #container in deinen CSS Dateien doppelt

driver

welchen ie hast du ? bei mir im ie6 klappt des nämlich problemlos....

::RMB::

Ich habe alle IE's 5.0 bis 7.0
Vom zentrieren her schon.
Aber wenn das Fenster schmaler wird, rutscht die Seite Links aus dem Fenster.

Das Bild zeigts.

Ist doch nicht nur im IE sondern auch im FF...

driver

aso... naja.... wenns anders wär wäre auf der rechten
seite halt nochmal die hälfte weg... von daher find ich
des momentan nicht soo tragisch...

aber deine methode werd ich mir trotzdem mal anschauen

Tags