☰

» »

Kako premaknit link <a> v css kodi?

Kako premaknit link <a> v css kodi?

slovenc1234 ::

Sem nov v web developingu in ne najdem rešitve kako naj pomaknem link (forgot password) desno spodaj pod input-om password? Spodaj prilagam svojo HTML in CSS kodo (delam pa v Flasku).

HTML koda:
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>

<body>

    <form>
        <img src="static/slike/avatar.svg">
        <input type="text" id="user_name" name="user_name" placeholder="user name...">
        <br>
        <br>
        <input id="password" name="password" type="password" placeholder="password...">
        <br>
        <br>
        <div class="link">
            <a href="forgot password">Forgot password?</a>
        </div>
        <div class="position">
        <button type="submit">Login</button>
        </div>
    </form>

</body>
</html>


in CSS:
body {
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background:  linear-gradient(to right ,#8cfc03,#03fcc2);
}
img{
    width:30%;
    height:30%;
    padding:40px;
}
form{
    width:45%;
    height:45%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
}
input{
    border-radius: 5px;
    height:10%;
    width:50%;
    font-size:20px;
    text-align:center;
}
.position{
    display:inline-block;
    box-shadow:5px 5px grey;
}
::-webkit-input-placeholder {
   text-align: center;
}
.link{
    display:block;
}

slovenc1234 ::

Prilagam še print screen svoje spletne strani:
print screen

print screen

win64 ::

Kratka rešitev je float:right na .link elementu. Za razumevanje kako deluje float(in kje se ustavi), pa se boš moral podučiti vsaj osnovne display načine(block, inline, inline-block).
Tip 1: namesto br elementov uporabi margin-bottom .
Tip 2: Glede na zgornjo kodo predvidevam, da se učiš iz primerov. Kar ni nič narobe, ampak če želiš razumeti kako stvari delujejo potrebuješ poznati tudi teorijo.

slovenc1234 ::

tudi, če dam float:right se ne zgodi nič. Ja učim se iz primerov. Imam bolj malo časa čez dan.

iso2000 ::

a si sigurno ponovno naložil CSS, kjer je sprememba float:right prisotna?
Najlažje se je "igrati" s kodo če uporabiš v spletnem brskalniku orodja za spletne razvijalce. Jaz uporabljam Firefox Developer Edition, ima pa tudi Chrome podobno zadevo. Lahko potem urejaš CSS in/ali HTML in sproti gledaš kaj se dogaja.

slovenc1234 ::

Sem. probal tudi izvorno kodo v browserju in je isto. Če pa naredim v code penu pa deluje...

iso2000 ::

Zdaj sem si malo podrobneje ogledal kodo. Ne dela, ker je form flex "container" in imaš tam nastavljeno da so elementi poravnani na sredino. Float pa ne deluje na flex elementih. En način je, da nastaviš širino .link na enako kot sta zgornji vnosni polji, ter poravnaš text na desno:
.link {
display: block;
width: 50%;
text-align: right;
}

slovenc1234 ::

Veš, da sem že sam pomislil na flex. Nisem pa bil siguren, ker imam premalo izkušenj. Hvaaalaa!!:D

HotBurek ::

Še sample z html table:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Login form</title>
		<meta charset="UTF-8">
		<style>
			* { box-sizing: border-box; }
	    		#login_button:hover { cursor: pointer; background-color: darkorange !important; }
	    		#forgot_link:hover { cursor: pointer; background-color: black !important; color: lawngreen !important; }
		</style>
	</head>
	<body style="background-color: #666;">
		<div style="margin: auto; padding: 20px; background-color: whitesmoke; width: 400px; display: table; border-radius: 5px; margin-top: 40px;">
			<table style="padding: 0px; border-collapse: collapse; width: 100%;">
				<thead style="background-color: violet;">
					<tr>
						<th style="height: 60px;">
							<span style="font-size: 32px; font-weight: normal; padding: 20px; display: block;">Login form</span>
						</th>
					</tr>
				</thead>
				<tbody style="background-color: greenyellow;">
					<tr>
						<td style="text-align: center;">
							<input type="text" id="user_name" name="user_name" placeholder="user name..." autofocus style="margin: 10px 0px 0px 0px; padding: 0px 5px 0px 5px; line-height: 38px; width: 340px; font-size: 16px;">
						</td>
					</tr>
					<tr>
						<td style="text-align: center;">
							<input id="password" name="password" type="password" placeholder="password..." style="margin: 10px 0px 10px 0px; padding: 0px 5px 0px 5px; line-height: 38px; width: 340px; font-size: 16px;">
						</td>
					</tr>
				</tbody>
				<tfoot style="background-color: deepskyblue;">
					<tr>
						<td style="padding: 20px 10px 10px 10px;  text-align: center;">
							<div style="text-align: left; overflow: auto;">
								<button id="login_button" type="submit" style="width: 100px; line-height: 36px; font-size: 16px; border-radius: 4px; background-color: lightgrey; float: left;">Login</button>
								<a id="forgot_link" href="/forgot_password.html" style="line-height: 36px; float: right; color: crimson; background-color: yellow; padding: 0px 10px 0px 10px;">Forgot password?</a>
							</div>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</body>
</html>



root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window

Zgodovina sprememb…

  • spremenilo: HotBurek ()

slovenc1234 ::

Hvala vsem za pomoč in nasvete!! :D

GrX ::

Poskusi link dati znotraj HTML center taga.

<center> link </center>


Pa disablej browser cashe...

Zgodovina sprememb…

  • spremenilo: GrX ()

Phantomeye ::

fuj float, fuj html tabele (za layout). V 2021 smo.

Isto velja za razne html elemente kot so 
<br>
, 
<center>
elemente.


Flex, grid (!).

FireSnake ::

Kot je povedal predhodnik.

To se že zdavnaj ne uporablja več!
Stili morajo biti strogo ločeni od HTMLja (c css, sass, less, ...)

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1298346118 (5255) sunniegoldie
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč		151941 (1669) kr?en
»

poravnava li elementov

Oddelek: Izdelava spletišč		82143 (2008) boss-tech
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč		519831 (7630) nuuush
»

Poravnava znotraj DIV

Oddelek: Izdelava spletišč		91662 (1543) alum

Več podobnih tem