CSS link pic inline

Lord Regno · Dec 13, 2010

Here I have tried to make links to other sides but the pictures are getting strange can you help me to solve this problem?

Code:

#meny{
	margin-left: 0;
	padding-left: 0;
	font-size: 100%;
	padding-top:7px;
	}

#meny li{
	display: inline;
	list-style-type: none;
	padding-left:4px;}

#meny a{
	padding: 0.3em 2.85em;
	text-decoration: none;
	background: transparent url('../../Bilder/Knappar/buttonA4.jpg');}

#meny a:link{color: #000000;}

#meny a:visited{color: #000000; }

#meny a:hover{background: transparent url('../../Bilder/Knappar/buttonA5.jpg');}

#meny a#current{
	background: transparent url('../../Bilder/Knappar/buttonA6.jpg');
	color: #000000;}

Code:

<body>

<div id="centering">
<div id="sidhuvud">
<a href="../../default.html"><img alt="" class="linkpic" height="129" src="../../Bilder/gifwebb2.gif" width="180" />
</a></div>
<div id="kolumn1">

<ul id="meny">
<li><a href="Home" id="current"></a></li>
<li><a href="Allot of text"></a></li>
<li><a href="This is it"></a></li>
<li><a href="Hello"></a></li>
<li><a href="Number"></a></li>
<li><a href="Call"></a></li>
</ul>

</div>
<div id="kolumn2"> &nbsp;</div>
<div id="kolumn3"> &nbsp;</div>

</div>
</body>

</html>

Magentix · Dec 13, 2010

If your CSS is in a subfolder, then you need to move up another level.

Example:
www.mysite.com/path/to/index.html wants to link an image at www.mysite.com/images/sheep.gif

If your stylesheet is located at www.mysite.com/path/to/style/main.css, then you don't refer to the image as ../../images/sheep.gif, but as ../../../images/sheep.gif

You could also use absolute paths like /images/sheep.gif

Lord Regno · Dec 14, 2010

I think I explained the problem bad yesterday, I where tired and where going to go to sleep.

The pictures works. But some pictures been shown to 150%-200%, like its are one and a half to two picture on a link depends on the size of the text.

Example:
[ Home ] [ Another page ][ |[ Page two ][ |[Page three][ |

JerseyFoo · Dec 14, 2010

Why call it meny?

Code:

#meny{
	margin-left: 0;
	padding-left: 0;
	font-size: 100%;
	padding-top: 7px;
}

#meny li{
	display: inline-block;
	list-style-type: none;
	margin-left: 4px;
	background: transparent url('../../Bilder/Knappar/buttonA4.jpg');
        padding: 0.3em 2.85em;
}

a{
	text-decoration: none;
}

If you don't like that, don't use a list.

You will also probably need fixed-widths and heights for your button, backgrounds do not scale.

Lord Regno · Dec 14, 2010

That code didn't work either. Well I will upload a link code so that you can see the problem:

EDIT3: Link removed

EDIT: meny is the Swedish word for menu
EDIT2: Added background-repeat:no-repeat; but now I have problems with the space

JerseyFoo · Dec 14, 2010

You need fixed-width buttons.

Lord Regno · Dec 14, 2010

JerseyFoo said:
You need fixed-width buttons.

Edit: I find a tutorial never mind I will try to fix it. Thanks for the help + rep

CSS link pic inline

Lord Regno

Active Member

Magentix

if (OP.statement == false) postCount++;

Lord Regno

Active Member

JerseyFoo

1/g = g-1

Lord Regno

Active Member

JerseyFoo

1/g = g-1

Lord Regno

Active Member

Settings Notifications

Options

The Helper Discord

Members online

Share this page

Affiliates

Network Sponsors

CSS link pic inline

Active Member

if (OP.statement == false) postCount++;

Active Member

1/g = g-1

Active Member

1/g = g-1

Active Member

Log in

The Helper Discord

Share this page

Affiliates

Network Sponsors