webForumDet fria alternativet

Problem med padding

11 svar · 553 visningar · startad av Trankan

TrankanMedlem sedan okt. 2006129 inlägg
#1

Hej!

Har fått lite problem med padding på sidan jag bygger på. I den innersta av de tre tabellerna finns tre kolumner. På de yttre har jag satt padding, och dessa har även bakgrundsbilder med samma bredd. Alla tre kolumnerna har fast bredd. Problemet är att den vänstra kolumnen blir smalare än vad jag angett, medan den högra blir bredare. Jag bifogar koden för html-filen och css-filen här...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
    <table width="708" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="4"></td>
        <td height="89" class="header"><a href="#">Home</a> | <a href="#">Careers</a> | <a href="#">Corporate</a> | <a href="#">Crew Department</a></td>
        <td width="4"></td>
      </tr>
      <tr>
        <td height="22" colspan="3"></td>
        </tr>
      <tr>
        <td colspan="3">
        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr valign="top">
          <td width="483" class="main">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In imperdiet pede ut neque. Ut condimentum commodo enim. Nunc at ipsum. Vestibulum consequat leo nec dui. Nunc feugiat mauris sed turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam rutrum, est eget nonummy hendrerit, risus diam mattis lacus, nec placerat mauris quam at eros. Donec varius arcu eu dui. Nunc pretium. Ut sed ipsum ut erat nonummy dignissim. Suspendisse potenti. Pellentesque purus dui, congue quis, scelerisque non, ultrices a, libero.<br><br>

Donec iaculis interdum mi. Nunc ligula ipsum, tincidunt pulvinar, fringilla eget, lobortis mattis, purus. Suspendisse potenti. Praesent venenatis urna eget mi. Etiam vel nibh. Etiam mattis lectus facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam metus. Duis dolor. Praesent vitae pede sed lacus lobortis euismod. Sed suscipit odio ut quam. Nulla fringilla leo id dolor. Duis rhoncus sem. Vivamus luctus ultricies nisl. Maecenas quis neque. Nulla facilisi.<br><br>

Integer vel augue nec nunc vehicula blandit. Morbi diam. Sed lobortis dui sit amet est. Sed vitae leo ut quam sollicitudin convallis. Mauris tristique, enim at consequat ornare, risus ipsum ultricies dolor, sit amet accumsan metus tortor sit amet sapien. Vestibulum feugiat dictum sapien. Phasellus nulla turpis, vestibulum sit amet, euismod nec, volutpat et, ipsum. Aliquam erat volutpat. Aliquam erat volutpat. Aliquam imperdiet tortor vel felis. Curabitur volutpat iaculis ante. Suspendisse aliquet risus quis orci. Vestibulum leo. In varius. Cras suscipit.<br><br>

Curabitur tincidunt, dui ac bibendum bibendum, metus tellus fermentum enim, et pellentesque mauris pede sit amet quam. Pellentesque convallis dictum ipsum. Proin malesuada. Mauris imperdiet ante at nulla. Aenean consequat, magna non congue venenatis, mauris neque tempor tortor, eget tincidunt magna metus eu orci. Proin ut ligula. Donec convallis magna. Sed feugiat arcu vitae mauris. Curabitur sollicitudin congue ipsum. Suspendisse nec libero. Maecenas vitae nisl ac lorem pellentesque blandit. Aenean dapibus, urna sit amet scelerisque iaculis, mauris leo egestas tellus, quis varius metus neque consectetuer ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mauris. Fusce aliquet nunc quis odio. Sed varius sodales pede. Praesent ultricies feugiat ipsum. Duis id purus.<br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin id nulla. Maecenas fringilla aliquet lacus. Maecenas risus quam, cursus a, blandit at, feugiat lobortis, enim. Nam nibh dui, mollis eu, iaculis porta, tincidunt vitae, arcu. Curabitur at enim. Praesent et mauris eget orci mollis elementum. Nunc ac felis a turpis dignissim tempus. Nam vel tellus. Nullam sem lacus, pharetra sed, pretium id, malesuada eget, odio. Proin vitae tellus a pede cursus rhoncus. Duis a dui. Nunc imperdiet est ut sem. Nullam turpis. Suspendisse potenti. Proin elementum, neque sit amet posuere sollicitudin, lectus elit vehicula mi, vel pulvinar est nisi ut purus.
          </td>
          <td width="17"></td>
          <td width="208" class="menu">
          - <a href="#" class="dark">Contact Us</a><br>
          - <a href="#" class="dark">About Us</a><br>
          - <a href="#" class="dark">Message Boards</a><br>
          - <a href="#" class="dark">Admin Portal</a>
          </td>
        </tr>
      </table>
      </td>
    </tr>
    </table>
    </td>
  </tr>
</table>

</body>
</html>

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

body {
background-image: url(images/bg.gif);
background-repeat: repeat-x;
font-family: Trebuchet MS;
font-size: 12px;
margin: 0;
}

.header {
background-image: url(images/header.gif);
background-repeat: no-repeat;
text-align: right;
color: #ffffff;
}

.menu {
background-image: url(images/menu_bg.gif);
background-repeat: no-repeat;
text-align: left;
padding: 20px;
}

.main {
background-image: url(images/main_bg.gif);
background-repeat: no-repeat;
text-align: left;
padding: 20px;
}

a:link { text-decoration: none; color: #ffffff}
a:visited { text-decoration: none; color: #ffffff}
a:active { text-decoration: none; color: #ffffff}
a:hover { text-decoration: underline}

a.dark:link { text-decoration: none; color: #000000}
a.dark:visited { text-decoration: none; color: #000000}
a.dark:active { text-decoration: none; color: #000000}
a.dark:hover { text-decoration: underline}
tantenMedlem sedan nov. 20051 658 inlägg
#2

Uppriktigt sagt så förstår jag nog inte vad det är för problem du upplever. Men om du nu bestämt dig för att designa med nästlade tabeller så är det nog desto viktigare att du hittar rätt doctype. Av vad jag förstått så rekommenderas man att antingen använda 4.0, eller som här 4.01 men inte ha en som länkar till w3.
För att illustrera skillnaderna så tog jag din kod men färglade din inre tabell för att man lättare ska se skillnaden + att jag tog bort texten och ersatte den med hur doctypen ser ut. Bara IE6-bild.
Jag blir lite nyfiken på varför du valt tabeller. Borde ju vara så mycket enklare för dig att få som du vill med divvar. Men men...

doctyper.jpg
TrankanMedlem sedan okt. 2006129 inlägg
#3

tanten skrev:

Jag blir lite nyfiken på varför du valt tabeller. Borde ju vara så mycket enklare för dig att få som du vill med divvar. Men men...

Anledningen till att jag använder tabeller är att det är det jag kan. Kanske vore bättre att använda div, men jag vet inte riktigt hur jag ska göra i så fall.

tantenMedlem sedan nov. 20051 658 inlägg
#4

Om du vill så kan du testa denna. Det är ungefär den grunden jag använder först när någon vill bli av med sin tabelldesign. Kanske kommer man behöva ändra i koden i html-dokumentet, men det ska egentligen inte behövas. Tror att allt du behöver finns i css-filen.

<body>
<div id="wrapper">  
  <div id="header">
  <ul>
  <li><a href="#">Home</a> | </li>
  <li><a href="#">Careers</a> | </li>
  <li><a href="#">Corporate</a> | </li>
  <li><a href="#">Crew Department</a></li></ul>
  </div>
 <div id="main">
   <p>Din text</p>
 </div>
 <div id="menu">
  <ul>
    <li>- <a href="#" class="dark">Contact Us</a></li>
    <li>- <a href="#" class="dark">About Us</a></li>
    <li>- <a href="#" class="dark">Message Boards</a></li>
    <li>- <a href="#" class="dark">Admin Portal</a></li>
  </ul>
 </div>
</div>  
</body>

och en väldigt grov skiss i css, där jag bara placerade divvarna där jag upplevde att du vill ha dem, med en bakgrundsfärg i varje. Och innehållet i divarna är tomt och till för dig att fylla på och designa...

body{
margin:0;
background:url(images/bg.gif) repeat-x;
font:12px/1.5 Trebuchet MS;
}
a:hover,a.dark:hover{
text-decoration:underline;
}
a:active,a:link,a:visited{
color:#fff;
text-decoration:none;
}
a.dark:active,a.dark:link,a.dark:visited{
color:#000;
text-decoration:none;
}
#header{
width:100%;
margin-bottom:10px;
background:url(images/header.gif) #bc8f8f no-repeat;/*kan behövas justeras, eftersom du hade td utanför bilden*/
text-align:right;
height: 50px; /*vet inte hur hög din bild är*/
}
#header li{
display:inline;
}
#header ul{
}
#main{
float:left;
width:490px;
background:url(images/main_bg.gif) #dcdcdc no-repeat;
text-align:left;
}
#main p{
width:90%;
margin:3%;
}
#menu{
width:218px;
float:left;
background:url(images/menu_bg.gif) #add8e6 no-repeat;
text-align:left;
}
#menu li{
}
#menu ul{
}
#wrapper{
width:708px;
margin:30px auto;
}

Nu ska du kunna du använda strict doctype...

TrankanMedlem sedan okt. 2006129 inlägg
#5

tanten skrev:

Om du vill så kan du testa denna. Det är ungefär den grunden jag använder först när någon vill bli av med sin tabelldesign. Kanske kommer man behöva ändra i koden i html-dokumentet, men det ska egentligen inte behövas. Tror att allt du behöver finns i css-filen.

<body>
<div id="wrapper">  
  <div id="header">
  <ul>
  <li><a href="#">Home</a> | </li>
  <li><a href="#">Careers</a> | </li>
  <li><a href="#">Corporate</a> | </li>
  <li><a href="#">Crew Department</a></li></ul>
  </div>
 <div id="main">
   <p>Din text</p>
 </div>
 <div id="menu">
  <ul>
    <li>- <a href="#" class="dark">Contact Us</a></li>
    <li>- <a href="#" class="dark">About Us</a></li>
    <li>- <a href="#" class="dark">Message Boards</a></li>
    <li>- <a href="#" class="dark">Admin Portal</a></li>
  </ul>
 </div>
</div>  
</body>

och en väldigt grov skiss i css, där jag bara placerade divvarna där jag upplevde att du vill ha dem, med en bakgrundsfärg i varje. Och innehållet i divarna är tomt och till för dig att fylla på och designa...

body{
margin:0;
background:url(images/bg.gif) repeat-x;
font:12px/1.5 Trebuchet MS;
}
a:hover,a.dark:hover{
text-decoration:underline;
}
a:active,a:link,a:visited{
color:#fff;
text-decoration:none;
}
a.dark:active,a.dark:link,a.dark:visited{
color:#000;
text-decoration:none;
}
#header{
width:100%;
margin-bottom:10px;
background:url(images/header.gif) #bc8f8f no-repeat;/*kan behövas justeras, eftersom du hade td utanför bilden*/
text-align:right;
height: 50px; /*vet inte hur hög din bild är*/
}
#header li{
display:inline;
}
#header ul{
}
#main{
float:left;
width:490px;
background:url(images/main_bg.gif) #dcdcdc no-repeat;
text-align:left;
}
#main p{
width:90%;
margin:3%;
}
#menu{
width:218px;
float:left;
background:url(images/menu_bg.gif) #add8e6 no-repeat;
text-align:left;
}
#menu li{
}
#menu ul{
}
#wrapper{
width:708px;
margin:30px auto;
}

Nu ska du kunna du använda strict doctype...

Måste jag inte ha lite fler divar om jag vill behålla samma struktur som på bilden du bifogade innan? Först ska jag ju ha en för headern, och sedan en för innehållet. Innehållet vill jag ha uppdelat i två separata delar, en till höger och en till vänster. I den vänstra ska texten ligga, och i den högra en meny. Så i diven för innehållet lär jag ju lägga in två nya divar. Sedan vill jag ju att allt ska ligga i mitten, och då måste jag ju ha en wrapper också. Totalt blir det alltså fem divar som behövs. Har jag rätt, eller tänker jag onödigt krångligt nu?

tantenMedlem sedan nov. 20051 658 inlägg
#6

Precis det du fått :) Om du läser vad divarna heter så förstår du...
Har du testat att kopiera och klistra in i ett dokument??

tantenMedlem sedan nov. 20051 658 inlägg
#7

Såg nu att jag lät en helt onödig class vara kvar
andra denna meny till

<ul>
    <li>-<a href="#">Contact Us</a></li>
    <li>-<a href="#">About Us</a></li>
    <li>-<a href="#">Message Boards</a></li>
    <li>-<a href="#">Admin Portal</a></li>
  </ul>

och radera denna class 
a.dark:active,a.dark:link,a.dark:visited{
color:#000;
text-decoration:none;
}
och lägg till denna i stället 

#menu a{
	color: #000;
	text-decoration: none;
}
TrankanMedlem sedan okt. 2006129 inlägg
#8

Tack för koden du postade, får dock fortfarande samma problem som tidigare när jag lägger till padding. :l

tantenMedlem sedan nov. 20051 658 inlägg
#9

Fortfarande förstår jag inte vad det är för padding som ändrar bredderna på det sätt du beskriver. Är det så att bakgrundsbilderna strular till det som syns där du inte vill det...?
Lägga upp sidan här i forumet, med bilder så vi får se vad du brottas med. Gör du i din kontrollpanel.

TrankanMedlem sedan okt. 2006129 inlägg
#10

Här kommer en länk till sidan. Allt fungerar bra tills jag lägger till padding, då hamnar menyn nedanför innehållet.

http://www.novair-virtual.com/test2/

tantenMedlem sedan nov. 20051 658 inlägg
#11

Du försöker lägga paddingen direkt på diven ser jag. Men det är väl egentligen inte dem som du vill ska bli "större". Det blir dem på det sättet och åker ner.
Det var därför jag t.ex hade lagt din text i ett p och dina ul tomma. Om du sätter en bredd på dem i stället och anpassar marginalerna i förhållande till diven de ligger i så ska du se att det blir som du vill. Nu har din meny blivit för bred och det är därför den åker ner. Tänk på divvarna som behållare som du ska undvika att lägga margin och padding på. Mycket enklare... att tänka så...
Snyggt jobbat, heja för tabellfri design (y)

TrankanMedlem sedan okt. 2006129 inlägg
#12

tanten skrev:

Du försöker lägga paddingen direkt på diven ser jag. Men det är väl egentligen inte dem som du vill ska bli "större". Det blir dem på det sättet och åker ner.
Det var därför jag t.ex hade lagt din text i ett p och dina ul tomma. Om du sätter en bredd på dem i stället och anpassar marginalerna i förhållande till diven de ligger i så ska du se att det blir som du vill. Nu har din meny blivit för bred och det är därför den åker ner. Tänk på divvarna som behållare som du ska undvika att lägga margin och padding på. Mycket enklare... att tänka så...
Snyggt jobbat, heja för tabellfri design (y)

Tack så mycket för all hjälp, nu fungerar det som det ska! :)

Genererad på 381 ms · cache AV · v20260730165559-full.f96bc7eb