Gå til innhold

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


Anbefalte innlegg

Skrevet (endret)

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><!-- end id:navigation -->

 

 

<div id="container">

 

 

<div id="headertext">

<h1>{title}</h1>

</div><!-- end id:header -->

 

 

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

 

<div> </div>

</div>

<!-- end id:headerimage -->

 

<div id="content">

 

{content}

 

</div><!-- end id:content -->

</div><!-- end id:container --><div id="footer">

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

<br class="clear" />

</div><!-- end id:footer -->

 

</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 av sveinj
Videoannonse
Annonse
Skrevet (endret)

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:

966441.jpeg

 

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 av greygenic
Skrevet

Tusen tusen takk Greygenic for et så fint svar!

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

 

Igjen, tusen takk!

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...