html - centrering mellem to billeder - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #13733 @ 10.05.08 08:10

Hej.

Jeg er igang med en hjemmeside hvor jeg gerne vil centrerer mellem to billeder så hele siden står i midten af de to billeder håber i forstår

Kode

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
background-color:#404040;
}
#wrapper {
width:100%;
min-height:600px;
border:#000000 solid;
}

#header1 {
background-image:url(outer_line.jpg);
height:100px;
width:15%;
float:left
}
#header2 {
background-color:#000099;
height:120px;
width:70%;
float:left
}
#header3 {
background-image:url(outer_line.jpg);
height:100px;
width:15%;
float:left
}
#nav {
width:70%;

}
</style>

</head>

<body>
<div id="wrapper">
    <div id="header1"></div>
    <div id="header2"></div>
    <div id="header3"></div>
    <div id="nav">a</div>
</div>
</body>
</html>

16 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 10.05.08 18:31

4.283

Så skide svært kan det heller ikke være.

Kode

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>

	<style type="text/css">
		body {
			background-color:#404040;
		}

		#wrapper {
			width:100%;
			min-height:600px;
			border: 1px solid #ccc;
		}

		#header1 {
			background: #ddd;
			height:100px;
			width:15%;
			float:left
		}

		#header2 {
			background: #fdd;
			height:120px;
			width:69.9%;
			float:left;
		}

		#header3 {
			background: #ddd;
			height:100px;
			width:15%;
			float: right;
		}

		#nav {

		}
	</style>

	</head>

	<body>
		<div id="wrapper">
		    <div id="header1">
		    </div>
		    <div id="header2">
		    	<div id="nav">a</div>
		    </div>
		    <div id="header3"></div>
		</div>
	</body>
</html>

Indlæg senest redigeret d. 10.05.2008 18:32 af Bruger #10216

Bruger #5620 @ 10.05.08 11:35

1.500

dit indhold skal skrives inde i header2 div'en

<div id="header1"></div>
<div id="header2"><div id="nav">a</div></div>
<div id="header3"></div>

hvis det ikke var dit problem må du jo smide et link så man kan se det

Bruger #10216 @ 10.05.08 10:32

4.283

...og problemet er?

Bruger #13733 @ 10.05.08 10:40

...og problemet er?

Jamen når jeg går ned på næste linje rykker den sig helt ud i venstre side istedet for i midten sammen med det blå

Bruger #13733 @ 10.05.08 12:50

har også et andet problem når jeg formindsker browseren hopper menuerne med ned på den næste linje

Kode

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
background-color:#404040;
}
#wrapper {
width:100%;
min-height:600px;
border:#000000 solid;
}

#header1 {
background-image:url(outer_line.jpg);
height:100px;
width:15%;
float:left
}
#header2 {
min-height:600px;
width:70%;
float:left
}
#header3 {
background-image:url(outer_line.jpg);
height:100px;
width:15%;
float:left
}
#banner {
width:100%;
height:120px;
background-color:#FF0000
}
#nav {
height:45px;

width:100%;
background-image:url(Nav_bar.jpg)
}
#nav ul {
list-style:none;
margin:0px;
padding:0px;
}
#nav li {
float:left;
padding-left:46px;
}
</style>

<script type="text/javascript">
<!--
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_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_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];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Nav_Home_Over.jpg','Nav_About_Over.jpg','Nav_Download_Over.jpg','Nav_Wars_Over.jpg')">
<div id="wrapper">
<div id="header1"></div>
    <div id="header2">
      <div id="banner">a</div>
            <div id="nav">
            <ul>
            	<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','Nav_Home_Over.jpg',1)"><img src="Nav_home.jpg" name="Image6" width="114" height="45" border="0" id="Image6" /></a></li>
                <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','Nav_About_Over.jpg',1)"><img src="Nav_About.jpg" name="Image5" width="114" height="45" border="0" id="Image5" /></a></li>
                <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','Nav_Download_Over.jpg',1)"><img src="Nav_Download.jpg" name="Image7" width="114" height="45" border="0" id="Image7" /></a></li>
                <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','Nav_Wars_Over.jpg',1)"><img src="Nav_Wars.jpg" name="Image8" width="114" height="45" border="0" id="Image8" /></a></li>
                <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','Nav_Team_Over.jpg',0)"><img src="Nav_Team.jpg" name="Image9" width="114" height="45" border="0" id="Image9" /></a></li>
            </ul>
      </div>
  </div>
<div id="header3"></div>
    
</div>
</body>
</html>

Bruger #10216 @ 10.05.08 13:36

4.283

Det er et typisk problem ved en del browsere. Nogle runder op og andre runder ned, når de selv skal regne med procentvise fordelinger.

Det du kan gøre er at lave en eller to elementers procentvise heltal om til et decimaltal og trække 0,1% fra.

dvs. width: 70% - 0,1% = 69.9% Så skulle det gerne være løst. Husk på at det er engelsk tegnsætning der gælder.

Ellers burde du kunne hakke dig frem til det ved flg.:

Kode

<div style="width: 100%;position:relative;">
    <div style="position:relative; left: 50%; width: 70%;">
    	<div style="position: absolute; left: -50%; width: 100%;">
    		<div style="background:#ccc">
    			asdasdasdasd
    		</div>
	    </div>
    </div>
    <div style="float: left; width: 15%;">
		<div style="background:#fdd;">
			asdasdasdasd
		</div>
    </div>
    <div style="float: right; width: 15%;">
		<div style="background:#ccc;">
			asdasdasdasd
		</div>
	</div>
</div>

Indlæg senest redigeret d. 10.05.2008 13:37 af Bruger #10216

Bruger #13733 @ 10.05.08 14:56

Det er et typisk problem ved en del browsere. Nogle runder op og andre runder ned, når de selv skal regne med procentvise fordelinger.

Det du kan gøre er at lave en eller to elementers procentvise heltal om til et decimaltal og trække 0,1% fra.

dvs. width: 70% - 0,1% = 69.9% Så skulle det gerne være løst. Husk på at det er engelsk tegnsætning der gælder.

Ellers burde du kunne hakke dig frem til det ved flg.:
Kode
<div style="width: 100%;position:relative;">
    <div style="position:relative; left: 50%; width: 70%;">
    	<div style="position: absolute; left: -50%; width: 100%;">
    		<div style="background:#ccc">
    			asdasdasdasd
    		</div>
	    </div>
    </div>
    <div style="float: left; width: 15%;">
		<div style="background:#fdd;">
			asdasdasdasd
		</div>
    </div>
    <div style="float: right; width: 15%;">
		<div style="background:#ccc;">
			asdasdasdasd
		</div>
	</div>
</div>

forstår det ikke helt. Skal jeg i header2 trække 0.1% fra de 70% har nemlig prøvet det men virker ikke.

Bruger #10216 @ 10.05.08 16:18

4.283

Du skal trække .1% fra på et eller flere elementer og bruge den nye bredde du får.

Ellers kan du bruge mit eksempel. Det giver også ganske god basis for et website optimeret til søgemaskinerne.

Bruger #13733 @ 10.05.08 16:42

Undskyld jeg er lidt tungnem. Men fatter stadig ikke hvad jeg skal. Har prøvet at trække de 0,1% fra men der sker ikke noget. Men er heller ikke sikker på om jeg gør det rigtigt, og syns at din kode du viser ser ret avanceret ud. Kan ikke rigtigt gennemskue hvad det gør og hvordan jeg skal bruge det.

Bruger #10216 @ 10.05.08 16:50

4.283

Der er intet avanceret i den kode jeg har skrevet, det eneste der er ved den, er at jeg har skrevet CSS direkte i HTML.

Anyway...

Så får du det skåret ud i pap. Har trukket de kontroversielle .1% fra i bredde på #header1. Hvis dette ikke er nok, kan du selv gøre det på resten.

Kode

#header1 {
    background-image:url(outer_line.jpg);
    height:100px;
    width: 14.9%;
    float:left;
}

<< < 1 2 > >>

centrering mellem to billeder

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler