Jeg har brug for CSS hjælp

Fra Århus C

Tilmeldt 21. Mar 06

Indlæg ialt: 433

InMedia Reklame Skrevet 07-12-2008 kl. 13:57

Hvor mange stjerner giver du? :

Hej Aminoer

Jeg har brug for lidt hjælp til et CSS-problem, jeg bare ikke kan løse.

Her kommer problemstillingen:

Jeg har lavet en XSLT-fil, der skal liste undersiderne på den pågældende side, på en bestemt måde, så hver underside bliver placeret som hver sit <div>. Det fungerer også fint, så det er ikke xslt-filen den er galt med, men CSS'en som bliver koblet på de div-elementer den skal liste.

Nedenunder har jeg prøvet, at illustrerer hvad det er jeg vil opnå:

Elementerne (De mørkegrå - undersiderne) er selvfølgelig styret via mit Style Sheet. Og har følgende CSS:

#displaysubpage { width: 250px; margin-right: 25px; float: left; }

Det element de skal placeres i (den lysegrå) har følgende CSS:

#subpage-container {width: 755px; padding-top: 30; padding-right: 20px; padding-left: 20px; }

Neden for har jeg illustreret hvad der går galt:

Elementerne den skal liste, fortsætter altså bare ud over den Div de er placeret i.

Hvordan får jeg den til automatisk at liste dem nedenunder, når der ikke er mere plads i bredden på den div de er placeret i (illustreret på første JPG)?

Hjææælp.... !! Smile

Fra København

Tilmeldt 1. Jun 06

Indlæg ialt: 6114

Mikkel Mikjær Christensen Fra Mikjaer Consulting ApS Skrevet 07-12-2008 kl. 14:00

Hvor mange stjerner giver du? :

Hiv fat i Nicolai istedet for at prøve selv ... så er du også sikker på det er lavet ordentligt :)

http://www.css-outlet.com/da/

Fra 9500 Hobro

Tilmeldt 29. Sep 07

Indlæg ialt: 237

Lars Borup Jensen Skrevet 07-12-2008 kl. 15:23

Hvor mange stjerner giver du? :

Hej,

Jeg tror du har fået byttet om på elementerne. Jeg har lavet et lille eksempel som viser hvad jeg tror du mener - Prøv at paste nedenstående ind i en fil kaldet "test.html" eller lign, og drop den over i en browser.

<code>

<html>
<head>
    <title>test html</title>
    <style type="text/css">
      body { background-color: white; }
      .container { width: 300px; float: left; background-color: gray; margin: 10px;}
    </style>
</head>
<body>
    <div class="container">
      <h1>Dette er box #1</h1>
    </div>
    <div class="container">
      <h1>Dette er box #2</h1>
    </div>
    <div class="container">
      <h1>Dette er box #3</h1>
    </div>
    <div class="container">
      <h1>Dette er box #4</h1>
    </div>
    <div class="container">
      <h1>Dette er box #5</h1>
    </div>
    <div class="container">
      <h1>Dette er box #6</h1>
    </div>

</body>
</html>

</code>

it-arbejde.dk - specialister i middleware og server-side softwareudvikling, J2EE konsulent og Django.

Fra København

Tilmeldt 19. Jun 07

Indlæg ialt: 560

Patrick Blasone Skrevet 07-12-2008 kl. 15:47

Hvor mange stjerner giver du? :

Hej InMedia

Det første, der slår mig, er, at du bruger et id og ikke en class til dine <li>-elementer, hvilket er forkert. Et id må kun være ét bestemt element på en side, mens class kan deles af mange elementer.

Nu kan jeg ikke se din kode, hvilket gør det umuligt direkte at sige, hvor problemet ligger. Jeg vil dog komme med et forslag, som gerne skulle virke, hvis du ikke har regnet forkert mht. kassernes bredde om margins i forhold til bredden af din div. Hvis der er for lidt plads, vil de komme til at stå kun én på hver linie.

CSS:
#subpage-container { width: 755px; padding-top: 30; padding-right: 20px; padding-left: 20px; }
#subpage-container ul { list-style-type: none; margin: 0; padding: 0; }
#subpage-container ul li { float: left; width: 250px; margin-right: 25px; }

HTML:
<div id="subpage-container">
<ul>
<li>Kasse 1</li>
<li>Kasse 2</li>
<li>Kasse 3</li>
<li>Kasse 4</li>
<br style="clear: both;" />
</ul>
</div>

Fra Århus C

Tilmeldt 21. Mar 06

Indlæg ialt: 433

InMedia Reklame Skrevet 07-12-2008 kl. 16:24

Hvor mange stjerner giver du? :

Hej Patrick

Det lige præcis det der skulle til, det løste mit problem i første hug... Tusind tak for hjælpen, det reddede virkelig min dag/aften Smile

Og også tak til alle jer andre for hurtig respons og fordi I gad at tage jer tiden til at hjælpe en fortvivlet "kollega" Smile