✔ probleme mit :active

Status
Nicht offen für weitere Antworten.
R

resterampe

Mitglied
Wenn ich auf einen Link klicke:
verändert sich die Größe, sprich das ganze fängt an zu wandern:

hier der Quelltext:
HTML: 
  <div class="boxinhalt">
 <b class="xtop"><b class="xt1"></b><b class="xt2"></b><b class="xt3"></b><b class="xt4"></b></b>
 <div class="xboxinhalt">
  <h2 class="head">Fotoblog</h2>
 <div class="center">
 <div class='submenuholder'><div class='left'>&lt;&lt;&nbsp;&middot;&nbsp;&lt;&nbsp;&middot;&nbsp;1&nbsp;&middot;&nbsp;<a href='?act=fotoblog&amp;Apos=1' title='Seite 2'>2</a>&nbsp;&middot;&nbsp;<a href='?act=fotoblog&amp;Apos=2' title='Seite 3'>3</a>&nbsp;&middot;&nbsp;<a href='?act=fotoblog&amp;Apos=3' title='Seite 4'>4</a>&nbsp;&middot;&nbsp;<a href='?act=fotoblog&amp;Apos=4' title='Seite 5'>5</a>&nbsp;&middot;&nbsp;[...]&nbsp;&middot;&nbsp;<a href='?act=fotoblog&amp;Apos=1' title='eine Seite weiter'>&gt;</a>&nbsp;&middot;&nbsp;<a href='?act=fotoblog&amp;Apos=9' title='Zur letzten Seite'>&gt;&gt;</a></div><div class='right'><a href='?act=fotoblog-vorschau&amp;Apos=0' title='Vorschau'>Vorschau</a> &middot; Detailansicht</div><p>&nbsp;</p></div><a href='?act=fotoblog-vorschau&amp;Apos=0' title='Dieses Bild in klein anzeigen'><img src='img/photoblog/1125421023.jpg' alt='Rheinbrücke' class='big' /></a></div><h3 class='picturetitel'>Rheinbrücke</h3><p>in Krefeld Uerdingen bei Nacht</p></div>
 <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b><b class="xtop2"><b class="xt1"></b><b class="xt2"></b><b class="xt3"></b><b class="xt4"></b></b>

hier das CSS:
HTML: 
  /* Body 
  *********************/
  body {
  	background-color: #eee;
  	color: #600;
  	font-family: Verdana, sans-serif;
  	font-size: 11px;
  	margin: 0px auto;
  	line-height: normal;
  	text-align: center;
  }
  	
  /* Links
  *********************/
  a { font-size: 11px; }
  a:link, a:visited, a:active{ color: #600; text-decoration: none; }
  a:hover { color: #900; text-decoration: underline; }
  .boxnav a:link, a:visited, a:active{ padding: 3px 5px; color: #600; text-decoration: none; }
  .boxnav a:hover { padding: 2px; color: #900; text-decoration: none; border-left:1px solid #600; font-weight: bold; }
  
  /* Oben Inhalt */
  .xtop { display:block; background:transparent; font-size:1px; }
  .xtop2 { display:block; background:transparent; font-size:1px; margin: 5px 0px 0px; }
  .xt1, .xt2, .xt3, .xt4 { display:block; overflow:hidden; }	
  .xt1, .xt2, .xt3 { height:1px; }
  .xt2, .xt3, .xt4 { background:#6ff; border-left:1px solid #600; border-right:1px solid #600; }
  .xt1 { margin:0px 5px; background: #600; }
  .xt2 { margin:0px 3px; border-width:0px 2px; }
  .xt3 { margin:0px 2px; }
  .xt4 { height:2px; margin:0px 1px; }
  
  /* Unten Inhalt */
  .xbottom { display:block; background:transparent; font-size:1px; }
  .xbottom2 { display:block; background:transparent; font-size:1px; }
  .xb1, .xb2, .xb3, .xb4 { display:block; overflow:hidden; }
  .xb1, .xb2, .xb3 { height:1px; }
  .xb2, .xb3, .xb4 { background:#ffc; border-left:1px solid #600; border-right:1px solid #600; }
  .xb1 { margin:0px 5px; background: #600; }
  .xb2 { margin:0px 3px; border-width:0px 2px; }
  .xb3 { margin:0px 2px; }
  .xb4 { height:2px; margin:0px 1px; }

Hier das ganze zum anschauen:
Webseite: http://www.privat.julianbrinke.de/?act=fotoblog
CSS: http://www.privat.julianbrinke.de/style/juli-2.css

Das ganze ist noch im Aufbau, sprich das Design kann im IE schon mal etwas abweichen...
 
Hi,

Code: 
.boxnav a:link, a:visited, a:active{ padding: 3px 5px; color: #600; text-decoration: none; }
Hier definierst du auch für Links, die sich nicht innerhalb der Klasse .boxnav befinden Innenabstände (3px 5px).
Gib hier vor :visited und :active die Klasse mit an.
Code: 
.boxnav a:link, .boxnav a:visited, .boxnav a:active{ padding: 3px 5px; color: #600; text-decoration: none; }
Ich hoffe, das hilft dir weiter.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück