Div-, p- och andra enkla tabbar som strular.

Hej å hå!

Är i fullt rulle med att lära mig ny (X)HTML, nyare CSS, ja, "bättre" språk helt enkelt.

Har väl ganska länge arbetat av och till med webbsidor, men jag har bara tagit reda på det jag har behövt veta. Nu var det väl längesen jag höll på och nu är jag intresserad av att uppdatera mig. Har fram tills nu använt mig av HTML 4 och enkel CSS, så jag är ganska novis.

Kommer väl fortsätta med HTML 4 ett tag antar jag, men sen blir det XHTML. Men jag har nu börjat titta på div-, p- elementen.
Men det är flera saker jag inte kan få ihop riktigt än, man orkar inte heller sitta och söka efter saker när man inte vet riktigt vad man ska kolla efter.

Några exempel jag kommer på just nu. Skrivna i mitt gamla sätt att koda, ni kommer säkerligen förstå.

Jag har nu börjat med t.ex. <h3> för rubriker. Men om jag kör det (eller t.ex. p, div) på "Detta är.." så blir det ju som två <br> mellan det och "ett litet test.", hur får man till detta?

<font class="rubrik">Detta är..</font><br>
<font class="mini">ett litet test.</font>

Hur får man till t.ex. två div:ar bredvid varandra? På table:

<table><tr>

<td>xx</td>
<td>xx</td>

</tr></table>

1. I tabeller så är det ju middle-align som standard. Men hur jag än gör på en div, så får jag inte till en middle?
2. Som det verkar, så hamnar padding utanför en div:s storleksorder. Om jag kör en div som ligger i en tabellcell som max får vara 500 pixlar. Denna div skall vara 500 pixlar bred och med 15 pixlars padding, så blir då denna 530 pixlar. I Firefox. I IE så blir den 500 pixlar. Om jag nu sätter den på 470 pixlar, så blir den det i IE och 500 i Firefox. Hur löser man en sån här sak?

Ja, det var nog det jag har stött på hittills ikväll (det kanske kommer mera). Väldigt tacksam för svar!

Red1:

1. För att inte använda sig av de gamla "cellspacing & cellpadding" så kunde man visst använda "padding: X & border-spacing: X". Dessa fungerar uppenbarligen inget vidare i IE. Finns det nåt som löser det?

Re: Div-, p- och andra enkla tabbar som strular.

Gardell skrev:

hur får man till detta?

<font class="rubrik">Detta är..</font><br>
<font class="mini">ett litet test.</font>

HTML:
<h3>Detta är..</h3>
<p>ett litet test.</p>

CSS:
h3 {
margin:0 0 0.5em 0;
padding:0
}

p{
margin:0.5em 0 0 0;
padding:0
}

Om meningen var att skapa en rubrik och sedan lite text, så gör du så här. Avståndet mellan <h3> och <p> blir nu 0.5 + 0.5 em, eftersom margin-bottom, resp. margin-top är satta till 0.5.

Re: Re: Div-, p- och andra enkla tabbar som strular.

Insider skrev:

Om meningen var att skapa en rubrik och sedan lite text, så gör du så här. Avståndet mellan <h3> och <p> blir nu 0.5 + 0.5 em, eftersom margin-bottom, resp. margin-top är satta till 0.5.

Det är faktiskt inte riktigt rätt.
Det uppstår nämligen "margin-collapse", så de två marginalerna helt eller till en del sammanfaller. Marginalen mellan de två elementen blir max av h3's bottom-margin och p's top-margin. Eftersom h3 förmodligen, beroende på font-size, har större marginal än p kommer marginalen mellan elementen att bli 0.5em beräknat efter h3's font-size.

Lite inlägg, <h3> är överskrift nivå 3, mao en mindre viktig överskrift och har inget med den visuella presentationen att göra.
Är det en "huvudrubrik" du har tänkt det som skall du använda <h1> och styla den till rätt storlek.
Att webläsare tolkar rubriker till en viss storlek enligt <hn> är ett "fel" enligt tanken bakom html/css.

1. I CSS2.1 kan man "återskapa" en tabell, men det fungerar inte med IE. Om det är en rad med text det gäller kan du använda dig av line-height.

2. http://www.w3.org/TR/REC-CSS2/box.html - IE (i quirks mode) använder en felaktig boxmodell som inte följer standarden. (I "CSS1Compat" mode (a.k.a. Standards compiant mode) så använder IE6 rätt boxmodell.)

Red1:1. IE är ofta den begränsande faktorn när man försöker koda enligt standarderna. Jag brukar koda enligt standarderna, testa med Firefox (den bästa webbläsaren när det gäller att följa standarder) och sen göra de korrigeringar som behövs för IE med conditional comments.

Insider skrev:

Om meningen var att skapa en rubrik och sedan lite text, så gör du så här.

Ja, det var det. :)

frankof skrev:

Lite inlägg, <h3> är överskrift nivå 3, mao en mindre viktig överskrift och har inget med den visuella presentationen att göra.
Är det en "huvudrubrik" du har tänkt det som skall du använda <h1> och styla den till rätt storlek.
Att webläsare tolkar rubriker till en viss storlek enligt <hn> är ett "fel" enligt tanken bakom html/css.

Ah. Mnja, H1 har jag till annat, detta är inte så högt prioriterad sak. Har du nåt annat tips? <font>-taggen, finns den kvar så till vida eller?

zcorpan skrev:

1. I CSS2.1 kan man "återskapa" en tabell, men det fungerar inte med IE. Om det är en rad med text det gäller kan du använda dig av line-height.

2. http://www.w3.org/TR/REC-CSS2/box.html - IE (i quirks mode) använder en felaktig boxmodell som inte följer standarden. (I "CSS1Compat" mode (a.k.a. Standards compiant mode) så använder IE6 rätt boxmodell.)

Red1:1. IE är ofta den begränsande faktorn när man försöker koda enligt standarderna. Jag brukar koda enligt standarderna, testa med Firefox (den bästa webbläsaren när det gäller att följa standarder) och sen göra de korrigeringar som behövs för IE med conditional comments.

Det verkar svårt att koda efter standarder om IE inte stödjer det, stordelen av användarna använder ju denna så.

Ähh, jag förstår inte (fast jag verkligen borde) så värst mycket av sånt där just nu. :P Har lite bråttom med den sidan jag arbetar med nu, så det är nog nästan ingen idé att lära sig nåt avancerat nytt. Tänkte bara att man kunde ha lite kul med några slags standarder i alla fall. Tack för svaren!

<h1> till <h6> är tänkta för rubriker. Använd dom om det är rubriker som avses.
Det borde kännas självklart; sluta använd <font> och kör med css för att presentera din text med.

Re: Div-, p- och andra enkla tabbar som strular.

Gardell skrev:

Hur får man till t.ex. två div:ar bredvid varandra? På table:

<table><tr>

<td>xx</td>
<td>xx</td>

</tr></table>

HTML:
<div>Kolumn ett</div>
<div>Kolumn två</div>

CSS:
div {
float:left;
width:200px;
height:600px;
margin:5px;
border: 1px solid #000
}

Gardell skrev:

frankof skrev:

Lite inlägg, <h3> är överskrift nivå 3, mao en mindre viktig överskrift och har inget med den visuella presentationen att göra.
Är det en "huvudrubrik" du har tänkt det som skall du använda <h1> och styla den till rätt storlek.
Att webläsare tolkar rubriker till en viss storlek enligt <hn> är ett "fel" enligt tanken bakom html/css.

Ah. Mnja, H1 har jag till annat, detta är inte så högt prioriterad sak. Har du nåt annat tips? <font>-taggen, finns den kvar så till vida eller?

Som "insider" redan nämnt; <h1>-<h6> är rubriker och skall användas i en fallande skala efter "viktighet" och inte efter den visuella presentationen.

<style type="text/css">
h1,h2,h3,h4, {font-family: verdan, sans-serif; font-size:10px; color: #000000;}
</style>

Testa lite rubriker på en sida och se att dom ser lika ut oberoenda av nivå, deremot värderas dom olika i sökmotorer och talsyntes o.l.

<font> är sedan länge inaktuell, css ersätter alla visuella förmateringar.

Re: Re: Re: Div-, p- och andra enkla tabbar som strular.

dectgap skrev:

Insider skrev:

Om meningen var att skapa en rubrik och sedan lite text, så gör du så här. Avståndet mellan <h3> och <p> blir nu 0.5 + 0.5 em, eftersom margin-bottom, resp. margin-top är satta till 0.5.

Det är faktiskt inte riktigt rätt.
Det uppstår nämligen "margin-collapse", så de två marginalerna helt eller till en del sammanfaller. Marginalen mellan de två elementen blir max av h3's bottom-margin och p's top-margin. Eftersom h3 förmodligen, beroende på font-size, har större marginal än p kommer marginalen mellan elementen att bli 0.5em beräknat efter h3's font-size.

Precis, du har rätt. Läste just den här artikeln på autisticcuckoo.net.
Avståndet mellan h3 och p i mitt exempel blir som du säger automatiskt det högsta av de 2 marginalvärdena. Inte de två värdena tillsammans. Tydligen kan man lägga in en padding eller border mellan dem om man inte vill att de ska kollapsa.

Re: Re: Div-, p- och andra enkla tabbar som strular.

Insider skrev:

Gardell skrev:

Hur får man till t.ex. två div:ar bredvid varandra? På table:

<table><tr>

<td>xx</td>
<td>xx</td>

</tr></table>

HTML:
<div>Kolumn ett</div>
<div>Kolumn två</div>

CSS:
div {
float:left;
width:200px;
height:600px;
margin:5px;
border: 1px solid #000
}

Nu är jag igång igen.

Detta funkar inte. Men det var väl inte riktigt som jag tänkte mig. Det är två olika div:ar med olika id:s, lyckas inte få dem att ligga bredvid varandra. :l

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>DIV</title>
  <style type="text/css">
   html { background:white; color:black; }
   #foo { float:left; width:50%; background:lime; }
   #bar { margin-left:50%; background:yellow; }
  </style>
 </head>
 <body>
  <div id="foo">foo</div>
  <div id="bar">bar</div>
 </body>
</html>