html - tekst på samme linje, hver sin ende? - Udvikleren.dk

Tags: html css

Bruger #17121 @ 06.06.12 22:17

Hej

Jeg vil gerne have at "Aadalensskole Afd. Syd, står i midten, og "Login"står ude i højre side. kan det lade sig gør?

HTML kode

 <div class="container">
   <div class="header"><center><h2>Aadalensskole Afd. Syd</h2><u></center><p><b>Login</b></u></p>
     [s][/s]</div>

CSS:

CSS kode

 .header {
     background: #3b5998;
     color: #FFF;
     margin-bottom:-17px;
 }

6 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 07.06.12 18:15

1.258

Det behøver ikke være så svært:

HTML kode

 <h2>Aadalensskole Afd. Syd <span>Login</span></h2>

CSS kode

 h2 {
    text-align: center;           
 }
     h2 span {
        float: right;
        text-decoration: underline;
        font-weight: bold;    
     }

Resultatet: http://jsfiddle.net/vaff/MdenQ/embedded/result/

Indlæg senest redigeret d. 07.06.2012 18:18 af Bruger #17081

Bruger #10216 @ 07.06.12 22:04

4.283

Da "Login" ikke er en del af en overskrift, bør "Login" ikke stå inde i <H2>.

Derfor kan du benytte en anden løsning:

HTML kode

 <style>
     #headarea { position: relative; }
     #headarea h2 { text-align: center; padding: 0px; margin: 0px; }
     #headarea a { position: absolute; top: 0px; right: 0px; }
 </style>
 <body>
 ...
     <div id="headarea">
         <h2>Aadalensskole Afd. Syd</h2>
         <a href="#">Login</a>
     </div>
 ...
 </body>

Alternativ kan nedestående bruges:

HTML kode

 <style>
     #headarea { overflow: hidden; }
     #headarea h2 { text-align: center; padding: 0px; margin: 0px; }
     #headarea a { float: right; }
 </style>
 <body>
 ...
     <div id="headarea">
         <a href="#">Login</a>
         <h2>Aadalensskole Afd. Syd</h2>
     </div>
 ...
 </body>

Indlæg senest redigeret d. 07.06.2012 22:16 af Bruger #10216

Bruger #16325 @ 06.06.12 23:56

Jeg ville måske holde begge stykker tekst i hver deres div, eksempelvis.

Så placere den ene div i et <center> tag og den anden div med float: right;

således ekspelvis:

CSS kode

 #center_txt
 {
     width: 100px;
     display:inline-block;
 }
 
 #right_txt
 {
     width: 100px;
     display: inline-block;
     float: right;
 }

Bruger #10114 @ 07.06.12 00:32

HTML kode

 <div class="container">
     <div class="header">
         <div id="overskrift">
             <h2>Aadalensskole Afd. Syd</h2>
         </div>
         
         <div id="loginlink">
             <p><u><b>Login</b></u></p>
         </div>
     </div>
 </div>

CSS kode

 #overskrift {
     margin: 0 auto;
 }
 
 #loginlink {
     float: left;
 }

Det er ikke testet, men det er noget i den retning jeg plejer at gøre. Kan bare ikke huske det i hovedet, og er ikke hjemme, så jeg kan tjekke det.

Plejer aldrig at bruge <center> <u> og <b>. Det ordner jeg altid i min CSS. Efter min mening burde du gøre det samme, da i teorien, er det hurtigere at bruge HTML, som "skelet", og bruge CSS til at style med. Specielt, hvis der er meget at style.

Bruger #17121 @ 07.06.12 20:51

Hvis jeg gør det, så rykker det næste div tag, ned på næste linje

Bruger #17081 @ 07.06.12 21:49

1.258

det næste div tag ?

tekst på samme linje, hver sin ende?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler