Loading...   Upload Image

Probleme über Probleme...Forum » Webzone » (X)HTML & CSS » Probleme über Probleme...

Neues Thema verfassen Neues Thema

  • MindFreakUser ist offline
    Newbie



    Registriert: 16.02.2008
    Beitraege: 16

    06.08.2008 um 16:37 Uhr

    Hallo miteinander :) Ich arbeite seit heute wieder an einem neuen Layout und nun ja bisschen Probleme gibt es als Grundgerüst habe ich mich mal an den Code von Alice Tuts (Photoshop in XHTML). So nunja, so weit so gut nun will ich oben eine Navigation mit Rollover machen habe mir gedacht "mh wenn schon css dann richtig" also wollte ich die nicht in eine Tabelle machen (was eh nicht gut ist^^) und habe mir ein Tut von Giatu geschnappt und zwar dieses hier http://giatu.de/tutorial.php?id=407

    nun sieht es so aus:
    http://deepside.org/4/

    Ich weiß nun nicht wie ich die Position richtig festlegen kann, wenn ich es mit margin mache überlappen alle im FX und Opera und wenn ich es wieder anders mache dann ist die Navigation (oben) mitten im Text - argh -.-

    Könnte mir jemand helfen ? Ich will ein ordentliches und Valides design erstellen deshalb ist es mir so wichtig :)

    Danke euch im vorraus ^^



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    06.08.2008 um 18:36 Uhr

    Entweder du setzt Conditional Comments ein,
    oder CSS Hacks um dem IE gerecht zu werden ...

    Oder eben du lebst damit,
    dass die Seite nicht in allen Browsern korrekt dargestellt wird :D



    ... { signatur } ...
  • MindFreakUser ist offline
    Newbie



    Registriert: 16.02.2008
    Beitraege: 16

    06.08.2008 um 20:34 Uhr

    Ne es sieht ja in keinen Browser gut aus ich weiß nicht wie ich das mit den Bildern positionieren soll :S



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    06.08.2008 um 22:32 Uhr

    Wo soll die obere Navigation denn hin?

    So vielleicht?



    CSS fuer #obennavi => Firefox

    #obennavi{
    	postition: relative;
    	width: 950px;
    	height: 110px;
    	margin: -120px 0px 0px 36px;
    }
    
    #obennavi ul li {
    	list-style-type: none;
    	float: left;
    	display: block;
    }
    
    a.navihome, a.navihome:link, a.navihome:active, a.navihome:visited {
    	width: 158px;
    	height: 57px;
    	background: url('img/home_navi1.png')top left no-repeat;
    	display: block;
    
    }
    
    a.navihome:hover {
    	width: 158px;
    	height: 57px;
    	background: url('img/home_navi2.png')top left no-repeat;
    	display: block;
    }


    Nicht schoen aber selten :D

    Nein mal ganz im Ernst, sofern es denn so aussehen sollte wie oben, wuerde ich dir empfehlen, deine Headergrafik in 2 Teile zu zerschneiden, obere Haelfte nutzt du als HG fuer den Header und die untere Haelfte in der sich die Navigation befinden soll, die nimmste als HG fuer den Container #obennavi, die Variante die ich oben nun gepostet habe funktioniert zwar(im Firefox!), aber ist nicht wirklich optimal...



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 06.08.2008 um 22:42 Uhr ...
    ... { signatur } ...
  • MindFreakUser ist offline
    Newbie



    Registriert: 16.02.2008
    Beitraege: 16

    07.08.2008 um 11:40 Uhr

    ach super alice :) danke danke danke das du mir geholfen hast :) So nun wollte ich das mal mit den 2 geteilten Header gemacht nun sieht es so aus -> Website

    Habe überall margin und padding 0 krieg es aber nicht hin des die 2 header nahtlos übereinander gehen und im IE sieht das ganze noch komischer aus, wäre klasse wenn du nochmal nachschauen könntest weil ich bin mit meinem latein am ende 8|



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    07.08.2008 um 12:01 Uhr

    Dem #obennavi ul li musst du margin: 0px; und padding: 0px; verpassen,
    sonst werden da die standard Werte verwendet!

    Die Positionierung machste dann ueber padding bei #obennavi

    #obennavi {
    
    width: 910px;
    height: 126px;
    margin: 0px;
    padding: 10px 0px 10px 40px;
    background: url('img/header2_green.jpg') no-repeat;
    }
    
    #obennavi ul li {
    list-style-type: none;
    float: left;
    display: block;
    margin: 0px;
    padding: 0px;
    }

    Ich hab keinen IE hier auf dem Lapi,
    kann ich also auch nicht wirklich testen grad, aber versuchs mal damit ...

    * + html #obennavi[id] { /* fix IE 7 */
    		padding: 25px 0px 0px 40px;
    	}
    
    	* html #obennavi{ /* fix IE 6 */
    		padding: 25px 0px 0px 40px;
    	}

    Eventuell muesstest du den padding fuer den bottom fuer die IE's hier noch anpassen ...



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 07.08.2008 um 12:16 Uhr ...
    ... { signatur } ...
  • MindFreakUser ist offline
    Newbie



    Registriert: 16.02.2008
    Beitraege: 16

    07.08.2008 um 12:35 Uhr

    super alice danke dir es funktioniert nun wunderbar in Opera und FX nur im IE will es nicht klappen, dass komische ist das er mir zwar die links oben anzeigt aber die Bilder nicht :o hab nun nochmal den code überprüft und alle Bilder neu hochgaleden etc. aber IE will trotzdem keine Bidler oben zeigen



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    07.08.2008 um 13:12 Uhr

    Zitat von MindFreak:
    super alice danke dir es funktioniert nun wunderbar in Opera und FX nur im IE will es nicht klappen, dass komische ist das er mir zwar die links oben anzeigt aber die Bilder nicht :o hab nun nochmal den code überprüft und alle Bilder neu hochgaleden etc. aber IE will trotzdem keine Bidler oben zeigen


    Das is ein ganz simpler 'Fehler' :D

    Gugg dir doch mal die Werte von background: z.B. bei #footer an und dann schauste dir noch mal die Werte von background: bei deinen Links fuer die Navi an ;)



    ... { signatur } ...
  • MindFreakUser ist offline
    Newbie



    Registriert: 16.02.2008
    Beitraege: 16

    07.08.2008 um 14:04 Uhr

    danke dir alice für alles nun klappt es wunderbar da war des mit left und top ^^ nun zeigt er alles perfekt in allen browsern an :) Danke dir auch für den IE Hack kenn mich damit null aus und verstehe nun ein bisschen mehr :)

    Danke danke danke 8(




[ 1 ] Seite 1 von 1


Affiliates:   Pat DG  •   Design Grafixx  •   Chibi Graphics  •   Blue-Graphics  •   Gallery Yuri  •   The Seduction  •   Colorful Gfx  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider