webForumDet fria alternativet
Logga in

Design problem med Safari.

26 svar · 3 739 visningar · startad av Lindström

LindströmMedlem sedan jan. 2003821 inlägg
#1

Jag tog och tänkte piffa till designen på hemsidan. Och efter allt var klart så tog jag och kollade hur det hela såg ut i olika webbläsare. Och med Chrome, Internet Explorer & Firefox ( både för Pc och Mac ) så var allt frid och fröjd. Men och så när jag nu kom till till Safari, i Mac miljö, så såg det väl inte lika lovande ut. Så jag tänkte höra om det är någon som kan se var själva problematiken kan ligga någonstanns.

Ska väl kanske säga att det handlar en om DIV som jag har lagt en grafisk bild i som jag få till att den ska ligga där den ska.

#apDiv3 {
position:absolute;
left:50%;
margin: 0 0 0 -395px;
top:575px;
width:auto;
height:auto;
z-index:1;
visibility: visible;
}

Och skulle det nu vara så att det är själva CSS koden som är boven bakom det hela, så skulle jag tacksamt ta imot all hjälp jag kan få för att få det hela att bli rätt och riktigt. Även för dom som sitter med och i Safari, i Mac miljö.

Man vill ju gärna att designen ska se likadan ut vad man än har för webbläsare.
Jag bifogar en bild över hur det är tänkt att det ska se ut i och med Safari.

http://livohelvete.se/index_a.php

design_fel_safari.jpg
Danne VMedlem sedan aug. 20068 090 inlägg
#2

Eftersom det är en absolut positionerad div, så bör du använda top, bottom, left och right för att placera den rätt. Du verkar använda en margin för det. Dessutom verkar det lite bakvänt med en "absolut" (dvs "exakt") positionering angiven i procent som ju är allt annat är exakt.

Dessutom förstår jag inte vitsen med höjd och bredd som "auto". En div breder ju ut sig på höjd och bredd så mycket den kan per automatik. Men en absolut positionerad div brukar ha exakta mått.

LindströmMedlem sedan jan. 2003821 inlägg
#3

Danne V skrev:

Eftersom det är en absolut positionerad div, så bör du använda top, bottom, left och right för att placera den rätt. Du verkar använda en margin för det. Dessutom verkar det lite bakvänt med en "absolut" (dvs "exakt") positionering angiven i procent som ju är allt annat är exakt.

Dessutom förstår jag inte vitsen med höjd och bredd som "auto". En div breder ju ut sig på höjd och bredd så mycket den kan per automatik. Behöver du ange det öht?

Jag försöker testa mig fram helt enkelt. Därför som det ser ut som det gör i dagsläget.
Har två DIVar sen tidigare, och dom sitter där dom ska. Oberoende på vad man sitter med för webbläsare. Så det skulle ju vara roligt om jag fick till det här med.

Danne VMedlem sedan aug. 20068 090 inlägg
#4

Lindström skrev:

Jag försöker testa mig fram helt enkelt. Därför som det ser ut som det gör i dagsläget.
Har två DIVar sen tidigare, och dom sitter där dom ska. Oberoende på vad man sitter med för webbläsare. Så det skulle ju vara roligt om jag fick till det här med.

Förresten, en absolut positionerad div MÅSTE ligga i ett element som antingen är absolut eller relativt positionerad själv.

Och, eftersom du testar: din bråkande div kan mycket väl påverkas av experiment du gjort med andra element. Så för att var på den säkra sidan bör du visa oss ALL kod, både html och css.

LindströmMedlem sedan jan. 2003821 inlägg
#5

Danne V skrev:

Så för att var på den säkra sidan bör du visa oss ALL kod, både html och css.

För att göra det så smidigt som möjligt, gå över till den aktuella sidan och kolla in källkoden där. Tror det är smidigast.
För källkoden är rätt så lång, eller stor.

http://livohelvete.se/index_a.php

EDIT:
Jag tar och lägger upp den här ändå. Det är lika bra. Behöver få all hjälp jag kan få.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>J&ouml;rgen Lindstr&ouml;m - Alla har vi v&aring;ra hj&auml;rnsp&ouml;ken</title>
<script type="text/javascript">
    var GB_ROOT_DIR = "http://livohelvete.se/greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="keywords" content="Alla har vi våra hjärnspöken,grafik,bild,form,design,teckningar,parapsykologi,hjärnspöken,spöken">
<META NAME="description" content="Jörgen Lindström ~ Alla har vi våra hjärnspöken">
<META NAME="robots" content="index, nofollow">
<META NAME="robots" CONTENT="NOSNIPPET">
<META NAME="distribution" content="GLOBAL">
<META NAME="Author" CONTENT="info@livohelvete.se">

<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.stil2 {font-size: medium}
.stil3 {font-size: small}
#apDiv2 {
	position:absolute;
	left:50%;                       /* Centrera sidans vänsterkant till mitten av sidan */
        margin: 0 0 0 -450px;    /* 770/2 = 385, du kommer förskjuta vänsterkanten motsvarande halva sidans bredd så den hamnar rätt */
	top:320px;
	width:auto;
	height:auto;
	z-index:1;
	visibility: visible;
}
#apDiv1 {
	position:absolute;
	left:50%;                       
	margin: 0 0 0 385px;    
	top:276px;
	width:auto;
	height:auto;
	z-index:1;
	visibility: visible;
}
#apDiv3 {
position:absolute;
	left:50%;                       
        margin: 0 0 0 -395px;    
	top:575px;
	width:auto;
	height:auto;
	z-index:1;
	visibility: visible;
}
-->
</style>
<body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="apDiv2">
  <div align="right"><img src="Meny/tittut_bild3.gif"></div>
</div>
<div id="apDiv1">
  <div align="left"><img src="Meny/tittut_bild2.gif" width="40" height="143"></div>
</div>
<div id="apDiv3"><img src="Meny/blogg_linje.gif" width="600" height="239" border="0"></div>
<table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td><img src="00_0.jpg" width="770" height="60"></td>
  </tr>
  <tr> 
    <td><img src="xxx_animation.gif" width="770" height="196"></td>
  </tr>
  <tr> 
    <td height="38" background="00_2_gif.gif"><table width="770" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="28">&nbsp;</td>
          <td width="476"><a href="personlighet.php" target="_self"><img src="Meny/personlighet.gif" width="93" height="23" border="0"></a><a href="galleri.php" target="_self"><img src="Meny/galleri.gif" width="59" height="23" border="0"></a><a href="gastbok.php" target="_self"><img src="Meny/gastbok.gif" width="62" height="23" border="0"></a><img src="Meny/star.gif" width="24" height="23"><a href="index.php" target="_self"><img src="Meny/hem.gif" width="41" height="23" border="0"></a></td>
          <td width="67">&nbsp;</td>
          <td width="181">&nbsp;</td>
          <td width="18">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td><img src="00_3_bak_gif.gif" width="770" height="22"></td>
  </tr>
  <tr> 
    <td background="00_4_bak_gif.gif"><table width="770" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="28">&nbsp;</td>
          <td width="536" id="id" valign="top"><p><img src="Meny/index.gif" width="200" height="199" align="left"><span class="stil2">
              <img src="Meny/hejoval_.gif" width="224" height="42"></span><br>
              <br>
              F&aring;r &ouml;nska nya som gamla bes&ouml;kare v&auml;lkommen 
              efter en mindre tids fr&aring;nvaro p&aring; n&auml;tet.<br>
              <br>
              Med ny design och lite mer matnyttigt inneh&aring;ll s&aring; kanske 
              man kan ta igen det man har f&ouml;rlorat. Vet inte i vilken ordning 
              som jag nu har gjort om designen p&aring; den. Men det h&auml;r 
              k&auml;nns som att det skulle vara den slutgiltiga versionen. <br>
              <br>
              Men det har jag ox&aring; sagt om den f&ouml;rra som jag gjorde.<br>
              <br>
              <br>
              Ja, om det nu inte var n&aring;got annat s&aring; f&aring;r jag 
              &ouml;nska er v&auml;lkommen.<br>
              Nya som gamla bes&ouml;kare.<br>
              <br>
              <br>
              <br>
              <br>
              J&ouml;rgen Lindstr&ouml;m<br>
              <!-- #BeginDate format:fcSw1m -->Tisdag, 22 November, 2011  8:41<!-- #EndDate -->
              <br>
              <br>
              <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flivohelvete.se&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:40px;" allowTransparency="true"></iframe>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <div style="width:530px; margin-bottom:30px;">

<div><strong>Om det nu finns en gud - Teckningar</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;"><P align=center><IMG border=0 alt="" align=none src="http://www.livohelvete.se/cutenews/data/upimages/omdet_.jpg"></P></div>

<div style="float: right;"><!-- no full story-->  <a href="/index_a.php?subaction=showcomments&amp;id=1321906673&amp;archive=&amp;start_from=&amp;ucat=6&amp;">0 Kommentarer</a></div>

<div><em>Postad den 21 Nov 2011 av <a href="mailto:info@livohelvete.se">Jörgen</a></em></div>

</div><div style="width:530px; margin-bottom:30px;">

<div><strong>Bekymmer - Teckningar</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;"><P align=center><IMG border=0 alt="" align=none src="http://www.livohelvete.se/cutenews/data/upimages/bekymmer_.gif"></P></div>

<div style="float: right;"><!-- no full story-->  <a href="/index_a.php?subaction=showcomments&amp;id=1321290998&amp;archive=&amp;start_from=&amp;ucat=6&amp;">0 Kommentarer</a></div>

<div><em>Postad den 14 Nov 2011 av <a href="mailto:info@livohelvete.se">Jörgen</a></em></div>

</div><div style="width:530px; margin-bottom:30px;">

<div><strong>Nyfiken - Teckningar</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;"><P align=center><IMG border=0 alt="" align=none src="http://www.livohelvete.se/cutenews/data/upimages/nyfiken_.gif"></P></div>

<div style="float: right;"><!-- no full story-->  <a href="/index_a.php?subaction=showcomments&amp;id=1321186504&amp;archive=&amp;start_from=&amp;ucat=6&amp;">0 Kommentarer</a></div>

<div><em>Postad den 13 Nov 2011 av <a href="mailto:info@livohelvete.se">Jörgen</a></em></div>

</div><div style="width:530px; margin-bottom:30px;">

<div><strong>Utställning  - Sandvikens Bibliotek Halloween 2011</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;"><P align=left><IMG border=0 alt="" align=none src="http://www.livohelvete.se/cutenews/data/upimages/uts_slut.jpg"><BR>Så var det över för den här gången. Jag måste få tacka alla som har varit in och kollat på utställningen. Jätte roligt att ni tog er tid och visat intresse för den. </P> <P align=left>Är alltid lika roligt med uppskattning på det man gör. Har fått mycket förslag på hur man ska göra den bättre till nästa gång. Och har verkligen fått mersmak utav det här. Så det här inte sista gången.</P> <P align=left>Så tack ytterligare en gång för visat intresse. Det gör verkligen mycket.</P></div>

<div style="float: right;"><!-- no full story-->  <a href="/index_a.php?subaction=showcomments&amp;id=1320590255&amp;archive=&amp;start_from=&amp;ucat=10&amp;">0 Kommentarer</a></div>

<div><em>Postad den 06 Nov 2011 av <a href="mailto:info@livohelvete.se">Jörgen</a></em></div>

</div><div style="width:530px; margin-bottom:30px;">

<div><strong>Grannar - Teckningar</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;"><P align=center><IMG border=0 alt="" align=none src="http://www.livohelvete.se/cutenews/data/upimages/mummel.gif"></P></div>

<div style="float: right;"><!-- no full story-->  <a href="/index_a.php?subaction=showcomments&amp;id=1320359733&amp;archive=&amp;start_from=&amp;ucat=6&amp;">0 Kommentarer</a></div>

<div><em>Postad den 03 Nov 2011 av <a href="mailto:info@livohelvete.se">Jörgen</a></em></div>

</div><p align="center"><< Tidigare  <strong>1</strong> <a href="/index_a.php?start_from=5&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">2</a> <a href="/index_a.php?start_from=10&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">3</a> <a href="/index_a.php?start_from=15&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">4</a> <a href="/index_a.php?start_from=20&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">5</a> <a href="/index_a.php?start_from=25&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">6</a> <a href="/index_a.php?start_from=30&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">7</a> <a href="/index_a.php?start_from=35&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">8</a> <a href="/index_a.php?start_from=40&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">9</a> <a href="/index_a.php?start_from=45&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">10</a> <a href="/index_a.php?start_from=50&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">11</a>  <a href="/index_a.php?start_from=5&amp;ucat=&amp;archive=&amp;subaction=&amp;id=&amp;">Nästa >></a></p><div style="margin-top:15px;width:100%;text-align:center;font:9px Verdana;">Content Management Powered by <a href="http://cutephp.com/" title="CuteNews - PHP News Management System">CuteNews</a></div><!-- News Powered by CuteNews: http://cutephp.com/ -->              <br>
            </p>
            <div align="center">
            <p><img src="Meny/linje_starrate.gif" width="455" height="58"><br>
                <div class="hreview"><form method="post" action="/index_a.php"><h3 class="item"><span class="fn"></span></h3><div><span  class="rating"><img src="./img/35star.gif?x=8914464ecc98a7d9a3f3.79341679" alt="3.5 stars" /> Betyg: 3.5</span> från <span class="reviewcount"> 54 röst</span>.</div><div><label for="rate5_1"><input type="radio" value="5" name="rating_1[]" id="rate5_1" />Toppen</label><label for="rate4_1"><input type="radio" value="4" name="rating_1[]" id="rate4_1" />Bra jobbat</label><label for="rate3_1"><input type="radio" value="3" name="rating_1[]" id="rate3_1" />Helt okej</label><label for="rate2_1"><input type="radio" value="2" name="rating_1[]" id="rate2_1" />Njaa</label><label for="rate1_1"><input type="radio" value="1" name="rating_1[]" id="rate1_1" />Värdelöst  </label><input type="hidden" name="rs_id" value="1" /><input type="submit" name="rate1" value="Rösta" /></div></form></div>
                </p>
            <p><br>
            </p>
          </div></td>
          <td width="19">&nbsp;</td>
          <td width="169" id="id" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr> 
                <td><table width="147" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr> 
                      <td> 
                        <p>
                          
<table border=0 cellpadding=1 bordercolor="000000" cellspacing="0">
  <tr> 
    <td colspan="7" bordercolor="000000"> 
      <div align="center"><font color="#000000"><b><font face="Tahoma, Verdana" size="1"> 
        November 2011        </font></b></font></div>
    </td>
  </tr>
    <td bordercolor="ffffff"> 
    <div align="center"><font color="#000000"><b><font face="Tahoma, Verdana" size="1"> 
      Sön      </font></b></font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font color="#000000"><b><font face="Tahoma, Verdana" size="1"> 
      Mån      </font></b></font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font color="#000000"><b><font face="Tahoma, Verdana" size="1"> 
      Tis      </font></b></font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font color="#000000"><b><font face="Tahoma, Verdana" size="1"> 
      Ons      </font></b></font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font color="#000000"><b><font face="Tahoma, Verdana" size="1"> 
      Tor      </font></b></font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font color="#000000"><b><font face="Tahoma, Verdana" size="1"> 
      Fre      </font></b></font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font color="#000000"><b><font face="Tahoma, Verdana" size="1"> 
      Lör      </font></b></font></div>
  </td>
  </tr><tr><td bordercolor=ffffff><br></td><td bordercolor=ffffff><br></td>  <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      1      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      2      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      3      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      4      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      5      </font></div>
  </td>
  </tr><tr>  <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      6      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      7      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      8      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      9      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      10      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      11      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      12      </font></div>
  </td>
  </tr><tr>  <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      13      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      14      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      15      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      16      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      17      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      18      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      19      </font></div>
  </td>
  </tr><tr>  <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      20      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      21      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      22      </font></div>
  </td>
    <td bgcolor="#FFCC99" bordercolor="#FFCC99"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      23      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      24      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      25      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      26      </font></div>
  </td>
  </tr><tr>  <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      27      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      28      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      29      </font></div>
  </td>
    <td bordercolor="ffffff"> 
    <div align="center"><font face="Tahoma, Verdana" size="1"> 
      30      </font></div>
  </td>
  <td bordercolor=ffffff><br></td><td bordercolor=ffffff><br></td><td bordercolor=ffffff><br></td>  </tr>
</table>
<br>
                          <a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=ceb875a44e5ba2ed@apps.messenger.live.com&mkt=sv-SE" title="Jörgen Lindström - Alla har vi våra hjärnspöken" rel="gb_page_center[500, 500]"scrolling="no"><img src="Meny/chat.gif" alt="" width="140" height="118" border="0"></a><br>
                          <br>
                          <img src="Meny/blog_a.gif" width="135" height="40"><br>
                          <br>
                          <a href="?show_cat=5">Hemsida &amp; funktion</a><br /><a href="?show_cat=6">Teckningar</a><br /><a href="?show_cat=7">Äldre design</a><br /><a href="?show_cat=8">Ur hårddisken</a><br /><a href="?show_cat=10">Utställningar</a><br /><br>
                        <img src="Meny/blog_avs.gif" width="135" height="25"><br>
                          <br>
                          <img src="Meny/pa_gang.gif" width="147" height="21"><br>
                          <p><strong>2011.10.17<br />
  </strong>La till en ny kategori i blogg menyn<strong><br />
    </strong>. . . . . . . . . . . . . . . . . . .<strong><br />
    2011.09.09<br />
    </strong>Fixat RSS feed tj&auml;nsten.<strong><br />
  </strong>. . . . . . . . . . . . . . . . . . .<strong><br />
  2011.08.21<br />
      </strong>Firar 7 &aring;r p&aring; n&auml;tet.<br />
. . . . . . . . . . . . . . . . . . .<br />
  <strong>2011.07.25<br />
  </strong>Grejade meny f&ouml;r blog kategorier.<strong><br />
    </strong>. . . . . . . . . . . . . . . . . . . <strong><br />
    2011.07.24<br />
    </strong>Fixade till grafiken lite.<strong><br />
    </strong>. . . . . . . . . . . . . . . . . . . <strong><br />
    2011.07.13<br />
    </strong>Kan nu l&auml;mna kommen-<br />
    tarer p&aring; &quot;Teckning &amp; Layout&quot;.<br />
  <br>
</p>
</p>
</p>
                          <a href="http://www.livohelvete.se/cutenews/rss.php" target="_blank"><img src="Meny/fss_feed.gif" width="137" height="71" border="0"></a><br>
                        </p>
                      </td>
                    </tr>
                    <tr> 
                      <td><div align="left">
                        <p><br>
                          </p>
                        </div>
                        </td>
                    </tr>
                  </table></td>
              </tr>
              <tr> 
                <td>
<div align="center">
                    <br>
                    <table width="140" border="0" cellpadding="0" cellspacing="0">
                      <tr> 
                        <td width="140" height="133" background="Meny/besokare.gif" class=smal><div align="center">I 
                            dag : 
                            <!-- Start WEBSTAT (dagens besökare) kod -->
                            <script src="http://stats.webstat.se/statShow.asp?id=29316&what=day"></script>
                            <!-- Slut WEBSTAT kod -->
                            <br>
                            I veckan: 
                            <!-- Start WEBSTAT (veckans besökare) kod -->
                            <script src="http://stats.webstat.se/statShow.asp?id=29316&what=week"></script>
                            <!-- Slut WEBSTAT kod -->
                            <br>
                            Totalt: 
                            <!-- Start WEBSTAT kod (totalt antal besökare)-->
                            <script src="http://stats.webstat.se/statShow.asp?id=29316&what=total"></script>
                            <br>
                            <br>
                          </div>
                          <!-- Slut WEBSTAT kod --></td>
                      </tr>
                    </table>
                  </div></td>
              </tr>
              <tr> 
                <td><div align="center"><!-- Start WEBSTAT kod -->
<span id="webstat">
<script src="http://stats.webstat.se/assets/detectplugins_source.js"></script>
<script src="http://stats.webstat.se/assets/stat_isp2.php"></script> 
<script type="text/javascript">
<!--
var info="&plugins=" + (detectFlash()?"flash|":"") + (detectDirector()?"shockwave|":"") + (detectQuickTime()?"quicktime|":"") + (detectReal()?"realplayer|":"") + (detectWindowsMedia()?"windowsmedia|":"");
document.write("<" + "script src=\"http://stats.webstat.se/statCounter.asp?id=29316&size=" + screen.width + "x" + screen.height + "&depth=" + screen.colorDepth + "&referer=" + escape(document.referrer) + info + "&isp=" + info2+ "\"></" + "script>"); 
-->
</script>
</span>
<!-- Slut WEBSTAT kod --><br>
                    <br>
                    <br>
                    <br>
                  </div></td>
              </tr>
            </table></td>
          <td width="23">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td><img src="00_5_gif.gif" width="770" height="39"></td>
  </tr>
  <tr> 
    <td width="770" height="98" background="00_6_gif.gif"><div align="center"><img src="00_7.gif" height="84"></div></td>
  </tr>
</table>
</body>
</html>
voigtann1Medlem sedan juni 20019 519 inlägg
#6

Förresten, en absolut positionerad div MÅSTE ligga i ett element som antingen är absolut eller relativt positionerad själv.

Det stämmer väl inte? eftersom du kan sätta en position absolute på ett element direkt under body-elementet (vilket inte är positionerad absolut eller relativ). Däremot så kommer det påverka beteendet om du ha en förälder som är har absolute eller relative.

@Lindström: mitt tips är att kanske göra en wrapper element och centrera den och utgå ifrån den:

#wrapper {
    margin: 0 auto;
    width: 770px;
    position:relative;
}

Och lägg dina element i den.

Danne VMedlem sedan aug. 20068 090 inlägg
#7

Lindström skrev:

För att göra det så smidigt som möjligt, gå över till den aktuella sidan och kolla in källkoden där. Tror det är smidigast.
För källkoden är rätt så lång, eller stor.

Oj. Nästan lite tur att det funkat i så många webbläsare över huvud taget.

För att du ska få de där tre divvarna (apDiv1, apDiv2 och apDiv3) att ligga där du vill så är det nog enklast om du kan lägga in en en s.k. "wrapper". Var du gör det har jag ingen aning om, men antagligen har CuteNews någon slags sidmall eller en header och en footer där du kan göra det.

Lägg in följande efter den öppnande body-taggen:

<div id="wrapper">

och denna före den stängande body-taggen

</div>

I stilmallen lägger du in:

#wrapper {
width:770px;
margin:0 auto;
position:relative;
}

Därefter kan du placera ut de där divvarna (som absolute) genom att använda parametrarna top, bottom, left och right (ange antal pixlar). Du ska alltså använda EN av dom för vertikal angivelse (top eller bottom) och EN för horisontell angivelse (left eller right)

Du bör ju också definera body med css.

Ta alltså bort margin, left 50%, och ange bredd och höjd i exakta pixlat i.st.f. med auto.

Red: Oj voigtann hann före....

LindströmMedlem sedan jan. 2003821 inlägg
#8

voigtann1 skrev:

@Lindström: mitt tips är att kanske göra en wrapper element och centrera den och utgå ifrån den:

#wrapper {
    margin: 0 auto;
    width: 770px;
    position:relative;
}

Och lägg dina element i den.

Är inte "wrapper" och DIV samma sak ? Menar, gör dom inte samma jobb ? Eller är jag helt ute och cyklar ?
Hade hoppas på att jag kunde jobba mig vidare med den DIVen som jag har nu. Den som spökar för mig, menar jag.

Danne V: Jo, källkoden är kanske i längsta laget. Det håller jag med om. Men då det verkar funka som den ska, så är jag nöjd. Även om det kanske skulle gå och "banta" ner den. Får se om jag blir något klokare om det här och med "wrapper".

voigtann1Medlem sedan juni 20019 519 inlägg
#9

@Lindström: Jo, men du kan placera alla dina element i den och använd negativa positioner osv för att placera dom utifrån "mitten" (med wrappern).

LindströmMedlem sedan jan. 2003821 inlägg
#10

voigtann1 skrev:

@Lindström: Jo, men du kan placera alla dina element i den och använd negativa positioner osv för att placera dom utifrån "mitten" (med wrappern).

Hm.. jag vore ju ljuga om jag sa att jag blev något klokare av det här. Det som jag inte förstår, det är hur ska det ha någon betydelse om div id är "wrapper" än vad det är nu, dvs "apDiv3" ?
För innehållet är ju, eller blir ju ändå det samma, mer eller mindre.

För om jag tar det ex som du tog upp:

#wrapper {
margin: 0 auto;
width: 770px;
position:relative;
}

Så förstår jag inte vad, eller hur det ska göra någon skillnad bara för att jag byter div id.

#apDiv3 {
position:absolute;
left:50%;
margin: 0 0 0 -395px;
......
}

Det ända som skiljer dom åt, det är ju div id. Eller ? Ja, jag vet inte alls jag.
Kanske jag har tagit mig vatten över huvudet med det här.

Eller jag är kanske för dum för att överhuvudtaget ta in det här. Känns nästan som att det lutar åt det hållet. :l

voigtann1Medlem sedan juni 20019 519 inlägg
#11

Vad jag är ute efter är istället för att försöka centera alla bilder och skapa mer kod att underhålla (i mitt tycke) så försök dela upp koden:
1. Jag vill ha mitt innehåll centrerat => kör en wrapper som gör detta
2. Ett spöka skall vara på vänster sida om den, använd position absolut inne i den och positionera den left: -200px (extremt mycket till vänster där :P )
2.2 skall också ha ett på höger sida.
3. ett spöke skall vara x antal pixlar från toppen och där vill jag ha den.

allt utgå ifrån #wrapper och dess innehåll (din tabell) vilket känns mer naturligt än att positionera den negativt dess bredd/höjd osv.

Det är i alla fall så jag tänker när jag kollade på din sida och om jag hade skrivit den...

LindströmMedlem sedan jan. 2003821 inlägg
#12

voigtann1 skrev:

Vad jag är ute efter är istället för att försöka centera alla bilder och skapa mer kod att underhålla (i mitt tycke) så försök dela upp koden:
1. Jag vill ha mitt innehåll centrerat => kör en wrapper som gör detta
2. Ett spöka skall vara på vänster sida om den, använd position absolut inne i den och positionera den left: -200px (extremt mycket till vänster där :P )
2.2 skall också ha ett på höger sida.
3. ett spöke skall vara x antal pixlar från toppen och där vill jag ha den.

allt utgå ifrån #wrapper och dess innehåll (din tabell) vilket känns mer naturligt än att positionera den negativt dess bredd/höjd osv.

Det är i alla fall så jag tänker när jag kollade på din sida och om jag hade skrivit den...

Hm... ja, jag får se om jag lyckas få till något. Det vore ju roligt, om inte annat.
Men tack för att du tog dig tid, och tack för all hjälp.

LindströmMedlem sedan jan. 2003821 inlägg
#13

Uppdatering.

Testade med att lägga i en "wrapper".

#wrapper {
position:absolute;
left:50%;
margin: 0 0 0 -395px;
top:575px;
width:auto;
height:auto;
z-index:1;
visibility: visible;
}

<div id="wrapper"><img src="Meny/blogg_linje.gif" width="600" height="239" border="0"></div>

Men det vill sig inte för mig. Är det något som jag har missat, eller gjort fel ? Utan jag får upp exakt samma design fel som jag hade innan. Så frågan är ju den, vad gör man ?

voigtann1Medlem sedan juni 20019 519 inlägg
#14

Det är inte din div jag ville att du skall wrappar utan alla dina element (dina divar och din tabell) och centrera #wrappen. och utgå ifrån wrapperns position.

gjorde ett exempel: http://voigt.se/sandbox/wf/lindstrom/

vet inte om det hjälper för mac webbläsaren, men så hade jag gjort. Lite kort vad jag har gjort:
1. Wrappat alla dina element till en div och centrera den (man kan plocka bort align="center" på table-elementet nu)
2. Tagit bort bilderna från sidan och lagt dom som bakgrunder (se #apDiv1, #apDiv2 och #apDiv3)
3. Satt ett högre z-index på iframe då du ha FB like knappen på din #apDiv3

LindströmMedlem sedan jan. 2003821 inlägg
#15

voigtann1 skrev:

Det är inte din div jag ville att du skall wrappar utan alla dina element (dina divar och din tabell) och centrera #wrappen. och utgå ifrån wrapperns position.

gjorde ett exempel: http://voigt.se/sandbox/wf/lindstrom/

vet inte om det hjälper för mac webbläsaren, men så hade jag gjort. Lite kort vad jag har gjort:
1. Wrappat alla dina element till en div och centrera den (man kan plocka bort align="center" på table-elementet nu)
2. Tagit bort bilderna från sidan och lagt dom som bakgrunder (se #apDiv1, #apDiv2 och #apDiv3)
3. Satt ett högre z-index på iframe då du ha FB like knappen på din #apDiv3

Bara för att stilla min nyfikenhet, så tog jag och kollade sidan http://voigt.se/sandbox/wf/lindstrom/ i och med webtjänsten "browserlab.adobe.com" för att se hur resultatet såg ut i safari. Och jag får fortfarande upp samma design fel som jag har haft innan. Så kan det vara så att det är webtjästen "browserlab.adobe.com" som visar fel ?

Men vilket fall som helst, jag ska sätta mig ner i eftermiddag och läsa på lite mer om det här med "Wrapper".

voigtann1Medlem sedan juni 20019 519 inlägg
#16

Lindström skrev:

Bara för att stilla min nyfikenhet, så tog jag och kollade sidan http://voigt.se/sandbox/wf/lindstrom/ i och med webtjänsten "browserlab.adobe.com" för att se hur resultatet såg ut i safari. Och jag får fortfarande upp samma design fel som jag har haft innan. Så kan det vara så att det är webtjästen "browserlab.adobe.com" som visar fel ?

Men vilket fall som helst, jag ska sätta mig ner i eftermiddag och läsa på lite mer om det här med "Wrapper".

Kan vara så, skall kolla på en mac och se... men känns konstigt då chrome + safari på windows fungera och de bör ju köra samma version av webkit kan man ju tycka(?)

LindströmMedlem sedan jan. 2003821 inlägg
#17

voigtann1 skrev:

Kan vara så, skall kolla på en mac och se..

Ja, har du möjlighet till att kunna göra det så vore det kanon. Men kan du då inte oxå ta och kolla in "http://livohelvete.se/index_a.php" och se hur det ser ut när du ändå är i farten ? För är det nu så att det är "browserlab.adobe.com" som visar fel, ja.. då har jag haft ett problem som inte har funnits från första början så att säga.

voigtann1Medlem sedan juni 20019 519 inlägg
#18

det är fel på macen

men det är för att typsnittet bli betydligt mindre på safari mac än på windows och andra webbläsare. Sätt en line-height på ditt p-element

Hur mycket kan man ändra i HTML:en? jag har en annan idé på hur man kan lösa det men om man inte kan redigera html koden så hjälper det inte ;)

LindströmMedlem sedan jan. 2003821 inlägg
#19

voigtann1 skrev:

det är fel på macen

men det är för att typsnittet bli betydligt mindre på safari mac än på windows och andra webbläsare. Sätt en line-height på ditt p-element

Hur mycket kan man ändra i HTML:en? jag har en annan idé på hur man kan lösa det men om man inte kan redigera html koden så hjälper det inte ;)

Hur mycket kan man ändra i HTML:en? jag har en annan idé på hur man kan lösa det men om man inte kan redigera html koden så hjälper det inte
Vad hade du tänkt ?

voigtann1Medlem sedan juni 20019 519 inlägg
#20

Tycker du det är märkligt? Den placera ju sig korrekt 570px från toppen, sen att du inte få innehållet gör att den inte ge dig de radbrytningar + luft du förväntar dig, det är ju en annan sak, men positioneringen är korrekt, det är typsnitten + texten som gör att den "ser" konstig ut. men positioneringen är korrekt. Dina andra två bilder bryr sig inte om innehållet på sidan den skall och är inte beroende över något innehåll alls.

Tja, man kan väl ändra så pass mycket så att det blir rätt och riktigt i slutändan. Mer eller mindre. Vad hade du tänkt ?

att placera mitten spöket där den borde bbefinna sig oavsett innehållet på sidans välkomstord.

Har lagt in en

<div class="break"><div></div></div>

där break har "samma" höjd som molnet i bilden. sen div-en inne i break innehåller bilden som bakgrund och positionen absolut ifrån utgångsläget av var .break finns i HTML/DOM strukturen:

.break {
    position: relative;
    height: 125px; /* Molnet */
}
.break div {
	background: url(Meny/blogg_linje.gif) no-repeat;
	width: 600px;
	height: 239px;
	position:absolute;
	bottom: 10px;
	left: -40px;
}

fast IE9 ser sidan hemsk ut (voigt.se versionen, vågar inte rensar för mycket).

153 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
150 ms — hämta tråd, inlägg och bilagor (db)