css & layout. rätt simpelt problem

Har inte använt lager, så vet inte om det kan ställa till det.

I vilket fall vore det trevligt att få mer kod att titta på (och ev. en URL)...

Ingen direkt lösning på ditt problem, men dessa båda sidor har bra exempel som du kan ha nytta av:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://glish.com/css/

Svaret på din frågor borde rimligen finnas där.

//Mikael

Tycker iFrames är en utmärkt lösning, minns inte var jag hittade koden till dylika men du kan sno den från min hemsida.
http://homepage.mac.com/markus.n/webba/index.htm
Fungerar som en table men med en cell som är en annan sida, då löser du lätt ditt layout problem.

<img src="bilder1.gif"><img src="bild2.gif">

<img src="bilder1.gif">
<img src="bild2.gif">

Det är en bugg i IE som gör att det blir så. Lösningen är att göra precis som du gjort, att inte ha några radbrytningar. (X)HTML-koden ser för trist ut men det fungerar. Ska man hitta något positivt i det hela så sparar man ju några bytes i filstorlek

För det första så skall du undvika andra tecken än siffror och bokstäver (engelska alfabetet) i stilnamnet. Det KAN ställa till oreda i olika webbläsare.

För det andra så säger du inte VAD du använder stilen till. Text? En <div>?

För det tredje, så är "margin" från ett element och utåt och appliceras på "in-line" element, t.ex. text, medan "padding är för t.ex. tabeller och <div> och verkar "inåt", dvs mot t.ex. text eller bilder som är inuti elementet.

Här är några sajter som kan vara bra att kika på:

http://www.echoecho.com/css.htm
http://www.projectseven.com/tutorials/pseudoclasses/index.htm
http://www.thenoodleincident.com/tutorials/box_lesson/index.html
http://www.solardreamstudios.com/tutorials/css/
http://www.w3schools.com/css/default.asp
http://www.alistapart.com/stories/practicalcss/
http://www.mako4css.com/
http://www.thepattysite.com/

Dessutom: Ladda hem webbläsaren Firebird (som du säkert inte missat om du läst 99mac den senaste veckan). Sen tar du ner en extension till Firebird som heter "Edit CSS". Använder du den, så kan du öppna sidan i Firebird, ploppa ut menyn för Edit CSS och skriva in olika varianter. Firebird visar då exakt vad som händer (eller inte händer) direkt!

Hoppas de hjälper.

PS:

Någon här nämner iframes. Det är i o för sig inget fel i det. Men iframes stöds inte av webbläsare som inte är W3C DOM kompatibla, dvs NN4.xx och liknande. Dessutom är iframes fortfarande FRAMES, och detta kan vara ett helvete om man inte vet hur man skall handskas med dom...

PS till meddelandet ovan:

Inte för att jag vill vara negativ, men att göra layouter som baseras till 100% på CSS är väldigt tidsödande och mycket svårt. Inte ens drivna proffs gör det utan problem. STORA problem. Så om man inte har jobbat en del med CSS tidigare och har hyfsad koll på hur olika parametrat funkar i olika webbläsare osv, så tar man sig nog vatten över huvudet om man inte först använder en grundläggande layout av t.ex. tabeller som man sedan fixar till med CSS.

<img src="bilder1.gif"><img src="bild2.gif">

<img src="bilder1.gif">
<img src="bild2.gif">

Det går inte att utläsa från ett meddelande här vad det kan vara för fel. Troligen är det helt enkelt så att du fått in ett mellanslag i koden mellan taggarna som ligger på varandra. Antingen efter den övre taggen eller före den undre.

Finns det inget mellanslag så är det ingen webbläsare (vad jag vet) som ökar avståndet.

Dessutom beror det på om du har bilderna mellan en t.ex. en <p> och en </p>

Jo, de flesta versioner av IE har just det problemet. White space ska egentligen inte spela någon roll när de står mellan taggar i t.ex. en lista eller en tabell, men IE lägger trots det in lite spacing, trots att man spec:at annat i css, iaf om man kör med DOCTYPE:n för XHTML Transitional, tror att det även gäller för XHTML Strict.

Så för att slippa oväntad spacing i t.ex. en lista, skippa den snygga tabuleringen av taggar och skriv ihop allt:

<ul>
  <li>Foo</li>
  <li>Bar</li>
</ul>


<ul><li>Foo</li><li>Bar</li></ul>

Det senare är ju helt klart mindre läsbart, men ofta en eftergift man tvingas göra om man vill att det ska fungera även i IE. Jag använde en onumrerad lista i exemplet men detsamma gäller även för t.ex. tabeller, bilder osv.

När jag skriver IE ovan menar jag IE på Windows-plattform, jag har inte ens dragit igång IE på min Mac ännu...

img {
margin-right:1px;
}

//Mikael

Kolla in http://www.alistapart.com/topics/css/ för flera bra tips om css och annat...

#block_1 {
background-color:#990000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

En bra grej att veta när det gäller bilder och eventuella extra vertikala mellanrum kring dessa är att det kan bero på att bilder i paragrafer placerar sig som text. Det betyder att du får samma mellanrum nedåt som du får med bokstäver som j y och g. Det går att lösa genom att visa bilderna som blockelement istället för inlineelement vilket går att göra såhär:

img {
display: block;
border: 0;
}

Kanske inte löser några problem för dig med det är en bra grej att veta.

qué?! min erfarenhet är att det är både enklare och går fortare om man skippar tabell-layouter och istället använder xhtml för struktur och css för layout.

man får förvisso lära sig av med en massa ovanor, men när man väl gjort det sparar man tokmycket i tid, filstorlek, uppdateringstrassel, kompatibilitetsmeck och så vidare (och även för en hobbypulare borde det vara enklare, eftersom det finns tydligare regler att följa).

well, jag ska inte upprepa vad andra uttryckt bättre.

/
Johan

Jag tror du bestämde dig för att inte förstå vad jag skrev.

För det första så är "struktur" och "layout" samma sak (om du inte menar nåt annat med "layout" förstås?). Hade du skrivit "struktur" och "innehåll" hade jag hållt med dig.

För det andra så behöver strukturen inte vara XHTML, utan lika gärna HTML eller XML.

För det tredje, så skrev jag:
"...att göra layouter som baseras till 100% på CSS är väldigt tidsödande och mycket svårt."
Eftersom alltså "struktur" och "layout" är samma sak, så betyder det alltså att vi har samma åsikt, eller hur? En sajt (eller sida) BYGGD (dvs med struktur eller layout) på CSS är ett helvete. Jag tror inte du kan hitta tio sajter som lyckats utan att det skiter sig förr eller senare i olika webbläsare, etc. Inte ens den där amerikanska sport-sajten (nspc? nspa? minns ej...) som "alla" snackar om...

Nä, bygg med html, xhtml eller xml och fyll med CSS.

nu förstår inte jag vad du skrev. o_O

Jag tror du har förvirrat ihop en massa begrepp..

struktur, innehåll: är x/html/xml koden som beskriver innehållet i dokumentet

layout, presentation, design är det som beskriver hur ovanstående skall visas.

Personligt kan snabbare göra upp en sida med xhtml/css än dom flesta table knackare jag har träffat, men visst det tar väl ett tag att lära sig. Men html/css är ju inte direkt svårt, reglerna är väldigt tydliga.
Sen när man väl har gjort en site på det "rätta viset" så är det väldigt skönt när kunden kommer och vill ändra i stort sett allting, då går det smärtfritt för att koden är strukturerat och är därför enkel att hitta i osv...

i IE finns det inte direkt stöd för det (surprise!), dock brukar nedanstående funka:

http://bluerobot.com/web/css/center1.html

http://bluerobot.com/web/css/center2.html

Jag är nog inte riktigt med på vad du menar.

Men om du menar att du har ett lager (en div) och i detta vill du placera en tabell (table) som är smalare än lagret och där tabellen skall centreras i förhållande till lagret och texten i tabellen skall vänsterställas, så kan du göra så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-1999122...">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">

<title>
Testing, testing
</title>

<style type="text/css">

</style>
</head>

<body>

<div class="ram">
<table class="centrerad_tabell">
<tr><td>
Diverse innehåll ...
</td></tr>
</table>
</div>

</body>

</html>

Lite skräp i koden för att du lättare skall se vad som händer.

//Mikael

Jag skulle nog göra något åt det här hållet...

<html>
<head>
<style type="text/css">

</style>
</head>

<body>

<div id="holder">
<div id="top">Test</div>
<div id="left">
<div id="menu">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>
</div>
<div id="mid">Test</div>
</div>

</body>
</html>

Jag vet inte om detta hjälper dig något men jag tycker att det är en relativt enkel variant på att bygga upp objekt i en större "container" som är centrerad.

Ok det kan ju bli ett problem. Att sätta en fast bredd på en "container" och sedan centrera är ju relativt enkelt...men att inte ens ha en fast bredd på "containern" går nog inte....

Men varför inte ha en fast bredd på containern?
Den behöver ju inte synas...det är ju bara att du gör så att alla underliggande objekt är relativa till varandra om du inte vill sätta låsta positioner på dom..

För du vill ju ändå dela upp sidan i olika sektioner om jag har förstått dig rätt....då kan du ju placera alla dessa objekt (div:ar) inom containern.

Det du kan göra om du stöter på patrull med float: left; värdet på div:ar är att lägga en "spacer" före och efter dina float-objekt som innehållet värdet clear: both;

Typ:

CSS:

.spacer {
clear: both;
}

.ett .två {
float: left;
}

HTML:

<div class="spacer"> </div>
<div class="ett">float left värdet</div>
<div class="två">float left värdet</div>
<div class="spacer"> </div>

Tycker jag funkar utmärkt. Nackdelen är ju att spacern tar upp så mycket utrymme som din font-size är satt till....!

Ja.