2 spørsmål om DIV

[Rabbid]

Hei, har noen spørsmål som angår div's

 

1:

 

Har to diver inni en annen div:

 

<div>
    <div>Hei</div>
     <div>Hallo</div>

</div>

 

Hvordan får man det slik at de to divene med tekstene Hei og Hallo blir på siden av hverandre? Hos meg blir det en linje pr. div.

 

 

2:

 

Har en div som jeg vil skal være 600px bred uansett hva som er i den..

 

Finnes det noe som kan brekke tekster med linjeskift og gjøre bilder mindre?

 

Vil ikke at diven skal bli bredere.

 

-------------------------------------------------

 

Håper på svar.

 

Mvh: XaHc

[-morten]

Du kan bruke CSS.

 

<style>
div div {
 width: 200px;
 float: left;
}
</style>

 

Da skal de bli liggende ved siden av hverandre.

 

 

Hvis du setter fast width, så vil også teksten brekkes slik at den ikke blir større. Bilder vil ikke bli forminsket. Da må du til med noe JavaScript i så fall.

[Rabbid]

Du kan bruke CSS.

Ja, regnet jo med det, ingen vits å bruke DIV uten CSS

<style>
div div {
  width: 200px;
  float: left;
}
</style>

 

Da skal de bli liggende ved siden av hverandre.

 

 

Hvis du setter fast width, så vil også teksten brekkes slik at den ikke blir større. Bilder vil ikke bli forminsket. Da må du til med noe JavaScript i så fall.

6382202[/snapback]

 

Fant ut at under FF kan man bruke max-width for å forminske bilder, men det hjelper ikke under IE.

 

God ide.. Takker , skal prøve dette

Endret 25. juni 2006 av -XaHc-

[endrebjo]

Du kan bruke CSS.

 

<style>
div div {
  width: 200px;
  float: left;
}
</style>

 

Da skal de bli liggende ved siden av hverandre.

6382202[/snapback]

Følgende metode er enklere og mer korrekt:

div div {
 display: inline;
}

 

(Eidt: med mindre du skal ha to bokser ved siden av hverandre som midt på denne siden)

Endret 26. juni 2006 av endrebjorsvik

[Arve Systad]

2:

 

Har en div som jeg vil skal være 600px bred uansett hva som er i den..

 

Finnes det noe som kan brekke tekster med linjeskift og gjøre bilder mindre?

 

Vil ikke at diven skal bli bredere.

 

div {
width: 600px;
}

 

Tekst innanfor dette div-elementet vil automatisk bli brutt ved "enden". Bilete må du endre enten med eit script eller på forhånd lage "thumbnails" for at folk ikkje skal laste eit stort bilete men kun få sjå eit lite eit.

[Gjest Slettet+142]

** legger til et spørsmål, eg... **

 

ka e EGENTLIG meningen med <div> ?

[Arve Systad]

** legger til et spørsmål, eg... **

 

ka e EGENTLIG meningen med <div> ?

6388734[/snapback]

 

Større fleksibilitet til å bygge en grafisk layout. DIV-elementet har inga semantisk betydning.

[Gjest Slettet+142]

hmm... jaja.... eg synes DIV har alt for mage "tilleggs-funksjoner" for at eg kan overbemanne det...

 

sånn som, har sett "id", brukes... kordan funker det?

Endret 26. juni 2006 av Slettet+142

[Arve Systad]

Grunnleggande CSS - her har eg enkelt prøvd å forklare korleis basisfunksjonane til CSS fungerer. Bruk av ID er ein av dei.

[Gjest Slettet+142]

Grunnleggande CSS - her har eg enkelt prøvd å forklare korleis basisfunksjonane til CSS fungerer. Bruk av ID er ein av dei.

6389546[/snapback]

oki...

 

takk for hjelp hertil d... skal se på siden seinere...

 

--har litt masse å gjøre... ^^

[-morten]

Følgende metode er enklere og mer korrekt:

div div {
 display: inline;
}

6387914[/snapback]

Mer korrekt? Det er da to forskjellige ting...

Hvis du skal ha et inline element, kan du like godt bruke <span>, som er inline som default. Men du kan ikke bruke width og height på et inline element.

Endret 26. juni 2006 av -morten

[Rabbid]

Følgende metode er enklere og mer korrekt:

div div {
 display: inline;
}

6387914[/snapback]

Mer korrekt? Det er da to forskjellige ting...

Hvis du skal ha et inline element, kan du like godt bruke <span>, som er inline som default. Men du kan ikke bruke width og height på et inline element.

6390348[/snapback]

 

 

Prøvde <span> først, men den ville ikke holde seg helt til høyre for siden.

 

float ville ikke virke, diven'e ble i siden av hverandre men den med float hang litt under den andre

[rønning]

Kan du si oss hva som skal være inne i divene så kanskje det blir litt lettere for oss å hjelpe deg..

[Rabbid]

Kan du si oss hva som skal være inne i divene så kanskje det blir litt lettere for oss å hjelpe deg..

6393366[/snapback]

 

I den til høyre er det tekst og i den til venstre er det et bilde (bruker tekst i ett tilfelle)

 

Vedlegget viser hvordan det er nå, det er fra PM-delen til et blogg-system jeg holder på å utvikle

 

Vedlegget bruker <span>, vil gjerne kunne bruke div, fordi jeg vil ha pilen flyttet helt til høyre.

Endret 27. juni 2006 av -XaHc-

[endrebjo]

Følgende metode er enklere og mer korrekt:

div div {
 display: inline;
}

6387914[/snapback]

Mer korrekt? Det er da to forskjellige ting...

Hvis du skal ha et inline element, kan du like godt bruke <span>, som er inline som default. Men du kan ikke bruke width og height på et inline element.

6390348[/snapback]

Det kommer ikke klart frem hva han skal bruke div'ene til, og i spørsmål 1 står det heller ingenting om verken height eller width, kun at de to divene skal stå ved siden av hverandre.

Du så kanskje ikke Edit'en min som tok opp det du snakker om?

 

Kan du si oss hva som skal være inne i divene så kanskje det blir litt lettere for oss å hjelpe deg..

6393366[/snapback]

I den til høyre er det tekst og i den til venstre er det et bilde (bruker tekst i ett tilfelle)

 

Vedlegget viser hvordan det er nå, det er fra PM-delen til et blogg-system jeg holder på å utvikle

6393564[/snapback]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title><dl>-test</title>
 <style type="text/css">
 	* {
   padding: 0;
   margin: 0;
 	}
 	dl {
   border: solid 1px #00f;
 	}
 	dt {
   width: 100px;
   clear: left;
   float: left;
   border: solid 1px #0f0;
   border-width: 1px 0 1px 0;
   margin: 0 0 4px 0;
 	}
 	dd {
   width: 300px;
   clear: right;
   float: left;
   border: solid 1px #f00;
   border-width: 1px 0 1px 0;
 	}
 </style>
</head>

<body>
 <h1><dl>-test</h1>
 <dl>
 	<dt>Foo</dt><dd>Heia heia heia heia!</dd>
 	<dt>Bar</dt><dd>Bæææ!</dd>
 	<dt>Foobar</dt><dd>Møøø</dd>
 </dl>
</body>
</html>

[rønning]

Kanskje dette kan funke:

 

<div class="melding">

<span>Dette er tittelen</span><img src="bilde" />

</div>

 

css:

 

.melding span {

display: inline;

float: left;

}

 

.melding img {

display: inline;

float: left;

}

 

PS: koden er ikke testet ut

[Rabbid]

Fikk til det med To diver ved siden av hverandre, brukte en kombinasjon av float, display, left, top og position.

 

Har fortsatt problemer med tekst som renner ut av div.. Har satt en bestemt bredde på diven, men teksten flyter utenfor uansett...

 

Vil bredde på div også funke for teksten i divene som er inne i denne diven?

[glad]

men er det mulig og få to divs til og stå ved sidene av værandre utenom og bruke display: inline og float. hålder meg til table så mye enklere

[endrebjo]

men er det mulig og få to divs til og stå ved sidene av værandre utenom og bruke display: inline og float. hålder meg til table så mye enklere

6415108[/snapback]

Dette er enkleste metoden, men her skulle man brukt <dl> istedet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title><div>-test</title>
 <style type="text/css">
 	body {
   width: 50%;
 	}
 	div.wrap {
   width: 100%;
   clear: both;
 	}
 	div.for {
   width: 20%;
   float: left;
   border: solid 1px #f00;
 	}
 	div.etter {
   width: 30%;
   float: left;
   border: solid 1px #00f;
 	}
 </style>
</head>

<body>
 <div class="wrap">
 	<div class="for">Navn</div><div class="etter">Ola Nordmann</div>
 </div>
 <div class="wrap">
 	<div class="for">Adresse</div><div class="etter">Veien 12</div>
 </div>
 <div class="wrap">
 	<div class="for">Kjønn</div><div class="etter">Tvekjønnet</div>
 </div>
 <div class="wrap">
 	<div class="for">Interesser</div><div class="etter">bla...bla...babethread...</div>
 </div>
</body>
</html>

Den fungerer i alle nettlesere.

Endret 30. juni 2006 av endrebjorsvik