Gå til innhold

Problem med posisjonering av div-element (CSS)

Klekkus

Anbefalte innlegg

Klekkus

Klekkus

Skrevet
Skrevet

Hei, og først og framst; takk for din! :)

Jeg har da et lite problem med litt CSS / (html?) som jeg ikke ser ut til å klare og løse selv.

 

Først tenker jeg å liste kilden under. Deretter vil jeg forklare hva jeg vil, og hvordan det er nå (slik det ikke skal være, etter planen).

index.html:

<html>
<head>
 <link rel="stylesheet" type="text/css" href="stilark.css" />
</head>
<body>
 <div class="roundcont" style="margin: 0px auto;">
     <div class="roundtop">
   	<img src="images/tl.gif" alt="" width="15" height="15" class="corner" 
   	style="display: none" />
     </div>
 	<div style="font: Times New Roman; font-size: 32px; margin-left: 25px; color: #000000;">
   <b>Administrasjon</b>
 	</div>
 	<div style="meny" style="">
   <ul type="square">
   	<li class="overhead">Kampanjerelatert</li>
   	<ul type="square"><li>Legg til kampanjer</li></ul>
   	<ul type="square"><li>Endre kampanjer</li></ul>
   	<ul type="square"><li>Slett kampanjer</li></ul>
   	<li class="overhead">Andre tjenester</li>
   	<ul type="square"><li>Logg</li></ul>
   	<ul type="square"><li>Brukere</li></ul>
   	<ul type="square"><li>Logg ut</li></ul>
   </ul>
 	</div>
 	<div style="border: 1px solid black;">
   lolololollkkmklmlmkl
 	</div>
     <div class="roundbottom">
   	<img src="images/bl.gif" alt="" width="15" height="15" class="corner" 
   	style="display: none" />
     </div>
 </div>
</body>
</html>

Som dere ser er det en <div>som avsluttes med en avsluttende </div> - Dette er det som skal være til venstre, en liten margin fra resten. Den neste <div>en er det som skal være i midten på siden, selve innholdet. Det er her problemet ligger, dette div-elementet legger seg under det første div elementet og opptar så hele plassen under i en smal linje. Det jeg vil er å få endret dette til at den siste diven legger seg på siden av den første.

 

Her legger jeg ut bilder for å få din forståelse av / rundt problemet mest mulig.

 

Første div i koden:Bilde_2007_03_20_21_46_32.tiff

 

Andre div i koden:Bilde_2007_03_20_21_46_54.tiff

 

Hele siden:post-77030-1174423779_thumb.png

 

Det er ikke store siden, så å si ingenting, men et irriterende problem jeg håper jeg får bukt med uavhengig av hvor langt jeg har kommet på siden. Der håper jeg dere har fått nok innsikt i problemet mitt og at dere tar dere tid til å forsøke å hjelpe meg! Takk for svar. :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Matsemann

Matsemann

Skrevet
Skrevet (endret)

Ærlig talt så skjønner jeg ikke helt hva du mener.

Har du et bilde av hvordan du vil det skal se ut?

Og bruk kommentarer (<!--kommentar-->) i koden din slik at det blir lettere å skjønne hva du referer til. Altså <!--innhold --> i HTML-koden, og så forteller du hva du vil.

 

Kan hende jeg bare er trøtt, men jeg skjønner det bare ikke :p

 

ENDRET: Og få se kildekoden til CSS-filen din.

Endret av Matsemann
Lenke til kommentar
Klekkus

Klekkus

Skrevet
  • Forfatter
Skrevet
Ærlig talt så skjønner jeg ikke helt hva du mener.

Har du et bilde av hvordan du vil det skal se ut?

Og bruk kommentarer (<!--kommentar-->) i koden din slik at det blir lettere å skjønne hva du referer til. Altså <!--innhold --> i HTML-koden, og så forteller du hva du vil.

 

Kan hende jeg bare er trøtt, men jeg skjønner det bare ikke :p

 

ENDRET: Og få se kildekoden til CSS-filen din.

8199515[/snapback]

Jeg valgte å ikke ta med .css filen i dette spørsmålet, fordi den ikke inneholder noe som har med dette problemet, det eneste den inneholder er css for å få runde kanter på siden...

 

Her er bildet av hvordan jeg vil det skal se ut:

post-77030-1174428128_thumb.png

Det burde vel lett forståes, hvis ikke må jeg gi opp å forklare. Jeg vet jeg er dårlig til å forklare ting generellt, men jeg mener da dette burde gi en viss forståelse for mitt problem

Lenke til kommentar
Stian Jacobsen

Stian Jacobsen

Skrevet
Skrevet

Tror ikke helt jeg skjønte hva du mente.. men her er noen tips

For å få to kolonner, bruk float, eller absolute position.. anbefaler float..

 

feks

Stil.css

div#wrapper {
width: 800px; /* For å klare å definere bredden i prosent på andre div's */
}

div#venstre {
 float: left;
 width: 30%;
}

div#hoyre {
 float: left;
 width: 70%;
}
div#bunn {
clear: left;
}

index.html

<div id="wrapper">
 <!-- Venstre kolonne -->
 <div id="venstre">
  <p>Litt tekst her blir bra...</p>
 </div>

 <!-- Høyre kolonne -->
 <div id="hoyre">
  <p>bla bla bla</p>
 </div>
</div>

 

En annen ting lag en liste slik;

<ul>
<li>Blah blah blah
  <ul>
   <li>hahaha</li>
 </ul>
</li>
<li>d234sdf</li> 
<li>sdfsdfs3334</li>
</ul>

Lenke til kommentar
Klekkus

Klekkus

Skrevet
  • Forfatter
Skrevet (endret)

Hehe, først: skjønner ikke hvorfor ingen forstod hva jeg mente, jeg prøvde virkelig, men siden flertallet har talt; jeg var den eneste som skjønte noe, er det jeg som har galt, jeg bøyer meg for demokratiet jeg også :-) Så ontopic: Float virket supert det, men ikke nøyaktig slik jeg mente. Nå legger <div> nummer 2 seg på høyre siden, slik som jeg vil, men legger seg ikke på toppen og påsiden av <div> 1, den legger seg på siden og rett under div1. Så nå ligger den slik plassert som den skal vertikalt, men ikke horisontalt. Takk for svar Mrneeon og Matsemann :-) Keep en comin'! Et steg nærmere en løsning :-)

 

EDIT: Slik har det altså endret seg til:

post-77030-1174431347_thumb.png

Endret av Klekkus
Lenke til kommentar
Stian Jacobsen

Stian Jacobsen

Skrevet
Skrevet

Mest sannsynlig bruker du padding..

F.eks

Om "Wrapper" er 800 piksler bred

og kolonnen "høyre" har en bredde på 70% og "venstre" har 30%..

Om disse to kolonnene i tilegge bruker f.eks 10px padding.. så blir alt feil..

70% + 30% = 100%

100% = 800piksler

Men om du bruker padding blir det

100% = 840piksler

Lenke til kommentar
lilminime

lilminime

Skrevet
Skrevet

Ingen som klarer å hjelpe han? Jeg får ikke det til.. Hadde jo vært arti om han hadde fått det til, bra forklart forresten! Jeg skjønner godt hva du vil fram til, har prøvd meg på rundekanter selv før, men det ble så mye stress så gadd ikke :p

Lenke til kommentar
Stian Jacobsen

Stian Jacobsen

Skrevet
Skrevet

Herregud! Det er ikke så vanskelig... Ta å klipp ut og lim inn denne koden

 

Klikk for å se/fjerne innholdet nedenfor
<style type="text/css">
div#wrapper 
{
  width: 900px;
}

div#venstre 
{
  float: left;
  width: 30%;
}
div#hoyre 
{
 float: left;
 width: 70%;
}
</style>
<div id="wrapper">
<div id="venstre">
<ul>
 <li>Meny objekt
   <ul>
     <li>undermeny1</li>
     <li>undermeny2</li>
  </ul>
</li>
<li>Meny objekt</li>
<ul>
</div>
<div id="hoyre">
<h1 style="padding:0;margin:0;">Test</h1>
<p>Dette er en test.. test test test..</p>
</div>
</div>

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...