Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: kehyksiin pudostuvalikko

Strike [28.01.2011 19:44:38]

#

elikkä sain tehdyksi kehykset, joissa on valikot ja sain väkerrettyä pudostusvalikon joka toimii kun hiirellä menee linkin ylle valikko aukeaa. Mutta nyt tuli ongelma että valikko jää ohkaisen kehyksen sisään, ei että se tulisi näkyviin päälle. Onko olemassa jokin muotoilu sana tms. jolla sen saisi kehyksen viivan päälle.

Hennkka [28.01.2011 20:01:57]

#

Homma voisi olla helpompaa, jos näkisi koodit, mutta tässä mitä voin ilman lisätietoja sanoa:

/*Kehykselle*/
position: relative;
/*Valikoille*/
position: absolute;
/*Renderöidään kaiken päälle (jos tarvitsee)*/
z-index: 99;

Lebe80 [28.01.2011 20:39:02]

#

Kehys as in frame?

/me katsoo seinäkalenterinsa vuosilukua

Strike [28.01.2011 20:49:31]

#

valikot löytyvät kohdasta 12.15 osoitteesta:
http://www.elizabethcastro.com/html6ed/examples/#c24

omat kehykseni: valikko tulee tuohon Linkkirv kohtaa

<frameset rows="25%,6%, *%" style="background-color:#71b3a9"  >
     <frame src="Otsikko.htm" id="index_fram3" name="otsikkorivi" />
     <frame src="Linkkirv.htm" name="Linkkirivi"  style="background-color:#59a69a"  />

  <frameset cols="10%,20%,50%,10%">
    <frame name="Vasenlaita" img src="../../Kuvia/kaula2.jpg" />
    <frame src="Vasenreuna.htm" id="Frame1" name="Vasenreuna" style="background-color:#59a69a"/>
    <frame name="Paateksti" style="background-color:White" src="Etusivu.htm"/>
    <frame name="OikeaLaita" img src="../../Kuvia/kaula2.jpg" />
      </frameset>
</frameset>

Linkkirv sisältö:

<head>
    <title></title>
    <link rel="Stylesheet" type="text/css" media="screen" href="StyleSheet2.css" />
    <link rel="Stylesheet" type="text/css" media="screen" href="StyleSheet.css" />
   </head>

<body bgcolor="#71b3a9" >
      <div id="navbar">
             <ul>
            <li> <a href="Etusivu.htm"target="Paateksti" >Etusivu</a></li>
       </ul>

        <ul>
            <li><a href="Tietos.html"  >Tieto</a>

	        <ul >
	<li><a href="1.html" >Sivu1</a></li>
	<li><a href="2.html" >sivu2</a></li>
	<li><a href="3.html" >sivu3</a></li>
	</ul></li>

	</ul>
</li>

</div>

Mod. lisäsi kooditagit!

Hennkka [28.01.2011 21:35:15]

#

Jos käytössä on PHP(/jokin toinen palvelin skripti), kannattaa harkita sivujen sijoittelun toteuttamista kokonaan tyyleillä ja sitten ladata skriptillä osat samalle sivulle. Voi toki toteuttaa ilman skriptiä, mutta sivujen muuttaminen on hankalaa.

Lebe80 [28.01.2011 23:32:21]

#

Striken suoralinkki piti varmaankin olla kutakuinkin tämä:
http://www.elizabethcastro.com/html6ed/examples/#c12

Tosiaan, kokeile unohtaa framet, ne tulevat olemaan sivujen kompastuskivi jatkossakin. Hakukoneet, jotka nykypäivänä näyttelevät nettisivujen näkyvyydessä isoa osaa, tulevat todennäköisesti kompastumaan juurikin kehyksien vuoksi. Hyvin suurella todennäköisyydellä hakukoneiden kautta sivuillesi eksyneet käyttäjät näkevät juuri kehyksettömän version sivuistasi, jonka seurauksena he eivät "hienoa" dropdown-menuasi edes näe.

Itse en oikein edes keksi syitä käyttää (i)frameja. Ainoa syy edelleenkin taitaa olla ulkoisen sivuston näyttäminen halutussa kohdassa, esim. mainospalvelun banneri. Nämäkin tosin hyödyntävät jonkinsortin API:a, jonka seurauksena mainospaikat merkitään aivan jollain muulla tavalla, kuin itse iframella.

Merri [29.01.2011 15:53:20]

#

Tehdään hyppy kehyksistä pois mahdollisimman vaivattomaksi:

<!DOCTYPE html>
<html>
	<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
	<title>Etusivu</title>
	<style type="text/css">

html,body {
	margin: 0;
	padding: 0;
}

body {
	background: #71B3A9;
}

#otsikkorivi {

}

#linkkirivi {
	background: #DDD;
	color: #000;
	position: relative;
	width: 100%;
	z-index: 1;
}

#linkkirivi,#linkkirivi ul,#linkkirivi li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#linkkirivi:after {
	clear: both;
	content: '';
	display: block;
}

#linkkirivi li {
	display: inline;
	float: left;
}

#linkkirivi a {
	background: #EEE;
	color: #000;
	display: block;
	padding: 5px;
	text-decoration: none;
}

#linkkirivi li li {
	float: none;
}

#linkkirivi li ul {
	left: -20000em;
	position: absolute;
}

#linkkirivi li:hover ul {
	left: auto;
}

#sivu {
	background: url('../../Kuvia/kaula2.jpg');
	margin: 0 auto;
	overflow: hidden;
	padding: 0 10%;
	position: relative;
	width: 70%;
}

#sivu:after {
	clear: both;
	content: '';
	display: block;
}

#palkki {
	background: #59a69a;
	float: left;
	margin-bottom: -10000em;
	padding-bottom: 10000em;
	width: 28.5%;
}

#sisalto {
	background: #FFF;
	margin-left: 28.5%;
	min-height: 20em;
	padding: 5px;
}

	</style>

	<div id="otsikkorivi">
		<!-- Otsikko.htm sisältö tähän -->
		<h1>Striken sivu</h1>
	</div>

	<ul id="linkkirivi">
		<li><a href="index.html">Etusivu</a></li>
		<li>
			<a href="tieto.html">Tieto</a>
			<ul>
				<li><a href="1.html">Sivu 1</a></li>
				<li><a href="2.html">Sivu 2</a></li>
				<li><a href="3.html">Sivu 3</a></li>
			</ul>
		</li>
	</ul>

	<div id="sivu">
		<div id="palkki">
			<!-- Vasenreuna.htm -->
			<p>Palkki</p>
			<p>Palkki ...</p>
			<p>Palkki ... ..?</p>
		</div>
		<div id="sisalto">
			<!-- kunkin sivun sisältö tähän  -->
			<h2>Esimerkki</h2>
			<p>Tässä on jotain sisältöä, jotta asettelua olisi näkyvissä.</p>
		</div>
	</div>
</html>

Ei varmasti mene ihan kohdilleen suhteessa siihen missä tilanteessa kehyssivusi ovat, mutta värkkäsin tämän sillä tiedolla, mitä tuosta vähäisestä tarjotusta koodista saa irti.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta