CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede naebet Nybegynder
10. maj 2006 - 20:45 Der er 21 kommentarer og
1 løsning

linie afstand mellem overskrift og punktopstilling

Hej

Jeg har en layer med en overskrift og 3 punkter. Begge er lavet med CSS (overskrift og bread) Problemet er at der bliver meget langt mellem overskriften og punkterne. Kan man ændre den afstand??
Avatar billede bojohansen Nybegynder
10. maj 2006 - 21:33 #1
det vill hjælpe med et link eller noget kode!
Avatar billede jokkejensen Novice
10. maj 2006 - 21:43 #2
ja det gøres lettest gennem CSS..

ex

h1, h2, h3, h5, h6, h7, p
{
margin:0px;
}

herefter kan du så sætte den som du ønsker for de forskellige:
h1
{
margin-top: 5px;
margin-bottom: 8px;
}
h2
{
...
Avatar billede naebet Nybegynder
10. maj 2006 - 21:46 #3
<div class="headline" id="Layer3">
  <p align="left">OVERSKRIFT</p>
  <ul>
    <li class="bread">
      Punkt 1</li>
    <li class="bread">
      Punkt 2</li>
    <li class="bread">
      Punkt 3  </li>
    <li class="bread"></li>
  </ul>
</div>
Avatar billede jokkejensen Novice
10. maj 2006 - 21:54 #4
css:

div.headline p
{
margin:0px;
}

div.headline li.bread
{
line-height: 15px;
}

div.headline ul
{
margin:0px;
}
Avatar billede bojohansen Nybegynder
10. maj 2006 - 21:57 #5
ul {
    margin-top: -20px;
}

feks.
Avatar billede naebet Nybegynder
10. maj 2006 - 22:02 #6
hmm mine styles ser således ud:

}.headline {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #C70148;
    margin:0px;
    margin-top: 0px;
    margin-left: 30px;
}
.bread {
    font-family: Arial;
    font-size: 11px;
    color: #003B63;
    margin-top: 0px;
    line-height: 16px;
}

uanset hvad jeg skriver i margin top sker der ikke noget

Flere forslag?
Avatar billede jokkejensen Novice
10. maj 2006 - 22:02 #7
-20 er nok knapt så heldigt at give alle lister..

Prøv selv at fjerne <p> tagget og blot skrive tekst:

Så vil listen rykke sig over teksten...

<div class="headline" id="Layer3">
  OVERSKRIFT
  <ul>
    <li class="bread">
      Punkt 1</li>
    <li class="bread">
      Punkt 2</li>
    <li class="bread">
      Punkt 3  </li>
    <li class="bread"></li>
  </ul>
</div>
Avatar billede jokkejensen Novice
10. maj 2006 - 22:06 #8
naebet :

ul, p
{
margin:0px;
}

ul
{
margin-left: 20px;
}
Avatar billede bojohansen Nybegynder
10. maj 2006 - 22:08 #9
jeg ser ikke relevansen af din kommentar.
1 list menu, P tag i koden
?
Avatar billede bojohansen Nybegynder
10. maj 2006 - 22:10 #10
du kan indsætte koden i toppen af dit dokument, eller i dit css dokument som definer dine Body styles
Avatar billede jokkejensen Novice
10. maj 2006 - 22:19 #11
først fjerner jeg margin på begge.

men tilføjer igen margin-left på ul tagget - så list-style-type bliver vist..
Avatar billede bojohansen Nybegynder
10. maj 2006 - 22:24 #12
@JokkeJensen
Det var ikke den kommentar

<citat>
-20 er nok knapt så heldigt at give alle lister..

Prøv selv at fjerne <p> tagget og blot skrive tekst:
</citat>

Det er ofte voldsomt viktigt at holde sine css koder på et absolut minimum, og jeg mener absolut minimum.
Man ser jo gang på gang css koder som fylder mere end gammeldags html styling, og folk som sidder i dyb frustration fordi de ikke har chance til at finde rundt i den css kode de selv har skrevet for 6 måneder siden
Avatar billede jokkejensen Novice
10. maj 2006 - 22:40 #13
hvis du styler ALLE dine lister med margin-top: -20px ;


vil du steder hvor ex :

<p> balbdfklgadflgnæadsfmasdf sdaf asdfgadfgaldf gnlkadnf glknadlkf ladnflgnladsnfglnasdlf læasdknf ln asldnf lasdnnadslkf lsandfln asldn flansdf nlasdnf lkansdlf nalsdkn l
<ul>
<li>adsfg</li>
</ul> sdafgasdf asd adfgasd fdafgad ygade ga</p>


Fucke dit design op.. det må du da kunne se ?
Avatar billede naebet Nybegynder
10. maj 2006 - 22:40 #14
jokkejensen har ret i at -20 ikke er sagen. den skal holdes på 0
ul {
    margin-top: 0px;
}
og
<div id="Layer5">
  <p class="headline">OVERSKRIFTEN</p>
  <ul>
    <li class="bread">Punkt 1</li>
    <li class="bread">Punkt 2</li>
    <li class="bread">Punkt 3 </li>
  </ul>
ser ud til at være det rigtige

smider du lige et svar
Avatar billede naebet Nybegynder
10. maj 2006 - 22:41 #15
ps takker for de hurtige svar fra Jer begge!
Avatar billede jokkejensen Novice
10. maj 2006 - 22:42 #16
så lidt :)

til bo :

prøv lige den her :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" >
<head></head>
<style>

ul
{
margin-top: -20px;
}
</style>
<body>

<div class="headline" id="Layer3">
  OVERSKRIFT
  <ul>
    <li class="bread">
      Punkt 1</li>
    <li class="bread">
      Punkt 2</li>
    <li class="bread">
      Punkt 3  </li>
    <li class="bread"></li>
  </ul>
</div>
</body>
</html>
Avatar billede bojohansen Nybegynder
10. maj 2006 - 22:56 #17
@naebet
Om du skal ha 100 eller -100, det er jo noget du sætter som du vil, har ikke testet -20 i browser på ul tagget, det er kun illustration til dig ;-)
Men du gik for den simple udgave efter hvad jeg kan se i dit indlæg.

@jokkejensen
Jeg behøver ikke at teste den, jeg ved hvad der sker.
naebet skriver at han har 1 list på siden, og ligger kode med p tag ;-)
Avatar billede jokkejensen Novice
10. maj 2006 - 23:08 #18
ja okay, jeg mener også bare det er tåbeligt at råde ham til at gøre det.. så vi er vel nok enige..
Avatar billede naebet Nybegynder
11. maj 2006 - 08:04 #19
@bojohansen
hvad mener du når du skriver:
Men du gik for den simple udgave efter hvad jeg kan se i dit indlæg.

kunne man løse det på en mere elegant måde?
Avatar billede bojohansen Nybegynder
12. maj 2006 - 13:09 #20
@naebet

jeg mener bare at du gik for at omdifiner ul tagget :
ul {
    margin-top: 0px;
}

og nej, så længe du kun har en List på siden så er det "efter min mening" den mest elegante måde.
Avatar billede naebet Nybegynder
18. maj 2006 - 08:15 #21
jokkejensen du skal da have dine point så smider du ikke et svar?
Avatar billede naebet Nybegynder
11. december 2006 - 20:13 #22
jokkejensen kommer der et svar
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
Programmeringssprog kurser
Kurser inden for grundlæggende programmering
Se alle Programmeringssprog kurser

Flere spørgsmål fra Programmeringsværktøjer kategorien

Titel Indlæg Oprettet Seneste aktivitet
senior Af Uroda i Programmeringsværktøjer 1 22/06/202418:29 23/06/202413:17
Sort Skærm Af Kaj Sondrup i Programmeringsværktøjer 5 25/02/202421:45 27/02/202420:17
DATA (D) Af rene1111 i Programmeringsværktøjer 3 21/02/202415:03 22/02/202409:08
Power Automate, åben en fil der er delt med mig Af KATM i Programmeringsværktøjer 1 16/02/202409:07 19/02/202409:10
Prisberegner til hjemmeside Af Michael Vahl i Programmeringsværktøjer 4 14/01/202417:30 21/01/202409:21
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 10:57 Pinnacle videoredigering Af gerhardpet i Billedbehandling
I går 16:51 UNILOGIN i GOOGLE Af lao i Browsere
I går 10:07 Kan det gøres lettere Af densortehingst i Excel
01/0821:49 En app vækker mig om morgenen og giver en vejrudsigt - hvordan stoppe det? Af Philip Kuhlmann i Apps til Android
01/0821:28 visning af heltal som resultat efter beregning Af Brian_Skovgaard i Excel
White papers
Flere white papers »


Premium
Teaser billede
Nvidia efterforskes for brud på konkurrencelov
Læs mere »
Den store cloud-krig raser stadigvæk - og Amazon ser lige nu ud til at have overhånden
Apple præsenter første regnskab siden AI-udmelding: Her er tre bemærkelsesværdige pointer derfra
Sårbarhed kan let give administratorrettigheder til alle: Udnyttes allerede af ransomware-grupper
Se alle »
Computerworld
Teaser billede
Første test: Denne helt nye wunder-CPU vil du have i din næste laptop
Læs mere »
Alvorlig fejl i Intel-chips breder sig: Listen over ramte processor vokser og vokser – og de kan blive permanent beskadigede
’Apple Intelligence’ slippes løs: Her kommer første mulighed for at afprøve Apples kunstige intelligens
Flere statslige it-løsninger ramt af netværksproblemer - ansatte kunne ikke få mail-adgang
Se alle »
CIO
Teaser billede
Stor aftale gør Microsofts datacentre hurtigere - investerer i netværksudstyr
Læs mere »
Telenor skrotter ældre it-system: Nyt system er en hyldevare
Derfor står Danske Bank foran en kæmpe AWS-transformation: Ellers skulle vi bygge en ny infrastruktur for at følge med
NIS2 i Danmark udskydes med flere måneder: Her er den nye dato, hvor loven træder i kraft
Se alle »
Job & Karriere
Teaser billede
Efter 12 år er NNIT's hovedkvarter i Søborg nu ryddet og tomt - alle arbejder hjemme: "Det er med et vist vemod"
Læs mere »
KMD-direktør forlader selskabet: Det skal hun nu
Dansk top-profil trækker sig fra Microsoft: Skal være direktør i TDC Erhverv
IBM Danmark skifter ud i sin øverste ledelse - her er den nye direktion
Se alle »
White paper
Teaser billede
Informationshåndtering på frontlinjen: Sådan optimerer du med automatisering
Læs mere »
Sådan gør du: Elektronisk dokumentudveksling i praksis
Guide: Sådan udvikler du en moderne netværksstrategi
Sådan: Sikker, hurtig og fleksibel storage til dine kritiske data
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »