[Løst] CSS: Enkelt men vanskelig - hvordan endre en link.

_Johan_ · 3. september 2011

Jeg har en side men noen linker. Jeg ønsker å ikke ha "underline" når du har musen over linken. Bare at fargen blir byttet. Dette var før en enkel HTML greie, legge inn i style sheet (a {text-decoration:none}), men det fungerer ikke i dette tilfelle.

Siden det er snakk om er:

http://latajacyjogin.weebly.com/

Det er snakk om linkene til høyre, med litt mindre tekst. Men generelt hadde det vært fint å bare fjerne denne egenskapen for godt.

Er det noen som kan hjelpe meg? HTML koden, og CSS koden er lagt ved under.

Tusen takk!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">

<title>{title}</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body id="section-index">

<div id="navigation">

{menu}

</div>

<div id="container">

<div id="headertext">

<h1>{title}</h1>

</div>

<div id="header-outer" class="wsite-header">

<div> </div>

</div>



<div id="content">

{content}

</div>

</div><div id="footer">

<p><span id='weeblyFooter'>{footer}</span></p>

<br class="clear" />

</div>

</body>

</html>

CSS

/*
Theme Name: MistyLook

Theme URI: http://wpthemes.info

Description: A real clean template by <a href="http://wpthemes.info" title="Sadish">Sadish Bala</a> , influenced by <a href="http://reorganize.ca" target="_blank">ReOrganize</a>. Support is available at <a href="http://forums.wpthemes.info/" title="Forums">Forums</a>.

Version: 3.2

Author: Sadish

Author URI: http://simpleinside.com

*/

* {

padding: 0;

margin:0;

}

p {

margin: 0.5em 0;

line-height:1.5;

}

.clear {

clear:both;

height:20px;

}

blockquote

{

color:#666;

margin: 1em;

padding: 0 0 10px 50px;

background: url(blockquote.gif) no-repeat left top;

}

fieldset

{

border:0;

}

a

{

text-decoration:none;

}

a:link, a:visited {

color: #6688ff;

}

p a:hover, a:active {

border-bottom:#963 1px solid;

}

h1, h2, h3, h4, h5, h6

{

font-family:Georgia, Verdana, Arial, Serif;

line-height:1.5;

}

#container {

border: #ccc 1px solid;

background: #fff;

margin: 0 auto;

width: 900px;

position: relative;

text-align: left;

}

#navigation {

background: transparent;

margin: 0 auto 0;

overflow: hidden;

width: 850px;

position: relative;

text-align: left;

font-family: Trebuchet MS,Tahoma, Verdana, Arial, Serif;

}

html #navigation {

height: 1%;

}

#navigation ul li {

float: left;

margin: 0 5px 0 0;

list-style-type: none;

}

#navigation ul li a {

border: #dedede 1px solid;

border-bottom:none;

padding: 2px 10px 2px 9px;

display: block;

font-weight:bold;

color:#666;

text-decoration: none;

background:#ededed;

letter-spacing:0px;

}

#navigation ul li a:hover, #navigation ul li a:active, #navigation ul li.current_page_item a {

background: #fff;

color: #333;

border: #ccc 1px solid;

border-bottom:none;

}

#active a:link {

background: #fff;

color:#333;

}

#active a:hover {

background: #fff;

color:#333;

}

#active a:visited {

background: #fff;

color:#333;

}

#navigation ul li.search {

font-size: 0.9em;

right: 0;

position: absolute;

top: 0;

}

#navigation ul li.search input#searchsubmit {

border: #999 1px solid;

font-size: 0.9em;

background: #ddd;

margin: 0 0 0 2px;

color: #265e15;

padding: 2px;

}

#headertext {

clear: both;

float: left;

margin:0;

height:10px; }

height: 1px

margin: 10px 5px;

width: 100%;

}

#headertext h1

{

font-size:1.8em;

margin:10px 0 0 10px;

font-variant:small-caps;

letter-spacing:0px;

}

#headertext h1 a {

text-decoration:none;

border:0;

}

#headertext h2

{

margin:5px 0 0 10px;

font-size:1em;

font-weight:normal;

font-family:Tahoma, Verdana, Arial, Serif;

letter-spacing:0px;

}

#feedarea {

padding:10px 10px 0 0;

float: right;

text-align: right;

}

html #feedarea {

padding-top: 10px;

}

#feedarea dl dt {

display: inline;

margin-right: 5px;

height: 45px;

}

#feedarea dl dd {

display: inline;

margin-right: 5px;

height: 45px;

background:url(icon_feed.gif) no-repeat left center;

padding-left:16px;

}

#header-outer {

clear: both;

margin: 10px;

padding: 0;

color: #fff;

height: 200px;

/*

width: 760px;

background: #fff url(%%HEADERIMG%%) no-repeat;

*/

}

html #header-outer {

margin-top: 0;

}

#content {

margin: 10px 20px;

}

#content h3 {

font-size: 1.4em;

font-weight:normal;

margin: 1em 0 0;

color: #265e15;

}

#content h4 {

font-size: 1.1em;

margin: 1em 0 0 0;

}

#content h5 {

font-size: 1em;

margin: 1em 0;

}

#content-main ul

{

margin:0 1em;

padding:0 1em;

list-style-image:url(bullet.png);

}

#content-main ul.asides

{

margin:0;

padding:2em;

border-bottom:#ddd 1px dashed;

}

#content ol

{

list-style-type:decimal;

margin:1em;

padding:0 1em;

}

#content-main {

float: left;

width: 520px;

margin-right: 20px;

}

html #section-index #content-main {

margin-right: 20px;

}

#content .post

{

padding:0 0 2em 0;

border-bottom:#ddd 1px dashed;

}

#content h2

{

font-size: 1.5em;

margin: 0.5em 0;

font-weight:normal;

line-height:1.5;

letter-spacing:0px;

}

#content .entry

{

margin:1em 0;

padding-right:1em;

}

#content .entry a:link, #content .entry a:visited, <A STYLE="text-decoration:none">

{

border-bottom:#963 1px dashed;

}

#content .entry a:hover, #content .entry a:active, <A STYLE="text-decoration:none">

{

border-bottom:#963 1px solid;

}

#content .post-info , #content .postmetadata

{

font-size:0.9em;

color:#999;

margin:0;

padding:0;

}

#content .post-info,

#content h2.pagetitle

{

background:url(underline1.jpg) no-repeat left bottom;

padding-bottom:15px;

}

#sidebar {

float: left;

width: 200px;

font-size:0.9em;

}

#sidebar ul

{

list-style:none;

margin:0;

padding:0;

}

#sidebar li

{

margin-bottom:5px;

}

#sidebar ul ul

{

list-style:none;

margin:0.5em 0 0 1em;

}

#sidebar ul ul ul

{

margin:0 0 0 1em;

}

li.sidebox {

padding:10px;

background: url(sideheadtop.gif) #ededed no-repeat left top;

margin-bottom: 10px;

}

html li.sidebox {

padding-bottom: 10px;

}

li.sidebox h2 {

font-weight: normal;

font-size: 1.4em;

text-align: left;

color: #242;

font-variant:small-caps;

letter-spacing:0px;

}

li#sidelinks ul

{

margin:0;

padding:0;

}

#sidebar li.sidebox p img {

margin:0;

padding:3px;

border:#ccc 1px solid;

background:none;

}

#footer {

clear: both;

background: transparent;

margin: 0 auto;

width: 760px;

text-align: left;

}

html #footer {

height: 1%;

}

#footer p {

float: left;

width: 50%;

line-height: 1.2em;

}

#footer p.right {

float: right;

margin: 0.8em 0;

width: 50%;

text-align: right;

font-size: 0.9em;

color:#999;

}

#comments, #respond{

margin: 0;

padding:1em 0 0 0;

}

#commentform

{

margin:10px 0;

padding:10px;

background:#f9fcfc;

border-top: #ddd 1px solid;

border-bottom: #ddd 1px solid;

}

.commentnum

{

font-size:1.5em;

font-weight:bold;

margin:0 5px 0 0;

}

#container .commentlist {

margin: 1em 0;

padding: 0;

border-top: #ddd 1px solid;

}

.commentlist li

{

list-style:none;

margin: 0;

padding: 1em 0.5em;

background:#fff url(shadow_top.gif) repeat-x top;

border-bottom: #ddd 1px solid;

}

.commentlist li.alt

{

background:#f9f9f9;

}

.commentlist li.authorcomment

{

border:#fc9 1px solid;

}

.commentlist li .cmtinfo

{

font-size:1em;

}

.commentlist li cite

{

font-style:normal;

font-weight:bold;

}

.commentlist li .cmtinfo em

{

float:right;

margin:0;

padding:0;

font-style:normal;

font-size:0.9em;

color:#999;

}

#content .commentsfeed

{

background:url(icon_feed.gif) no-repeat left center;

padding-left:16px;

}

#content .trackback

{

background:url(link.gif) no-repeat left center;

padding-left:20px;

}

input.textbox, textarea

{

border:#ccc 1px solid;

background:#fff url(shadow_top.gif) repeat-x top;

font:1em Verdana, Arial, Serif;

padding:2px;

width:150px;

}

textarea{

width: 90%;

padding:10px;

line-height:2em;

height: 20em;

}

input.textbox:focus, textarea:focus

{

background:#fff url(shadow_top.gif) repeat-x top;

border:#999 1px solid;

}

#submit

{

padding:3px 5px;

}

.post h4

{

font-size:1em;

font-weight:normal;

font-family:Verdana, Tahoma, Arial, Serif;

}

.post h4 em

{

font-style:normal;

float:right;

font-weight:normal;

}

#headertext, #sidebar, #footer, .widget {

overflow: hidden;

}

body

{

background: #f9f9f0;

padding: 20px 0 0 0;

font: 76%/1.6em verdana, tahoma, arial, sans-serif;

color: #333;

text-align: center;

}

/****************************** flyout menus ******************************/

#weebly-menus .weebly-menu-wrap {

z-index: 5000;

}

#weebly-menus .weebly-menu {

padding: 0;

margin: 0;

list-style: none;

}

#weebly-menus .weebly-menu li {

float: left;

clear: left;

width: 170px;

text-align: left;

}

#weebly-menus .weebly-menu li a {

position: relative;

display: block;

width: 100%;

background: #ffffff;

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

border-bottom: 1px solid #ccc;

text-decoration: none;

font-family: Trebuchet MS,Tahoma, Verdana, Arial, Serif;

font-size: 11px;

font-weight: normal;

line-height:1;

padding:3px;

color: #000;

}

#weebly-menus .weebly-menu li a:hover {

background: #e3e3e3;

}

#weebly-menus span.weebly-menu-title {

display: block;

padding: 5px 10px;

}

#weebly-menus span.weebly-menu-more {

background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;

display: block;

position: absolute;

right: 5px;

top: 0;

font-family: Courier;

height: 28px;

line-height: 28px;

padding:1px 0 3px 0;

}

Endret 3. september 2011 av sveinj

greygenic · 4. september 2011

Wow, snakk om kode som er slitsom å lese.

'text-decoration:none', fungerer nok den, til sitt bruk. Det som derimot ser ut til å være problemet her, er en eller flere av følgende:

... a:hover { border-bottom:#963 1px solid;  }

Forstår du hva denne gjør? Den vil - når musepekeren hviler over, gi hele a-elementet (altså selve lenka) en solid 1-pixels "bunnstrek" (border).

Jeg kommenterte ut en av disse i 'main_style.css':

 * { padding: 0; margin:0; }
div.paragraph { margin: 0.5em 0; line-height:1.5; }
p { margin: 0.5em 0; line-height:1.5; }
.clear { clear:both; height:20px; }
blockquote { color:#666; margin: 1em; padding: 0 0 10px 50px; background: url(theme/blockquote.gif?666851) no-repeat left top; }
fieldset { border:0; }
a { text-decoration:none; }
a:link, a:visited { color: #6688ff; }
div.paragraph a:hover, a:active { /* border-bottom:#963 1px solid; */ }

Nå hviler musepekeren over, og alt som skjer er at fargen forandres:

Nå studerte ikke jeg koden godt nok til å se om dette gir komplikasjoner, da får du i såfall bare kommentere ut tilsvarende på et annet sted - helt til du blir fornøyd.

Endret 4. september 2011 av greygenic

_Johan_ · 4. september 2011

Tusen tusen takk Greygenic for et så fint svar!

Jeg skal eksperimentere litt med dette, og håper det vil fungere!

Igjen, tusen takk!

Logg inn

[Løst] CSS: Enkelt men vanskelig - hvordan endre en link.

Anbefalte innlegg

_Johan_

Lenke til kommentar

Videoannonse

greygenic

Lenke til kommentar

_Johan_

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Overrasket? Nei, det er FrP på gang igjen

Skal man selv avbryte sykemelding om man blir bedre under sykemelding? Selv om arbeidsgiver er grunnen

Hvem er aktive 0 medlemmer