axionmanMedlem sedan feb. 2007106 inlägg
Hej! Håller som sagt på med lite saker som snart alla vet.
Är så att jag håller på med en meny. I denna lilla rektangel så ska de vara en inloggning. Men texten blir så långt ifrån varannat. Jag vill ha det mer kompakt och centrerat. Hur löser man detta? Har försökt komma på de men de går bara inte.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="layout.css" rel="stylesheet" type="text/css">
<title>SKATEDEMOS</title>
</head>
<body>
<div id="header">
</div>
<div id="lager1">
<div id="textframe"></div>
<div id="meny1">
<p>LOGIN</p>
<form>
Username
<p><input type="text" name="name" class="form"</p>
<p>Password</p>
<p><input type="password" name="Password" class="form"></p>
</form>
</div>
<div id="select">
<select name="Style"/>
<option selected>-- Style --</option>
<option>Street</option>
<option>Vert</option>
<option>Freestyle</option>
</select>
</div>
<div id="meny2"></div>
</div>
</body>
</html>
border-right:1px solid white;
margin-top: 10px;
background-repeat: no-repeat;
background-position: bottom
}
#textframe {
width:500px;
height:100px;
border:1px solid white;
background-color:black;
float:right;
margin-right:50px;
margin-top:5px
}
#meny1 {
width:120px;
height:150px;
background-color:#2F4F4F;
border:1px solid white;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 5px;
}
#meny2 {
width:120px;
height:250px;
background-color:#2F4F4F;
border:1px solid white;
margin-top:5px;
margin-left:5px
}
#select {
margin-left:10px
}
p {
}
.form {
height:18px;
width:60px;
margin-left:30px
silfverMedlem sedan apr. 20039 709 inlägg
Börja med att separera html och css i olika kod-taggar. [html]-tagg för din html och [kod]-tagg för css.
axionmanMedlem sedan feb. 2007106 inlägg
okok vet inte hur man gör de bara?
silfverMedlem sedan apr. 20039 709 inlägg
axionman skrev:
okok vet inte hur man gör de bara?
Markera din html-kod och klicka på knappen som ser ut som två < > så kommer den omsluta all din html-kod med en html-tagg.
För din css-kod gör likadant, fast du klickar på knappen #.
axionmanMedlem sedan feb. 2007106 inlägg
silfverMedlem sedan apr. 20039 709 inlägg
axionman skrev:
tackar
Så. Nu blir det mycket lättare att tolka koden. :)
I din css så ser jag flera fel. Du har bland annat missat måsvingar i första blocket, dessutom saknar du semikolon lite här och var. Börja med att rätta till det.
Ditt första kodblock saknar dessutom värde, eller vad skall den här koden gälla på? Ändra detta:
border-right:1px solid white;
margin-top: 10px;
background-repeat: no-repeat;
background-position: bottom
}
Till:
body? {border-right:1px solid white; /* Där frågetecknet givetvis inte skall vara med */
margin-top: 10px;
background-repeat: no-repeat;
background-position: bottom[B];[/B]
}
silfverMedlem sedan apr. 20039 709 inlägg
Du kan skriva så här också:
#meny1 p input {margin: 0; padding: 0;}
axionmanMedlem sedan feb. 2007106 inlägg
nu ser koden ut så här.
body {
background-color:gray;
border-right:1px solid white;
margin-top: 10px;
}
#header {
width: 768px;
height: 70px;
background-color:#696969;
border:3px solid white;
margin-bottom: 10px;
}
}
#lager1 {
width:768px;
height:800px;
background-color:#696969;
border-top:3px solid white;
border-bottom:1px solid white;
border-left:1px solid white;
border-right:1px solid white;
margin-top: 10px;
background-repeat: no-repeat;
background-position: bottom;
}
#textframe {
width:500px;
height:100px;
border:1px solid white;
background-color:#696969;
float:right;
margin-right:50px;
margin-top:5px;
}
#meny1 {
width:120px;
height:200px;
background-color:#2F4F4F;
border:1px solid white;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 5px;
}
#meny2 {
width:120px;
height:250px;
background-color:#2F4F4F;
border:1px solid white;
margin-top:5px;
margin-left:5px;
}
#select {
margin-left:10px;
}
p1 {
}
.form {
height:18px;
width:60px;
margin-left:30px;
}
.headmenytitle {
font-size:15px;
color:gray;
margin-top:5px;
margin-left:5px;
}
axionmanMedlem sedan feb. 2007106 inlägg
silfver skrev:
Du kan skriva så här också:
#meny1 p input {margin: 0; padding: 0;}
Ok jag förstår inte riktigt?
silfverMedlem sedan apr. 20039 709 inlägg
axionman skrev:
Ok jag förstår inte riktigt?
Jag menar inte att du skall ersätta all din css med mitt förslag, utan du ska bara lägga till den koden. Då kommer dina p-taggar och inputfält inte ha några marginaler eller paddings, och då kommer de att ligga närmre varann, så som du ville. Eller hur var det? :)
axionmanMedlem sedan feb. 2007106 inlägg
aha. ja de var så jag ville ha det. tack så mycket. Men när jag gjorde så sa kom det in en ny ruta plus att allt la sig längre ner.
silfverMedlem sedan apr. 20039 709 inlägg
Jag börjar bli lite osäker på hur du vill ha det. Men pröva ersätta din <form-kod> med följande:
<form>
<p>Username<br />
<input type="text" name="name" class="form"</p>
<p>Password<br />
<input type="password" name="Password" class="form"></p>
</form>
axionmanMedlem sedan feb. 2007106 inlägg
alltså allting lägger sig under varannat. E skitstörigt. Plus att det har kommit upp en ny rektangel som skjuter ner allt. Det ligger inte i vartannat
jag tog nu bort det du skrev efter. Det "p input"
Och nu fungerar det.
axionmanMedlem sedan feb. 2007106 inlägg
okok det blev bättre men jag skulle vilja tighta till allt mer. Sen ligger de nog centrerat också? men jag kan ha fel där. Men i alla fall lite tightare mellan allt hade inte skadat. hur gör man detta?
Danne VMedlem sedan aug. 20067 685 inlägg
silfver skrev:
Jag börjar bli lite osäker på hur du vill ha det. Men pröva ersätta din <form-kod> med följande:
<form>
<p>Username<br />
<input type="text" name="name" class="form"</p>
<p>Password<br />
<input type="password" name="Password" class="form"></p>
</form>
Du glömde stänga översta inputen. Sen så finns det väl ingen anledning att ha p-taggar där alls, eller?. Slutligen brukar en del webbläsare lägga till marginaler till form-taggar, så man måste nolla i CSS:
<form>
Username<br />
<input type="text" name="name" class="form"><br />
Password<br />
<input type="password" name="Password" class="form">
</form>
form {
margin:0px
}
axionmanMedlem sedan feb. 2007106 inlägg
okok nu ser jag. jag löste det. hehe. tack för all hjälp. vet inte vad jag hade gjort utan er. jag tog bort <p> så löste de sig. Vet inte varför jag satt in den?
axionmanMedlem sedan feb. 2007106 inlägg
hej jag har en fråga till. Om man har en egen bild som man vill ha som submit knapp. Alltså en inloggningsknapp. Hur gör man då? Jag har följande.
<a href="#"><img src="loggain.gif" style="border:0px" /></a>
Danne VMedlem sedan aug. 20067 685 inlägg
axionman skrev:
hej jag har en fråga till. Om man har en egen bild som man vill ha som submit knapp. Alltså en inloggningsknapp. Hur gör man då? Jag har följande.
<a href="#"><img src="loggain.gif" style="border:0px" /></a>
Nej, det där är en vanlig länk. Formuläret måste få en order om att skicka informationen och det får det bara om skicka-länken ser ut på ett speciellt sätt:
<input type="image" src="loggain.gif" height="20" width="100" border="0" alt="Logga in!" />
Ändra det som passar dig.
EDIT: Oooops... jag glömde "stänga" taggen med den där slashen på slutet.
axionmanMedlem sedan feb. 2007106 inlägg
tack så jättemycket. Men du behöver jag ha med height och width?
tack än en gång.
silfverMedlem sedan apr. 20039 709 inlägg
Danne V skrev:
Du glömde stänga översta inputen. Sen så finns det väl ingen anledning att ha p-taggar där alls, eller?. Slutligen brukar en del webbläsare lägga till marginaler till form-taggar, så man måste nolla i CSS:
<form>
Username<br />
<input type="text" name="name" class="form"><br />
Password<br />
<input type="password" name="Password" class="form">
</form>
form {
margin:0px
}
Jag tycker att det blir snyggare så när man stänger av stilmallarna. :)
