Avatar billede flashit Nybegynder
20. juni 2008 - 13:43 Der er 13 kommentarer og
2 løsninger

form tag ødelægger designet

Hej e

Jeg har lige købt et design. Nu er jeg så ved at lægge det ind i en master page i .net.
Problemet er så at når jeg smmider html'en ind i et Form element så ødelægger den css'ne. Er her en som kna hjælpe mig på vej.

Jeg lægger Html'en og css nedenfor.

HTML
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="DotdkWeb20.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
   
    <div id="main">
<!--leftMain start -->
<div id="leftMain">
<!--left start -->
    <div id="left">
<ul class="nav">
<li><a href="#" class="hover">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Testimonials</a></li>
<li class="last"><a href="#">Blog</a></li>
</ul>
<ul class="sub">
<li><a href="#">Archives</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Subscribe</a></li>
<li class="last2"><a href="#">Contact</a></li>
</ul>
<img src="images/logo.gif" alt="illusion" width="294" height="66" class="logo" />
<h2 class="welcome">Welcome</h2>
<p class="red">Viverra, lectus a mollis tincidunt, neque odio sodales dolor, quis aliquet dolor sem sit amet mauris.</p>
<p class="lftTxt"><span>Sed lobortis suscipit ligula. Sed varius, lacus ut bibendum rutrum, sapen metus varius ante</span>, sit amet placerat risus turpis vitae magna. Pellentesque tincidunt mi at lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.<br />
<span>Proin at ante npurus porta ornare. In urna mi, euismod</span></p>
<br class="spacer" />
</div>
<!--left end -->
<!--yellow start -->
<div id="yellowMain">
<div id="yellow">
<h2 class="what">What We Say<br /><span>Aliquam venenatis tincidunt dui</span></h2>
<ul class="link1">
<li><a href="#">litora torquent per conubia nostra,</a></li>
<li><a href="#">Per inceptos hymenaeos. Proin at</a></li>
<li><a href="#">Ante non purus porta ornare. In </a></li>
<li><a href="#">Urna mi, euismod</a></li>
</ul>
<ul class="link2">
<li><a href="#">Nisi, hendrerit bibendum erpede </a></li>
<li><a href="#">Bon ipsum. In at libero vitae dolor </a></li>
<li><a href="#">Fringilla hendrerit. Duis semper</a></li>
<li><a href="#">Gaucibus lorem</a></li>
</ul>
</div>
</div>
<!--yellow end -->
<!--news start -->
<div id="newsMain">
<div id="news">
<h2 class="event">News And Events</h2>
<h3 class="date">On 10th June 2007</h3>
<p class="newsTxt"><span>Sed lobortis suscipit ligula. Sed varius, lacus ut bibendum rutrum, sapen metus varius ante</span>, sit amet placerat risus turpis vitae magna. Pellentesque tincidunt mi at lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
<a href="#" class="newsLink">Proin at ante npurus porta ornare. In urna mi, euismod</a>
</div>
</div>
<!--news end -->
<br class="spacer" />
</div>
<!--leftMain end -->
<!--midMain start -->
<div id="midMain">
<div id="mid">
<ul>
<li>&nbsp;&nbsp;&nbsp; Morbi viverra lectus<a href="#" class="pic1"></a></li>
<li>&nbsp;&nbsp;&nbsp; Class aptent taciti<a href="#" class="pic2"></a></li>
<li>&nbsp;&nbsp;&nbsp; Class aptent taciti<a href="#" class="pic3"></a></li>
</ul>
<h2>Mauris nulla</h2>
<p class="midTxt"><i>Euismod eleifend, dolor lacus congue lectus, eu luctus</i></p>
<a href="index.html"><img src="images/mid_logo.gif" alt="illusion" width="170" height="46" border="0" class="midLogo" /></a></div>
<br class="spacer" />
</div>
<!--midMain end -->
<!--rightMain start -->
<div id="rightMain">
<!--rightTopMain start -->
<div id="righttopmain">
<p class="rightToptxt">Mauris nulla magna, <a href="#" class="rightLink1">fringilla</a></p>
<form name="serch" action="#" method="post">
<input type="text" name="serch_item" class="serchTxtBox" value="Search Items" />
<input type="submit" name="serch" value="Search" class="serch" />
</form>
</div>
<!--rightTopMain end -->
<!--memberMain start -->
<div id="memberMain">
<!--member start -->
<div id="member">
<form name="member_login" action="#" method="post">
<h2>Member Login</h2>
<input type="text" name="name" class="memberTxtBox" value="Enter your name" />
<input type="password" name="password" class="memberTxtBox" value="Enter your password" />
<input type="checkbox" name="chk" class="chkBox" />
<input type="submit" name="login" value="Login" class="login" />
<label>Remember me</label>
<br class="spacer" />
</form>
<a href="#" class="reg"></a>
</div>
<!--member end -->
</div>
<!--memberMain end -->
<!--redMain start -->
<div id="redMain">
<!--red start -->
<div id="red">
<h2>illution 2007</h2>
<p class="pro"></p>
<ul>
<li><a href="#">Dui proin elit lorem, blandit</a></li>
<li><a href="#">Tpat vel, facilisis sed, enim enrabitur </a></li>
<li><a href="#">nec sem accumsan an Nonummy</a></li>
<li><a href="#">volutpat eros.Donec ar</a></li>
</ul>
</div>
<!--red end -->
</div>
<!--redMain end -->
<!--yellowMain2 start -->
<div id="yellowMain2">
<!--yellow2 start -->

<!--yellow2 end -->
<br class="spacer" />
</div>
<!--rightMain end -->
</div>
<!--yellowMain2 end -->
<br class="spacer" />
</div>
<!--main end -->
<!--footer start -->
<div id="footerMain">
  <div id="footer">
    <ul>
      <li><a href="#" class="one">Home</a>|</li>
      <li><a href="#">About us</a>|</li>
      <li><a href="#">Services</a>|</li>
      <li><a href="#">Support</a>|</li>
      <li><a href="#">Testimonials</a>|</li>
      <li><a href="#">Blog</a>|</li>
      <li><a href="#">Archive</a>|</li>
      <li><a href="#">Login</a>|</li>
      <li><a href="#">Subscribe</a>|</li>
      <li><a href="#">Contact</a></li>
    </ul>
    <p class="copyright">Copyright © Illusion 20XX. All Rights Reserved.</p>
    <p class="design">Designed by : <a href="http://www.templateworld.com/" target="_blank" class="link">Template
      World</a></p>
    <a href="http://validator.w3.org/check?uri=referer" class="xhtml">Xhtml valid</a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer" class="css">css
    valid</a> </div>
</div>
<!--footer end -->

   
</body>
</html>

CSS
/* CSS Document */

body{
    padding:0;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:url(images/body_bg.gif) 0 0 repeat-x #EECD50;
    color:#000;
}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
    margin:0; padding:0;
}

ul{
    margin:0;
    padding:0;
    list-style-type:none;
    font-size:0;
}
.spacer{
    clear:both;
    font-size:0;
    line-height:0;
}
/*------------------------------------------------body--------------------*/

/*------------------------------------------------main--------------------*/
#main{
    width:100%;
    padding:0;
    margin:0;
}
#innermain{
    width:100%;
    padding:0;
    margin:0;
    background-image: url(images/inner_bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}
/*------------------------------------------------left--------------------*/
#leftMain{
    width:49.99%;
    float:left;
    }
#innerleftMain{
    width:49.99%;
    float:left;
    margin-top: 0;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0;
    }
#left{
    width:469px;
    float:right;
    padding:0 11px 0 0;
    background:url(images/left_panel_pic.gif) 0 61px no-repeat;
}
#left ul.nav{
    width:456px;
    padding:0 0 0 13px;
    margin:0;
    float:left;
}
#left ul.nav li{
    background:url(images/nav_div.gif) right top no-repeat;
    height:35px;
    padding:0 2px 0 0;
    float:left;
}
#left ul.nav li a{
    display:block;
    background:url(images/nav_bg.gif) 0 0 repeat-x;
    padding:0 14px;
    font:bold 11px/35px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
    text-decoration:none;
}
#left ul.nav li a:hover{
    background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
    padding:0 13px;
    border-left:#000000 solid 1px;
    border-right:#000000 solid 1px;
    display:block;
}
#left ul.nav li.last{
    background-image:none;
}
#left ul.nav li a.hover{
    display:block;
    background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
    padding:0 13px;
    border-left:#000000 solid 1px;
    border-right:#000000 solid 1px;
    font:bold 11px/35px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
    text-decoration:none;
}
#left ul.sub{
    width:301px;
    padding:0;
    margin:0 0 101px 0;
    float:right;
}
#left ul.sub li{
    float:left;
    border-right:#393939 solid 1px;
    height:26px;
}
#left ul.sub li a{
    padding:0 14px;
    display:block;
    font:bold 11px/26px Arial, Helvetica, sans-serif;
    color:#ABABAB;
    background-color:inherit;
    text-decoration:none;
}
#left ul.sub li a:hover{
    background-color:inherit;
    color:#708110;
}
#left ul.sub li.last2{
    border:none;
}
#left img.logo{
    display:block;
    margin:0 0 0 139px;
    padding:0 36px 0 0;
    width:294px;
    height:66px;
    float:right;
}
#left h2.welcome{
    display:block;
    width:457px;
    height:28px;
    font:bold 28px/20px Arial, Helvetica, sans-serif;
    color:#383838;
    background-color:inherit;
    border-bottom:#FAF1CE solid 1px;
    float:left;
    margin:45px 0 0 0;
}
#left p.red{
    display:block;
    width:457px;
    font:normal 18px/25px Arial, Helvetica, sans-serif;
    color:#8A0909;
    background-color:inherit;
    margin:0 0 20px 0;
    padding:13px 0 9px 0;
    float:left;
    background:url(images/left_div.gif) left bottom repeat-x;
}
#left p.lftTxt{
    display:block;
    width:457px;
    font:normal 13px/20px Arial, Helvetica, sans-serif;
    margin:0 0 28px 0;
    padding:0;
    float:left;
}
#left p.lftTxt span{
    font:bold 13px/20px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
}
#yellowMain{
    width:100%;
    padding:19px 0 24px 0;
    background:url(images/yellow_1px.gif) 0 0 repeat-x #AB8D25;
    color:#000;
    float:right;
}
#yellow{
    width:469px;
    padding:0 11px 0 0;
    float:right;
}
#yellow h2.what{
    display:block;
    width:245px;
    height:62px;
    background:url(images/what_we_say_icon.gif) 0 0 no-repeat;
    padding:10px 92px 0 122px;
    border-bottom:#C4A83E solid 4px;
    font:bold 28px/25px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:#AB8D25;
}
#yellow h2.what span{
    font:bold 16px/25px Arial, Helvetica, sans-serif;
    color:#2E2E2E;
    background-color:inherit;
}
#yellow ul.link1{
    width:229px;
    background:url(images/left_div2.gif) right top repeat-y;
    padding:0 0 0 0;
    margin:11px 0 0 0;
    float:left;
    font-size:0;
}
#yellow ul.link1 li{
    padding:0;
    margin:0;
    line-height:0;
    font-size:0;
}
#yellow ul.link1 li a{
    display:block;
    background:url(images/arrow_red.gif) 0 6px no-repeat;
    padding:0 0 0 11px;
    font:bold 11px/18px Arial, Helvetica, sans-serif;
    color:#F1DF9A;
    background-color:inherit;
    text-decoration:none;
}
#yellow ul.link1 li a:hover{
    color:#fff;
    background-color:#9A7F22;
}
#yellow ul.link2{
    width:201px;
    padding:0 10px 0 0;
    margin:11px 0 0 0;
    float:right;
    font-size:0;
}
#yellow ul.link2 li{
    padding:0;
    margin:0;
    line-height:0;
    font-size:0;
}
#yellow ul.link2 li a{
    display:block;
    background:url(images/arrow_red.gif) 0 6px no-repeat;
    padding:0 0 0 11px;
    font:bold 11px/18px Arial, Helvetica, sans-serif;
    color:#F1DF9A;
    background-color:inherit;
    text-decoration:none;
}
#yellow ul.link2 li a:hover{
    color:#fff;
    background-color:#9A7F22;
}
#newsMain{
    width:100%;
    padding:8px 0 48px 0;
    background-color:#F8EAA1;
    color:#000;
    float:right;
}
#news{
    width:469px;
    padding:0 11px 0 0;
    float:right;
}
#news h2.event{
    display:block;
    width:469px;
    height:36px;
    font:bold 22px/36px Arial, Helvetica, sans-serif;
    color:#383838;
    background-color:inherit;
}
#news h3.date{
    display:block;
    width:450px;
    height:20px;
    font:bold 12px/20px Arial, Helvetica, sans-serif;
    color:#8A0909;
    background-color:#FAF1CE;
    padding:0 0 0 8px;
    margin:0;
}
#news p.newsTxt{
    display:block;
    width:461px;
    font:normal 13px/20px Arial, Helvetica, sans-serif;
    margin:0;
    padding:16px 0 6px 0;
}
#news p.newsTxt span{
    font:bold 13px/20px Arial, Helvetica, sans-serif;
    color:#AF6802;
    background-color:inherit;
}
#news a.newsLink{
    font:normal 13px/20px Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    color:#5F7403;
    background-color:inherit;
    text-decoration:underline;
}
#news a.newsLink:hover{
    text-decoration:none;
}
/*------------------------------------------------left--------------------*/

/*------------------------------------------------middle--------------------*/
#midMain{
    width:215px;
    float:left;
    background:url(images/mid_panel_bg.gif) 0 0 repeat-x #FFF6D7;
    color:#000;
    padding:0 0 36px 0;
}
#mid{
    width:196px;
    padding:10px 0 0 9px;
}
.midtext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
}

#mid ul{
    padding:0;
    margin:0;
    font-size:0;
   
}
#mid ul li{
    font:bold 11px/29px Arial, Helvetica, sans-serif;
    background-image: url(images/arrow_red.gif);
    background-repeat: no-repeat;
    background-position: 0 12px;
    padding-top: 0;
    padding-right: 10;
    padding-bottom: 0;
    padding-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
#mid ul li a.pic1{
    display:block;
    background:url(images/mid_pic1.gif) 0 0 no-repeat;
    height:204px;
}
#mid ul li a.pic1:hover{
    background:url(images/mid_pic1_hover.gif) 0 0 no-repeat;
}
#mid ul li a.pic2{
    display:block;
    background:url(images/mid_pic2.gif) 0 0 no-repeat;
    height:204px;
}
#mid ul li a.pic2:hover{
    background:url(images/mid_pic2_hover.gif) 0 0 no-repeat;
}
#mid ul li a.pic3{
    display:block;
    background:url(images/mid_pic3.gif) 0 0 no-repeat;
    height:204px;
}
#mid ul li a.pic3:hover{
    background:url(images/mid_pic3_hover.gif) 0 0 no-repeat;
}
#mid h2{
    display:block;
    width:168px;
    height:26px;
    font:bold 28px/20px Arial, Helvetica, sans-serif;
    color:#690101;
    background-color:inherit;
    border-bottom:#D4C8A0 solid 2px;
    margin:0 0 13px 18px;
}
#mid p.midTxt{
    display:block;
    width:158px;
    font:bold 18px/23px Arial, Helvetica, sans-serif;
    color:#B8AE7C;
    background-color:inherit;
    padding:0 0 10px 22px;
}
#mid img.midLogo{
    display:block;
    width:170px;
    height:46px;
    margin:0 0 0 12px;
}
/*------------------------------------------------middle--------------------*/

/*------------------------------------------------right--------------------*/
#rightMain{
    width:28.65%;
    float:left;
}
#innerrightMain{
    width:18.65%;
    float:right;
}
#righttopmain{
    width:100%;
    float:left;
    padding:12px 0 0 0;
    background:url(images/serch_bg.gif) 0 170px repeat-x;
}
#righttopmain p.rightToptxt{
    width:165px;
    font:normal 11px/16px Arial, Helvetica, sans-serif;
    color:#F3F3F3;
    background-color:inherit;
    padding:0 0 0 13px;
}
#righttopmain p.rightToptxt a.rightLink1{
    font:bold 11px/16px Arial, Helvetica, sans-serif;
    text-decoration:underline;
    color:#F3F3F3;
    background-color:inherit;
}
#righttopmain p.rightToptxt a.rightLink1:hover{
    text-decoration:none;
}
#righttopmain form{
    width:220px;
    background:url(images/serch_icon.gif) 13px 0 no-repeat;
    padding:0 0 0 49px;
    margin:164px 0 0 0;
    height:50px;
}
#righttopmain form input.serchTxtBox{
    width:144px;
    height:23px;
    border-left:#808080 solid 1px;
    border-top:#808080 solid 1px;
    border-right:#D4D0C8 solid 1px;
    border-bottom:#D4D0C8 solid 1px;
    padding:0 0 0 8px;
    margin:0 1px 0 0;
    background-color:#fff;
    color:#000;
    font:normal 12px/23px Arial, Helvetica, sans-serif;
    float:left;
}
#righttopmain form input.serch{
    background:url(images/btn_serch.gif) 0 0 no-repeat;
    width:65px;
    height:25px;
    background-color:#5C5C5C;
    color:#000;
    font:bold 11px/25px Arial, Helvetica, sans-serif;
    float:left;
    cursor:pointer;
    border:none;
}
#memberMain{
    width:100%;
    float:left;
    padding:0 0 10px 0;
    margin:30px 0 0 0;
}
#member{
    width:258px;
    padding:0 0 0 12px;
    float:left;
}
#member form{
    width:225px;
    padding:12px 15px 23px 16px;
    border:#B2962B solid 1px;
    background-color:#FFF6D7;
    color:#000;
    margin:0 0 10px 0;
}
#member form h2{
    width:190px;
    height:26px;
    padding:0 0 0 34px;
    background:url(images/member_login_icon.gif) 0 0 no-repeat;
    margin:0 0 7px 0;
    background-color:inherit;
    color:#C17406;
    font:bold 18px/26px Arial, Helvetica, sans-serif;
    float:left;
}
#member form input.memberTxtBox{
    width:217px;
    height:23px;
    border-left:#808080 solid 1px;
    border-top:#808080 solid 1px;
    border-right:#D4D0C8 solid 1px;
    border-bottom:#D4D0C8 solid 1px;
    padding:0 0 0 6px;
    margin:0 0 8px 0;
    background-color:#fff;
    color:#000;
    font:normal 12px/23px Arial, Helvetica, sans-serif;
    float:left;
}
#member form input.chkBox{
    width:13px;
    height:13px;
    float:left;
    margin:0 8px 0 0;
}
#member form label{
    display:block;
    width:83px;
    height:13px;
    background-color:inherit;
    color:#6A8510;
    font:bold 11px/13px Arial, Helvetica, sans-serif;
    float:left;
}
#member form input.login{
    background:url(images/btn_serch.gif) 0 0 no-repeat;
    width:65px;
    height:25px;
    background-color:#5C5C5C;
    color:#000;
    font:bold 11px/25px Arial, Helvetica, sans-serif;
    float:right;
    cursor:pointer;
    border:none;
}
#member a.reg{
    display:block;
    background:url(images/free_registration.gif) 0 0 no-repeat;
    width:257px;
    height:69px;
   
    line-height:0;
    font-size:0;
}
#member a.reg:hover{
    background:url(images/free_registration_hover.gif) 0 0 no-repeat;
}
#redMain{
    width:100%;
    background:url(images/red_1px.gif) 0 0 repeat-x #690101;
    color:#FFF6D7;
    float:left;
    margin:0;
    padding:16px 0 17px 0;
}
#red{
    width:250px;
    padding:0 0 0 13px;
    float:left;
}
#red h2{
    display:block;
    background:url(images/illution_2007.gif) 0 0 no-repeat;
    width:105px;
    height:74px;
    float:left;
    text-indent:-2000px;
}
#red p.pro{
    display:block;
    background:url(images/project_bg.gif) 0 0 no-repeat;
    width:124px;
    height:64px;
    float:right;
}
#red ul{
    padding:18px 0 0 0;
    margin:0;
    float:left;
}
#red ul li{
    padding:0;
    margin:0;
    float:left;
    display:block;
}
#red ul li a{
    display:block;
    background:url(images/arrow_black.gif) 0 7px no-repeat;
    padding:0 0 0 23px;
    font:bold 12px/20px Arial, Helvetica, sans-serif;
    color:#E1890C;
    text-decoration:none;
    background-color:inherit;
    width:210px;
}
#red ul li a:hover{
    color:#4B4B4B;
    background-color:#F9EBBA;
}
#yellowMain2{
    width:100%;
    float:left;
    padding:0 0 23px 0;
    background-color:#F8EAA1;
    color:#383838;
}
#yellow2{
    width:256px;
    float:left;
    padding:0 0 0 13px;
}
#yellow2 h2{
    display:block;
    width:256px;
    font:bold 22px/53px Arial, Helvetica, sans-serif;
    height:53px;
    float:left;
}
#yellow2 ul{
    padding:0;
    margin:0;
    float:left;
    width:256px;
}
#yellow2 ul li{
    padding:0;
    margin:0;
    display:block;
    font-size:0;
    line-height:0;
}
#yellow2 ul li a{
    display:block;
    background:url(images/arrow_green.gif) 0 7px no-repeat;
    padding:0 0 0 17px;
    font:bold 12px/22px Arial, Helvetica, sans-serif;
    color:#AF6802;
    background-color:inherit;
    text-decoration:underline;
    width:256px;
}
#yellow2 ul li a:hover{
    color:#000;
    background-color:#EDE099;
    text-decoration:none;
}
/*------------------------------------------------right--------------------*/

/*------------------------------------------------main--------------------*/

/*------------------------------------------------footer--------------------*/
#footerMain{
    width:100%;
    height:108px;
    background:url(images/footer_bg.gif) 0 0 repeat-x;
}
#footer{
    width:948px;
    height:108px;
    margin:0 auto;
    position:relative;
}
#footer ul{
    width:574px;
    position:absolute;
    left:0;
    top:20px;
}
#footer ul li{
    float:left;
    font:normal 11px/22px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
}
#footer ul li a{
    padding:0 8px;
    font:normal 11px/16px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
    text-decoration:none;
}
#footer ul li a:hover{
    text-decoration:underline;
}
#footer ul li a.one{
    padding:0 8px 0 0;
    font:normal 11px/16px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
    text-decoration:none;
}
#footer ul li a.one:hover{
    text-decoration:underline;
}
#footer p.copyright{
    font:normal 11px/16px Arial, Helvetica, sans-serif;
    position:absolute;
    left:0;
    top:41px;
    color:#A0C212;
    background-color:inherit;
    width:230px;
}
#footer p.design{
    display:block;
    width:176px;
    height:21px;
    padding:0;
    position:absolute;
    left:0;
    top:63px;
    font:bold 12px/13px Arial, Helvetica, sans-serif;
    color:#BCAC58;
    background-color:inherit;
}
#footer p.design a.link{
    font:bold 12px/13px Arial, Helvetica, sans-serif;
    color:#BCAC58;
    background-color:inherit;
    text-decoration:none;
}
#footer p.design a.link:hover{
    color:#000;
    background-color:#F7F7F7;
}
#footer a.xhtml{
    display:block;
    background:url(images/xhtml_bg.gif) 0 0 no-repeat;
    width:80px;
    height:25px;
    font:bold 11px/25px Arial, Helvetica, sans-serif;
    color:#2F2F2F;
    background-color:inherit;
    text-decoration:none;
    text-transform:uppercase;
    position:absolute;
    left:726px;
    top:18px;
    padding:0 0 0 25px;
}
#footer a.xhtml:hover{
    color:#690101;
    background:url(images/xhtml_bg_hover.gif) 0 0 no-repeat;
    background-color:inherit;
}
#footer a.css{
    display:block;
    background:url(images/xhtml_bg.gif) 0 0 no-repeat;
    width:80px;
    height:25px;
    font:bold 11px/25px Arial, Helvetica, sans-serif;
    color:#2F2F2F;
    background-color:inherit;
    text-decoration:none;
    text-transform:uppercase;
    position:absolute;
    left:843px;
    top:18px;
    padding:0 0 0 25px;
}
#footer a.css:hover{
    color:#690101;
    background:url(images/xhtml_bg_hover.gif) 0 0 no-repeat;
    background-color:inherit;
}
/*-----------------------------------------------------------------------------footer---------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------innerpage------------------------------------------------------------------------------*/
#innerleft{
    width:469px;
    float:right;
    padding:0 11px 0 0;
    background:url(images/left_panel_pic.gif) 0 61px no-repeat;
}
#innerleft ul.innernav{
    width:456px;
    padding:0 0 0 13px;
    margin:0;
    float:left;
}
#innerleft ul.innernav li{
    background:url(images/nav_div.gif) right top no-repeat;
    height:35px;
    padding:0 2px 0 0;
    float:left;
}
#innerleft ul.innernav li a{
    display:block;
    background:url(images/nav_bg.gif) 0 0 repeat-x;
    padding:0 14px;
    font:bold 11px/35px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
    text-decoration:none;
}
#innerleft ul.innernav li a:hover{
    background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
    padding:0 13px;
    border-left:#000000 solid 1px;
    border-right:#000000 solid 1px;
    display:block;
}
#innerleft ul.innernav li.innerlast{
    background-image:none;
}
#innerleft ul.innernav li a.hover{
    display:block;
    background:url(images/nav_bg_hover.gif) 0 0 repeat-x;
    padding:0 13px;
    border-left:#000000 solid 1px;
    border-right:#000000 solid 1px;
    font:bold 11px/35px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
    text-decoration:none;
}
#innerleft ul.innersub{
    width:301px;
    padding:0;
    margin:0 0 101px 0;
    float:right;
}
#innerleft ul.innersub li{
    float:left;
    border-right:#393939 solid 1px;
    height:26px;
}
#innerleft ul.innersub li a{
    padding:0 14px;
    display:block;
    font:bold 11px/26px Arial, Helvetica, sans-serif;
    color:#ABABAB;
    background-color:inherit;
    text-decoration:none;
}
#innerleft ul.sub li a:hover{
    background-color:inherit;
    color:#708110;
}
#innerleft ul.sub li.innerlast2{
    border:none;
}
#innerleft img.innerlogo{
    display:block;
    margin:0 0 0 139px;
    padding:0 36px 0 0;
    width:294px;
    height:66px;
    float:right;
}
#innerleft h2.innerwelcome{
    display:block;
    width:457px;
    height:28px;
    font:bold 28px/20px Arial, Helvetica, sans-serif;
    color:#383838;
    background-color:inherit;
    border-bottom:#FAF1CE solid 1px;
    float:left;
    margin:45px 0 13px 0;
}
#innerleft h2.innerwelcome2{
    display:block;
    width:457px;
    height:28px;
    font:bold 28px/20px Arial, Helvetica, sans-serif;
    color:#383838;
    background-color:inherit;
    border-bottom:#FAF1CE solid 1px;
    float:left;
    margin:10px 0 13px 0;
}

#innerleft p.innerred{
    display:block;
    width:457px;
    font:normal 18px/25px Arial, Helvetica, sans-serif;
    color:#8A0909;
    background-color:inherit;
    margin:0 0 20px 0;
    padding:13px 0 9px 0;
    float:left;
    background:url(images/left_div.gif) left bottom repeat-x;
}
#innerleft p.innerlftTxt{
    display:block;
    width:457px;
    font:normal 13px/20px Arial, Helvetica, sans-serif;
    margin:0 0 28px 0;
    padding:0;
    float:left;
}
#innerleft p.innerlftTxt span{
    font:bold 13px/20px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
}
#innerleft .innerlftTxt{
    display:block;
    width:457px;
    font:normal 13px/20px Arial, Helvetica, sans-serif;
    margin:0 0 28px 0;
    padding:0;
    float:left;
}
#submenublank
        {
            width:401px;
            float:left;
            margin:0px;
            padding:0 0 20px 0;
        }
#submenutopline
        {
            width:401px;
            height:1px;
            float:left;
            margin:0px;
            padding:0px;
            background-image:url(images/topline.jpg);
            background-repeat:no-repeat;
        }
.submenu
        {
            width:381px;
            height:22px;
            float:left;
            margin:0px;
            padding:0 0 0 20px;
            background-image: url(images/active.jpg);
            background-repeat:no-repeat;
            font:normal 13px/20px Arial, Helvetica, sans-serif;
            text-decoration:none;
            color:#000000;           
        }
.submenu:hover
        {
            width:381px;
            height:22px;
            float:left;
            margin:0px;
            padding:0 0 0 20px;
            background-image: url(images/over.jpg);
            background-repeat:no-repeat;
            font:normal 13px/20px Arial, Helvetica, sans-serif;
            text-decoration:none;
            color:#000000;           
        }       
               
/*---------------------------------------------------------------------------innerpage-------------------------------------------------------------------------------*/
/*----------------------------------------------------------------contactpage----------------------------------------------------------------------------------------*/
#contactblank
            {
    margin: 0px;
    float: left;
    width: 674px;
    padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
       
            }
       
#contactinnerblank
        {
                width:1004px;
                height:500px;
                float:left;
                margin:0px;
                padding:0px;
        }
#contactheddingblank
        {
            width:500px;
            height:30px;
            float:left;
            margin:27px 0 0 45px;
            padding:0px;
            font:normal 12px/17px Arial, Helvetica, sans-serif;
            color:#CECECE;
            border-bottom: solid 1px #7f7f7f;
           
           
        }
#contactaddressblank{
    margin: 0px;
    float: left;
    height: 488px;
    width: 222px;
    padding-top: 30px;
    padding-right: 40px;
    padding-bottom: 0px;
    padding-left: 15px;
    }

#contactaddresshedding
        {
    font-family: Tahoma;
    font-size: 18px;
    font-weight: bold;
    color: #c36012;
    text-decoration: none;
    margin: 0px;
    float: left;
    width: 220px;
    padding-top: 3px;
    padding-right: 0px;
    padding-bottom: 15px;
    padding-left: 0px;
        }       

#contactaddresstext{
    font-family: Tahoma;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    float: left;
    width: 210px;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 15px;
    padding-left: 0px;
    }
#contactsmallhedding
            {
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    color: #448a4f;
    text-decoration: none;
    margin: 0px;
    float: left;
    width: 600px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
            }
#contacthedding
            {
    font-family: Tahoma;
    font-size: 24px;
    font-weight: normal;
    color: #b04601;
    text-decoration: none;
    margin: 0px;
    float: left;
    height: 76px;
    width: 600px;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
        }
           
#contacticon{
                width:86px;
                height:84px;
                float:left;
                background-image: url(contacticon.png);
                background-repeat:no-repeat;
                margin:10px 0 0 30px;
    }
#contactfeildnameblank
            {
                width:150px;
                height:400px;
                margin:10px 0 0 0;
                padding:0;
                float:left;
            }
#contactfeildblank
            {
                width:250px;
                height:400px;
                margin:10px 0 0 0;
                padding:0;
                float:left;
            }
#contactfeildname
            {
                width:150px;
                height:20px;
                margin:0px;
                padding:0;
                float:left;
            }
#contactfeildname002
            {
                width:150px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }
#contactfeildname003
            {
                width:150px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeildname004
            {
                width:150px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeildname005
            {
                width:150px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeildname006
            {
                width:150px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }
#contactfeildname007
            {
                width:150px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeildname008
            {
                width:150px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeildname009
            {
                width:150px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }
#contactfeild
            {
                width:200px;
                height:20px;
                margin:0px;
                padding:0;
                float:left;
            }
#contactfeild002
            {
                width:200px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }
#contactfeild003
            {
                width:200px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeild004
            {
                width:200px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeild005
            {
                width:200px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeild006
            {
                width:200px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }
#contactfeild007
            {
                width:200px;
                height:20px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeild008
            {
                width:200px;
                height:20px;
                margin:8px 0 0 0;
                padding:0;
                float:left;
            }   
#contactfeild009
            {
                width:200px;
                height:60px;
                margin:5px 0 0 0;
                padding:0;
                float:left;
            }
#submitbutton
            {
                width:200px;
                height:20px;
                margin:60px 0 0 0;
                padding:0;
                float:left;

            }   
           
.contactfeildname
            {
    font:normal 13px/20px Arial, Helvetica, sans-serif;
    color: #000000;
            }
.contactfeild
            {    font-family:Arial, Helvetica, sans-serif;
                font-size:10pt;
                color: #3c4538;
                border:solid;
                border-width:1px;
                border-color:#d2e3e9;
                background-color:#fffdfd;
                height:20px;
            }
.contactfeild:hover
            {
                font-family:Arial, Helvetica, sans-serif;
                font-size:10pt;
                color:#3c4538;
                border:solid;
                border-width:1px;
                border-color:#d2e3e9;
                background-color:#fffdfd;
                height:20px;
            }
.submit
            {
    background:url(images/btn_serch.gif) 0 0 no-repeat;
    width:65px;
    height:25px;
    background-color:#5C5C5C;
    color:#000;
    font:bold 11px/25px Arial, Helvetica, sans-serif;
    float: left;
    cursor:pointer;
    border:none;
            }
.submit:hover
            {
    background:url(images/btn_serch.gif) 0 0 no-repeat;
    width:65px;
    height:25px;
    background-color:#5C5C5C;
    color:#000;
    font:bold 11px/25px Arial, Helvetica, sans-serif;
    float: left;
    cursor:pointer;
    border:none;
            }           
.contactinput
        {
            width:160px;
            height:20px;
            font-family:Arial, Helvetica, sans-serif, "Trebuchet MS";
            font-size:12px;
            font-weight:bold;
            color:#3c4538;
            background-color:#FFFFFF;
            border:solid;
            border-color:#F3F3F3;
            border-width:1px;
        }
.contactinput:hover
        {
            width:160px;
            height:20px;
            font-family:Arial, Helvetica, sans-serif, "Trebuchet MS";
            font-size:12px;
            font-weight:bold;
            color:#3c4538;
            background-color:#F9F9F9;
            border:solid;
            border-color:#F3F3F3;
            border-width:1px;                }
/*----------------------------------------------------------------contactpage----------------------------------------------------------------------------------------*/
Avatar billede flashit Nybegynder
20. juni 2008 - 13:47 #1
hov fik ikke form med i koden så her er de.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="DotdkWeb20.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="main" runat="server">

    ************* html som overfor ****************

  </form> 
</body>
</html>
Avatar billede w13 Novice
20. juni 2008 - 14:01 #2
Kan vi se, hvordan det bliver ødelagt, eller kan du beskrive problemet?
Avatar billede -zonic- Nybegynder
20. juni 2008 - 14:37 #3
det havde sgu været noget nemmere med et link ;)
Avatar billede flashit Nybegynder
20. juni 2008 - 15:13 #4
:-)

Så er der links.

Rigtig:
http://www.dotdk.dk/exp/index.html

Forkert:
http://www.dotdk.dk/exp/index2.html

det er div'en på højre side at mider spalten der hopper op.
Avatar billede w13 Novice
20. juni 2008 - 17:18 #5
Og hvorfor skal du have den form i koden? :)
Avatar billede olebole Juniormester
20. juni 2008 - 18:39 #6
<ole>

Det er fordi, du floater indholdet. Prøv noget i stil med:
    <input type="submit" name="serch" value="Search" class="serch" />
    <div style="height:1px;overflow:hidden;clear:both">&nbsp;</div>
</form>

- og som w13 spørger: Hvorfor overhovedet have formen? Den er i øvrigt ikke valid uden en action attribut.

Så er der lige dine 'Valid CSS' og 'Valid XHTML' bannere. Hvorfor reklamere for, at man har skrevet en XHTML kode, som af alle browsere på WWW bliver tolket som HTML-sovs (XHTML 1.0 Transitional)?
Og hvorfor reklamere for valid CSS, når koden er et udsøgt eksempel på, hvordan man med CSS og andre elementer end tabeller kan skrive kode, der er langt større, mere rodet og vanskeligere overskuelig end den samme kode, lagt ud i tabeller?

Hvorfor i det hele taget reklamere for, man kan læse en manual og gøre nogenlunde, som der står. Det skulle gerne være en selvfølge  ;o)
- og så er dette altid værd at huske:
    Valid kode er ikke nødvendigvis god kode - men god kode er altid valid

/mvh
</bole>
Avatar billede flashit Nybegynder
20. juni 2008 - 20:50 #7
ja flot... Det havde jeg så ikke lige set. Der var allerede 2 form's. Sorry. Læggger I ikke lige et svar :-)

Så kan man vel lære at Copy Paste ikke altid er helt godt ;-)
Avatar billede baitianlong Nybegynder
20. juni 2008 - 21:18 #8
Od som en lille notits kan man bemaerke at din side har titlen: "Untitled Page" Hvilket formodentlig ikke er meningen.
Avatar billede w13 Novice
20. juni 2008 - 21:19 #9
:)
Avatar billede flashit Nybegynder
20. juni 2008 - 22:22 #10
Giver lige Ole en change
baitianlong - Tak, men det er bare en test side. Ellers tak
Avatar billede baitianlong Nybegynder
20. juni 2008 - 22:37 #11
testside -> notits... ingen gru ment :)
Avatar billede olebole Juniormester
21. juni 2008 - 14:30 #12
- chancen taget  =)
Avatar billede flashit Nybegynder
21. juni 2008 - 14:58 #13
tak for hjælpen
Avatar billede olebole Juniormester
21. juni 2008 - 14:59 #14
Selvtak - og tak for points  ;o)
Avatar billede w13 Novice
21. juni 2008 - 16:55 #15
Tak for point! :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester