Just nu i M3-nätverket
Gå till innehåll

Min tabell blir inte som jag tänkt mig när den "växer"


Niss3

Rekommendera Poster

Hej!

 

Jag har tänkt göra en "pergament rulle" som en sida.

 

Jag har gjort en tabell såhär:

 

-------------

|    meny  |

-------------

|               |

| text        |

|               |

-------------

|botten på "rullen"|

-------------

 

Något gör jag fel för "mitten" biten med texten ändrar Y position när jag

fyller på med text..

 

HTML koden:

<div><table border="0" cellpadding="0" cellspacing="0">
<tr class="n3top">
	<td></td>
</tr>
<tr class="n3eat">
	<td>
	hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej
	</td>
</tr>	
</table></div>

CSS filen:

.n3top {
    width: 548px;
    height: 80px; 
    text-align: right; 
    text-indent: 0px; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px;
    background-image: url("3top.png");
    background-repeat: no-repeat;
    background-position: right; 
    border-radius: 0em;
    padding: 0em;
    position: absolute;
    top: 310px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

.n3eat {
    width: 548px;
    text-align: left; 
    text-indent: 0px; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px;
    background-image: url("3eat.png");
    background-repeat: repeat-y;
    background-position: center; 
    border-radius: 0em;
    padding: 0em;
    position: absolute;
    top: 475px;
    left: 50%;
    transform: translate(-51%, -50%) 
}

Jag har provat olika "position" attribute som static, inherit, relative osv.

Men jag lyckas inte få något att fungera som jag tänkte mig..

 

Mycket tacksam för hjälp!

Med vänliga hälsningar,

Simon Nilsson

 

 

 

Edit: Allt var så mycket lättare när jag kunde skapa grund-layouten för tabeller i microsoft frontpage T_T

Länk till kommentar
Dela på andra webbplatser

Hej igen.

 

Jag har gjort om allt igen från början och det gick lite bättre denna gången. Nu fungerar tabellen som jag tänkt mig!

 

Vet inte varför mitt första försök gick åt skogen. Det kanske kommer med tiden ju mer jag använder CSS för att designa :)

#n3box {	
	width: 548px;
	border-radius: 0em;
    padding: 0em;
    position: absolute;
    left: 50%;
    margin-right: -50%;
	top: 440px;
	transform: translate(-50%, -50%) 
}

.n3gl {

}

.n3top {

	height: 80px; 
	padding: 0px 0px 0px 0px; 
	margin: 0px 0px 0px 0px;
	background-image: url("3top.png");
	background-repeat: no-repeat;
    background-position: right; 
    border-radius: 0em;
    padding: 0em;
}

.n3eat {
	background-image: url("3eat.png");
	background-repeat: repeat-y;
    background-position: center; 
}

.n3end {
	height: 80px; 
	background-image: url("3end.png");
	background-repeat: no-repeat;
    background-position: right; 
}
  <div id="n3box">
  
  <td>

  <div class="n3top"><font color="white">hej hej hej hej </font></div>

  </td>
  
  <td>

  <div class="n3eat">
  
  <td>
  <font color="white">hej hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br></font>
  </td>
  
  </div>

  </td>
  
  <td>

  <div class="n3end"><font color="white">hej hej hej hej </font></div>

  </td>
  
  </div>
Länk till kommentar
Dela på andra webbplatser

Nehepp. Nu råkade jag ut för samma problem igen.

 

Jag tänkte ordna så att texten låg i linje med "pappret". Så jag gjorde en ny <div class="text"> för att använda margin-left.

 

Då hände precis samma sak igen. Lägger jag till mer text nu "växer" tabellen med samma centrumpunkt - vilket trycker upp hela sidan.

  <div class="n3eat">
  
  <td>
  <div class="n3ext"><font color="white">hej
   hej hej hej hej hej  hej hej hej hej hej  hej hej hej hej hej  hej hej hej hej hej  hej hej hej hej hej hej  hej hej hej hej hej  hej hej hej hej hej  hej hej hej hej hej  hej hej hej hej hej  hej hej hej hej  hej hej hej hej hej  hej hej hej hej hej 
  <br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br>hej<br></font></div>
  </td>
  
  </div>
#n3box {
    width: 548px;
    border-radius: 0em;
    padding: 0em;
    position: absolute;
    left: 50%;
    margin-right: -50%;
    top: 440px;
    transform: translate(-50%, -50%) 
}

.n3ext { margin-left: +10%; }
 

Vad gör jag för fel???

Länk till kommentar
Dela på andra webbplatser

Jag förstår inte varför du använder position absolute i en tabell.

 

Ska du göra layout ska du absolut inte involvera en tabell.

 

Bort med alla td i din kod och använd divvar och css för att påverka utseende.

 

Har du skiss på hur det ska se ut så man får en uppfattning vad det är du försöker åstakomma?

Länk till kommentar
Dela på andra webbplatser

Jag förstår inte varför du använder position absolute i en tabell.

 

Ska du göra layout ska du absolut inte involvera en tabell.

 

Bort med alla td i din kod och använd divvar och css för att påverka utseende.

 

Har du skiss på hur det ska se ut så man får en uppfattning vad det är du försöker åstakomma?

 

Hej Jonas!

 

Jag hittade felet precis. 

 

Tidigare använda jag;

    position: absolute;
    top: 310px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
 
För att fixa pappret på rätt plats.
Jag tog bara bort Y på translate så det blev;
     transform: translate(-50%)

 

Nu slutade det växa på det sättet jag blev så irriterrad över.
 
Jag har inte hållt på så mycket med tabeller. Brukade alltid låta program skapa dem åt mig. Så jag förstår inte riktigt vad alla UL LI TD TR är till för.
 
Ska prova ta bort alla TD och TR och bara anväda DIV!

 

d236882a42.jpg

 

EDIT:

 

Det var precis som du sa Jonas. Jag tog bort alla TD ch TR och det gjorde ingen skillnad på utseendet.

 

Tack!

Länk till kommentar
Dela på andra webbplatser

hej  hej

 

 

#n3box {

width: 548px;
border-radius: 0em;
    padding: 0em;
    position: absolute;
    left: 50%;
    margin-right: -50%;
top: 440px;
transform: translate(-50%, -50%) 
}
 
.n3ext { margin-left: +10%; }

 

När jag  läser css koden kommer diven n3box i mitten 
om du vill ha i mitten från  alla håll 
då sätter du html body table till 

width: 100%
 height: 100%;
margin: 0px;
padding: 0px;

 

sedan tr taggen som finns i table taggen måste ha vertical-align:middle med text-align  center 

td kan du själv bestämma om den ska vara width: 90% eller fast värde (px)

i den kan du lägga divar per rader 

 

<style type="text/css" media="screen">
body ,html{
overflow: hidden;
font: normal 14px Trebuchet MS, san-serif;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
</style>
<table style="height: 100%; width: 100%; ">
<tr valign="middle">
<td valign="middle" align="center" >
<div>rad 0</div>
<div>rad 1</div>
<p>eller så här <br>rad</p>
</td>
</tr>
</table>

^_^

Länk till kommentar
Dela på andra webbplatser

Jag hade gjort så här:

<div id="header"></div>
<div id="content" class="box">
    <div class="text">
       Här är texten. Är det mycket text så blir innehållet högre
    </div>
</div>
 <div id="footer"></div>

och CSS

body{background-color:black}
#header,#content,#footer {
    width:900px;
    margin:0 auto;
    background: url(http://puu.sh/gdpIt/d236882a42.jpg) no-repeat 50% 0;  
}

#header{
  background-position:50% 0;  
    height:350px;
}
#content{
  background-position: 50% -350px;  
min-height:100px
}
#content    .text{
        margin: 0 230px;
        color: #fff;
    }
#footer{
  background-position:50% bottom;  
    height:160px;
}


Just i exemplet ovan är det en och samma bild som bakgrund för header content och footer, vilket gör att innehållet inte kan vara för högt, då ser man slutet av pergamentet.

jag hade nog separerat bakgrundsbilden till tre, alternativ göra en sprite - där du linjerar bilden lite annorlunda

http://stackoverflow.com/questions/1250011/css-is-it-possible-to-repeat-only-part-of-an-image-to-use-it-as-a-background 

Länk till kommentar
Dela på andra webbplatser

Hej igen
jo det sant jonas , jag själv gick bara efter bilden , jag själv skulle nog klippa ut trädet med rosa
sedan skulle  pergament rullen i tre delar. 

 

jag antar det musik i bakgrunden.

jag skulle jquery fadein långsamt (  trädet med rosa ) när funktionen är klar 

skulle jag ta den övre delen  och den undre delen av pergament rullen  jquery fadein när funktionen är klar 
då skulle jag  jquery animate och hjälp av tabell egenskap   valign="middle"  så att man ändrar height så den växer till full höjd (den mittersta delen av pergament).   

då kommer det se ut man rullar ut den  och sedan skulle använda  jquery animate  så man få skriv effekt och med knappen läs mer skulle jag dela innehållet i olika div block och när man trycker på knappen då kommer alla div block vara display none och den  aktuell kommer vara display block med  skriv effekt.

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...