☰

» »

HTML in CSS - kratka pomoč

HTML in CSS - kratka pomoč

Hangover ::

Lep pozdrav.
Prosu bi če mi kdo napiše kaj delam narobe oz. kako naj naredim.

In sicer. Imam css in html datoteko, v html datoteki pa ne smeš nič spreminjat, le v CSS lahko.

Moj cilj je da dobim takšno obliko:


....naredu pa sem takšno:



Edino kar me zajebava s tiste bele črte, ki jih nikakor ne morem spravit da bi bile do roba.


Pa še koda HTML in CSS

HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pusti me!</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>

  <div id="wd-form">
   
            <form action="" method="post">
              <fieldset>
                <legend>Podatki</legend>
                <dl>
                  <dt>
                    <label for="ime">Ime</label> 
                  </dt>
                  <dd>
                    <input type="text"  tabindex="1">
                  </dd>
                  <dt>
                    <label for="priimek">Priimek</label>
                  </dt>
                  <dd>
                    <input type="text" tabindex="2">
                  </dd>
                </dl>
              </fieldset>
    </form>
  
</body>
</html>


CSS:
body
{
width: 600px;
}

label
{
float: left;
text-align: right;
margin-right: 10px;
margin-left: 20px;	
color: white;
font-style: italic;
margin-top: 10px;
}

input
{
margin-top: 10px;
}

legend
{
float: left;
color: black;
font-weight: bolder;
font-size: 20px;
}

fieldset
{
border: 0px;
}

dt
{
padding-top: 10px;
border-bottom: 1px solid white;
}

#wd-form
{
background: rgb(160,210,65);
border-radius:10px;
border-top: 1px solid rgb(200, 200, 200);
border-bottom: 1px solid rgb(200, 200, 200);
border-left: 1px solid rgb(200, 200, 200);
border-right: 1px solid rgb(200, 200, 200);


}

alphasaphir ::

1) validate
2) zapri div, ali ga cisto opusti in daj id form
3) zacni uporabljat firebug ali kaj podobnega in si poglej layout
4) taksni zamiki so ponavadi posledica paddinga - tvoj je v fieldset in se nekje, ki mu dodas padding: 0px;
5) v osnovi das lahko ze
hmtl, body {padding: 0px; margin: 0px;}

sicer ti bo kar razmetalo dizajn, ker se ponekod zanasas na to in se mi ne da vsega it skozi
6) alternativa je, da elementu z border das sirino fieldset in zamaknes levo z neg. margin pri tem je dobro, da das drugo barvo in preveris ce je res ok v vseh browserjih
dt
{
padding-top: 10px;
border-bottom: 1px solid black;
width: 600px;
margin-left: -15px;
}

in v firefox je drugacen zamik, kar pomeni, da sesujes vse in gres od znova, s tem da definiras vsak margin in padding

7) nekaj v tem smislu, ampak z visinami se mi pa ne da vec:
fieldset
{
border: 0px;
padding: 0px;
margin: 0px;
}
dt
{
width: 600px;
margin-left: -1px;
padding-top: 10px;
border-bottom: 1px solid white;
}

fokz8 ::

Učitno oba delama isto nalogo. Mi lahko poveš s čim si naredo ti 2 črti beli, ker meni nikakor ne uspe tega?

lp

Hangover ::

@alphasaphir
Ahaaa hvala, haha ne morem verjet kako sem lahko to pozabil. Očitno je bila ura glavni vzrok moje nedejavnosti.


@fokz8
V mojem CSS-u že imaš kodo za črto :D

fokz8 ::

ja sj vem janko, samo kateri del. ker js mam ostalo že nareto, in da nebom zdj cele kode bv kopirau:)?

sem ž ugotoviv:)

Zgodovina sprememb…

  • spremenil: fokz8 ()

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šč		1298368286 (27423) sunniegoldie
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč		152158 (1886) kr?en
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		62043 (1923) jonystar
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč		5110470 (8269) nuuush
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč		133242 (3108) Road Runner

Več podobnih tem