Tabeller, div etc.

Hej alla glada!
Läser runt ganska ordentligt och försöker lära mig lite grunder (inte alltid så lätt)

Min första hemsida jag gjorde för länge sen delade jag upp i frames, sen började jag kika lite på tabeller och nu skrivs det mycket om div mm mm mm

Har kommit såpas långt att jag börkar greppa css iaf.

Men min fråga är om någon kan ge en kort förklaring till skillnaden mellan tabell och div?

Har inte kunskap till att själv bara knappa kod i notepad, utan jag använder idag Microsoft Expression Web.

Tack på förhand
Bittan

Välkommen!
Liten kort förklaring och ett litet exempel.
Tabeller är till för precis vad det låter som. Dvs. t.ex en tågtidtabell eller liknande.
Under den andra hälften av 90-talet så var det någon som kom på att man kunde använda tabellernas celler för design och webben överöstes med sidor gjorda i mer eller mindre nästlade tabeller, vilket blev ett elände för alla dem som inte kan använda webben "vanligt".
I dag strävar man efter att göra html-koden så ren man bara kan så alla sorters webläsare ska kunna visa innehållet utan problem.
När webläsaren kommer till<table> så ritas en tabell upp oavsett om det finns en css-fil.
När webläsaren kommer till <div> så ritas ingenting upp om det inte finns med någon css-fil. Då skrivs bara innehållet ut. Här ett exempel på en tabell.

table{
	background-color: #c0c0c0;
	width: 15em;
	height:15em;
	border: 1px solid #000;
	}
td{
	width: 7.5em;
	vertical-align:top;
	}
td p{
	background-color: #008000;
	}

och html-kod
<table summary="layout">
<tr>
<td></td>
<td><p>text i högra hörnet</p></td>
</tr>
</table>

Det ska se likadant ut om du i stället gör så här

#ruta{
	width: 15em;
	height:15em;
	background-color: #c0c0c0;
	border: 1px solid #000;
	}
#ruta p.right{
	float: right;
	margin: 0.2em;
	background-color: #008000;
	width: 50%;
	}
och html-koden
<div id="ruta">
<p class="right">text i högra hörnet</p>
</div>

Inte så tydligt kanske, men oftast behövs mycket mindre html-kod när man lämnar tabellerna till vad de är till för.
Inget roligt exempel, men så här ser de ut...

Låter vettigt. Hur mycket kan jag styra via css filen.
Nedan har jag en div där jag först har en välkomst text i fetstil, sen en del annan text. De rader jag vill ha t.ex. fetstil på styr jag det som vanligt i html koden? Blir antingen eller via css filen.

Eller ska jag ha en egen div för "Rubrik" och en för "Brödtext", blir lite kluven när man ska hålla koll på 2 ställen ;) Men min förhoppning är att få ihop en bra förstasida som blir lätt att bygga vidare på.

Kort sagt, ska man snåla eller ösa på div:ar :o

Och när jag ändå är igång, förhoppningsvis kommer jag få fler idéer och bygga ut sidan, då är menyn nästa problem, när jag hade det i frames va det ju lätt, meny.htm bara öppna och ändra länkarna. Hur löser man detta smidigast om man inte använder sig av frames? Vill gärna slippa göra samma ändring i alla undersidor.

html:

<div id="content"><strong>Välkommen till Mitt lilla hörn</strong><br />
Här kommer då en hel del text.</div>

css:

#content {
width: 540px;
margin-top: 0px;
margin-right: 25px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
font-family: "trebuchet MS";

Ups, kom på en sak till, en tabell två celler, text i den ena, bild i den andra, attans smidigt sätt att få det tillsammans!! Men nu då? :q

(nu känner jag själv att det blev väldigt rörigt)

Det finns många svar på dina frågor, menhär ett exempel som jag skulle gjort det du nu har gjort... tror jag :)

<div id="content"><h1>Välkommen till Mitt lilla hörn</h1>
<p class="kolumn">Här kommer då en hel del text.</p>
<p class="kolumn">Här kommer då en bild.</p></div>

och css

.kolumn{
width: 50%;
float: left;

h1{

}
beror på hur du har stylat font i body, fet stil ska inte behövas, men kanske färg och storlek

med din content orörd.

Du är grym Tanten!!

Ett alternativ för bil hittade jag när jag lekte runt lite, Layer, då verker det som om jag kan placera bilder vart helst.

Bra/dåligt?

Kanske Tanten har ett litet tips om en meny också ;) Kanske Inline Frame?
Sen har jag ju nästan grunden klar!!

Tänk va lätt det är bara man vet hur man ska göra :e

Layer är något som finns i dreamweaver om jag inte missförstått det hela. Men normalt pratar man inte layer... så därför förstår jag inte riktigt din fråga.
Men bilder kan du placera i princip precis vart som helst med css.
Ett annat sätt med bild och flytande text och lite fet text så om vi kikar på den förra koden.

<div id="content"><h1>Välkommen till Mitt lilla hörn</h1>
<p class="kolumn">Här kommer då en hel del text.
<img class="floatright" src="bilder/bild.jpg" alt="min bild">
Här kommer då en hel del text. Här kommer <span class="fet">då en 
hel del text.</span> Här kommer då en hel del text. 
Här kommer då en hel del text.Här kommer då en hel
 del text.Här kommer då en hel del text.</p>
<p class="kolumn">Här kommer då en hel del annan text.</p>

med tillägg och lite ändringar i css

img{
		border: none;
		margin: 0px;
		padding: 0px;
	}
	.kolumn{
		width: 44%;
		float: left;
		margin:0 3% 0 0;
	}
	.floatright{
		float: right;
       }
.fet{font-weight:bold;
	}

När du gör din meny så använd någon lista.<ul> är den vanligaste man använder.

<div class="meny"> eller id=""
	<ul>
		<li><a href="#nogo">Länk1</a></li>
		<li><a href="#nogo">Länk2</a></li>
		<li><a href="#nogo">Länk3</a></li>
		<li><a href="#nogo">Länk4</a></li>

	</ul>
</div>

Om den ska var vertikal eller horisontell och hur den ska se ut, fixar du sedan med enbart i css.
Du vill ju ha menyn separat och hur du ska göra det bestäms vad du kan använda på ditt webbhotell. Finns där stöd för php. t.ex?
Kolla upp det, så blir det mer tips sedan :-)
Kul att du greppat detta.

Där slog du in mig på nästa steg.

Webbhotell, det är nästa steg. ASP/PHP kan jag inte ett jota om, vet i stort sett bara att det rör sig om windows/unix server, och så långt har jag inte kommit i planeringen.

Om man nu ska gå vidare och försöka bli lite mer avancerad, vilket tycker du är vettigast?

<ul>, fattade jag det rätt med att länkarna ligger i css filen? så det spelar ingen roll hur många undersidor jag har om jag vill lägga till / ta bort undersidor?

Du behöver egentligen inte kunna något om php för att "includa" en meny med det.
Men gör nu så att du har allt på "första-sidan" så länge du jobbar med designen och texterna. Annars måste du ladda ner en egen server till datorn för att kunna se resultatet, vilket kanske är lite mycket i det här läget, om du inte ska lära dig något server-språk som php eller asp...
Sedan när du känner dig helt nöjd, och kanske också har någon undersida klar också, och ska skicka upp till servern, så plockar du ut menyn från dokumentet och lägger den in i en egen fil.
Det är det enklaste och man har då lättast att se vad man gör...
Själv kan jag nog tycka att det är en fördel att ha bra grepp om designbitar innan man hoppar på något som php, eftersom dessvärre så mycket av deras tutorials bygger på table-design och ja... bara funderingar och tips bara! :)

<ul>, fattade jag det rätt med att länkarna ligger i css filen? så det spelar ingen roll hur många undersidor jag har om jag vill lägga till / ta bort undersidor?

Nej i css-filen finns bara "utseende" ;)
När du är klar med sidan, klipper du ut hela menyn, antingen hela diven den ligger i eller bara länkarna och klistrar in den i ett nytt dokument och döper den t.ex. till meny.php.
Där du klippte ut menyn skriver du
<?php include 'meny.php'; ?> och gör samma sak med alla undersidorna och sedan behöver du bara ändra i meny.php.
Här ligger menyn på samma ställe som sidorna, vill du ha den i en mapp så ändrar du adressen.
Du döper om sidorna så de får .php som ändelse, t.ex. index.php och skickar upp dem till servern.(om den har stöd för det).
Principen är den samma för ssi och asp.

okidoki
Kompisen ska försöka låna ut lite plats åt mig, men han har en windowsserver. Så det får bli lite testade med ASP.

Någon kommentar till denna rad?
<!--webbot bot="Include" U-Include="huvudmeny.htm" TAG="BODY" -->

Hmm...
<!--webbot [...] --> är speciella direktiv som tolkas av MS Frontpage och MS Expression Web och de har till uppgift att generera kod åt dig när du sparar dina alster från något av de programmen.

Att de ligger kvar i den genererade koden är en bi-effekt och kommer sig av att de bägge programmen håller reda på vad som är genererat i slutresultatet när du öppnar sidan för nästa redigering.

Som du ser tolkas de som kommentarer av alla webbläsare så de har ingen praktisk betydels utanför FP eller Expression Web

En vanlig webbot man ser spår av här och där är den som genererar en meny automatiskt från de sidor man har med i sitt siteprojekt i FP/EW, men den du citerar används för att inkludera koden från en extern fil när man sparar sin sida..

Så länge varade det roliga, va lite glad när jag lyckades knappa ihop en förstasida, men när den öppnas i Firefox är det inte en div som ligger rätt :(

Är det fel att jobba i EW?

Du skrev tidigare...

Har inte kunskap till att själv bara knappa kod i notepad, utan jag använder idag Microsoft Expression Web.

Min erfarenhet är att om man använder någon av Microsoft-produktena, så kan precis vad som helst hända av mindre roliga saker. Men det är flera år sedan som jag testade och det kan ju ha hänt något positivt med dem sedan dess.
Men du kan nog utgå från att Firefox visar rätt och IE fel.
Men visa koden du har nu så får vi se vad Expression Web har hittat på :)

det va bara en rent klant miss, vet inte hur men det verkade som om det va 2 div:ar på varandra, plockade bort lite i css filen o vips så blir det klockren även i firefox, kan nog bli en bra fredag :bire

När jag ändå är igång så bombar jag på med en fråga till.

Jag vill placera en bild i en div, men jag skulle vilja ha den typ "flytande" så den inte påverkar textens formatering.

Möjligt?

<img alt="" src="images/bild1.gif" style="float: right" width="200" height="160" class="style1" />

Så ser raden ut idag, men den ligger liksom inte över/under texten.

jag förstå inte riktigt hur du menar men om du itne vill att texten ska printas runt omkring bilden får du ta bort float=)

Lite dåligt förklarat, en bild är t.ex. på en glass strut i gif med genomskinlig bakgrund, och jag vill inte att den smala botten på glassen ska knuffa undan texten :l

hmm, hänger jag sjäv med? Kanske lättare att säga att jag vill kunna skriva text över en bild utan att det är en bakgrund, ska jag ha den som bakgrund fylls det ut med en massa bilder, och det känns lite dumt att göra bilden större och tungladdad :x

Om problemet är som du säger...med att bilden repeterar sig så...
css

background: url(bilder/glass.jpg) no-repeat;

och sedan får du jobba med margin på texten så den inte lägger sig över hela glassen.

Underbart, attan va lätt det va fixat!!

Jätte tack!!!

Du har också möjlighet att ändra på bakgrundsbildens placering med t.ex

background: url(dinbild.gif) no-repeat 20px 30px;
eller
background: url(dinbild.gif) no-repeat center;
som man kan byta ut mot right, left, top, eller bottom...