Toon posts:

[CSS] tabelcellen houden zich niet aan grootte

Pagina: 1
Acties:

  • Ulasc
  • Registratie: oktober 2010
  • Laatst online: 21-10-2013
Ik heb redelijk niet met CSS en HTML. De basis heb ik al onder de knie, en nu wil ik dus een website maken die compleet geen opmaakdata in de HTML files bevat. Ik heb dus een site gemaakt in Kompozer, die bevat een tabel. Hij heeft links en rechts een buitenrand zeg maar, dat is een cel, die is 20px breed, en die bevat een achtergrond, voor een schaduw-effect. Als ik dit gewoon in Kompozer doe, werkt het prima. Vervolgens zet ik alle opmaak die dan in de HTML staat netjes over naar een externe CSS file. Echt 1 op 1. Toch verspringt de schaduw-cell, om het zo te noemen, van 20px naar 18px in Kompozer. Als ik in de browser kijk, is hij zelfs breder als 20px, want de achtergrond begint rechts weer opnieuw. In mijn CSS staat duidelijk dat hij 20px moet zijn, de achtergrond is ook 20px. Ik heb de volgende dingen aan de CSS table toegevoegd:

code:
1
2
table-layout: fixed; 
overflow: hidden;


Dat werkt ook niet. Ik snap echt niet hoe dit kan, maar als ik intern gewoon style gebruik, en dan 20px breedte definieer, dan werkt het wel. Is hier iets kleins wat ik over het hoofd zie?

Ps. Ik moet wel even er bij zeggen dat mijn tabel geen borders heeft (dus 0px), en collapsed etc. is, zodat het onzichtbaar is, Ik heb een vermoeden dat het hier mee te maken heeft, maar ik kom er absoluut niet uit. Ik heb op Google gezocht, ik kom niet op hits met dezelfde problemen als mij. Ook op Tweakers gezocht, ik heb een paar topics gevonden waarbij mensen ongeveer hetzelfde probleem hebben (maar net iets anders), de oplossingen die voor hen werken, werken voor mij dus niet, omdat mijn situatie een beetje anders is.

Alvast bedankt!

PSS.

Website: http://www.aoevillage.com/test.html

Mijn CSS file:
Cascading Stylesheet: style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
body
{
background-color: #e9e4d1;
margin: 0px;
}

table
{
width: 1040px; 
text-align: left; 
margin-left: auto; 
margin-right: auto; 
border: 0px;
padding: 0px;
border-collapse: collapse;
background-color: #cabc95;
}

#shadow10
{
width: 20px;
height: 150px;
background-image: url("img/shadow1.jpg");
}

#shadow20
{
width: 20px;
height: 150px;
background-image: url("img/shadow2.jpg");
}

#shadow11
{
height: 20px;
background-image: url("img/shadow1.jpg");
}

.menutop
{
width: 200px;
height: 20px;
background-image: url("img/menu1.jpg");
}

#shadow12
{
height: 30px;"
background-image: url("img/shadow1.jpg");
}

#shadow13
{
height: 120px;
background-image: url("img/shadow1.jpg");
}

[Voor 20% gewijzigd door Ulasc op 01-10-2010 22:33. Reden: CSS bestand + website bijgevoegd]


  • RobIII
  • Registratie: december 2001
  • Laatst online: 01:59

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

En hoe verwacht je dat wij je kunnen helpen zonder (relevante!!) stukken HTML en CSS :? Lees dan meteen even code tags. Ook handig: een kale/uitgeklede testcase ergens online zodat we kunnen klikken en kijken en waarmee jij je probleem illustreert. Als je dat voorbeeld ontdoet van alle, voor je probleemillustratie, overbodige meuk in de HTML, CSS etc. is het meteen voor jezelf ook een handige "playground" om zaken te testen.

[Voor 45% gewijzigd door RobIII op 01-10-2010 22:31]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • Ulasc
  • Registratie: oktober 2010
  • Laatst online: 21-10-2013
RobIII schreef op vrijdag 01 oktober 2010 @ 22:29:
En hoe verwacht je dat wij je kunnen helpen zonder (relevante!!) stukken HTML en CSS :? Lees dan meteen even code tags. Ook handig: een kale/uitgeklede testcase ergens online zodat we kunnen klikken en kijken en waarmee jij je probleem illustreert. Als je dat voorbeeld ontdoet van alle, voor je probleemillustratie, overbodige meuk in de HTML, CSS etc. is het meteen voor jezelf ook een handige "playground" om zaken te testen.
Zie edit, ik heb mijn css file ingevoegd, plus een link naar een uitgeklede HTML file. Het is zelfs een nieuwe, de vorige kreeg ik niet meer goed, dus ben ik voor het gemak met een nieuwe begonnen. Krijg ik meteen weer dezelfde fouten.

  • RobIII
  • Registratie: december 2001
  • Laatst online: 01:59

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Sorry, maar dit is nou niet echt leesbare/handige HTML:
HTML:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>test</title>
</head>
<body>
<table>
<tbody><tr><td id="shadow10"></td><td colspan="3" rowspan="1"></td><td id="shadow20"></td></tr><tr><td id="shadow11"></td><td class="menutop"></td><td></td><td class="menutop"></td><td></td></tr><tr><td id="shadow12"></td><td></td><td></td><td></td><td></td></tr><tr><td id="shadow13"></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody></table><br></body></html>

Hoe moeten wij wijs worden uit die brei? Neem dan even de moeite om het even te formatten. Verder is layout met tables wel héél erg 1993. Ik mis alleen de spacer.gif-jes nog :X

Ik wil je dan ook eigenlijk maar 1 goed advies geven: verdiep je eens even in een recente(!!!!) HTML/CSS tutorial.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • Ulasc
  • Registratie: oktober 2010
  • Laatst online: 21-10-2013
RobIII schreef op vrijdag 01 oktober 2010 @ 22:37:
Sorry, maar dit is nou niet echt leesbare/handige HTML:
HTML:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>test</title>
</head>
<body>
<table>
<tbody><tr><td id="shadow10"></td><td colspan="3" rowspan="1"></td><td id="shadow20"></td></tr><tr><td id="shadow11"></td><td class="menutop"></td><td></td><td class="menutop"></td><td></td></tr><tr><td id="shadow12"></td><td></td><td></td><td></td><td></td></tr><tr><td id="shadow13"></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody></table><br></body></html>

Hoe moeten wij wijs worden uit die brei? Neem dan even de moeite om het even te formatten. Verder is layout met tables wel héél erg 1993. Ik mis alleen de spacer.gif-jes nog :X

Ik wil je dan ook eigenlijk maar 1 goed advies geven: verdiep je eens even in een recente(!!!!) HTML/CSS tutorial.
Hoe kan ik het goed formatten? Ik had alles mooi gegroepeerd, maar Kompozer gooit alles achter elkaar aan zodra ik het weer open. Notepad++ is handig, maar zeer lastig als je met grote tabellen werkt.

Maar zo ingewikkeld is het toch niet? De meeste cellen zijn nog leeg, de cellen die een id toegewezen hebben, die zijn dus groter dan ze moeten zijn, en ik kan niet achterhalen waarom.

  • Aganim
  • Registratie: oktober 2006
  • Laatst online: 17:26

Aganim

I have a cunning plan..

Goed formatten? Handmatig enters gevens na iedere tag in je tabel en netjes inspringen. Of een editor nemen die er geen rotzooi van maakt na het opslaan. Ook voor jezelf makkelijker, zeg nou zelf: hier wordt je toch geen wijs meer uit als je website groeit?

Zoals RobIII al aangaf: dump die tabel-based layout. Tabellen zijn niet bedoelt om een site mee in te delen, maar om bepaalde gegevens gestructureerd weer te kunnen geven.

Verdiep je even in het gebruik van de <div> tag icm CSS. Waar je nu mee bezig bent is imho zonde van je tijd.

  • Herko_ter_Horst
  • Registratie: november 2002
  • Niet online
Aganim schreef op zaterdag 02 oktober 2010 @ 07:30:
Verdiep je even in het gebruik van de <div> tag semantische markup icm CSS. Waar je nu mee bezig bent is imho zonde van je tijd.
There, fixed it for you. Table-less opmaak != alles maar in een divje smijten.

"Any sufficiently advanced technology is indistinguishable from magic."


  • Aganim
  • Registratie: oktober 2006
  • Laatst online: 17:26

Aganim

I have a cunning plan..

U heeft helemaal gelijk, ik was iets te kort door de bocht op de vroege ochtend. :)

  • Ulasc
  • Registratie: oktober 2010
  • Laatst online: 21-10-2013
bedankt voor de tips. Ik heb een stukje over divs gelezen, en zo moeilijk is dat helemaal niet. Ik ben het nu aan het ombouwen naar div, alleen heb ik kleine probleempjes met de floats. Ik heb de pagina in 3 stukken verdeeld: top, middle en bottom. Top heeft een vaste hoogte, en het werkt goed. Zelfde geldt voor bottom. Middle mag geen vaste waarde krijgen, want de content er van wordt met php uit een database gelezen, en dit kan iedere dag verschillend zijn. Alleen, als ik het middelste gedeelte groter maak, worden de divs aan de zeikanten niet groter (behalve in Internet Explorer 8, daar werkt het goed).

Zie hier: http://www.aoevillage.com/test.html

Dit is mijn nieuwe CSS:
*Weg die 150 regels CSS. Als je CSS post, beperk je dan tot hetgeen nodig is. Dat is niet je complete site*

Iemand een idee wat de oorzaak is? Als ik het midden gedeelte een fixed hoogte geef, werkt het wel perfect.

[Voor 66% gewijzigd door MueR op 05-10-2010 17:29]


  • moozzuzz
  • Registratie: januari 2005
  • Laatst online: 10-01 23:26
Hebben zijbalken die wel background-repeat ingesteld gekregen?

  • Ulasc
  • Registratie: oktober 2010
  • Laatst online: 21-10-2013
moozzuzz schreef op dinsdag 05 oktober 2010 @ 14:49:
Hebben zijbalken die wel background-repeat ingesteld gekregen?
Heb niks aan de repeat veranderd, maar de default behavior is toch sowieso dat het herhaalt wordt, tenzij iets anders opgegeven wordt?

Ik heb de css file gelinkt, hij was te groot om er in te zetten.
Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee