Skrive tekst over et bilde, men bildet forskyver seg (haster: innlevering)

26. november 2009

Jeg holder på å lage en portfolio med et flash gallery. For at "about me" siden ikke skal forandre seg for mye i forhold til de sidene med flash gallery. Så har jeg lagt inn et nøyaktig bilde som tilsvarer størelsen til flash gallery. Bildet er lagt som bakgrunn i en div tag.. Dette ser veldig bra ut helt til jeg begynner å skrive inni div*en. Da forskyver hele bildet seg endel lengre ned. Noen som har noen anelse hvorfor dette skjer??

Her har jeg et bilde som er satt sammen av 2 bilder hvor den på høyre er før jeg begynner å skrive, mens den til venstre er etter jeg har skrevet.

Her er koden for siden

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

<head>

<title>Contact</title>

</head>

<tr>

<li><a class="MenuBarItemSubmenu" href="Mainpage.html">Portfolio</a>

<ul>

<li><a href="portfolio wedding gallery.html">Weading</a></li>

<li><a href="Portfolio people gallery.html">People</a></li>

<li><a href="portfolio landscape gallery.html">Landscape</a></li>

</ul>

</li>

</ul>

</div></td>

// Popup window code

function newPopup(url) {

popupWindow = window.open(

url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=n

,location=no,directories=no,status=yes')

}

</script>

<a href="java script:newPopup('http://www.mydamnphotoblog.com');">MyDamnPhotoBlog</a></td>

<td width="97" class="menytekst"> <a href="about me.html">About Me</a></td>

<td width="367" class="menytekst"><a href="contact.html">Contact</a></td>

</tr>

</table>

<tr>

<p>oknlokn</p>

</div></div>

</td>

</tr>

<tr>

</tr>

</table></td>

</tr>

</table>

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>

</body>

</html>

Her er css

.body {

text-align: center;

backround color: #000

}

#table1 {

z-index: 1;

}

#meny {

text-align: left;

vertical-align: middle;

}

div#bakgrunnsbilde {

background-image: url(bilder/Bakgrunn.jpg);

background-repeat: no-repeat;

height: 410px;

width: 800px;

z-index: 30;

overflow: visible;

position: inherit;

}

.Hovedtekst {

font-family: "Brush Script MT";

color: #F00;

}

.Hovedtekst {

font-family: "Comic Sans MS", cursive;

color: #999;

top: 30px;

right: 400px;

}

.menytekst {

color: #1D1D1D;

font-family: "Brush Script MT";

font-size: 20px;

}

A:link {text-decoration: none; color: #1D1D1D

}

A:visited {text-decoration: none; color: #1D1D1D}

A:active {text-decoration: none}

A:hover{

text-decoration: none;

color: #FFF

}

#headerbackround {

text-align: left;

}

</style>

#navigaton {

font-family: Verdana, Geneva, sans-serif;

font-size: 24px;

}

#Flash {

overflow: hidden;

z-index: -30;

}

#flash2 {

overflow: hidden;

z-index: -30;

}

p {

color: #666666;

}

#meny3 {

z-index: 10;

overflow: visible;

visibility: visible;

}

h2 {

font-family: "Brush Script MT";

font-size: 20px;

color: #FFF;

}

body {

background-color: #000;

}

#flash3 {

overflow: hidden;

z-index: -30;

}

Azidops · 26. november 2009

1. Alltid oppgi hvilken nettleser du bruker når en feil dukker opp.

2. Du har ikke stylet div#bakgrunnstekst

3. Hvorfor har du diver inni en tabell?? Ville forsøkt å puttet dem utenfor tabellen først og se om det samme skjedde da. Tabeller skal brukes til tabulære data, ikke som rammeverk. For det første er det vanskelig å lese koden. For det andre kan tabellens marginer, paddings og rammer påvirke tagene som ligger inni.

<Div> skal brukes til å bygge opp rammeverket. Tenk deg at diver er firkantete byggeklosser du kan style i henhold til hverandre og plasseres rundt om på siden med css. Hadde jeg vært din HTML-lærer hadde jeg trekt deg for slik bruk av tabeller.

4. Hvorfor skriver du ikke direkte i div#bakgrunnsbilde? Er det behov for en ekstra div der?

5. Du lukker en tabell som ikke er åpen

</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

Araho · 26. november 2009

Så vidt jeg vet, fungerer z-index best med position: absolute;

Prøv det, og se hva som skjer

Logg inn

Skrive tekst over et bilde, men bildet forskyver seg (haster: innlevering)

Anbefalte innlegg

Gjest Slettet+6132

Lenke til kommentar

Videoannonse

Azidops

Lenke til kommentar

Araho

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

3500 ansatte i NRK - er det blitt for mye? 1 2 3 4

Elbil-tråden 1 2 3 4 1019

Hvem er aktive 0 medlemmer