[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

Hvem er aktive 0 medlemmer