DIV i stedet for TABLE

HDSoftware · 2. juni 2009

En tidligere tråd annbefalte DIV i stedet for Table og dette ønsket jeg å teste ut i et prosjekt jeg holder på med, men får ikke dette helt til.

Det jeg prøver å få til er å legge en bakgrunn i en "parent" div som skal bestemme bakgrunnen til de DIV'ene som er definert inne den omkringliggende DIV'en

<div style="background-color:white">
 <div ID="MenyOmrådet" style="float:left">
<kode for meny>
 </div>
 <div ID="InfoOmrådet style="float:left">
<Viser artiklene>
 </div>
 <div ID="Nyheter">
<Viser nyheter>
 </div>
</div>

Resultatet er at kun området som faktisk får innhold får hvit bakgrunn og ikke området som den ytterste DIV'en dekker.

Hvordan får jeg til at hele den ytterste DIV'en får en hvit bakgrunn?

3. juni 2009

Bruk CSS!

Prøv helst å ungå: æøå i CSS-filen.

Kode for CSS filen:

body {
height: 100%;
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffc;
margin: 1em;
padding: 0;

}

.ramme {
background-color: white;
margin-left: auto;
margin-right: auto;
}

.meny {
	float: left;
}

.meny2 {
text-align: right;
}

.nyheter {
width: 500px;
margin: 0px auto;
text-align:left;
padding: 15px;
border: 1px dashed #333;
background-color: #eee;

}

For HTML filen.

<HTML>
<HEAD>
<TITLE>Test side!</TITLE>
<link rel="stylesheet" href="design.css" type="text/css" />
</HEAD>
<BODY>
<div class="ramme">
 <div class="meny">
  kode for meny
</div>
 <div class="meny2">
 Viser artiklene
 </div>

 <div class="nyheter">
<p>Viser nyheter</p>
 </div>
</div>
<BODY>
</HTML>

Slik måte du kan sette opp en side med <div class> og css fil som bestemmer alt

Endret 3. juni 2009 av Gjest

HDSoftware · 3. juni 2009

Ok. Testet dette, men får liksom ikek helt dette til. Har laget et lite eksempel som viser hvordan jeg gjør det med table og hvordan jeg trodde det skulle gjøres med DIV.

For enkelheten skyld så har jeg lagt styles direkte på taggene i stedet for å bruke en CSS fil.

Fint om du kan rettlede meg litt:

<HTML>
<HEAD>
<TITLE>Test side!</TITLE>
</HEAD>
<BODY>
<table style="width:900px; background-color:red">
<tr>
	<td style="width:100px; background-color:gray; vertical-align:top">
		meny området
		<br/>
		Alternativ 1
		<br/>
		Alternativ 2
	</td>
	<td style="width:600px; vertical-align:top; background-color:yellow">
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
	</td>
	<td style="width:200px; background-color:cyan; vertical-align:top">
		Nyheter: Det viser seg at TABLE taggs støtter styles som bare det.  
		Nyheter: Det viser seg at TABLE taggs støtter styles som bare det.
		Nyheter: Det viser seg at TABLE taggs støtter styles som bare det.
		Nyheter: Det viser seg at TABLE taggs støtter styles som bare det.
		Nyheter: Det viser seg at TABLE taggs støtter styles som bare det.
	</td>
</tr>
</table>
<br/><br/>
<div style="width 900px; background-color:red; margin-left:auto">

<div style="width:100px; background-color:gray; vertical-align:top;	  float:left">
	kode for meny
	<br/>
	Alternativ 1
	<br/>
	Alternativ 2
</div>

<div style="width:600px; vertical-align:top; background-color:yellow;	float:left">
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
</div>

<div style="width:200px; background-color:cyan; vertical-align:top">
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
</div>

</div>
<BODY>
</HTML>

Setter pris på all hjelp her

Endret 3. juni 2009 av HDSoftware

3. juni 2009

Var det ekstremt vanskelig å ta midt som eksempel? Din ser ut jo ikke ut og jeg orker ikke å bruke tid på dette nå. Får jeg tid til overser skal jeg se på det

HDSoftware · 4. juni 2009

Vel, siden ditt eksempel ikke løser problemet så tillot jeg meg å spørre ytterligere etter informasjon om temaet. Beklager hvis dette faller under dine grenser for urimelig forum posting, men vi som er 40+ er ikke så raske i læremuskelen som dere som fortsatt går på skolen.

Det at jeg la inn stylene inn i html koden burde jo strengt tatt ikke ha noe å si for eksemplet og hvis du kopierer koden jeg postet inn i en HTML editor så ville du sett at dette slett ikke er ustrukturert i det hele tatt. Men har du ikke tid til å hjelpe så er det helt greit. Sikkert andre her på forumet som sitter med kunnskap nok til å rettlede oss andre som prøver å finne ut av ting

4. juni 2009

Har sett på det nå

Og ser du har problemer med "Dette er området der man viser artiklene" ?

Og at det den røde firkanten ikke passer helt?

Har jeg rett?

HDSoftware · 4. juni 2009

Det stemmer, men det er mer:

1. Det grå området får rett bredde, men fyller ikek helt ned

2. Det gyle området får rett bredde, men fyller ikke helt ned

3. Det blå området er helt perfekt

4. Den omkringliggende røde boksen stemmer i høyden, men går helt ut på siden av arket

Jeg går jo ut ifra at den røde boksen strekker seg så langt som den største av de som er innenfor og derav får den røde boksen samme høyde som den blå

HDSoftware · 4. juni 2009

Rettelse: Det var selvsagt jeg som hadde glemt et : mellom WIDTH og 900px i den ytterste røde DIVen som gjorde at den ble for bred. Men de boksene som er på innsiden er fortsatt med feil høyde. Jeg vil jo at de skal ha den samme høyden

4. juni 2009

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<TITLE>Test side!</TITLE>
<STYLE type="text/css">
body {
height: auto;
background-color: red;
}
</STYLE>

</HEAD>
<BODY>

<div style="width: 190px; background-color: gray; float: left; height: 100%;">
	kode for meny
	<br/>
	Alternativ 1
	<br/>
	Alternativ 2
</div>
<div style="width: 190px; background-color: cyan; float: right; height: 100%;">
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
	  <br/>
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
	  <br/>
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
	  <br/>
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
	  <br/>
	Nyheter: Det viser seg at DIV taggs støtter styles som bare det.
</div>
<div style="width:600px; margin: 0px auto; background-color:yellow; height: 100%;">
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
	  <br/>		   
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
	  <br/>
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
	  <br/>
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
	  <br/>
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
	  <br/>
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
	  <br/>
		Dette er området der man viser artiklene.  Dette er området der man viser artiklene.  
</div>

<BODY>
</HTML>

Slik tenker du på??

Endret 4. juni 2009 av Gjest

HDSoftware · 4. juni 2009

Hehe, Den ligner jo ikke på mitt TABLE eksempel i det hele tatt ;-)

4. juni 2009

Hei!

Se siste posten jeg hadde som ikke lignet det du ville. Har endret koden

Endret 4. juni 2009 av Gjest

HDSoftware · 5. juni 2009

Hmmm. Fortsatt er jo dette noe helt annet. Jeg ber kansje om det umulige her. Får vel holde meg til TABLE alikevel

5. juni 2009

Du ber ikke om det umulige

Slik jeg ser det så er den 100% lik TABLE versjonen?

HDSoftware · 5. juni 2009

Mener du det? Jeg ser ingen likheter i det hele tatt med unntak av fargene jeg. Kan det være noe med nettleseren min?

Vedlagt har jeg to bilder. Bilde 1 er skjermdump av ditt eksempel og bilde 2 er skjermdump av min TABLE.

Endret 5. juni 2009 av HDSoftware

HDSoftware · 5. juni 2009

Og her er det nærmeste jeg kommer med å bruke DIV

5. juni 2009

Så du ønsker da at siden skal dekke en liten del av skjermen og ikke auto height så den dekker hele skjermen uansett størrelse du bruker?

HDSoftware · 5. juni 2009

Vel, egentlig - ja. Men det er mere en det også. En DIV oppfører seg liksom ikke helt slik jeg tenker meg det. Se på følgende eksempel:

<div style="background-color:green">
<div style="width:50%; float:left; background-color:red">
	Div 1, Linje 1
	<br/>
	Div 1, Linje 2
</div>
<div>
	Div 2, linje 1
	<br/>
	Div 2, linje 2
</div>
</div>
<br/>
<div style="background-color:green">
<div style="width:50%; float:left; background-color:red">
	Div 1, Linje 1
</div>
<div>
	Div 2, linje 1
	<br/>
	Div 2, linje 2
</div>
</div>

Mitt spørsmål her blir, hvorfor havner "Div 2, Linje 2" i den nederste gruppen under den første kolonnen?

Hvorfor kan ikke en DIV holde seg innenfor de rammene den har fått, ved hjelp av en annen DIV.

Mye som tyder på at jeg har litt studie foran meg når det gjelder DIV

5. juni 2009

Stygg måte å gjøre koden på men fungerer:

<div style="background-color:green">
<div style="width:50%; float:left; background-color:red">
	Div 1, Linje 1
	<br/>
	Div 1, Linje 2
</div>
<div>
	Div 2, linje 1
	<br/>
	Div 2, linje 2
</div>
</div>
<br/>
<div style="background-color:green">
<div style="width:50%; float:left; background-color:red">
	Div 1, Linje 1
	<br/>
	Div 1, Linje 1
</div>
<div style="width:50%; float:right; background-color:green">
	Div 2, linje 1
	<br/>
	Div 2, linje 2
</div>
</div>

HDSoftware · 5. juni 2009

Nei, det fungerer heller ikke. Ta vekk en av linjene i den siste DIV'en så ser du at det grønne området plutselig bare er på en linje.

Tror faktisk ikke dette lar seg gjøpre med DIV alikevel jeg

5. juni 2009

Du bruker internett explorer.

Last ned og installer: firefox

Da skal det nok fungere

DIV i stedet for TABLE

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Gjest

Lenke til kommentar

Lenke til kommentar

Gjest

Lenke til kommentar

Lenke til kommentar

Gjest

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Gjest

Lenke til kommentar

Lenke til kommentar

Gjest

Lenke til kommentar

Lenke til kommentar

Gjest

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Gjest

Lenke til kommentar

Lenke til kommentar

Gjest

Lenke til kommentar

Lenke til kommentar

Gjest

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer