html - submit knap og border - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #12118 @ 01.12.09 22:15

Hej, jeg er igang med at opsætte et design.
i det design har jeg 1 tynd border og så en gennemsigtig border på 5px uden om content og den tynde border.

så ville høre om en kunne hjælpe mig med det

her er hvordan det skal se ud

Link

har prøvet med det her

CSS kode

 #content_border {
     width:auto;
     height:auto;
     background-color:#FFF;
     filter:alpha(opacity=50);
     -moz-opacity:0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
     
 }
 
 #content {
     background-color: #ffffff;
     float: left;
     height: 547px;
     width: 841px;
     border: 1px solid #d2bcc4;
 }

og så <div id="content_border"> uden om #content divet.

Mit andet problem er at jeg har nogen submit knapper på samme linje som nogen input boxe og de har nogenlunde samme style kun width som er anderledes.
Men på en eller anden måde er submit knapperne meget mindre i højden end input boxene, har i kan se problemet,

her er link
Link

Bruger #8715 @ 01.12.09 22:32

124

Vil tro at hvis du laver #content_border om til

Kode

content_border {
	width:auto;
	height:auto;
	background-color:#FFF;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	border-width:5px;
}

Der er tilføjet border-width:5px; som angiver bredden på borderen.

Og med dit andet problem har jeg fundet årsagen.

Din login form er i et en div som hedder login, og jeg har kigget i CSS og der har du følgende kode.

Kode

.login {
	width:144px;
	height:15px;
	border:1px solid #9f9f9f;
	background-image:url(../images/login.jpg);
	background-repeat:no-repeat;
	
}

Og det er height som er årsagen her, submit knapperne bliver kun 15 px høje, men input felterne er 17.

Jeg vil råde dig til at prøve sådan her

Kode

#login submit
{
/*HER ER SUBMIT KNAPPERNES KODE*/
	width:144px;
	height:15px;
	border:1px solid #9f9f9f;
	background-image:url(../images/login.jpg);
	background-repeat:no-repeat;	
}
#login input
{
/*HER ER INPUT FELTERNES KODE*/
	width:144px;
	height:15px;
	border:1px solid #9f9f9f;
	background-image:url(../images/login.jpg);
	background-repeat:no-repeat;	
}

har ikke afprøvet men begge problemer skulle gerne være løst

Bruger #12118 @ 01.12.09 22:49

den løsning med borderen virkede desværre ikke, den gjorde bare at hele content blev gennemsigtig.

og kan heller ikke lige få den med submit til at virke :/

her er det jeg har lavet

Link

tak for hjælpen endtil videre

Bruger #8715 @ 01.12.09 23:10

124

Ang borderen så ved jeg ikke men ang formen så har jeg en løsning.

Problemet er at
#login input faktisk gælder for både input boksene og submit boksene, så det du kan gøre er at dele hver op i sin egen div og give dem værdier. fx.

HTML

Kode

<div id="login_input">
	<input type="text" name="brugernavn" />
	<input type="password" name="password" />
</div>
		
<div id="login_submit">
	<input type="submit" value="Login" name="login" />
	<input type="submit" value="Glemt" name="login" />
</div>

CSS

Kode

#login_submit input
{

	width:144px;
	height:25px;
	border:1px solid #9f9f9f;
	background-image:url(../images/login.jpg);
	background-repeat:no-repeat;	
}
#login_input input
{

	width:144px;
	height:20px;
	border:1px solid #9f9f9f;
	background-image:url(../images/login.jpg);
	background-repeat:no-repeat;	
}

Og forresten, det er testet og det virker

Indlæg senest redigeret d. 01.12.2009 23:11 af Bruger #8715

Bruger #12118 @ 04.12.09 17:28

Synes stadig ikke helt det virker,

hva gør jeg forkert

www.ziimx.zeekoo.dk/fejl

Bruger #8715 @ 04.12.09 19:39

124

Hos mig ser login fint ud både i IE7 og FF

Bruger #12118 @ 05.12.09 18:59

lavede bare en baggrund som var lidt større til submit knapperne

.

ved du hvorfor designet ikke er 100% centeret?

www.ziimx.zeekoo.dk/fejl

Bruger #8715 @ 05.12.09 22:03

124

okay.

Dit design er faktisk i midten ifølge koden

.

Ser du, din #ramme har du sat til 1000px dvs du har en 1000px bred boks som er sat på midten af skærmen, men dit design er en del mindre og alt venstre stilles af standard derfor er dit design mere til venstre, hvis du nu gjorde 1000px width på #ramme mindre så det passede til dit design så ville det sidde i midten

Indlæg senest redigeret d. 05.12.2009 22:03 af Bruger #8715

submit knap og border

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler