Går det att flytta divs i koden, men att den ligger kvar på samma ställe

8 svar · 640 visningar · startad av Nova 17 apr. 2006

NovaMedlem sedan feb. 2005216 inlägg

Frågan17 apr. 2006 08:56#1

Min sida är i stora drag uppbyggd så här
div wrapper
div top
div left
div content
div right
div botten

Alltså en sida med topp, vänster, mitten, höger och botten innehåll.

#wrapper
{
       width:100%;
	 max-width:850px;
}
#siteName{
		width:100%;
	 height: 70px;
	  
}
/* Vänsterspalt */
#headlines{
   float:left; 
    	width: 18%;
}
/* Mitten */
#content{
  float: left;
  width: 57%;
}
/*hogerspalt*/
#navBar
{
   float:right;
	width:18%;	
}
/************* #Langst ned p sidan ***************/

#siteInfo{
	clear: both;
	border: 1px solid #cccccc;
	font-size: 75%;
	color: #334d55;
	padding: 10px 10px 10px 15px;
	background-color: #eeeeee;
}

Går det och hur i sånna fall, flytta om i koden så att vänsterspalt kommer efter content i själva koden med hamnar rätt när man tittar på sidan?

I koden skulle jag vilja ha så här
div wrapper
div top
div content
div left
div right
div botten

CatZMedlem sedan jan. 20022 440 inlägg

17 apr. 2006 09:01#2

Går kanske med absolut positionering eftersom du tvingar elementen att vara där du anger? Enligt mitt tycke ska man dock koda så att allting är i koden var det motsvarar på sidan. Det blir enklare då. ;) Hoppas jag inte gjort bort mig nu :e

OkkidoMedlem sedan maj 20007 492 inlägg

17 apr. 2006 10:06#3

Jag tycker CatZ gör bort sig, för jag antar att content är viktigare för användaren än left?

Nu är jag för bakis för att orka kolla koden, men kan du inte bara sätta float:right; på left?

CatZMedlem sedan jan. 20022 440 inlägg

17 apr. 2006 15:44#4

Okkido skrev:

Jag tycker CatZ gör bort sig, för jag antar att content är viktigare för användaren än left?

Nu är jag för bakis för att orka kolla koden, men kan du inte bara sätta float:right; på left?

Vad menar du egentligen?? Måste vara riktigt bakis! Du talar i tungor... :P

OkkidoMedlem sedan maj 20007 492 inlägg

17 apr. 2006 15:58#5

Okej.

1. innehållet i content är viktigare än innehållet i left och borde därför ligga före i html-filen.
2. Här vet jag inte riktigt hur jag tänkte.

jarvkloMedlem sedan juli 20013 378 inlägg

17 apr. 2006 20:44#6

Hmm..

Vara hur det vill med åsikter hit eller dit om vad man "kan", "får" eller "bör" göra :e

Såhär kan du göra Nova (om du kan acceptera en wrapper till villsäga ;) )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <title>Ett av jarvklos exempel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div {border: 1px dotted silver;}
#wrapper { width:100%;  max-width:850px; }
#top {height: 70px;}
#contentwrapper {float: left; width: 80%}
#content {float: right; width: 71% }  /* omräknat - cs 71% av 80%-bredden motsvarar 57% av 100%-bredd */
#left {float:left; width: 26%;} /* omräknat pss */
#right {float:right; width:18%; }	
#botten { clear: both;	background-color: #eeeeee; }
</style>
</head>

<body>

<div id="wrapper">
  <div id="top">Top</div>
  <div id="contentwrapper">
    <div id="content">Content</div>
    <div id="left">Left</div>
  </div>
  <div id="right">Right</div>
  <div id="botten">Botten</div>
</div>

</body>
</html>

Det fina i kråksången blir att du med den koden också enkelt kan byta plats på vänster och högerkolumnerna med några enkla CSS-ändringar (utan absolutpositioneringar):

<style type="text/css">
div {border: 1px dotted silver;}
#wrapper { width:100%;  max-width:850px; }
#top {height: 70px;}
#contentwrapper {float: right; width: 80%}
#content {float: left; width: 71% }  /* omräknat - cs 71% av 80%-bredden motsvarar 57% av 100%-bredd */
#left {float:right; width: 26%;} /* omräknat pss */
#right {float:left; width:18%; }	
#botten { clear: both;	background-color: #eeeeee; }
</style>

... och att det inte spelar någon roll om "left" eller "content" är den container som innehåller själva innehållet (dvs exemplet med extrawrappern täcker både CatZ och kids invändningar/åsikter i frågan beroende på vilket innehåll man vill lägga var i koden) :

<style type="text/css">
div {border: 1px dotted silver;}
#wrapper { width:100%;  max-width:850px; }
#top {height: 70px;}
#contentwrapper {float: left; width: 80%}
#left {float: right; width: 71% }  /* omräknat - cs 71% av 80%-bredden motsvarar 57% av 100%-bredd */
#content {float:left; width: 26%;} /* omräknat pss */
#right {float:right; width:18%; }	
#botten { clear: both;	background-color: #eeeeee; }
</style>

Fast det är klart - sedan följer väl debatten huruvida man "får" lägga in extra wrappers sådär eller ej, men det är en *helt* annan diskussion det (typ - det eviga kriget ;) ) - och vad jag tycker framgår väl av exemplen ;)

Lycka till Nova! :birp

CatZMedlem sedan jan. 20022 440 inlägg

18 apr. 2006 03:03#7

Snygg lösning Jarvklo! ;) Ska inte säga mer i ämnet :birp

tantenMedlem sedan nov. 20051 596 inlägg

18 apr. 2006 06:40#8

Ur tillgänglighetssynpunkt så finns det förmodligen ganska många som behöver tänka som Nova nu och många som kommer ha hjälp av Jarvklos exempel. Många ideér kan man också få på zengardens över 900 exempel där html-koden är den samma på alla sidorna och bara css-filen som skiljer dem åt. http://www.csszengarden.com/?cssfile=/193/193.css&page=0
Det är ju viktigt att innehållet på sidan utan css ska komma i rätt ordning för den som inte kan se.
Om menyerna ska finnas längst ner eller högst upp kan jag tycka beror helt på om man har skippa-länkar som gör att man kan hoppa till innehållet eller inte. Kommer rubrikerna i rätt ordning? h1 till h6. Har paragraferna en följdordning som låter vettig när den läses upp? Innehållet i tabeller gjorda för design kan komma i vädigt konstig ordning när den läses upp.
I stället för att göra html-sidan först, är det nog många av oss som börjar från andra hållet. Man har en önskad design och sedan försöker man peta in innehållet i den, vilket kanske inte alltid fungerar så bra.
Jag gissar att det finns många, som precis som Nova, kommer att vilja flytta saker i html-koden utan att utseendet på sidan ändras.
Kan nog behövas många extrawrappers framöver om man vill tänka tillgänglighet. :bire

NovaMedlem sedan feb. 2005216 inlägg

18 apr. 2006 06:56#9

Fungerar hur bra som helst jarvklo, nu ska jag bara pillra till så utskrifterna blir bra.

Min lilla lekstuga finns här http://www.lyckasmedmat.nu/recept_test.asp
Där ligger utkastet.