MethodMedlem sedan apr. 2001357 inlägg Hej,
är en "gammal" tabellräv som ska ge mig in i CSS-dimman och jag har redan kört på grund...
Om ni tittar på webforum.jpg (bifogad) så vill jag ha slut resultatet
jag har kommit så långt att jag har fått in allt enl webforum2.jpg och i webbläsaren ser det ut som webforum3.jpg
här är min kod:
Html:
<div id="container">
<div id="toptabs">
<a class="toptab" href="index.html">Hem</a><span class="lineseparator"> | </span>
<a class="toptab" href="#">Kontakta oss</a><span class="lineseparator"> | </span>
<a class="toptab" href="#">Mina sidor</a><span class="lineseparator"> </span>
</div>
<div id="logo">
<div class="logobild"><img src="images/logo/huvudlogo.jpg" alt="" width="276" height="73" /></div>
</div>
<div id="navigation">
<ul>
<li><a href="#"><span>Kurser</span></a></li>
<li><a href="#"><span>Praktisk info</span></a></li>
<li><a href="#"><span>Bokning</span></a></li>
<li><a href="#"><span>Om oss</span></a></li>
<li class="last"><a href="#"><span>Länkar</span></a></li>
</ul>
</div>
<div id="Searchfield">
<span class="greyHeader">Vad söker du?</span> <input name="textfield" type="text" style="width: 210px;" id="textfield" size="30" /> <input type="submit" class="input" name="button" id="button" value="Sök" />
</div>
</div>
CSS:
/* General layout */
body {background-image: url(images/bakgrnd/greyblue_line.gif); background-repeat: repeat-x; color:#000000; font:76% tahoma, verdana, sans-serif; margin:0; padding:0 0 0;}
#container {margin:0 auto 0; padding:0px 0px 0px; width:950px;}
/* Tags */
a {color:#000000; text-decoration:none;}
a:hover {color:#000000; text-decoration:none;}
a img {border:0;}
/* Toptabs menu */
#toptabs {font-size:.8em; margin:5px auto -13px; width:200px; text-align:right; float:right;}
.toptab {margin:0 5px 0 0; padding:4px 5px 4px; text-decoration:none;}
.toptab:hover { text-decoration:underline;}
/* Logo */
#logo {margin:0 auto 0px; width:950px; text-align:left;}
/* Searchfield */
#Searchfield {width:950px; font-size: 1.1em; margin:0px auto 0px; color:#3066a9; text-align:center; font-weight:bold; padding:10px 0px 0px;}
/* Navigation */
#navigation {width:950px; font-size: 1.1em; padding-top: 0px;}
#navigation ul, #navigation ul li {list-style: none; margin: 0; padding: 0;}
#navigation ul { padding: 5px 0 4px; text-align: right;}
#navigation ul li {display: inline;margin-right: -5px;}
#navigation ul li.last {margin-right: 0;}
#navigation ul li a {background: url("images/knappar/tab-right.gif") no-repeat 100% 0; color: #06C;padding: 5px 0; text-decoration: none;}
#navigation ul li a span {background: url("images/knappar/tab-left.gif") no-repeat; padding: 5px 1em;}
#navigation ul li a:hover span {color: #69C; text-decoration: underline;}
* html #navigation ul li a {padding: 0;}
Sen har jag ett problem med din lilla menyn längst upp till höger jag vill lägga in en bakgrundsbild under texten enl bild webforum.jpg
Hoppas ni förstår mitt problem annars får ni be mig förklara närmare.
Tack på förhand
// Jonas
MethodMedlem sedan apr. 2001357 inlägg Jag har fått det att se bra ut skulle någon vilja slänga ett öga på koden o säga om det är ok kodmässigt
HTML:
<div id="container">
<div id="logo">
<div class="logobild"><img src="images/logo/huvudlogo.jpg" alt="" width="276" height="73" /></div>
</div>
<div id="toptabs">
<a class="toptab" href="index.html">Hem</a><span class="lineseparator"> | </span>
<a class="toptab" href="#">Kontakta oss</a><span class="lineseparator"> | </span>
<a class="toptab" href="#">Mina sidor</a><span class="lineseparator"> </span>
</div>
<div id="navigation">
<ul>
<li class="activetab"><a href="#"><span>Kurser</span></a></li>
<li><a href="#"><span>Praktisk info</span></a></li>
<li><a href="#"><span>Bokning</span></a></li>
<li><a href="#"><span>Om oss</span></a></li>
<li class="last"><a href="#"><span>Länkar</span></a></li>
</ul>
</div>
<div id="Searchfield">
<form id="form1" name="form1" method="post" action="">
<span class="greyHeader">Vad söker du?</span> <input name="textfield" type="text" style="width: 210px;" id="textfield" size="30" /> <input type="submit" class="input" name="button" id="button" value="Sök" /> </form>
</div>
</div>
CSS:
/* \*/
* html #tlc, * html #trc {height: 1%;}
#tlc, #trc { zoom: 1 }
/* */
/* General layout */
body {background-image: url(images/bakgrnd/greyblue_line.gif); background-repeat: repeat-x; color:#000000; font:76% tahoma, verdana, sans-serif; margin:0; padding:0 0 0;}
#container {margin:0 auto 0; padding:0px 0px 0px; width:950px;}
/* Tags */
a {color:#000000; text-decoration:none;}
a:hover {color:#000000; text-decoration:none;}
a img {border:0;}
/* Toptabs menu */
#toptabs {font-size:.8em; margin:5px auto -13px; width:674px; text-align:right; float:left;}
.toptab {margin:0 5px 0 0; padding:4px 5px 4px; text-decoration:none;}
.toptab:hover { text-decoration:underline;}
/* Logo */
#logo {margin:0 auto 0; width:276px; text-align:left; float:left;}
/* Searchfield */
#Searchfield {width:950px; font-size: 1.1em; margin:0px auto 0px; color:#3066a9; text-align:center; font-weight:bold; padding:10px 0px 0px; float:left;}
/* Navigation */
#navigation {width:674px; font-size: 1.1em; padding-top: 0px; margin:44px auto -13px; float:left;}
#navigation ul, #navigation ul li {list-style: none; margin: 0; padding: 0;}
#navigation ul { padding: 5px 0 4px; text-align: right;}
#navigation ul li {display: inline;margin-right: -5px;}
#navigation ul li.last {margin-right: 0;}
#navigation ul li a {background: url("images/knappar/tab-right.gif") no-repeat 100% 0; color: #FFFFFF;padding: 7px 0; text-decoration: none;}
#navigation ul li a span {background: url("images/knappar/tab-left.gif") no-repeat; padding: 7px 1em;}
#navigation ul li a:hover span {color: #CCCCCC; text-decoration: underline;}
* html #navigation ul li a {padding: 0;}
.activetab {background: url("images/knappar/tab-right.gif") no-repeat 100% 0; color: #06C;padding: 7px 0; text-decoration: none;}
Sen har jag en extrafundering kring menyn som är uppbyggd av en punktlista
När man har klickat på en sida så att en flik blir active så vill jag att den ska ändra färg dvs byta bild på bara den fliken. så som jag har illustrerat på bilden jag har bifogat (nu är alla blåa enl css koden)
Tack på förhand
MethodMedlem sedan apr. 2001357 inlägg Jag löste det med en annan formatering av punktmenyn men är fortfarande lite fundersam kring placeringen av divarna... skulle någon kunna titta på det kodmässigt annars är allt löst.
se mitt första inlägg på bild webforum.jpg det är så jag vill att det ska vara placerat fast med csskod istälet för tabell ska man använda sig av absolut eller relative placaring vilket är "bäst"
HTML
<div id="container">
<div id="logo">
<div class="logobild"><img src="images/logo/huvudlogo.jpg" alt="" width="276" height="73" /></div>
</div>
<div id="toptabs">
<a class="toptab" href="index.html">Hem</a> |
<a class="toptab" href="#">Kontakta oss</a> |
<a class="toptab" href="#">Mina sidor</a> </div>
<div id="TopMenuPanel">
<div id="TopMenuControl_MenuPanel">
<ul id="TopMenuControl_Navigator" class="TopMenu stackNavigator">
<li><a href="#">Länkar</a></li>
<li><a href="#">Om oss</a></li>
<li><a href="#">Bokning</a></li>
<li><a href="#">Praktisk info</a></li>
<li class="active"><a href="#">Kurser</a></li>
</ul>
</div>
</div>
<div id="Searchfield">
<form id="form1" name="form1" method="post" action="">
<span class="greyHeader">Vad söker du?</span> <input name="textfield" type="text" style="width: 210px;" id="textfield" size="30" /> <input type="submit" class="input" name="button" id="button" value="Sök" /> </form>
</div>
CSS
/* General layout */
body {background-image: url(images/bakgrnd/greyblue_line.gif); background-repeat: repeat-x; color:#000000; font-family:"Gill Sans MT" , Arial, Sans-Serif; margin:0; padding:0 0 0;}
#container {margin:0 auto 0; padding:0px 0px 0px; width:950px;}
/* Tags */
a {color:#000000; text-decoration:none;}
a:hover {color:#000000; text-decoration:none;}
a img {border:0;}
/* Toptabs menu */
#toptabs {
position:absolute;
font-size:.8em;
width:950px;
text-align:right;
z-index: 1;
}
.toptab {text-decoration:none;}
.toptab:hover {color:#3066a9; text-decoration:underline;}
/* Logo */
#logo {width:950px; z-index:0; float:left; position:absolute;}
/* Searchfield */
#Searchfield {float:left; position:absolute; top:79px; width:950px; font-size: 1em; margin:0 auto 0; color:#3066a9; text-align:center; font-weight:bold;}
/* TopMenu */
#TopMenuPanel {float:right; position:relative; right:0; padding-right:0;}
.TopMenu {list-style:none none; margin:0; padding:0;}
.TopMenu li {
font-size:1.0em;
position:relative;
float:right;
height: 37px;
width: 102px;
text-align:center;
background:transparent url(images/knappar/bg.png) no-repeat 0 0;
margin: 39px -5px 0 0;
padding: 0;
overflow: hidden;
}
.TopMenu li a,
.TopMenu li span {display: block; text-decoration: none; padding: 6px 0 7px; color: #FFFFFF; white-space: nowrap;}
.TopMenu li a:hover {color: #FFFFFF; text-decoration: none;}
.TopMenu img.normal {}
.TopMenu img.selected {display: none;}
.TopMenu .active{ background-image: url(images/knappar/bg_sel.png);}
.TopMenu .active a{color: #3066a9;}
.TopMenu .active img.normal {display: none;}
.TopMenu .active img.selected {display: inline;}
