CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

mads375 Juniormester

07. februar 2014 - 18:50 Der er 7 kommentarer og
1 løsning

div tag html

Hej

Jeg har altid brugt tables når jeg har lavet de få hjemmesider jeg har. Nu vil jeg gerne lære at bruge divs istedet for, som er styles med css. Jeg er begyndt at kaste mig ud i det, men det volder mig lidt problemer. Jeg har lavet dette indtil videre:

http://postimg.org/image/pev6io37n/

Mit første spørgsmål er hvordan jeg får mellemrummet væk mellem det gule og det grønne. I første omgang troede jeg egentligt man gjorde det med padding? Det andet er hvis man nu vil have sine <li> på en vandret række istedet for lodret, hvordan kan man så gøre det? Hvis man kigger mellem min content og right er der en sort streg der har sneget sig op imellem mellemrummet på de to. Da jeg satte vidden på min left, content og right sad jeg bare og prøvede mig lidt frem. Men er der ikke en måde hvor man fx sætter sin left og right til en width på 300 px, og så få sin content til at fylde resten ud mellem de to?

Håber der er en som kan hjælpe

Mvh Mads

Synes godt om

Slater Ekspert

07. februar 2014 - 19:17 #1

Det er lidt svært at sige, hvad der skaber mellemrummet mellem det gule og grønne uden at se koden. Padding vil dog ikke gøre det, for det er afstanden fra kanten af en container ind til indholdet, så der vil farven gå ud til kanten. Hvis det er noget er det margin - men det er måske mere sandsynligt, at det er noget whitespace mellem de to containere, der bliver opfattet som en linje der skal vises mellem dem.

Et godt tip når du begynder på sådan noget her, er dog at bruge en CSS reset. Jeg ville aldrig begynde at designe noget uden sådan en, som nulstiller alle de irriterende små standardværdier der er i browsere - og som ofte er forskellige mellem browsere. Den bedste er nok Eric Meyers, men du kan finde nogle stykker at vælge mellem på http://cssreset.com

Mht. en kasse der fylder resten ud, så har det hidtil været lettere besværligt at gøre, uden at regne alting i procenter - men i CSS3 er der kommet en ordentlig løsning, der hedder FlexBox. Prøv at søge på det, eller på display: flex; for at finde ud af at bruge det. Men husk det er CSS3, så det er ikke understøttet af alle browsere endnu.
Hvis du bare vil have f.eks. en venstremenu med en farve og resten af baggrunden en anden, er det ofte bedre at lægge venstremenuen ind i en container med 100% bredde, i stedet for at forsøge at have dem ved siden af hinanden. Du kan sagtens gøre det med både højre og venstremenuer - så skal den højre bare have float: right;

For at få dine li'er på vandret række, skal de hver have float: left; eller display: inline-block;

Synes godt om

mads375 Juniormester

07. februar 2014 - 19:22 #2

ej undskyld den glemte jeg helt at poste. Den er her:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>
<style type="text/css">
.header{background-color:yellow; float:none; height:100px; padding-bottom: 0px;}
.menu{background-color:green; height:100px; padding-bottom: 0px; padding-top: 0px;}
.left{background-color:purple; float:left; width:300px; height:200px;}
.content{background-color:red; float:left; width:662px; height:200px;}
.right{background-color:#990000; float:right; width:300px; height:200px;}
.footer{background-color:black; float:none; height:300px;}

</style>
</head>

<body>
<div class="header">
Header
<div>
test
</div>
</div>
<div class="menu">

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

</div>
<div class="left">
Left
</div>
<div class="content">
Content
</div>
<div class="right">
Right
</div>
<div class="footer">
Footer
</div>

</body>
</html>

Jeg læser lige dit svar igennem. Mange tak for det :-)

Synes godt om

mads375 Juniormester

07. februar 2014 - 19:24 #3

Så det med reset, sætter man simpelthen ind i ens header, før eller? Jeg har plejet normalt at have et eksternt stylesheet. jeg har blot sat det i toppen her for overskueligehedens skyld. Kan man evt lave det reset som en ekstern fil?

mvh Mads

Synes godt om

mads375 Juniormester

07. februar 2014 - 19:39 #4

Kan man sige at sætte:

<div>
<div>
Lorem Ipsum
</div>
</div

ville være lidt det samme som man ville gøre i tables for at styre det bedre nogle gange?

<table>
<table>
<tr>
<td>Lorem Ipsum</td>
</tr>
<table>
</table>

jeg tænkte også på hvad man bruger <div id=container> til. Altså hvad selve id ´et er. Jeg troede egentligt at når man fx ville style det med css brugte man <div class="header">?

mvh Mads

Synes godt om

Slater Ekspert

07. februar 2014 - 20:44 #5

Afstanden mellem den gule og grønne boks er forårsaget af at din ul har en standard-margin. Netop en af de irriterende ting en reset vil hjælpe dig af med.

En CSS reset kan sættes ind hvor som helst du sætter normal CSS ind, den skal bare være det første CSS der bliver indlæst.
Altså, du kan f.eks. putte det i din almindelige CSS-fil - så skal det bare være øverst. Eller du kan give det sin egen .css fil, så skal den bare indlæses før din egen. Eller du kan skrive det i inline CSS på siden (style tag), men så skal det være højere i HTML'en end alt andet CSS.

- Mht. id versus class, så udfører de lidt samme formål i forbindelse med CSS. Id kan også nogle andre ting, f.eks. fungere som anchor for links, men i CSS forstand er der kun en forskel: Du må kun have ét element med et bestemt id, og et element må kun have ét id.
Omvendt med classes må du have lige så mange elementer du vil med samme class, og et element må have lige så mange classes du vil.

Derfor vil man bruge class meget af tiden - men hvis du ved med sikkerhed at du kun skal bruge én af noget (f.eks. id="topmenu" - der ved du at du ikke vil have flere), så er det ofte godt at bruge id, netop for at minde sig selv og evt. andre kodere om, at denne style ikke skal genbruges. Den er unik.

Synes godt om

mads375 Juniormester

09. februar 2014 - 12:54 #6

Ok super mange tak for hjælpen. Så det vil sige at jeg godt kunne gøre det på denne måde fx:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<style type="text/css">
.header{background-color:yellow; float:none; height:100px; margin-bottom: 0px;}
.menu{background-color:green; height:100px; padding-bottom: 0px; margin-top: 0px; white-space: 0px;}
.left{background-color:purple; float:left; width:300px; height:200px;}
.content{background-color:red; float:left; width:662px; height:200px;}
.right{background-color:#990000; float:right; width:300px; height:200px;}
.footer{background-color:black; float:none; height:300px;}

</style>
</head>

Altså her loades mit eksterne stylesheet, før mit interne stylesheets køres? Jeg har sat det ind sådanne her, er det godt nok?

http://postimg.org/image/khtrv9u49/

Mange tak for det fyldestgørende svar. Ligger du også et svar?

Mvh Mads

Synes godt om

Slater Ekspert

09. februar 2014 - 13:47 #7

Så vidt jeg kan se er det helt fint, ja.

Synes godt om

mads375 Juniormester

09. februar 2014 - 13:50 #8

super mange tak for det :-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
ASP Classic fil fra subfolder Af bsn i Andet programmering	3	07/05/202416:14	08/05/202401:00
Session Variable Af bsn i Andet programmering	3	01/05/202409:44	02/05/202409:29
Modifyed Field for all Records in Access Af ingeman i Andet programmering	2	29/04/202416:05	30/04/202407:19
Delphi - Parser JSON Fil Af juzas i Andet programmering	4	25/02/202407:13	28/02/202420:56
Bat fil Af sjass i Andet programmering	5	15/01/202417:45	15/01/202420:35

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS