Gathering of Tweakers

Verwijderd

Verwijderd — Tue, 05 Oct 2010 15:26:38 GMT

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.

moozzuzz

moozzuzz — Tue, 05 Oct 2010 12:49:55 GMT

Hebben zijbalken die wel background-repeat ingesteld gekregen?

Verwijderd

Verwijderd — Tue, 05 Oct 2010 10:07:50 GMT

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.

Aganim

Aganim — Sat, 02 Oct 2010 20:52:48 GMT

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

Herko_ter_Horst

Herko_ter_Horst — Sat, 02 Oct 2010 10:46:49 GMT

Aganim schreef op zaterdag 02 oktober 2010 @ 07:30:
Verdiep je even in het gebruik van de
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.

Aganim

Aganim — Sat, 02 Oct 2010 05:30:42 GMT

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

tag icm CSS. Waar je nu mee bezig bent is imho zonde van je tijd.

Verwijderd

Verwijderd — Fri, 01 Oct 2010 20:40:33 GMT

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
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>testtitle>
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

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.

RobIII

RobIII — Fri, 01 Oct 2010 20:37:03 GMT

Sorry, maar dit is nou niet echt leesbare/handige HTML:

HTML:


<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>testtitle>
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

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

Verwijderd

Verwijderd — Fri, 01 Oct 2010 20:34:50 GMT

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

RobIII — Fri, 01 Oct 2010 20:29:58 GMT

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.

Verwijderd

Verwijderd — Fri, 01 Oct 2010 20:27:13 GMT

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

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");
}