|
|||
![]() ![]() also auf www.desein.at ist ein layout für die index, nur mittels css.boxes. [ float ]die beiden äußeren navis bei a:hover : infotext links und rechts seitlich. nach durchwachten nächten, durchforsten sämtlicher bugforen kenne ich mich nicht mehr aus - jetzt habe ich alle bugs wieder rausgeschmissen und bitte euch um eure tipps : also im ie6.0/win erscheint bei a:hover links und rechts die info im netscape/mozilla 1.4: nur rechts, sowie die schmucklinks [id. boxmitte mit der mouse hovern, wo kein text] im opera 7.0, sowie ie5/mac erscheinen die hover-infos auf keiner seite - im mac ie verrutscht ausserdem das desein total, dh. die boxes sind durcheinander. ich habe tagelang dabei gesessen und möchte zumindest auf ie/win 6.0, ie/mac5.0 sowie mozilla das layout mit den hover.info effekts - funktionsfähig... kann mir da einer von euch tipps geben [möglichst ohne bugs extra reinzusetzen, das verwässert mir das desein nur noch mehr-schon probiert.. danke euch im voraus marioN hier ist die page: www.desein.at css: index.css, formate.css
__________________
all what desein can be |
Sponsored Links |
|
|||
![]()
;-o
na denn sorry mal, ich bin schon really verblödet !!!!!! also bitte jetzt zum anschauen unter www.desein.at die css dats sind hier: 1. index.css [grundstruktur] 2. formate.css [boxes,links, kleinzeug] 3. im mager is noch nichts drin problemstellung: ie6.0/win: funzt all auch die hover-zusatzinfos, sowie first-letters als kz der access-keys ie 5.0/mac: [leider nur 1x bei einer befreundeten agentur reingesehen] keine first-letters, sowie keine hover-zusatzinfos beim überfahren der links, ausserdem verrutschen die boxes nach rechts, das layout zerschiesst!!!!. moz 1.4: da schauts schöner als im ie aus, allerdings keine zusatzinfos beim hovern auf der linken site, wohl aber auf der rechten -s sowie beim hovern in der mitte wo kein navi-text is, da erscheinen die pics auch links, allerdings nich die zusatztexte für die navi. ächz meine wishlist an euch: * bitte warum geht grad die linke site nicht im moz/opera? * lösung für ie/mac [arbeite für eine agentur,die nur macs hat, ich hab keinen ;-(] wie löse ich das desein-zerschiessen,bzw. krieg die hover -effekts dort rein? * welche buglösung gibts [really simple!!!!!] die alle diese problems löst, oder kurz was ist da mein fehler ? also 1. index.css: /* desein-index */ html, body { margin: 0; padding: 0; } body { background-color: #fff; color: #fff; font-family: verdana, tahoma, sans-serif; text-align: center;/*font-size: 101%;*fuer IE_quirks*/ } /* mainboxes */ #wrapper { position: relative; margin: 20px auto; width: 600px; background-color: transparent; color: #000;text-align: left;/*Aufheben von IE_quirks im BODY*/ border: 0; background-image: url(pics/l_desein_short.gif); background-repeat:no-repeat; background-position: bottom right; } #header { text-align:center; background-image: url(pics/l_desein_header.gif); background-position: center; background-repeat: no-repeat; background-color: transparent; /*#E3E3E3 [1] */ color: #000; margin: 0px 120px 20px 120px; height: 50px; max-height: 50px; } #header a:link, #header a:visited, #header a:hover, #header a:active { display: block; width: 100%; height: 100%; background-color: transparent; color: #000; padding:5px;} .invis { display: none; } #content { background-color: #fff; color:#000; height: 320px; padding: 0px 120px 0px 120px; border: 0; text-align: left; margin: 10px 0 0 0; } #footer1 { background-color: transparent; color: #000; margin: 0 120px 0 120px; text-align: center; height: 30px; border: 0; max-height: 30px; } formate.css /* desein-index_formate */ #header #logo { margin: 10px 0px 0px 10px; border: 0 none; } /* set all to 0 */ h1, h2, h3, h4, p, ul, li { margin: 0; padding: 0; } /* gültig for 1stpage */ #footer1 p { font-size: 55%; vertical-align: baseline; margin: 0; padding: 0; } .invis, hr { display: none; } img { border: none; } /*1st site naviboxes*/ /*gesamtbox rundherum*/ #box { border: 0; background-color: #fff; text-align: center; height: 320px; padding: 0px 15px 0px 15px; margin: 0; font:bold 60% arial; } /*einzelne boxen: gültiges format für alle*/ #box a { float: left; margin: 7.5px 0 7.5px 15px; padding: 0; width:45px; height:45px; color: #000; text-decoration:none; text-align:center; vertical-align: middle; border: 1px solid white; max-width:45px; max-height:45px; } #box a:visited { color:#000; text-decoration:none; text-transform:none; border: 1px solid white; } #box a:hover { color:#000; border:1px solid #C6C3C6; font-weight: 500; text-transform: uppercase; } #box a:focus { color:#000; font-weight: 500; border:1px solid #000; text-decoration:none; } #box a:active { color:#000; font-weight: 500; border:1px solid #000; text-decoration:none; text-transform: uppercase; } /*infoboxen navizusatz unaktiv für alle links*/ #box a .iweb, #box a .ioffice, #box a .itrain, #box a .iart, #box a .i1klick{ display:none; } #box a .iabout, #box a .inews, #box a .iprojekt, #box a .iknow, #box a .iagb{ display:none; } /*infotext bei hover gleiche infos für jeden link*/ } /*linke seite verticale links*/ #box a:hover .iweb, #box a:hover .ioffice, #box a:hover .itrain, #box a:hover .iart, #box a:hover .i1klick { color:#000; text-decoration:none; text-align: right; display:block; position:absolute; top:80px; left:0px; margin: 0; padding: 0; width: 120px; height: 285px; border:1px solid; /*background-image: same positions*/ background-repeat:no-repeat; background-position:60px 230px; } /*rechte seite verticale links*/ #box a:hover .iabout,#box a:hover .inews,#box a:hover .iknow, #box a:hover .iprojekt,#box a:hover .iagb { color:#000; text-align: left; text-decoration:none; display:block; position:absolute; top:80px; right:0px; margin: 0; padding: 0; width: 120px; height: 285px; border: 1px solid; background-repeat:no-repeat; background-position: 5px 230px; } /*bild-deco bei mouse over linke site*/ #box a:hover .ialge1, #box a:hover .ialge4,#box a:hover .ialge7, #box a:hover .ialge6 { display:block; position:absolute; top:80px; left:0px; margin: 0; padding: 0; width: 120px; height: 285px; background-repeat:no-repeat; background-position: center center; border:0; } /*bild-deco bei mouse over re site*/ #box a:hover .ialge2, #box a:hover .ialge3,#box a:hover .ialge5, #box a:hover .ialge8 { display:block; position:absolute; top:80px; right:0px; margin: 0; padding: 0; width: 120px; height: 285px; background-repeat:no-repeat; background-position: center center; border:0; } /*individ. background, h1 f. jeden link + deco-links*/ #box a:hover .iweb { background-image: url(pics/web.gif); border-color:#7194b6; } #box a:hover .iweb h1 { background-color: #7194b6; } #box a:hover .ioffice { background-image: url(pics/office.gif); border-color: #669999; } #box a:hover .ioffice h1 { background-color: #669999; } #box a:hover .itrain { background-image: url(pics/training.gif); border-color: #8c7d5a; } #box a:hover .itrain h1 { background-color: #8c7d5a; } #box a:hover .iart { background-image: url(pics/art.gif); border-color: #ff9933; } #box a:hover .iart h1{ background:#ff9933; } #box a:hover .i1klick { background-image: url(pics/1klick.gif); border-color: #666666; } #box a:hover .i1klick h1{ background:#666666; } #box a:hover .iabout { background-image: url(../pics/about.gif); border-color: #ecf1f6; } #box a:hover .iabout h1{ background:#ecf1f6; } #box a:hover .inews { background-image: url(../pics/news.gif); border-color: #c8dfdb; } #box a:hover .inews h1{ background:#c8dfdb; } #box a:hover .iknow { background-image: url(../pics/knowhow.gif); border-color: #ded3c6; } #box a:hover .iknow h1{ background:#ded3c6; } #box a:hover .iprojekt { background-image: url(../pics/projects.gif); border-color:#faebd7; } #box a:hover .iprojekt h1{ background:#faebd7; } #box a:hover .iagb { background-image: url(../pics/agb.gif); border-color: #dcdcdc; } #box a:hover .iagb h1{ background:#dcdcdc; } /*background-pics für deco-links*/ #box a:hover .ialge1 { background-image: url(../pics/alge1.gif); } #box a:hover .ialge2 { background-image: url(../pics/alge2.gif); } #box a:hover .ialge3 { background-image: url(../pics/alge3.gif); } #box a:hover .ialge4 { background-image: url(../pics/alge4.gif); } #box a:hover .ialge5 { background-image: url(../pics/alge5.gif); } #box a:hover .ialge6 { background-image: url(../pics/alge6.gif); } #box a:hover .ialge7 { background-image: url(../pics/alge7.gif); } #box a:hover .ialge8 { background-image: url(../pics/alge1.gif); } /*formatierung header, absätze info*/ #box p{ font:100% verdana; color: #000; text-decoration:none; text-transform: none; text-align:justify; margin:5px; padding-bottom:5px; border-bottom: 1px dashed #000; } /*first-letter: kennzeichnung access-keys*/ a:first-letter { font-weight: 800; font-size: 120%; } /*gleiche formatierung für alle info-elements*/ #box p:first-letter { font: 800 110%; } #box h1:first-letter { font: 900 130%; } #box h1{ font:700 110% verdana;/*bezogen auf elternelement in hauptbox*/ color:#000; text-decoration:none; margin: 0; padding:3px; border: 0; } #box ul{ list-style: square inside; text-decoration:none; text-transform:none; } so, jetzt bin ich schon neugierig auf euer antworten- komme mir ganz schön blöd vor, irgendwas hab ich nicht geschnallt. ![]()
__________________
all what desein can be |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
joomla template | wrock | CSS | 2 | 06.04.2012 19:24 |
Layout Box | xava | CSS | 3 | 26.02.2011 14:07 |
CSS Layout Tutorial von www.subcide.com klappt nicht | img | CSS | 5 | 15.05.2008 18:21 |
Kniffliges Layout mit float | Roadrunnerle | CSS | 6 | 14.03.2006 11:26 |
#boxes a:hover.info: 2.posting mit css !!! | marioN | CSS | 5 | 25.01.2004 17:04 |