centrering och högerjusterat i samma div

Hej,

jag sitter och försöker lägga till en logga-in länk i en centrerad div som i sin tur har centrerat innehåll. Svårt att förklara, men koden är som följer

#header {
    width: 600px;
    margin: 0 auto;
    border-top: 1px solid #CCC;
}
#title {
    width: 400px;
    margin: 0 auto;
    padding: 10px 0;
}
.login {
    float: right;
    padding: 10px 20px 0 0;
}
...
<div id="header">
  <div class="login">
    <p><a href="#">Logga in</a></p>
  </div>
  <div id="title">
    <h1>VÄLKOMMEN</H1>
  </div>
</div>

Hur ska jag göra så att logga in ligger 20px från högerkanten och 10px från toppen, samtidigt som titeln ligger 10px från toppen och flytande centrerat i header?

Jag har gjort en liten bild för att illustrera det hela, vet dock inte om det tillför så mycket. skulle ju kunna låsa titel också men vill gärna slippa göra detta, och helst skulle jag vilja att logga in även var flytande till höger.

Sätt position till relative för headern så kan du positionera logingrejset mha position absolute till höger, eller var som helst inom headern. Då kan du skippa float flör login också. Rubriken kan vara oförändrad men borde ligga före login i dokumentet, tycker jag.

Hmm...

Mekade lite

#header {
    width: 600px;
    margin: 0 auto;
    padding:0;
    border-top: 1px solid #CCC;
    position:relative;
}
#header h1,
#header p {margin:0; padding:0;}

#title {
    width: 400px;
    margin: 0 auto;
    padding: 10px 0;
    text-align:center;
    background-color: yellow;
}
.login {
	position:absolute;
	z-index:1;
	right:20px;
	top:10px;
}

Testa

Red: dAEk - Du beskrev medan jag knackade (missade att du redan svarat i hastigheten) :bire
Det som sinkade mig mest var att defaultmarginal- och/eller paddingvärden visade sig påverka login-länkens position i t.ex. FF medan den inte gör det i IE(7)

kan man inte bara centrera headern och köra <p style="absolute: blahblah">logga in</p> ????

Hur äre egentligen med embedded styles direkt i body nuförtiden, kan man använda dem hursomhelst?

symbolism skrev:

kan man inte bara centrera headern och köra <p style="absolute: blahblah">logga in</p> ????

Headern är ju centrerad och det används ju position:absolute för att få login att lägga sig där den ska.

symbolism skrev:

Hur äre egentligen med embedded styles direkt i body nuförtiden, kan man använda dem hursomhelst?

Embedded styles? Menar du inline styles, dvs <element style="...">? Då är svaret ja, det går att använda men det är inte något som rekommenderas. Undrade du om att infoga css mha <style> eller <link> efter head är svaret nej, det får man inte göra. De ska infinna sig inom head-elementet.

Tack så mycket för hjälpen!

Nu har jag fått det att funka som jag hade tänkt mig. Accepterar jarvklos-exempel som slutgiltligt svar då det var mest utförligt. :)

dAEk skrev:

Headern är ju centrerad och det används ju position:absolute för att få login att lägga sig där den ska.

Embedded styles? Menar du inline styles, dvs <element style="...">? Då är svaret ja, det går att använda men det är inte något som rekommenderas. Undrade du om att infoga css mha <style> eller <link> efter head är svaret nej, det får man inte göra. De ska infinna sig inom head-elementet.

ursäkta OT men

vad jag menar e tex

<p style="positon: relative, left: 30px; margin-top: 30px; background-color: red">Bu</p>

Jo, man kan köra med inline styles på det sättet men det blir ett helvete att underhålla i långa loppet. Man brukar vilja skilja på markup och presentation så långt det går. Det ger mer flexibilitet och blir också mycket enklare att återanvända kod.

iofs... men alternativt kan man köra den lilla biten i en includefil:P

Fast då har man ju problem med utspridd kod. Om man jobbar flera stycken på samma projekt blir det lätt en massa inline styling om man inte bestämt sig för att göra rätt från början. Förr eller senare kommer man få eller ställa sig själv frågan "i vilken fil var det jag skulle ändra i för att x ska bli y nu igen?". Enda gången det är okej att använda style="" är när man testar grejer, men det är bara min personliga uppfattning.

dAEk skrev:

Fast då har man ju problem med utspridd kod. Om man jobbar flera stycken på samma projekt blir det lätt en massa inline styling om man inte bestämt sig för att göra rätt från början. Förr eller senare kommer man få eller ställa sig själv frågan "i vilken fil var det jag skulle ändra i för att x ska bli y nu igen?". Enda gången det är okej att använda style="" är när man testar grejer, men det är bara min personliga uppfattning.

Håller absolut med.
Är själv alldeles för kvick att göra inline styles alldeles för ofta. Vet inte hur många timmar jag suttit och svurit över mig själv för detta efteråt....