Søg
Avatar billede lmejding Nybegynder
10. marts 2005 - 20:23 Der er 11 kommentarer

Centre logo - hver gang

Hej
Jeg vil gerne have et logo på mit webdesign til altid at være centreret midt på siden - og 100 pixel nede på siden fra toppen.
Det skal altid være sådan - lige meget hvilken opløsning skærmen er sat til og om vinduet ikke er maximeret.

hvordan gør jeg?
Avatar billede wormsk8 Nybegynder
10. marts 2005 - 20:35 #1
#toplogo { margin-left: auto; margin-right: auto text-align: center; }

Burde hjælpe på det.

Eller smid logoet ind i en div, som du kalder toplogo.
Avatar billede lmejding Nybegynder
10. marts 2005 - 20:44 #2
Hej
Det virker ikke - lægger sig helt til venstre..
Jeg har sat din kode ind:
#logo { margin-left: auto; margin-right: auto text-align: center; }

Og denne kode ind på siden med logoet:
<div id="logo">
<img border="0" src="include/logo.gif">
</div>

Hilsen
Lars
Avatar billede basementjack Nybegynder
10. marts 2005 - 21:02 #3
Jeg vil mene det bør være sådan her:

#logo { text-align: center; margin-top:100px; }
#logo span { margin-left: auto; margin-right: auto; }

<div id="logo"><span>
<img border="0" src="include/logo.gif"></span>
</div>
Avatar billede lmejding Nybegynder
10. marts 2005 - 21:29 #4
Det virker - bortset fra at billedet skubber resten af indholdet længere ned på siden.
Det er meningen at billedet skal ligge oven på en række i en tabel - uden at påvirke tabellen...Er z-index en mulighed??
Avatar billede basementjack Nybegynder
10. marts 2005 - 21:33 #5
Måske sådan her, ellers bliver det nok noget med z-index ?

#logo { text-align: center; position:absolute; top:100px; }
#logo span { margin-left: auto; margin-right: auto; }

<div id="logo"><span>
<img border="0" src="include/logo.gif"></span>
</div>
Avatar billede lmejding Nybegynder
10. marts 2005 - 21:42 #6
Når jeg bruger absolute bliver det ikke centreret.
Hvis jeg ændre absolute til relative bliver den centreret, men tabellen rykker ned..Grrr.
Avatar billede basementjack Nybegynder
11. marts 2005 - 10:38 #7
Og tabellen er vel uden for div#logo ?

Kan ikke lige gennemskue hvad der ellers skulle være i vejen der... :|
Avatar billede wormsk8 Nybegynder
11. marts 2005 - 11:31 #8
Kan du ikke skrive alt din kode?

Så er det en del nemmere..
Avatar billede lmejding Nybegynder
11. marts 2005 - 11:40 #9
Jo, selvfølgelig.
Her er koden, med boksen:
<html>

<head>

<link rel="stylesheet" type="text/css" href="include/kn.css">
<title>New Page 1</title>
</head>

<body>
<div id="logo"><span>
<img border="0" src="include/logo.gif"></span>
</div>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
  </tr>
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
  </tr>
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>

</html>

<body>
<div id="logo"><span>
<img border="0" src="include/logo.gif"></span>
</div>
ghj<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
  </tr>
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
  </tr>
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>

</html>

...og css koden:

#logo { text-align: center; position:relative; top:10px; }
#logo span { margin-left: auto; margin-right: auto; }

/Lars
Avatar billede lmejding Nybegynder
11. marts 2005 - 11:41 #10
Damn - kom til at paste forkert...om igen:


<html>

<head>

<link rel="stylesheet" type="text/css" href="include/kn.css">
<title>New Page 1</title>
</head>

<body>
<div id="logo"><span>
<img border="0" src="include/logo.gif"></span>
</div>
ghj<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
  </tr>
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
  </tr>
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>

</html>

css koden:


#logo { text-align: center; position:relative; top:10px; }
#logo span { margin-left: auto; margin-right: auto; }
Avatar billede roenving Novice
11. marts 2005 - 11:58 #11
<body>
  <img src="include/logo.gif" style="width:480px;top:100px;margin:0 auto;">

...

-- margin: auto; virker kun, når du har en angivet bredde (og i IE kun hvis du har en fuldt kvalificeret doctype inklusive dtd-link !-)
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 dag 12:36 nulstille Samsung tablet T-580 Af fase i Tablet
I går 17:19 Kender I "Dropbox" ? Af Ikke-ekspert i Andet software
I går 16:28 Indsæt en kort video i Outlook 2024 Af ErikHg i E-mail programmer
22/1019:20 Hvor kan man finde en god bærbar computer? Af Strawberry i PC
22/1015:45 lukke sikkerhedshuller Af Asky i PHP
White papers
Flere white papers »