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

Frederik Nybegynder

26. juli 2009 - 22:05 Der er 11 kommentarer og
1 løsning

Billedvisning ved siden af hinanden via CSS.

Hej.

Er det mulig at lave således at 4 billeder vises ved siden af hinanden, evt. med 5px mellemrum samt tilhørende links som står under hvert billede ved at lave en div til hvert billede?

- Frederik

Synes godt om

thesurfer Nybegynder

26. juli 2009 - 22:27 #1

Eksempel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.masterboks
{
float: left;
}

.boks
{
float:right;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="masterboks">
<div class="boks"><img src="test.jpg"><br><a href="http://www.server1.dk">server1.dk</a></div>
<div class="boks"><img src="test.jpg"><br><a href="http://www.server2.dk">server2.dk</a></div>
<div class="boks"><img src="test.jpg"><br><a href="http://www.server3.dk">server3.dk</a></div>
<div class="boks"><img src="test.jpg"><br><a href="http://www.server4.dk">server4.dk</a></div>
</div>
</body>
</html>

Synes godt om

thesurfer Nybegynder

26. juli 2009 - 22:28 #2

Sat op med linieskift for at gøre det mere overskueligt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.masterboks
{
float: left;
}

.boks
{
float:right;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="masterboks">
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server1.dk">server1.dk</a>
</div>
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server2.dk">server2.dk</a>
</div>
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server3.dk">server3.dk</a>
</div>
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server4.dk">server4.dk</a>
</div>
</div>
</body>
</html>

Synes godt om

thesurfer Nybegynder

26. juli 2009 - 22:31 #3

Faktisk sådan her.. havde lavet float:right i stedet for float:left, hvilket byttede om på rækkefølgen..

Og nu er det sidste billede ikke nogen margin.. du kan gøre hvad du vil med klassen "bokssidst":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.masterboks
{
float: left;
}

.boks
{
float: left;
margin-right: 5px;
}

.bokssidst
{
float: left;
}
</style>
</head>
<body>
<div class="masterboks">
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server1.dk">server1.dk</a>
</div>
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server2.dk">server2.dk</a>
</div>
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server3.dk">server3.dk</a>
</div>
<div class="bokssidst">
<img src="test.jpg">
<br>
<a href="http://www.server4.dk">server4.dk</a>
</div>
</div>
</body>
</html>

Synes godt om

Frederik Nybegynder

26. juli 2009 - 23:27 #4

Hmm.. det virker såmænd fint.. og dog.. Det laver dog noget rod i mit design..

Jeg har lavet en boks med top, midte og bund, hvor midten skal variere alt efter hvor meget indhold der er i boksen. Når jeg smider din kode ind i bunden af "midten" bliver billederne tilføjet, men "bunden" bliver ikke rykket ned som ved andet indhold?

Min kode ser sådan ud:

index.php:

...

<div id="content">
<br>
<div class="contentcontent">
<div class="contentt">

Overskrift

</div>
<div class="contentc">

her er include af filen forside.php

</div>
<div class="contentb"><br>
</div>
</div>
</div>

...

style.css:

...

#content {
position:absolute;
top: 155px;
margin-left:170px;
margin-right:10px;
width:570px;
background-color:#E3E4E5;
}

.contentcontent {
position:absolute;
margin-left:0px;
margin:0px auto;
width:570px;
background-image: url(layout/content/contentc.jpg);
background-position: 50% 50%;
background-repeat: repeat-y;
background-color:#E3E4E5;
}

.contentt {
text-align:center;
position:absolute;
background-image: url(layout/content/contentt.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:570px;
height:20px;
left:0px;
background-color:#E3E4E5;
font-weight: bold;
}

.contentc {
padding-top:30px;
margin-left:5px;
margin-right:5px;
}

.contentb {
position: absolute;
background-image: url(layout/content/contentb.jpg);
background-repeat: no-repeat;
width:570px;
height:9px;
background-color:#E3E4E5;
text-align:center;
}

#billede {
float:right;
width: 150px;
margin-right:5px;
margin-top:0px;
text-align:center;
font-size:small;
}

.masterboks
{
float: left;
}

.boks
{
float: left;
margin-right: 5px;
}

.bokssidst
{
float: left;
}

...

forside.php:

<div id="billede">
<img src="logo.jpg" alt="Et logo"><br><a href="logo.jpg" target="_blank">(Klik for større billede)</a>
</div>

Tekst bla bla bla

<div class="masterboks">
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server1.dk">server1.dk</a>
</div>
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server2.dk">server2.dk</a>
</div>
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server3.dk">server3.dk</a>
</div>
<div class="bokssidst">
<img src="test.jpg">
<br>
<a href="http://www.server4.dk">server4.dk</a>
</div>
</div>

<br><br>

Feltet "id=contentcontent" følger med løbende som den skal, men feltet "id=contentb" slutter lige under teksten og dermed ikke virker som en "bund"

Jeg ved ikke om det er fuldstændig uoverskueligt?

- Frederik

Synes godt om

thesurfer Nybegynder

27. juli 2009 - 00:00 #5

Tilføj denne linie under din "masterboks"-div

<div style="clear: both"></div>

Eksempel:

<div class="masterboks">
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server1.dk">server1.dk</a>
</div>
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server2.dk">server2.dk</a>
</div>
<div class="boks">
<img src="test.jpg">
<br>
<a href="http://www.server3.dk">server3.dk</a>
</div>
<div class="bokssidst">
<img src="test.jpg">
<br>
<a href="http://www.server4.dk">server4.dk</a>
</div>
</div>
<div style="clear: both"></div>

Du kan også slette klassen "masterboks":

.masterboks
{
float: left;
}

Hvis du sletter den, husk at fjerne class="masterboks" fra masterboks-div'en.

Synes godt om

Frederik Nybegynder

27. juli 2009 - 01:52 #6

Der sker bare det samme i begge tilfælde...?

Synes godt om

Frederik Nybegynder

27. juli 2009 - 02:40 #7

Jeg fik løst problemet ved at indsætte "masterboks"-div igen, men istedet skrive:

.masterboks {
position:relative;
height:100px;
}

Så langt så godt... Nu vil jeg så gerne have centreret disse billeder, har forsøgt med forskellige "indryk", men der er ikke noget, som givet et pænt resultet af det jeg har prøvet.

Findes der en måde, at centrere de fire billeder?

- Frederik

Synes godt om

Frederik Nybegynder

27. juli 2009 - 15:29 #8

Ved at indrykke masterboks 70px er det nogenlunde i midten, men kan bare ikke lige se logikken i det??

.masterboks {
position:relative;
height:100px;
left: 70px;
}

Synes godt om

thesurfer Nybegynder

28. juli 2009 - 16:16 #9

Hvis billederne f.eks. er 100px i bredden, og der er 4 billeder, med 5px mellem billederne, skal masterboksen være:

bredde = (100 x 4) + (3 x 5) = 415px

lad os bare sige 420, for der er en smule luft.

Du kan derefter bruge:

.masterboks
{
height:100px;
width:100px;
margin: 0 auto;
}

Det skulle gerne automatisk centrere masterboksen horizontalt (vandret)..

Synes godt om

thesurfer Nybegynder

28. juli 2009 - 16:17 #10

RETTELSE - ERSTATTER FORRIGE INDLÆG:

Hvis billederne f.eks. er 100px i bredden, og der er 4 billeder, med 5px mellem billederne, skal masterboksen være:

bredde = (100 x 4) + (3 x 5) = 415px

lad os bare sige 420, for der er en smule luft.

Du kan derefter bruge:

.masterboks
{
height:100px;
width:420px;
margin: 0 auto;
}

Det skulle gerne automatisk centrere masterboksen horizontalt (vandret)..

Synes godt om

Frederik Nybegynder

29. juli 2009 - 09:41 #11

Jeg takker for alle dine løsninger:)

Smid et svar!

- Frederik

Synes godt om

thesurfer Nybegynder

29. juli 2009 - 14:28 #12

Svar :-)

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

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
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
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	3	29/09/202410:58	20/03/202513:38

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