✔ border nach innen

[denisSCR]

Hallo, ist es möglich dass border nach innen verlaufen? Momentan verlaufen sie (wie üblich) nach außen und verschieben mir die divs nebenan.

a:hover { float:left; border-collapse:collapse; border-left-style:inset;  border-right-style:inset; display:inline-table;}

Sprich bei mouseover auf den Link sollen links und rechts 2 border erscheinen, aber wie gesagt, nach innen. Geht das?

 

[Maik]

Hi,

vielleicht suchst du eher groove oder ridge?

Übersicht der Rahmentypen

Aber auch diese Rahmentypen werden weiterhin nach außen gesetzt.

Wenn da also was verschoben wird, mußt du dies gemäß dem Box-Modell berücksichtigen, und die Rahmenstärken von Breitenangaben subtrahieren.

mfg Maik

 

[denisSCR]

ne der style ist eigentlich egal. es geht darum dass wenn der border erscheint

ich versuchs mal zu zeichnen ^^
_________
| |b
|________|b

Der Rahmen ist der Div und "b" ist der border. er ist also neben dem div (außen)
ich will es aber so:
_________
| b |
|________b |

der border soll innerhalb des Divs sein!

 

[Maik]

Zeig mal besser deinen HTML-/CSS-Code

mfg Maik

 

[denisSCR]

oh man man kann hier nicht viele leerzeichen machen.. denk sie dir einfach hin ^^

## EDIT ##

<div id="menu">
<a href="#" ><div id="hardware">HARDWARE</div></a>
<a href="#" ><div id="software">SOFTWARE</div></a>
<a href="#" ><div id="internet">INTERNET</div></a>
</div>

#hardware {
background-color:#4169e1;
width:110px;
height:35px;
float:left;
font-weight:bold;
text-align:center;
}

#software{
background-color:#4169e1;
width:110px;
height:35px;
float:left;
font-weight:bold;
text-align:center;
}

#internet{
background-color:#4169e1;
width:110px;
height:35px;
float:left;
font-weight:bold;
text-align:center;
}

a:hover { 
float:left; 
border-collapse:collapse; 
border-left-style:ridge;  
border-right-style:ridge; 
display:inline-table;}

 

[Maik]

Ein Block-Element (div) darf in einem Inline-Element (a) nicht enthalten sein.

Stattdessen kann aber das Inline-Element mit Hilfe von CSS "Block-Level-Charakteristika" erhalten: entweder mit display:block oder einer float-Deklaration.

Dass die benachbarten Elemente beim Einblenden des Rahmens verschoben werden, hängt mit dem angesprochenen "Box-Modell" zusammen, da die Rahmenstärke zur Breite und/oder Höhe der Box addiert wird, womit sie beim Überfahren mit der Maus breiter wird.

mfg Maik

 

[denisSCR]

Dass die benachbarten Elemente beim Einblenden des Rahmens verschoben werden, hängt mit dem angesprochenen "Box-Modell" zusammen, da die Rahmenstärke zur Breite und/oder Höhe der Box addiert wird, womit sie beim Überfahren mit der Maus breiter wird.

mfg Maik

Okay, und wie löse ich das Problem am besten?

 

[Maik]

Zum Beispiel so:

<div id="menu">
<a href="#" id="hardware">HARDWARE</a>
<a href="#" id="software">SOFTWARE</a>
<a href="#" id="internet">INTERNET</a>
</div>

a#hardware, a#software, a#internet {
background-color:#4169e1;
border-left:2px solid #4169e1;
border-right:2px solid #4169e1;
width:106px;
height:35px;
float:left;
font-weight:bold;
text-align:center;
}

a#hardware:hover, a#software:hover, a#internet:hover {
border-collapse:collapse;
border-left:2px ridge #fff;
border-right:2px ridge #fff;
display:inline-table;}

mfg Maik

 

[denisSCR]

werd ich demnächst mal ausprobieren, vielen dank schonmal