html - CSS box design - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #15047 @ 07.08.09 11:17

Hejsa!

Jeg har sådan en kode her i min .css fil.

CSS kode

 .legend
 {
     color: grey;
     background: white;
     border: 5px solid #grey;
     padding: 2px 50px;
 }

Den virker fint, den laver bare en "streg" eller "box" fra den ene side af skærmen til den anden.

Men så er spørgsmålet jo lige om hvordan jeg centrere den i alle browser(sådan at jeg kan åbne den i IE, Google Chrome og Firefox uden den bliver anerledes). Og hvordan får jeg en fin kant rundt om den?

Okay, jeg har lige lavet noget nyt istedet for den anden.

HTML kode

 <DIV style="border-style:solid">Besked.</DIV>

Hvordan kan jeg få den centreret, sådan at der er ca. 250px fra både højre og venstre?
- Hilsen Magnus.

Indlæg senest redigeret d. 07.08.2009 11:23 af Bruger #15047

Bruger #14103 @ 07.08.09 12:49

Når man laver en hjemmeside har man næsten altid en container. Altså en boks der er enten er synlig, eller usynlig. Container, og selvfølgelig en der indeholder noget. I det er her tilfælde indeholder den så en masse elementer...

Men skal skynde mig videre, så du får den korte uden container

Her er den:

CSS kode

 .legend(toborgklamme)
 margin: 0px auto;

Du skal bare tiføje:

margin: 0px auto; på en ny linje i dit CSS.
Den har 0px til toppen, og justerer automatisk højre margenen(den bliver centreret).
Håber det kunne hjælpe

Bruger #15047 @ 07.08.09 13:30

Hej tak for svaret!

Okay. Men hvordan justere jeg højre margenen?

Siden right: 250px; virker ikke, eller der sker intet.

- Hilsen Magnus.

Bruger #14103 @ 07.08.09 15:10

Jeg ville have lavet en længere forklaring med sammenskrivning, men så fuckede iMac'en her på Experimentariet lige op

..

Så bare skriv:

margin-right: 250px; for at få den 250px fra højre side.

og skriv:

margin-right: auto; til at autu justere (centrerer) fra højre side.

Håber det hjalp

Bruger #15047 @ 07.08.09 17:20

Ja, sådan er Mac

Men testede det lige, men der skete intet.

CSS kode

 .legend
 {
     color: grey;
     background: white;
     border: 5px solid #grey;
     padding: 2px 50px;
     margin: 0px auto;
     margin-right: 250px;
 }

Men kom lige i tanke om at jeg bruger en HTML kode til det nu.

Ser sådan her ud:
<DIV style="border-style:solid">tekst</DIV>

Hvordan får jeg den til den der .legend CSS kode der?

Indlæg senest redigeret d. 07.08.2009 17:22 af Bruger #15047

Bruger #14103 @ 07.08.09 21:33

Du kan lave CSS opsætning på 3 måder. At du bruger CSS i et HTML element, er bare en af metoderne. Her vil jeg igen referere til html.dk's CSS guide, lektion 2. Her er lige et lille link:

html.dk CSS lektion 2

Der vil du finde dit svar

Det er meget godt at spørge, men man skal lige bruge nogen tid på at google det osv. Og hvis man ikke får svar efter en god del tid, laver du bare en post

Selvom jeg er rimelig godt til CSS, så bruger jeg stadig html.dk som opslagsværk

Hilsen

Andreas

Bruger #15047 @ 07.08.09 23:53

Brugte 25minuter på google.

Men kigger lige der.

Bruger #15047 @ 08.08.09 12:20

Sådan nu har jeg rettet den til.

Her er min .css fil

CSS kode

 <style type="text/css">
 
 .body 
 {
     background: grey;
 }
 
 h1 {
     border-top-width: 1px;    
     border-top-style: solid;    
     border-top-color: black;
     margin-top: 10px;
 
     border-bottom-width: 1px;    
     border-bottom-style: solid;    
     border-bottom-color: black;    
     margin-bottom: 50px;
 
     border-right-width: 1px;    
     border-right-style: solid;    
     border-right-color: black;    
     margin-right: 280px;
 
     border-left-width: 1px;    
     border-left-style: solid;    
     border-left-color: black;
     margin-left: 278px;
 }
 
 .underlinemenu{
 font-weight: bold;
 width: 100%;
 }
 
 .underlinemenu ul{
 padding: 6px 0 7px 0;
 margin: 0;
 text-align: center;
 }
 
 .underlinemenu ul li{
 display: inline;
 }
 
 .underlinemenu ul li a{
 color: #494949;
 padding: 6px 3px 4px 3px; 
 margin-right: 20px;
 text-decoration: none;
 border-bottom: 3px solid grey;
 }
 
 .underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
 border-bottom-color: black;
 }
 
 </style>

Det er h1 afsnittet.

Men når jeg gennemvikler den igennem min browser er den kun hvad skrift typens højde er høj.

Hvordan kan jeg lave den én bestem højde? Og ændre skrift typen?

- Hilsen Magnus.

CSS box design

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler