Verschillende kleuren borders om je afbeeldingen?

Status
Niet open voor verdere reacties.
1

103720

Gebruiker
Lid geworden
18 okt 2006
Berichten
60
Ik zit met een probleem waar ik echt niet uit kom. Heb vanalles geprobeerd, maar niets resulteert in wat ik eigenlijk wil hebben.

Ik heb een website waar je, door middel van het aanklikken van een link, een andere "lay-out" krijgt (een zgn styleswitch). Voorbeeld: Standaard hebben alle headers een rode kleur, hebben de links een rode kleur en heeft de pagina-achtergrond een rode kleur. Als je dan op de blauwe style-switch link klikt veranderen al die dingen in een blauwe kleur. Geen probleem, dat werkt.

Maar nu wil ik eigenlijk ook dat elke afbeelding een border krijgt van 2px en dat die dus ook meekleurt met de styleswitch. Maar wat ik ook doe ik krijg het niet voor elkaar.

In de default.css staat:
img {
border:none;
}

omdat ik ook plaatjes als link gebruik en ik niet die vervelende blauwe rand om die afbeeldingen wil krijgen.

Hoe krijg ik het nu voor elkaar dat in de rood.css (waar alle kenmerken van de rode layout in staan) toch komt te staan dat hij een border om de afbeeldingen moet plaatsen in een rode kleur?
 
Als je border:solid 2px red !important; gebruikt in rood.css zal hij het standaard CSS bestand negeren.
Het kan ook door gewoon te zorgen dat de browser rood.css leest na het gewone CSS bestand maar deze methode is denk ik wat betrouwbaarder.
 
Dank u voor de reactie en ik heb het volgende in rood.css gezet:

.img{border:solid 2px red !important; }

Het rare is nu dat als ik de pagina nu in Dreamweaver pre-view ik wel een rood kader zie. Upload ik rood.css naar mijn site dan laat de pagina geen rood kader zien.
 
Komt er aan (via PB). Echter, nu merk ik opeens dat mijn styleswitch niet meer werkt. Wel op de .index-pagina, maar niet meer op de .php-pagina's.

O, ik merk nu dat ik hier geen PB's kan sturen. Kan ik je de link op een andere manier versturen? Ik wil nog niet dat mijn site bekeken wordt.
 
Laatst bewerkt:
Het probleem met de styleswitch is opgelost.

Ik had er ook een script op staan van lightbox (om afbeeldingen te tonen) echter op de een of andere manier levert dat een conflict op waardoor de styleswitch niet meer werkte.

Blijft nu over, het probleem van de borders.
 
U heeft bericht (en mag wat mij betreft uw emailadres hier weer weghalen).
 
Ik denk dat er gewoon wat mis is gegaan met het uploaden van het css bestand, ik kan in rood.css op jouw site namelijk niets vinden over het img element (of !important)

Moet dat randje trouwens om alle plaatjes of alleen sommige?
 
stom van me, ik heb het al weer weggehaald, zal het nu weer aanpassen.

Het is de bedoeling dat het niet voor alle images geldt. Dus ik zal in de css twee verschillende verwijzingen moeten maken en dan per afbeelding aangeven welke van die twee hij moet gebruiken (Klopt dat?).
 
103720 zei:
stom van me, ik heb het al weer weggehaald, zal het nu weer aanpassen.

Het is de bedoeling dat het niet voor alle images geldt. Dus ik zal in de css twee verschillende verwijzingen moeten maken en dan per afbeelding aangeven welke van die twee hij moet gebruiken (Klopt dat?).
Klik om te vergroten...
Kan, kan, kun je iets concreter uitleggen wat je wilt bereiken?
 
Ik zou dus graag willen dat er om de foto's een kader komt te staan die gelijk is aan de kleur van de style (dus rood, of blauw, of zwart).

Maar bij sommige afbeeldingen (die ik als link gebruik) mag dus geen kader komen te staan.

Dat is eigenlijk wat ik graag zou willen.
 
Ik neem aan dat de plaatjes zonder kader gewoon de standaard CSS mogen volgen? In dat geval hoef je de te omkaderen plaatjes alleen maar een eigen class mee te geven. class="kader" bijvoorbeeld, je kunt dan in rood.css alle elementen met die class aanspreken. Door .kader{border:red solid 2px;}. Als het goed is heb je !important dan niet eens meer nodig.

Ik zie dat je nu plaatjes hebt met de class img, dat heeft niet veel zin, als je alle plaatjes aan wilt spreken in de CSS kun je gewoon img{} gebruiken. HTML elementen zijn immers gewoon via de css te stijlen.
 
Volgens mij heb ik gedaan wat u heeft aangegeven, maar zoals u ziet werkt het nog niet.

Op de pagina: shirts/ajaxshirt-history.php
 
Ik ie niets over .kader in rood.css

EDIT: ah, je hebt in de css nog .img staan
 
Laatst bewerkt:
Bij de 'defaults.css' bedoelt U? Daar heb ik hem nu weggehaald, maar helaas....nog geen resultaat
 
neej. Jouw rood.css ziet er bij mij als volgt uit.
Code: 
@charset "utf-8";
/* CSS Document */

a:link {color: #869aae;	text-decoration: none;}
a:visited {	text-decoration: none;	color: #869aae;}
a:hover {text-decoration: none;	color: #ff0000;}
a:active {	text-decoration: none;	color: #ff0000;}

/*------------------------------------------------------------*
 ~Headings ~
**------------------------------------------------------------*/
h1{color: #ff0000;}
h2{color: #ff0000;}
h3{color: #ff0000;}
body {
	background-color: #840000;
}

.img {border: 3px #Ff0000}


/*------------------------------------------------------------*
 ~main layout bits~
**------------------------------------------------------------*/
#top {	background-image: url(../themes/rood/rood_top.gif);}
#main_line {	background-image: url(../themes/rood/bg_line_tile.gif);}
#footer {	background-image: url(../themes/rood/footer.gif);}

/*------------------------------------------------------------*
 ~Tabbed Nav Information~
**------------------------------------------------------------*/
.home {	background-image: url(../themes/rood/nav_rood_home.gif);}
.shirts {background-image: url(../themes/rood/nav_rood_shirts.gif);}
.memorablia {	background-image: url(../themes/rood/nav_rood_memorablia.gif);}
.media {	background-image: url(../themes/rood/nav_rood_media.gif);}
.forsale {	background-image: url(../themes/rood/nav_rood_forsale.gif);}
.aboutme {	background-image: url(../themes/rood/nav_rood_aboutme.gif);}
.links {	background-image: url(../themes/rood/nav_rood_links.gif);}

/*------------------------------------------------------------*
 ~ Content Information~
**------------------------------------------------------------*/
#index_image {
	background-image: url(../themes/rood/rood_header.jpg);
}
#two_left li {color:#ff0000; }


#folio_right a, #index_content a {color: #ff0000; }
#folio_right a:hover, #index_content a:hover {	color: #777; }

#sitemap li{
color: #ff0000;
}

#contacting input, #contacting textarea {
	color: #ff0000;
}
#contacting textarea:focus, #contacting input:focus {
	border: 1px solid #ff0000;
}
#folio_right li {	color: #ff0000;
}


/*------------------------------------------------------------*
 ~Footer Information~
**------------------------------------------------------------*/
#logo {
	background-image: url(../themes/rood/logo_rood.gif);
}

/*------------------------------------------------------------*
 ~Scrolling Information~
**------------------------------------------------------------*/

#scroll-menu a:hover {
	border: 1px solid #ff0000;
	color: #ff0000;
}


/*------------------------------------------------------------*
 ~Shadowbox Information~
**------------------------------------------------------------*/
#shadowbox_title_inner {
  color: #ff0000;
}
#shadowbox_toolbar_inner {
  color: #ff0000;
}

#shadowbox_body {
 border: 1px solid #ccc;
}


#shadowbox_toolbar_inner div a {
  color: #ff0000;
}
.kader staat daar dus niet bij.
 
Oeps, mijn fout, ik heb ze er nu wel opgezet (ook black.css) en inderdaad nu laat hij een kader zien.

Maar hoe krijg ik het nu voor elkaar dat op test/index.html hij geen kader laat zien rondom de afbeeldingen van de 3 kleine shirts?
 
103720 zei:
Maar hoe krijg ik het nu voor elkaar dat op test/index.html hij geen kader laat zien rondom de afbeeldingen van de 3 kleine shirts?
Klik om te vergroten...
Als ze niet de class="kader" hebben zullen ze ook geen kader krijgen.
(ik zie nu trouwens geen kader rond die drie shirts)
 
De drie shirts zijn links naar een bepaalde pagina. Omdat het links zijn, en ik de aanduiding border=none uit de defaults.css heb weggehaald, laat hij nu een kader zijn om die 3 shirts. Toch?
 
103720 zei:
De drie shirts zijn links naar een bepaalde pagina. Omdat het links zijn, en ik de aanduiding border=none uit de defaults.css heb weggehaald, laat hij nu een kader zijn om die 3 shirts. Toch?
Klik om te vergroten...
Ah, in Firefox inderdaad wel, Opera laat ze niet zien. Waarom heb je img{border:none;} weggehaald uit default.css? Zonder dat komen die kaders inderdaad terug in FF. Gewoon terugzetten dan zou het allemaal moeten werken.

EDIT: je kunt die regel trouwens ook alleen op plaatjes die links ijn laten slaan door
Code: 
a img{border:none;}
te gebruiken
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan