webForumDet fria alternativet
Logga in / Bli medlem

Centrera alla håll, fast det finns en hake...

HTML & CSS

10 svar · 580 visningar · startad av bassebhu

bassebhus avatarbassebhuMedlem sedan nov. 20016 480 inlägg
Frågan#1

Jag vill ha en bakgrundsfärg på halva vänster skärmsida och en annan på höger sida. 50/50.

Eftersom det ska gå att ändra storleken på webbläsarfönstret så kan jag inte ha fasta storlekar på bilder, divar eller tabeller. I den vänstra diven ska det ligga en bild centrerad till mitten vertikalt och till höger horisontalt. I den högra diven ska det ligga en bild centrerad till mitten vertikalt och till vänster horisontalt.

Jag har fått till det rätt hyfsat, MEN det blir vitt utrymme underst och lite olika resultat när man ändrar storlek på fönstret.

Hur kan jag göra det bättre?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Hej</title>

<style>
body {
	margin: 0px 0px 0px 0px;
	padding: 0px;
}
#left {
	width: 50%;
	height: 100%;
	float: left;
	background: #e4c0ad;
}
#right {
	width: 50%;
	height: 100%;
	float: right;
	background: #cbab9a;
}
#leftContent {
	margin: 50% auto 50% auto;
	height: 98px;
	text-align: right;
}
#rightContent {
	margin: 50% auto 50% auto;
	height: 98px;
	text-align: left;
}
</style>

</head>

<body>

<div id="left">
  <div id="leftContent"><img src="bild_left.gif" width="141" height="98" border="0" /></div>
</div>
<div id="right">
  <div id="rightContent"><img src="bild_right.gif" width="139" height="98" border="0" /></div>
</div>
</body>
</html>

Först trodde jag att det var nåt efter sista diven men det är ju tomt. Är det jag vill uppnå omöjligt?

Tackar för svar!

bassebhus avatarbassebhuMedlem sedan nov. 20016 480 inlägg
#2

Någon som har idéer? Kanske bara det är på mac som detta vita dyker fram längst ner. Det är som att 100% höjd-divarna inte ändras när man ändrar storlek på webbläsarfönstret.

bassebhus avatarbassebhuMedlem sedan nov. 20016 480 inlägg
#3

Någon som har förslag idag då? :)

bassebhus avatarbassebhuMedlem sedan nov. 20016 480 inlägg
#4

Idag då? :)

Som jag har förstått så är det knepigt (omöjligt?) att centrera vertikalt med CSS och valign="middle" valideras ju inte?

Men min största fundering just nu är om det inte går att sätta 100% vertikalt på en div? Jag vill nämligen ha två färger bredvid varandra som bakgrund och måste då ha två divar som kan ändra storlek men som hela tiden täcker hela ytan. Med koden ovan så får jag massa ofärgat en bit ner på sidan.

Tackar för förslag...

webbebbaMedlem sedan juni 200573 inlägg
#5

Du får bygga utifrån en tvåfärgad bakgrundsbild

http://www.alistapart.com/articles/fauxcolumns/

doggelitoMedlem sedan juni 20003 076 inlägg
#6

tycker jag känner igen problemet med att divvarna inte blir 100% hög, utan tar slut vid scrollen.
undrar om inte det har att göra med vilken doctype du använder.
det finns nog mängder med trådar här på wF om 100% höga divvar. :)

jarvkloMedlem sedan juli 20013 378 inlägg
#7

Om 100% höjd - Du kör "standards mode" och då behöver du köra med height:100% på html och body via CSS... (se t.ex. http://www.webforum.nu/showthread.php?s=&postid=650163#post650163 )

Rotade lite med din CSS...
Lade bl.a.in standardttrixet med kombination float:left och margin-left. Vertikal centrering gör jag med med absolutpositionering, top:50% och negativtoppm arginal som motsvarar "halva höjden" - också det ett "standardtrix" :)

html, body {
	margin: 0;	padding: 0;	height:100%;
}
#left {
	float: left;
	width: 50%;
	height: 100%;
	background: #e4c0ad;
	margin:0;padding:0;
}
#right {
	margin:0 0 0 50%; padding:0;
	height: 100%;
	background: #cbab9a;
}
#leftContent {
	position:absolute;
	top:50%; right:50%;
	margin:-49px 0 0 0;
	height: 98px;
	text-align: right;
}
#rightContent {
	position:absolute;
	top:50%; left:50%;
	margin:-49px 0 0 0;
	height: 98px;
	text-align: left;
}

Det kan säkert göras elegantare och förklaras bättre...
Fråga igen om det är någon detalj som behöver mer förklaring... :bire

bassebhus avatarbassebhuMedlem sedan nov. 20016 480 inlägg
#8

Tack för att du tog dig tid! Det funkade bättre...

I Safari & OmniWeb var det alldeles lysande. Precis som jag ville ha det.
I Internet Explorer för mac blev det ganska lysande. Blev en lång vertikal scroll nedåt och centrum låg en scrollandes bit ner på sidan, men annars schysst.
I FireFox blev det precis rätt layout, men där funkade inte mina rolloverscript, men det är ett annat problem.
I Opera funkade bakgrunden mycket fint, men där kom leftContent bakom rightContent.
I IE för PC så funkade det bättre än förut då divarna lade sig under varandra, men det är en glipa mellan left & right.

Vad jag ska dra för slutsats vet jag inte. Det kanske går att trimma koden ännu mer. Annars så kör jag som det är eller byter ut alltihop till en enda fast bild eller nåt.

Återigen tack jarvklo! Jag var och nosade efter nåt liknande, men kom inte på att man kunde sätta % även på margin. Absoluta mått måste jag läsa på lite mer om också.

bassebhus avatarbassebhuMedlem sedan nov. 20016 480 inlägg
#9

Jag byggde om det så att jag har en hel bakgrund och sedan två små färgade
boxar med fasta mått i stället för 50/50 som bakgrund.
Jag använde det där toptip-scriptet för dead centre som alla snackar om.
Det funkar bra i alla läsare utom IE och Opera till mac. I IE så hamnar det
center horisontalt men halva huvuddiven är utanför toppen av fönstret.
I Opera så kom fortfarande leftContent bakom rightContent av nån anledning.
Är det något man kan göra nåt åt tror ni?
Har bara kollat i IE på pc (via VPC) och det får räcka.
Det kan ju inte finnas nån läsare som är känsligare tycker man :P

Min kod:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>X</title>

<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />

<style media="screen" type="text/css">
html, body {
	margin: 0;
	padding: 0;
	background: url(../images/bg.gif) repeat;
}
#horizon {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block;
}
#content {
	margin-left: -369px;
	position: absolute;
	top: -169px;
	left: 50%;
	width: 738px;
	height: 338px;
	visibility: visible;
	padding: 0;
}
#left {
	width: 369px;
	height: 338px;
	float: left;
	background: url(../images/BGL.gif) no-repeat;
	margin: 0;
	padding: 0;
}
#right {
	width: 369px;
	height: 338px;
	background: url(../images/BGR.gif) no-repeat;
	float: left;
	margin: 0;
	padding: 0;
}
#leftContent {
	position: absolute;
	top: 50%;
	right: 50%;
	margin:-49px 0 0 0;
	height: 98px;
	text-align: right;
}
#rightContent {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -49px 0 0 0;
	height: 98px;
	text-align: left;
}
</style>

</head>
	
<body onload="MM_preloadImages('images/Lh.gif','images/Rh.gif')">
<div id="horizon">
	<div id="content">
		<div id="left">
			<div id="leftContent">
				<a href="#" title="LEFT" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('left','','images/Lh.gif',1)" onfocus="this.blur();"><img src="images/L.gif" width="142" height="98" alt="LEFT" name="left" border="0" /></a>
			</div>
		</div>
		<div id="right">
			<div id="rightContent">
				<a href="#" title="RIGHT" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('right','','images/Rh.gif',1)" onfocus="this.blur();"><img src="images/R.gif" width="142" height="98" alt="RIGHT" name="right" border="0" /></a>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Om det är någon som orkar hjälpa till så vore det schysst. Har lyckats att lösa det helt med div nu iaf :D
Den validerar godkänt också!

Förutom de skumma saker jag nämt ovan så fungerar inte rollovern i mozilla/netscape. Är det något man kan fixa på nåt enkelt sätt?
Även andra förslag och alternativ som gör sidan bättre tas tacksamt emot!

Tackar alla som har tagit sig tid!

bassebhus avatarbassebhuMedlem sedan nov. 20016 480 inlägg
#10

Den verkade inte gilla script-taggar, men det är ett vanligt rollover-script från dreamweaver som ligger mellan head-taggarna:

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
zcorpanMedlem sedan dec. 20042 245 inlägg
#11
<script type="text/javascript">
//<![CDATA[

//]]>
</script>
265 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
127 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
131 ms — ändringar (db)