Gå til innhold

DIV i stedet for TABLE

HDSoftware

Anbefalte innlegg

HDSoftware

HDSoftware

Skrevet
Skrevet

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?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Gjest

Gjest

Skrevet
Skrevet (endret)

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 av Gjest
Lenke til kommentar
HDSoftware

HDSoftware

Skrevet
  • Forfatter
Skrevet (endret)

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 av HDSoftware
Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

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 ;)

Lenke til kommentar
HDSoftware

HDSoftware

Skrevet
  • Forfatter
Skrevet

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

Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

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?

Lenke til kommentar
HDSoftware

HDSoftware

Skrevet
  • Forfatter
Skrevet

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å

Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet (endret) 

<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 av Gjest
Lenke til kommentar
HDSoftware

HDSoftware

Skrevet
  • Forfatter
Skrevet (endret)

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.

post-109573-1244186426_thumb.png

post-109573-1244186433_thumb.png

Endret av HDSoftware
Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

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? :)

Lenke til kommentar
HDSoftware

HDSoftware

Skrevet
  • Forfatter
Skrevet

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

Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

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>

:)

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
×
×
  • Opprett ny...