XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   #box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, (http://xhtmlforum.de/showthread.php?t=32195)

marioN 19.01.2004 15:34

#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac,
 
:evil: hi leute! helft mir oder ich werde noch wahnsinnig!!!
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

Brutha_ 19.01.2004 16:00

You don't have permission to access / on this server.

vielleicht mal den Passwortschutz rausnehmen ? :)

marioN 19.01.2004 17:17

#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac,
 
;-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. ;))


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023