1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

banner

  • 6. Juli 2007 um 18:07
  • Gast
    • 6. Juli 2007 um 18:07
    • #1

    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
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 6. Juli 2007 um 19:21
    • #2

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

    wie bindest denn den banner ein ?

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  • Gast
    • 6. Juli 2007 um 21:03
    • #3

    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
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 6. Juli 2007 um 21:25
    • #4

    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...

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  • Gast
    • 6. Juli 2007 um 21:38
    • #5

    wie zentriere ich denn? wie geb ich ihm ne Feste größe?? :D
    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
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 6. Juli 2007 um 22:03
    • #6

    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)

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  • Gast
    • 7. Juli 2007 um 11:56
    • #7

    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!

  • Gast
    • 7. Juli 2007 um 12:00
    • #8

    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
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 7. Juli 2007 um 19:36
    • #9

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

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  • König Florian von Franken
    Schüler
    Beiträge
    93
    • 23. Juli 2007 um 14:00
    • #10

    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 ;)

    "Es gibt nichts, was sich nicht durch genügend Feuerkraft lösen liesse" -®Florian Bauer- *14.01.1988 †heute

  • ::RMB::
    Forum Guru
    Reaktionen
    1
    Beiträge
    4.139
    • 27. Juli 2007 um 04:12
    • #11

    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 ;)

    Facebook Gruppe: Böses Encoding

  • driver
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 27. Juli 2007 um 06:51
    • #12

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

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  • ::RMB::
    Forum Guru
    Reaktionen
    1
    Beiträge
    4.139
    • 27. Juli 2007 um 12:41
    • #13

    Ich habe alle IE's :D 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...

    Bilder

    • screenshot1.png
      • 389,15 kB
      • 620 × 994

    Facebook Gruppe: Böses Encoding

  • driver
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 27. Juli 2007 um 13:54
    • #14

    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

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

Tags

  • banner
  • bilder
  • homepage
  • style
  • web
  • body
  • jpg
  • code
  • ban
  • bot
  • bottom
  • sparen
  • freunde
  • transparent
  • inline
  • css
  • image
  • container
  • align
  • underline
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern