Website lay-out centreren

Status
Niet open voor verdere reacties.

M4ch1n3H34d

Gebruiker
Lid geworden
23 feb 2010
Berichten
7
Goedemiddag Helpmij,


Op aanraden van Goeroeboeroe plaats ik een nieuw topic met mijn vraag.
Ik had eerst dit topic gelezen en hoopte dat ik mijn probleem daarmee opgelost zou hebben. Jammer genoeg niet.


Doel:

Creëren van een zakelijke website voor het bedrijf van een vriend van mij.
De website wordt in samenspraak ontworpen, maar het is mijn taak om het eindproduct af te leveren.
De website is bedoeld om nieuwe klanten te werven en bestaande klanten informatie en een mogelijkheid tot contact te bieden.

Lay-out

De lay out bestaat uit een achtergrond van zwerfkeien in specie geled. Op de voorgrond is het de bedoeling dat er een (sliced) afbeelding komt wat de voorpagina van de website wordt, het portaal met alle links. In de sliced afbeelding zitten rollover images die ervoor zorgen dat de website een bepaalde originaliteit/interactiviteit krijgt.

Voorbeelden van de bestanden zijn hier te vinden:
Achtergrond met portaal
Achtergrond
Portaal

Code:

HTML:

Code:
<!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>RCR Totaalbouw | Landscaping | Ontwerp</title>
<link rel="stylesheet" type="text/css" href="root.css" />
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>

CSS:

Code:
@charset "utf-8";
/* CSS Document */

body {background-image:url(img/bg.jpg);
	  background-repeat:no-repeat;
	  background-attachment:fixed;
}

/* Div styles */

[B]#wrapper{
background-image:url(img/front.png);
background-repeat:no-repeat;
position:relative;
width:1007px;
margin:0 auto;
background-color:white;
height:550px;
width:1024px;
}[/B]



/*Styles*/

.navigatie {border-style:none;
outline-style:none;
margin-top:50px;
margin-left:50px;
margin-right:50px;

}

Probleem:

De witte vlakken die nu zichtbaar zijn in het portaal horen "doorschijnend" te zijn en de stenen te laten zien. Het vak wat iets donkergrijs is en waar Legenda in staat, hoort ook doorschijnend te zijn naar de achtergrond.


Voetnoot: ik werk op het moment aan de site, dus het kan zijn dat de bestanden updaten terwijl je er naar kijkt.
 
Nieuwe ontdekking

Ik heb in de .css via de wrapper een afbeelding gekoppeld.

Kan ik dan wel rollover links gebruiken?
 
Hallo,

front.png is keurig doorschijnend, maar je hebt in div#wrapper ook 'n witte achtergrondkleur opgegeven. Waar de background-image dan niet staat of doorzichtig is, zie je de achtergrondkleur. Als je de achtergrondkleur weghaalt, is front.png keurig doorzichtig.

rollover-images (ik neem aan dat je bedoelt dat 't verandert als je er met de cursor overheen gaat, of er met de tab-toets aankomt) kan prima boven 'n afbeelding.
Als ik aan jouw html 'n <a> toevoeg:
HTML:
<div id="wrapper">
<a href="test.html"><span>test</span></a>
</div>
En dan deze css erbij stop:
Code:
a span {position: relative; left: -2000px;}
a {position: absolute; top: 270px; left: 600px; height: 25px; width: 120px; text-decoration: none;}
a:hover, a:active, a:focus {background: url(plaatje.jpg)}
dan staat bij mij deze link precies boven LEGENDA (niet helemaal, beetje ruw gedaan, maar ongeveer).
Normaal genomen is er niets te zien. Het woord 'test' staat links buiten het scherm geparkeerd. Spraakbrowsers, zoekmachines, enz. zien het dan wel (belangrijk!), maar 'n browser met css niet.
Bij hoveren over de onzichtbare link wordt de achtergrond-afbeelding getoond. Dat kan ook tekst zijn, maar dat is iets ingewikkelder. Door niet alleen a:hover, maar ook a:active en a:focus te gebruiken, kunnen ook mensen die geen muis kunnen/willen gebruiken met behulp van bijv. de tab-toets ook de link gebruiken.
(:focus zou genoeg moeten zijn, maar :active is ook nodig omdat Internet Explorer 6/7 dit verkeerd hebben geïmplementeerd).
 
Laatst bewerkt:
Doh!

Bedankt Goeroe,

Voel me wel een beetje bleu nu. Iets te letterlijk de .css code uit dat andere topic overgenomen. Weer wat geleerd, bedankt.

De rollovers zal ik iets beter uitleggen.
Dit wordt uiteindelijk de portaal van de website.

Sommige delen van die afbeeldingen wil ik op de volgende manier als rollover link actief maken.
Rollover link 1

Ik heb alle afbeeldingen al, maar ik krijg het javascript niet juist toegevoegd aan het geheel. De rollover doet het dan ineens niet meer. Hier komt het *.html bestand waar het javascript aan toegevoegd moet worden. Slices portaal html


Iemand suggesties?


Bedankt,

M4.
 
Goedemorgen Helpmij,

Ik ben nog niet verder gekomen met de rollover afbeeldingen.
Heeft iemand misschien alsnog een idee om mij verder te helpen?
Zelf vermoed ik een foutje in het javascript, maar ik heb te weinig kennis van Java om het zelf te vinden mocht dit zo zijn.


Groet,

Melvin
 
Je moet hiervoor een functie schrijven in JavaScript die tamelijk kort en makkelijk is.

Eeen voorbeeld hiervan is:
HTML:
<script type="text/javascript">
function img_rollover(img, imgnr) {
	switch (imgnr) {
		case 1:	document.img1.src = img; break;
	}
}
</script>

<a href="#" onmouseover="img_rollover('img2.jpg', 1);return false" onmouseout="img_rollover('img1.jpg', 1);return false">
	<img id="img1" src="img1.jpg" alt="" width="50" height="50" />
</a>

Zoals je kan zien is er een functie img_rollover die 2 variabelen heeft. De eerste geeft de naam van de afbeelding aan en de tweede geeft het nummer van de afbeelding aan. Doot dit nummer kan de juiste afbeelding gewijzigd worden.

Nu staat er in deze functie een switch-statement die kijkt naar imgnr om zo te bepalen welke afbeelding er gewijzigd moet worden.

In de link van de afbeelding staan twee functies, onmouseover en onmouseout. Wanneer iemand met zijn muis erover heen gaat wordt img2.jpg getoond en mocht hij weg gaan wordt gewoon de eerste afbeelding getoond.

Voor meer informatie moet je zoeken op Google naar:
  • OnMouseOver
  • OnMouseOut

groeten vreugde
 
Code:
<!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>
<script type="text/javascript">
<!--
function img_rollover(img, imgnr) {
    switch (imgnr) {
        case 1: document.img1.src = img; break;
    }
}
//-->
</script>
</head>

<body>

<a href="1/index.html" onmouseover="img/images/R/r.website.09.jpg', 1);return false" onmouseout="img_rollover('img/images/website_09.jpg', 1);return false">
    <img id="img1" src="img/images/website_09.jpg" alt="" width="" height="" /></a>
</body>
</html>


Ik krijg hem niet werkend. De afbeelding verwisselt niet. Zoek zelf ook even verder via Google.
 
Laatst bewerkt:
Wat betreft de rollover plaatjes, die heb ik werkend gekregen en wel met de volgende code:

[JS]
<script type="text/javascript">
<!--
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
//-->
</script>
[/JS]

HTML:
<a href="1/index.html" onMouseOver="roll_over('but1', 'images/R/r.website.09.jpg')" onMouseOut="roll_over('but1', 'images/website_09.jpg')">
<img src="images/website_09.jpg" width="*" height="*" name="but1" border="0"> </a>

Het probleem ligt nu anders. Ik heb het volgende *.html bestand met slices:

Code:
<!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>RCR Totaalbouw | Landscaping | Ontwerp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../root.css" />
<script type="text/javascript">
<!--
function roll_over(img_name, img_src)
   {
   document[img_name].src = img_src;
   }
//-->
</script>
</head>
<div align="center"><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (voorkant website copy.png) -->
<table id="Table_01" width="1025" height="551" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="18">
			<img src="images/website-png_01.png" width="1024" height="21" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td rowspan="9">
			<img src="images/website-png_02.png" width="264" height="332" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/website-png_03.jpg" width="36" height="81" alt=""></td>
		<td colspan="2">
			<img src="images/website-png_04.jpg" width="38" height="20" alt=""></td>
		<td colspan="5">
			<img src="images/website-png_05.png" width="320" height="20" alt=""></td>
		<td colspan="7" rowspan="3">
			<img src="images/website-png_06.jpg" width="255" height="109" alt=""></td>
		<td rowspan="20">
			<img src="images/website-png_07.png" width="111" height="529" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="3">
			<img src="images/website-png_08.png" width="179" height="170" alt=""></td>
		<td rowspan="17">
			<a href="1/index.html" onMouseOver="roll_over('but1', 'images/R/r.website.09.jpg')" onMouseOut="roll_over('but1', 'images/website_09.jpg')">
<img src="images/website_09.jpg" width="*" height="*" name="but1" border="0"> </a></td>
		<td colspan="2" rowspan="5">
			<img src="images/website-png_10.png" width="71" height="265" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="61" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="7">
			<img src="images/website-png_11.png" width="36" height="251" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="28" alt=""></td>
	</tr>
	<tr>
		<td colspan="7" rowspan="2">
			<img src="images/website-png_12.jpg" width="255" height="113" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="81" alt=""></td>
	</tr>
	<tr>
		<td rowspan="16">
			<img src="images/website-png_13.png" width="8" height="339" alt=""></td>
		<td colspan="2" rowspan="15">
			<img src="images/website-png_14.jpg" width="88" height="316" alt=""></td>
		<td rowspan="16">
			<img src="images/website-png_15.png" width="83" height="339" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="32" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/website-png_16.png" width="255" height="63" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="63" alt=""></td>
	</tr>
	<tr>
		<td rowspan="14">
			<img src="images/website-png_17.png" width="29" height="244" alt=""></td>
		<td colspan="2">
			<img src="images/website-png_18.png" width="89" height="31" alt=""></td>
		<td rowspan="9">
			<img src="images/website-png_19.png" width="8" height="135" alt=""></td>
		<td colspan="2" rowspan="6">
			<img src="images/website-png_20.png" width="39" height="84" alt=""></td>
		<td colspan="3" rowspan="4">
			<img src="images/website-png_21.png" width="161" height="57" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="31" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/website-png_22.png" width="89" height="10" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="images/website-png_23.png" width="89" height="36" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="7">
			<img src="images/website-png_24.jpg" width="282" height="114" alt=""></td>
		<td rowspan="11">
			<img src="images/website-png_25.png" width="18" height="197" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td rowspan="10">
			<img src="images/website-png_26.png" width="11" height="187" alt=""></td>
		<td rowspan="7">
			<img src="images/website-png_27.jpg" width="27" height="111" alt=""></td>
		<td rowspan="10">
			<img src="images/website-png_28.png" width="123" height="187" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/website-png_29.png" width="89" height="11" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="images/website-png_30.png" width="39" height="51" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/website-png_31.png" width="89" height="31" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="31" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/website-png_32.png" width="89" height="16" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img src="images/website-png_33.jpg" width="124" height="33" alt=""></td>
		<td rowspan="5">
			<img src="images/website-png_34.png" width="12" height="109" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="4">
			<img src="images/website-png_35.png" width="282" height="83" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="3">
			<img src="images/website-png_36.png" width="124" height="76" alt=""></td>
		<td rowspan="3">
			<img src="images/website-png_37.png" width="27" height="76" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="38" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/website-png_38.png" width="108" height="38" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="15" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/website-png_39.png" width="88" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="264" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="30" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="58" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="83" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="108" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="29" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="42" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="47" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="27" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="27" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="123" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="111" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</div>
</html>

Dit bestand bevat de code die er in de browser zo uit moet komen te zien
Wat je echter op die pagina ziet is de *.jpg afbeelding niet ge-sliced.

Dus hoe:

- Laad ik het *.html bestand met slices in een pagina.
- Centreer ik dat bestand verticaal en horizontaal voor gebruik bij verschillende resoluties.
- Houd ik het bestand bruikbaar voor rollover images.

Ik ben zelf ook op zoek, ben nu aan het spelen met iframes om te zien of dit een oplossing biedt.

-M4.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan