- Inlägg: 1151
- Du är här:
- Hem
- Forum
- Senaste inlägg
Webdesign - Bakgrund bakom tabell... hjälp!
- Aspergergirl
- Författare till inlägg
- Offline
- Hedersmedlem
Less
Mer
11 år 10 månader sedan #491895
av Aspergergirl
Svar från Aspergergirl i ämnet Webdesign - Bakgrund bakom tabell... hjälp!
Här kommer ett långt inlägg, om någon orkar hjälpa mig. Det är koden till min sida i mitten. Jag antar att jag ska lägga till/ändra något här, för att centrera menyn:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " www.w3.org/TR/html4/loose.dtd"> ;
<html>
<head>
<title>Pandemrixskadades Förening</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>
<meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />
<style type="text/css">
Tack på förhand.
body {
margin-left: 80px;
margin-right: 80px;
background-image: url(forgatmigejbakgrund.gif);
background-repeat: repeat-y;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body text="#6699ff" bgcolor="#ffffff">
<div align="center" id="header-img">
<img src="header2.jpg" width="800" height="150" alt="Pandemrixskadades Förening" style="border : 3px solid #6699ff" align="center"></div>
<center>
<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
width:800px;
margin:auto;
list-style:none;
padding:0px 3px 3px 0px;
background-color:#6699ff;
background-repeat:repeat;
border-color:#CECECE;
border-width:4px;
border-style:ridge;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
position:absolute;
z-index: 1000;
left: 100;
top: 200;
}
* HTML ul.pureCssMenu {position:absolute}
ul.pureCssMenu ul{
width:191.1px;
}
ul.pureCssMenu li{
display:block;
margin:3px 0px 0px 3px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#6699ff;
border-width:1px;
border-color:#414141;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:bold 16px Arial;
color: #FFFFFF;
text-decoration:none;
cursor:pointer;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3;
height:100%;
display:inline-block;
background-color:#CECECE; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#A3A3A3;
border-color:#FFFFFF;
border-style:solid;
font:bold 16px Arial;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#A3A3A3;
border-color:#FFFFFF;
border-style:solid;
font:bold 16px Arial;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;
height:24px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrow_sub5.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:14px;}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub2.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arrow_sub5.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arrow_sub5.gif)}
</style>
<!-- End PureCSSMenu.com STYLE -->
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="index.html" target="_blank" title="Tillbaka till startsidan">Startsida</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Om föreningen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="info.html" target="_blank">Information</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="stadgar.html" target="_blank">Stadgar</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Medlemskap</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="avgift.html" target="_blank">Medlemsavgift</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="medlemsansokan.html" target="_blank">Medlemsansökan</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="huvudmedlem.html" target="_blank">Huvudmedlem</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="stodmedlem.html" target="_blank">Stödmedlem</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Nyheter</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="aktuellt.html" target="_blank">Aktuellt i föreningen</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="media.html" target="_blank">Nyheter i media</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="lankar.html" target="_blank">Länkar</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Kontakt</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="styrelsen.html" target="_blank">Styrelsen</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="ombud.html" target="_blank">Ombud</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="ovrigt.html" target="_blank">Övrigt</a></li>
</ul>
<a id="pcm" href=" www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->
<!-- (c) 2009, PureCSSMenu.com -->
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " www.w3.org/TR/html4/loose.dtd"> ;
<html>
<head>
<title>Pandemrixskadades Förening</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>
<meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />
<style type="text/css">
Tack på förhand.
body {
margin-left: 80px;
margin-right: 80px;
background-image: url(forgatmigejbakgrund.gif);
background-repeat: repeat-y;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body text="#6699ff" bgcolor="#ffffff">
<div align="center" id="header-img">
<img src="header2.jpg" width="800" height="150" alt="Pandemrixskadades Förening" style="border : 3px solid #6699ff" align="center"></div>
<center>
<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
width:800px;
margin:auto;
list-style:none;
padding:0px 3px 3px 0px;
background-color:#6699ff;
background-repeat:repeat;
border-color:#CECECE;
border-width:4px;
border-style:ridge;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
position:absolute;
z-index: 1000;
left: 100;
top: 200;
}
* HTML ul.pureCssMenu {position:absolute}
ul.pureCssMenu ul{
width:191.1px;
}
ul.pureCssMenu li{
display:block;
margin:3px 0px 0px 3px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#6699ff;
border-width:1px;
border-color:#414141;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:bold 16px Arial;
color: #FFFFFF;
text-decoration:none;
cursor:pointer;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3;
height:100%;
display:inline-block;
background-color:#CECECE; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#A3A3A3;
border-color:#FFFFFF;
border-style:solid;
font:bold 16px Arial;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#A3A3A3;
border-color:#FFFFFF;
border-style:solid;
font:bold 16px Arial;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;
height:24px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrow_sub5.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:14px;}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub2.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arrow_sub5.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arrow_sub5.gif)}
</style>
<!-- End PureCSSMenu.com STYLE -->
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="index.html" target="_blank" title="Tillbaka till startsidan">Startsida</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Om föreningen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="info.html" target="_blank">Information</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="stadgar.html" target="_blank">Stadgar</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Medlemskap</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="avgift.html" target="_blank">Medlemsavgift</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="medlemsansokan.html" target="_blank">Medlemsansökan</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="huvudmedlem.html" target="_blank">Huvudmedlem</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="stodmedlem.html" target="_blank">Stödmedlem</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Nyheter</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="aktuellt.html" target="_blank">Aktuellt i föreningen</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="media.html" target="_blank">Nyheter i media</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="lankar.html" target="_blank">Länkar</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Kontakt</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="styrelsen.html" target="_blank">Styrelsen</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="ombud.html" target="_blank">Ombud</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="ovrigt.html" target="_blank">Övrigt</a></li>
</ul>
<a id="pcm" href=" www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->
<!-- (c) 2009, PureCSSMenu.com -->
</body>
</html>
11 år 10 månader sedan #491898
av tobbe
Vad händer om du ökar värdet på <framset cols=90,*90"> ?
Jag brukar aldrig använda ramar så det är lite svårt att hjälpa.
Svar från tobbe i ämnet Webdesign - Bakgrund bakom tabell... hjälp!
Aspergergirl skrev: För att justera bredden på vänster och högerramen. Ska jag ändra något här?
<HTML><HEAD></HEAD>
<frameset rows="80,*">
<frame src="toppen.html" name="toppen" scrolling="no"marginheight="150" marginwidth="800">
<frameset cols="90,*,90">
<frame src="vanster.html" name="vänster"scrolling="auto">
<frame scrolling="auto" src="mitten.html" name="mitten">
<frame src="hoger.html" name="höger"scrolling="yes">
</frameset><noframes></noframes>
</HTML>
Vad händer om du ökar värdet på <framset cols=90,*90"> ?
Jag brukar aldrig använda ramar så det är lite svårt att hjälpa.
11 år 10 månader sedan #491900
av ikolito
Svar från ikolito i ämnet Webdesign - Bakgrund bakom tabell... hjälp!
Pröva att lägga menyn innanför div-taggen för headern!
11 år 10 månader sedan #491901
av tobbe
Svar från tobbe i ämnet Webdesign - Bakgrund bakom tabell... hjälp!
Vad händer om du ändrar detta.
Till
Code:
ul.pureCssMenu,ul.pureCssMenu ul {
width:800px;
margin:auto;
list-style:none;
padding:0px 3px 3px 0px;
background-color:#6699ff;
background-repeat:repeat;
border-color:#CECECE;
border-width:4px;
border-style:ridge;
}
Till
Code:
ul.pureCssMenu,ul.pureCssMenu ul {
width:800px;
margin-left:150px;
list-style:none;
padding:0px 3px 3px 0px;
background-color:#6699ff;
background-repeat:repeat;
border-color:#CECECE;
border-width:4px;
border-style:ridge;
}
- Aspergergirl
- Författare till inlägg
- Offline
- Hedersmedlem
Less
Mer
- Inlägg: 1151
11 år 10 månader sedan #491917
av Aspergergirl
Svar från Aspergergirl i ämnet Webdesign - Bakgrund bakom tabell... hjälp!
Jag har fått det att fungera! När jag ändrade bredden på vänster och höger ram (det fungerade med att ändra värdet i frameset cols) centrerades menyn automatiskt. Inte för att jag fattar hur/varför, men det ser bra ut nu.
Däremot undrar jag hur jag tar bort kantlinjen på den översta ramen. Den nedre linjen ser inte så bra ut på sidorna. Skulle vilja ha bort det.
Ni får ursäkta att jag frågar så mycket, men jag behöver lära mig. Hihi.
Nästa frågar är hur jag gör för att länka i ramarna. Om man klickar i menyn ska ju den nya sidan öppnas i samma ram. Jag antar att länkarna måste skapas i index/framesetfilen. Men hur sjutton gör jag det?
När jag skriver en länk i mittenramen så öppnas nästa sida utan ramarna runt.
Ibland är jag trög i huvudet. <!-- s:wink: --><img src="{SMILIES_PATH}/icon_wink.gif" alt="" title="Wink" /><!-- s:wink: -->
Däremot undrar jag hur jag tar bort kantlinjen på den översta ramen. Den nedre linjen ser inte så bra ut på sidorna. Skulle vilja ha bort det.
Ni får ursäkta att jag frågar så mycket, men jag behöver lära mig. Hihi.
Nästa frågar är hur jag gör för att länka i ramarna. Om man klickar i menyn ska ju den nya sidan öppnas i samma ram. Jag antar att länkarna måste skapas i index/framesetfilen. Men hur sjutton gör jag det?
När jag skriver en länk i mittenramen så öppnas nästa sida utan ramarna runt.
Ibland är jag trög i huvudet. <!-- s:wink: --><img src="{SMILIES_PATH}/icon_wink.gif" alt="" title="Wink" /><!-- s:wink: -->