zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden #boxes a:hover.info: 2.posting mit css !!!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.01.2004, 17:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.01.2004
Beiträge: 7
marioN befindet sich auf einem aufstrebenden Ast
Standard #boxes a:hover.info: 2.posting mit css !!!

;-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
__________________
all what desein can be
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.01.2004, 11:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Wenn Du demnächst Deine POSTing bitte auch als CODE formatieren könntest

Code:
#box a:hover .iknow {..........}
Pseudo-Elemente und Classes für A-Tag funktionieren so:



Code:
#box a.iknow:hover {............}
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.01.2004, 12:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.01.2004
Beiträge: 7
marioN befindet sich auf einem aufstrebenden Ast
Standard pseudo elemente für a-tag falsch definiert


hi ulle

hUUUUUUUUUU da habe ich mich wohl gleich bei euch blamiert?-
löst das auch die angeführten probleme mac/win/moz?



Ich hab auch schon gedacht, die boxes mit einer weissen border von 1px zu versehen damit beim hovern keine änderung der abstände eintritt,
bzw die boxes ohne margin-left abstand zu definieren sondern mit 0 und als background ein jpg mit dem farbigen viereck sowie dem rand alles im bild inkludiert einzufügen...
was meinst du..... in ergänzung zur richtigen def der pseudos & classes ...?

thx for reply
__________________
all what desein can be
Mit Zitat antworten
  #4 (permalink)  
Alt 21.01.2004, 19:40
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.09.2003
Beiträge: 129
Alex befindet sich auf einem aufstrebenden Ast
Standard

sorry hab grad nicht die zeit mich da reinzudenken, aber ich muss ulle korrigieren. dein code ist in dem fall schon richtig.

denn
Code:
#box a:hover .iknow {..........}
bezieht sich auf den span mit der class 'iknow' in dem link in #box:
Code:
<div id="box">
[...]
<a href="#" title=":.checklisteN.:.downloaD.:" accessKey=k style="background:#ded3c6;">Know how <span class="iknow"><h1>Knowhow</h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
 tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></span></a>
[...]
</div>
da opera die linken hovers auch nicht anzeigt vermute ich, dass du ne unsauberkeit im code hast und es kein bug von mozilla ist.
Mit Zitat antworten
  #5 (permalink)  
Alt 22.01.2004, 13:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
.......aber ich muss ulle korrigieren. ........
Oh - hatte ich nicht gesehen........

liegt mit daran dass auch ich mich nicht in solch langen QuellCode denken will.

Wenn alle hier nur die Problemstellung in ein einfaches Script 'tüten' würden, und dieses überschaubare Script posten, wäre es lustvoller....

Außerdem erkennt man so häufig schon die eigenen Fehler


Habe hier noch einen Link für Dich, evtl. hilft dieser ja weiter.

http://www.madaboutstyle.com/tooltip2.html
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 25.01.2004, 18:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.01.2004
Beiträge: 7
marioN befindet sich auf einem aufstrebenden Ast
Standard danke für den hinweis - sorry für die überforderung


hi ulle,
sorry für den langen code, aber ich hoffte mir so ein paar verbesserungsvorschläge einhandeln zu können, da ich immer ewig
lange herumtüftle und manchmal zukompliziert denke.

thanx 4 the link - ich denke die z-index variante probier e ich aus, wann ich wieder zeit habe mit der site zu spielen - im moment quälte mich ja ein wichtigeres problem.

marioN
__________________
all what desein can be
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 03:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:40 Uhr.