Jester73Medlem sedan mars 2012121 inlägg Hej
Jag har nu kommit in i 2000 talet och skall prova på att göra mina sidlayouter med divs med mera istället för tabeller.
Dock så får jag inte till layouten på formulären, se bifogad kod.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html><html lang="sv-se" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Lista kunder</title>
<meta name="author" content="Pontus" />
<meta name="description" content="Webbaserat administrationssystem för redovisningsbyrå" />
<meta name="keywords" content="redovisningsbyrå, kundregister, administration" />
<meta name="robots" content="">
<link rel="stylesheet" type="text/css" href="css/basics.css">
<link rel="stylesheet" type="text/css" href="css/forms.css">
<link type="text/css" href="css/jquery-ui-1.10.3.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
</head>
<body>
<div id="container">
<div id="header">Solbo Ekonomikonsulter Admin</div> <div id="menubar">
<a href="index.php" class="menu">Hem</a>
<a href="customer.php" class="menu">Kunder</a>
<a href="users.php" class="menu">Användare</a>
<a href="material.php" class="menu">Löpande bokföring</a>
<a href="revisor.php" class="menu">Revisor</a>
<a href="year.php" class="menu">Årsinformation</a>
<a href="rkyear.php" class="menu">Räkenskapsår</a>
</div>
<div id="frmcontainer">
<div id="frmhead">Redigera kund</div>
<div id="frmbody">
<form action="customer.php" method="post">
<input type="hidden" name="exc_CUId" value="59"/>
<p class="frmetkt">Kundnummer:</p><p class="noedit">800</p><p class="frmetkt">Organisationsnr:</p><p class="noedit">556889-0908</p> <label class="frmetk" for="Namn">Namn:</label>
<input class="inputs" tabindex="2" type="text" name="Namn" value="Solbo Ekonomikonsulter AB"/>
<p class="frmlbls"><label class="frmetk" for="PAdress">Postadress:</label>
<input class="inputs" tabindex="4" type="text" name="PAdress" value="Box 7126"/></p>
<p class="frmlbls"><label class="frmetk" for="PAdress2">Postadress:</label>
<input class="inputs" tabindex="5" type="text" name="PAdress2" value=""/></p>
<p class="frmlbls"><label class="frmetk" for="Postnr">Postnummer:</label>
<input class="inputs" tabindex="6" name="Postnr" value="17007"/></p>
<p class="frmlbls"><label class="frmetk" for="Postort">Postort:</label>
<input class="inputs" tabindex="7" name="Postort" value="SOLNA" /></p>
<p class="frmlbls"><label class="frmetk" for="BAdress">Besöksadress:</label>
<input class="inputs" tabindex="7" name="BAdress" value="" /></p>
<p class="frmlbls"><label class="frmetk" for="VATnr">Momsregistreringsnr:</label>
<input class="inputs" tabindex="8" name="VATnr" value="0" /></p>
</form>
</div>
</div>
<div id="pfoot">Copyright 2014 Solbo Ekonomikonsulter AB</div>
</div>
</body>
</html>
Som ni säkert ser så vill jag att de skall utgå i från mitten, : tecknet skall vara i mitten.
Är allt i formulärelement så går det bra men de två översta raderna ställer till det. Så här ser CSS ut.
@CHARSET "ISO-8859-1";
#frmcontainer {
margin: 0 auto;
width: 730px;
border: 0px solid;
}
#frmhead {
font-family: Calibri;
font-size: 23px;
font-weight: bold;
color: white;
-epub-text-transform: uppercase;
text-transform: uppercase;
background-color: #660033;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
text-align:center;
}
#frmbody {
width: 730px;
padding-bottom: 30px;
border: 0px solid;
}
p.frmlbls {
}
p.frmetkt {
clear: left;
width:170px;
display: block;
float: left;
border: 0px solid;
padding-bottom: 0px;
padding-right: 3px;
vertical-align: bottom;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-align: right;
color: black;
}
/* Formulärelement */
label.frmetk {
clear: left;
width:170px;
display: block;
float: left;
border: 0px solid;
padding-bottom: 0px;
padding-right: 3px;
vertical-align: bottom;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-align: right;
color: black;
}
p.noedit {
float: left;
width: 250px;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-align: left;
}
button.inputs{
font-family: Calibri;
font-size: 15px;
}
input, select, textarea, radio.inputs {
clear: left;
width: 250px;
font-family: Calibri;
font-size: 15px;
color: black;
background-color: #E0E0EB;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00005a;
border-right-color: #00005a;
border-bottom-color: #00005a;
border-left-color: #00005a;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
text-align: left;
}
Har inte riktigt fått koll på det här med float och display och clear :)
rhdfMedlem sedan okt. 2007446 inlägg Du kan ju göra det enklare för dig genom att även ha kundnummer och orgnr som labels och sen peta in värdena i en span
<p>
<label class="frmetk">Kundnummer:</label>
<span class="noedit">800</span>
</p>
<p>
<label class="frmetk">Organisationsnr:</label>
<span class="noedit">556889-0908</span>
</p>
dvs samma upplägg som de övriga fälten, fast en <span> istället för en input (eftersom man inte "får" nästla P-taggar)
Du kan städa bort en hel del i css:en med som är onödigt.
Danne VMedlem sedan aug. 20068 090 inlägg Skit i "måsten". Gör ditt formulär med hjälp av en tabell. Enklare. Dessutom inte alls "fel". Och användarna kan inte bry sig mindre.
Jester73Medlem sedan mars 2012121 inlägg
Skit i "måsten". Gör ditt formulär med hjälp av en tabell. Enklare. Dessutom inte alls "fel". Och användarna kan inte bry sig mindre.
Sant, tanken har slagit mig men jag ser fler formulär längre fram där en tabell skulle bli krångligare.
Jester73Medlem sedan mars 2012121 inlägg Hej
Att inte nästla <p> taggen hjälpte en del men det ser fortfarande fel ut trots <span>
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html><html lang="sv-se" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Lista kunder</title>
<meta name="author" content="Pontus" />
<meta name="description" content="Webbaserat administrationssystem för redovisningsbyrå" />
<meta name="keywords" content="redovisningsbyrå, kundregister, administration" />
<meta name="robots" content="">
<link rel="stylesheet" type="text/css" href="css/basics.css">
<link rel="stylesheet" type="text/css" href="css/forms.css">
<link type="text/css" href="css/jquery-ui-1.10.3.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
</head>
<body>
<div id="container">
<div id="header">Solbo Ekonomikonsulter Admin</div> <div id="menubar">
<a href="index.php" class="menu">Hem</a>
<a href="customer.php" class="menu">Kunder</a>
<a href="users.php" class="menu">Användare</a>
<a href="material.php" class="menu">Löpande bokföring</a>
<a href="revisor.php" class="menu">Revisor</a>
<a href="year.php" class="menu">Årsinformation</a>
<a href="rkyear.php" class="menu">Räkenskapsår</a>
</div>
<div id="frmcontainer">
<div id="frmhead">Redigera kund</div>
<div id="frmbody">
<form action="customer.php" method="post">
<input type="hidden" name="exc_CUId" value="59"/>
<p class="frmlbls"><label class="frmetkt">Kundnummer:</label><span class="noedit">800</span></p>
<p class="frmlbls"><label class="frmetkt">Organisationsnr:</label><span class="noedit">556889-0908</span></p>
<p class="frmlbls"><label class="frmetk" for="Namn">Namn:</label>
<input class="inputs" tabindex="2" type="text" name="Namn" value="Solbo Ekonomikonsulter AB"/></p>
<p class="frmlbls"><label class="frmetk" for="PAdress">Postadress:</label>
<input class="inputs" tabindex="4" type="text" name="PAdress" value="Box 7126"/></p>
<p class="frmlbls"><label class="frmetk" for="PAdress2">Postadress:</label>
<input class="inputs" tabindex="5" type="text" name="PAdress2" value=""/></p>
<p class="frmlbls"><label class="frmetk" for="Postnr">Postnummer:</label>
<input class="inputs" tabindex="6" name="Postnr" value="17007"/></p>
<p class="frmlbls"><label class="frmetk" for="Postort">Postort:</label>
<input class="inputs" tabindex="7" name="Postort" value="SOLNA" /></p>
<p class="frmlbls"><label class="frmetk" for="BAdress">Besöksadress:</label>
<input class="inputs" tabindex="7" name="BAdress" value="" /></p>
<p class="frmlbls"><label class="frmetk" for="VATnr">Momsregistreringsnr:</label>
<input class="inputs" tabindex="8" name="VATnr" value="0" /></p>
</form>
</div>
</div>
<div id="pfoot">Copyright 2014 Solbo Ekonomikonsulter AB</div>
</div>
</body>
</html>
@CHARSET "ISO-8859-1";
#frmcontainer {
margin: 0 auto;
width: 730px;
border: 0px solid;
}
#frmhead {
font-family: Calibri;
font-size: 23px;
font-weight: bold;
color: white;
-epub-text-transform: uppercase;
text-transform: uppercase;
background-color: #660033;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
text-align:center;
}
#frmbody {
width: 730px;
padding-bottom: 30px;
border: 0px solid;
}
p.frmlbls {
clear:both;
}
/* Formulärelement */
label.frmetk {
width:170px;
float: left;
border: 0px solid;
padding-bottom: 0px;
padding-right: 3px;
vertical-align: bottom;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-align: right;
color: black;
}
.noedit {
float: left;
width: 250px;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-align: left;
}
button.inputs{
font-family: Calibri;
font-size: 15px;
}
input, select, textarea, radio.inputs {
float: left;
width: 250px;
font-family: Calibri;
font-size: 15px;
color: black;
background-color: #E0E0EB;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00005a;
border-right-color: #00005a;
border-bottom-color: #00005a;
border-left-color: #00005a;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
text-align: left;
}
"Kundnummer" & "Organisationsnummer" har bytt plats med sina respektive värden....why??
rhdfMedlem sedan okt. 2007446 inlägg Spontant så ser jag ett fel
du har gett label för kundnr och orgnr klassen "frmetkt" medan alla övriga labels har "frmetk"
Jag "städade upp" lite för att dubbelkolla mina egna tips:
passade även på att ta bort saker JAG anser är onödiga och enbart stökar till i koden (utifrån givna förutsättningar)
<div id="frmcontainer">
<h2>Redigera kund</h2>
<form action="customer.php" method="post">
<input type="hidden" name="exc_CUId" value="59"/>
<p>
<label>Kundnummer:</label>
<span class="noedit">800</span>
</p>
<p>
<label>Organisationsnr:</label>
<span class="noedit">556889-0908</span>
</p>
<p>
<label for="Namn">Namn:</label>
<input type="text" name="Namn" value="Solbo Ekonomikonsulter AB"/>
</p>
<p>
<label for="PAdress">Postadress:</label>
<input type="text" name="PAdress" value="Box 7126"/>
</p>
<p>
<label for="PAdress2">Postadress:</label>
<input type="text" name="PAdress2" value=""/>
</p>
<p>
<label for="Postnr">Postnummer:</label>
<input name="Postnr" value="17007"/>
</p>
<p>
<label for="Postort">Postort:</label>
<input name="Postort" value="SOLNA" />
</p>
<p>
<label for="BAdress">Besöksadress:</label>
<input name="BAdress" value="" />
</p>
<p>
<label for="VATnr">Momsregistreringsnr:</label>
<input name="VATnr" value="0" />
</p>
</form>
</div>
Samma sak med CSS, går säkert att minimera ännu mer om man är på det humöret
#frmcontainer {
margin: 0 auto;
width: 730px;
padding-bottom: 30px;
}
#frmcontainer h2{
font-family: Calibri;
font-size: 23px;
font-weight: bold;
color: white;
text-transform: uppercase;
background-color: #660033;
border-radius: 3px;
text-align:center;
}
/* Formulärelement */
form * {
font-family: Arial;
font-size: 15px;
color: black;
}
form p{margin-bottom:10px;}
label{
width:30%;
display: block;
float: left;
padding: 0 10px 0 0;
font-weight: bold;
text-align: right;
}
.noedit {
color:#999;
font-weight: bold;
}
button.inputs{
font-family: Calibri;
}
input, select, textarea, radio.inputs {
font-family: Calibri;
background-color: #E0E0EB;
border: 1px solid #00005a;
border-radius: 3px;
}
Jester73Medlem sedan mars 2012121 inlägg Tack, jag är expert på dessa misstag :)
Tack för förslagen på layouten men får jag fråga, av nyfikenhet.
Varför är h2 bättre än en div förutom att jag sätter ett id?
drewMedlem sedan mars 2007845 inlägg h2 är en rubrik, sökmotorer "tittar" på dom. En div är inte en rubrik. Du kan sätta id och ha samma utseende på h2'an som på din div.
rhdfMedlem sedan okt. 2007446 inlägg Som Drew säger, fast här är "sökmotor-delen" inte direkt väsentlig eftersom det här formuläret troligen ligger bakom en inloggning.
Det är snarare så att det är en bra idé att konsekvent försöka använda de taggar som finns i HTML för att göra en sak istället för att "bygga dem" från en div eller span. En annan fördel man får är att sidan blir (hyfsat) läsbar även utan css
Det är allt för vanligt att man ser saker som
<span class="StorRubrik"> istället för <h1>.
Det missas även ofta att man kan använda ett element till att vara t.ex en container för sitt eget innehåll, istället för att omge det med en annan div.
I ditt fall här borde man kunna använda formuläret som container och på så vis slippa "frmcontainer", det är bara att flytta ner h2:an in i formuläret.
Jester73Medlem sedan mars 2012121 inlägg
Det missas även ofta att man kan använda ett element till att vara t.ex en container för sitt eget innehåll, istället för att omge det med en annan div.
I ditt fall här borde man kunna använda formuläret som container och på så vis slippa "frmcontainer", det är bara att flytta ner h2:an in i formuläret.
Har tänkt på det också men tittar jag runt på typ W3 School och andra bra sajter så är det ingen som ens antyder den möjligheten.
Sparar gärna in div där jag kan :)
rhdfMedlem sedan okt. 2007446 inlägg w3scools är diskutabelt om de kan klassas som "bra" sida. http://www.w3fools.com/ ;)
Men generellt sett så kan man väl säga att man kommer väldigt långt med enbart standardtaggar.
Ett "skal" till ditt exempel ovan skulle kunna se ut nånting i stil med detta
<body>
<header><h1>Solbo Ekonomikonsulter Admin</h1></header>
<nav>
<ul>
<li><a href="index.php">Hem</a></li>
<li><a href="customer.php">Kunder</a></li>
<li><a href="users.php">Användare</a></li>
<li><a href="material.php">Löpande bokföring</a> </li>
<li><a href="revisor.php">Revisor</a></li>
<li><a href="year.php">Årsinformation</a></li>
<li><a href="rkyear.php">Räkenskapsår</a></li>
</ul>
</nav>
<main>
<form id="frmcontainer" action="customer.php" method="post">
</form>
</main>
<footer>Copyright 2014 Solbo Ekonomikonsulter AB</footer>
</body>
Med en lätt modifierad CSS
body{font-family: Arial;}
header,nav,main,footer{width:960px;margin:0 auto;}
header{height:60px;}
header h1{}
nav{background:#333}
nav ul{list-style:none; margin:0;padding:0;}
nav li{display:inline-block; height:30px; min-width:50px; }
nav li a{line-height:30px; color:#fff; text-decoration:none; display:block; padding:0 10px 0 10px; }
nav li a:hover{background:#444;}
footer{text-align:center; border-top:1px solid #777; padding-top:5px;}
/*i övrigt samma som innan*/
