Søg
Avatar billede virus Nybegynder
18. august 2003 - 13:23 Der er 18 kommentarer og
1 løsning

1px div højde?

--code--

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <title>lala</title>
        <script language="JavaScript" src="/js/main.js" type="text/javascript"></script>
        <style type="text/css">
            body
            {
                margin:4px;
                padding:0px;
                background:url(images/pat_20030430184606_.gif);
                color:black;
                text-align:center;
                background-color:#E6E6E6;   
            }

            #header
            {
                border:1px solid #CBCFD2;
                height:55px;
                width:800px;
                background-color:#F2F2F2;
                margin:11px 11px 0px 0px;
            }
            .horisontal
            {
                height:1px;
                background-color:#CBCFD2;
            }
            .box1
            {
                height:33px;
                background-color:#FAFAFA;
            }


        </style>
    </head>

    <body>
        <div id="header">
            <div class="horisontal"></div>
            <div class="box1"></div>
        </div>

    </body>

</html>

--/code--

Hvis i paster det ind i et dokument og kigger vil i se at klassen "horisontal" ikke har en højde på 1 px, men nærmere 13px som std font-size, hvordan overruler jeg det?
Avatar billede roenving Novice
18. august 2003 - 13:25 #1
Sæt et img ind med 1 px i højden:

<div class="horisontal"><img src="spacer.gif" style="height:1px;"></div>
Avatar billede nute Nybegynder
18. august 2003 - 13:30 #2
set ind 'overflow:hidden;':

.horisontal
{
    height:1px;
    background-color:#CBCFD2;
}

/nute
Avatar billede nute Nybegynder
18. august 2003 - 13:30 #3
uups ... :-)

.horisontal
{
    height:1px;
    background-color:#CBCFD2;
    overflow:hidden;
}
Avatar billede lordhead Nybegynder
18. august 2003 - 13:32 #4
prøv dette:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <title>lala</title>
        <script language="JavaScript" src="/js/main.js" type="text/javascript"></script>
        <style type="text/css">
            body
            {
                margin:4px;
                padding:0px;
                background:url(images/pat_20030430184606_.gif);
                color:black;
                text-align:center;
                background-color:#E6E6E6;   
            }

            #header
            {
                border:1px solid #CBCFD2;
                height:55px;
                width:800px;
                background-color:#F2F2F2;
                margin:11px 11px 0px 0px;
            }
            .horisontal
            {
                height:1px;
                background-color:#CBCFD2;
            }
            .box1
            {
                height:33px;
                background-color:#FAFAFA;
            }


        </style>
    </head>

    <body>
        <div id="header">
            <div class="horisontal">&nbsp;</div>
            <div class="box1">&nbsp;</div>
        </div>

    </body>

</html>

--altså, du sætter mellemrum ind i dine div's ;)
Avatar billede roenving Novice
18. august 2003 - 13:44 #5
>>lordhead

-- på den måde kan du ikke få en div, som er mindre end 2px i højden, vi var en del, som for nogle måneder siden forsøgte alt muligt, og den eneste løsning vi fandt var 1px-giffen ...

-- men nutes forslag ser interessant ud !-)
Avatar billede roenving Novice
18. august 2003 - 13:47 #6
>>lordhead

Rent faktisk giver den den der 13px hvis ikke overflow:hidden er med !-)
Avatar billede websmith Nybegynder
18. august 2003 - 13:49 #7
Jeg har haft success med at sætte

font-size:1px
Da det jo er med til at sætte linie højden.
Avatar billede virus Nybegynder
18. august 2003 - 13:54 #8
nute's forslag virker, og jeg må indrømme at jeg så vidt muligt er imod 'hovsa' løsninger :o)

Smi' æ' svar nute
Avatar billede roenving Novice
18. august 2003 - 13:54 #9
>>websmith

-- da vi forsøgte (re 13:44:59) blev den alligevel ikke mindre end 2 px i højden ...
Avatar billede virus Nybegynder
18. august 2003 - 14:00 #10
Hvad med valign som 'findes' i HTML 4.01? Hvordan fixer man sådan en?
Avatar billede roenving Novice
18. august 2003 - 14:08 #11
?
Hvad mener du ?-)
Avatar billede virus Nybegynder
18. august 2003 - 14:10 #12
Jamen tag ovenstående eksempel
i klassen box1 vil jeg skrive et eller andet, men hvis jeg smider vertical-align:middle; på den, hjælper det ikke, selvom box1 er 33px højt smider den alligevel teksten øverst
Avatar billede nute Nybegynder
18. august 2003 - 14:16 #13
vertical-align er kun beregnet til inline elements. et <div> tag er et box element ... umiddelbart vil en enkel løsning være:

<html>
    <head>
        <style type="text/css">
        td {
            height:55px;
            width:205px;
            border: 1px solid black;
           
            text-align: center;
            vertical-align: middle;
        }
        </style>
    </head>

    <body>
    <div>
        <table>
            <tr>
            <td>test</td>
            </tr>
        </table>
    </div>
    </body>
</html>

/nute
Avatar billede virus Nybegynder
18. august 2003 - 14:18 #14
#nute

Det er netop grunden til jeg sidder og pryder mit lille hoved, jeg vil væk fra tabeller og ind med CCS positionering af DIV elementer :)
Avatar billede virus Nybegynder
18. august 2003 - 14:18 #15
CSS*
Avatar billede nute Nybegynder
18. august 2003 - 14:26 #16
så er du, så vidt jeg kan regne ud, nødt til at benytte padding for at opnå den vertikale positionering du søger. Du kan lære lidt mere om det her:

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align 
http://www.w3.org/TR/REC-CSS2/visuren.html#anonymous
http://www.w3.org/TR/REC-CSS2/tables.html#propdef-table-layout
http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding
http://www.w3.org/TR/REC-CSS2/box.html

/nute
Avatar billede roenving Novice
18. august 2003 - 14:28 #17
-- lige lidt læsestof *g*

Men det er en god samling, du har smidt, nute !-)
Avatar billede nute Nybegynder
18. august 2003 - 14:32 #18
fino :-) håber du kan bruge det til noget  ...

/nute
Avatar billede virus Nybegynder
18. august 2003 - 14:47 #19
Kan jeg nute, du er jo den perfekte Nordmand :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
07/0916:09 Bitdefender brokker sig Af FinnRasmussen i Andet sikkerhed
06/0921:00 Libre Office Impress Af Frank i Andre styresystemer
06/0911:47 VB script Af Jenshentze i Word
White papers
Flere white papers »