css & layout. rätt simpelt problem

Tråden skapades och har fått 29 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Stockholm
  • 2003-12-03 16:28

Hej!
Har inte använt css så värst mycket faktiskt men håller på att börja lära mig.

Tänkte implementera det på ett hemsidearbete jag håller på just nu men får det inte att fungera som jag tänkt mig.

Jag bifogar en fil som demonstrerar hur jag vill ha layouten.

Sidan jag gör är rätt välbesökt och är låst till IE så den måste fungera för just IE.

Mitt första problem är att

#index_main_{
	margin-left: 10px;
}

inte ger 10px fritt utrymme till vänster i IE-windows, däremot fungerar det perfekt på IE-mac.

Om ni kikar på bilden så vill jag:
1. ha fast bredd på hela sidan. Den ska vara låst till 730px bred.
2. 1px mellan varje huvudelement. ska tex vara margin-left: 1px för hela sidan.

2. <img> högst uppe vara en fast höjd (som sätts automatiskt när bilden läggs in va?)
3. huvudmenyn ska ha samma bredd som övriga sidan, dvs 730px. Får alltså inte vara bredare.
4. eventuell undermeny... det här lagret innehåller inte garanterat någonting men omd et är tomt så kan väl lagret under hoppa upp av sig självt va? får inte heller vara bredare än 730px
5. huvudsidan.... ska ta upp resten av sidan nedåt och sen ha 20px i marginalen neråt så man förstår att sidan tar slut.

snälla hjälp
Så här har jag börjat skissa

- ett huvudlager som sätter bredden på hela sidan
- fungerar ej som jag tänkt mig, lager som nästlas och ligger inuti kan tydligen ta upp mer bredd än det lager som dom ligger i.

- ett lager för varje sektion. fungerar finfint
- få 1px mellan alla lager automatiskt.
- verkar fungera på IE-mac men ej IE-windows (med padding: 1px)

Mvh
Ivar

edit:

upptäckte just en j_vlig grej. jag hade ett huvudlager som jag nästlade in dom andra i... och det blev något fel med egenskaperna där.. nu kör jag tre lager rakt av som ligger i följd.

Ett problem jag har just nu är att innehållet inte bryr sig om att jag satt width utan det ökar självt ut lagret till den behövda bredden.

Senast redigerat 2003-12-03 16:42

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

  • Medlem
  • Umeå
  • 2003-12-04 14:41

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.

  • Medlem
  • Stockholm
  • 2003-12-04 15:13

snygg sida!
no offense men iframes lider av några av storebrors brister.

När jag kollar den här tråden så märker jag att det smygit sig in ett äckligt dolt tecken efter index_main (webbläsaren visar det som ett underscore).

Jag har fått bredden att fungera men för närvarande så bråkar något helt annat.
Jag lägger ut fyra bilder rakt efter varann och dom visar sig med fula mellanrum på hemsidan...
Om jag skriver så här

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

så ligger bilderna utan en enda pixel brevid varann.... skriver jag däremot

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

så blir det typ 3px mellan bilderna... galet störigt. Rör det sig om typ dolda tecken eller något sjukt?

Citat:

Skrevs ursprungligen av ivar
När jag kollar den här tråden så märker jag att det smygit sig in ett äckligt dolt tecken efter index_main (webbläsaren visar det som ett underscore).

Jag har fått bredden att fungera men för närvarande så bråkar något helt annat.
Jag lägger ut fyra bilder rakt efter varann och dom visar sig med fula mellanrum på hemsidan...
Om jag skriver så här

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

så ligger bilderna utan en enda pixel brevid varann.... skriver jag däremot

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

så blir det typ 3px mellan bilderna... galet störigt. Rör det sig om typ dolda tecken eller något sjukt?

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

  • Medlem
  • Stockholm
  • 2003-12-04 15:26

(X)HTML, innebär det att inte använda sig av radbrytningar?!

  • Medlem
  • Karlstad
  • 2003-12-04 15:45

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...

  • Medlem
  • Karlstad
  • 2003-12-04 16:12

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.

  • Medlem
  • Karlstad
  • 2003-12-04 16:18
Citat:

Skrevs ursprungligen av ivar
(X)HTML, innebär det att inte använda sig av radbrytningar?!

XHTML är ett övergångsspråk mellan "gamla" HTML och "nya" XML:
http://www.w3schools.com/xhtml/default.asp

  • Medlem
  • Stockholm
  • 2003-12-04 16:20

Tackar för all info!

jag använder mig av <div> för att placera ut blocken...

sen inuti <div> så lade jag bilderna och fick det där problemet jag nämnde.

Så här då...

<table cellspacing="1" cellpadding="0">
<tr>
<td><a href="#1"><img src="img/1.gif" border="0"></a></td>
<td><a href="#2"><img src="img/2.gif" border="0"></a></td>
<td><a href="#3"><img src="img/3.gif" border="0"></a></td>
<td><a href="#4"><img src="img/4.gif" border="0"></a></td>
</tr>
</table>

gör att bilderna ligger på en rad med 1px mellan varandra. kan jag inte göra det med css istället så slipper jag tabellen? Eller kanske ska följa ditt råd ändå och inte köra för mycket mot 100% css.

Kan man inte annars ställa in att alla element ska ha 1px mellan varandra inom en <div> ? Vilket alltså skulle innebära att bilderna låg med 1px mellanrum

  • Medlem
  • Karlstad
  • 2003-12-04 16:22
Citat:

Skrevs ursprungligen av ivar
snygg sida!
no offense men iframes lider av några av storebrors brister.

När jag kollar den här tråden så märker jag att det smygit sig in ett äckligt dolt tecken efter index_main (webbläsaren visar det som ett underscore).

Jag har fått bredden att fungera men för närvarande så bråkar något helt annat.
Jag lägger ut fyra bilder rakt efter varann och dom visar sig med fula mellanrum på hemsidan...
Om jag skriver så här

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

så ligger bilderna utan en enda pixel brevid varann.... skriver jag däremot

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

så blir det typ 3px mellan bilderna... galet störigt. Rör det sig om typ dolda tecken eller något sjukt?

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>

Citat:

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

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...

Citat:

Skrevs ursprungligen av ivar
gör att bilderna ligger på en rad med 1px mellan varandra. kan jag inte göra det med css istället så slipper jag tabellen?

img {
margin-right:1px;
}

//Mikael

  • Medlem
  • Stockholm
  • 2003-12-04 18:05

Lär mig lite om css

Hur ska jag göra (helst utan att använda position:absolute) för att dela upp den här sidan?

Där högst uppe där det står "Lokomotiv Enskede" så fortsätter en röd bakgrund åt höger med 1px svart kant högst uppe och nere... får inte ens DET att fungera via <div> och css...

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

Citat:

Skrevs ursprungligen av ivar
Där högst uppe där det står "Lokomotiv Enskede" så fortsätter en röd bakgrund åt höger med 1px svart kant högst uppe och nere... får inte ens DET att fungera via <div> och css...

#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.

Citat:

Skrevs ursprungligen av Danne V
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.

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

  • Medlem
  • Stockholm
  • 2003-12-05 17:43
Citat:

Skrevs ursprungligen av Mikael Svensson

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

Tack!
Visste ju faktiskt om alla de där attributen.

Har hört att man inte ska blanda bakgrundsfärger och bilder utan hellre köra med en enfärgad bakgrundsbild som bakgrund. Ligger det något i det längre?

  • Medlem
  • Stockholm
  • 2003-12-18 10:54

En liten nybörjarfråga.

Hur centrerar man ett table inuti en div? Måste man köra med <table align="center"> eller kan man ställa in div'en ?
Jag är ute efter att göra allt med css så helst det senare alternativet.

text-align: center fungerar inte på tables tex

  • Medlem
  • Karlstad
  • 2003-12-18 11:52
Citat:

Skrevs ursprungligen av halsnalle
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...

  • Medlem
  • Stockholm
  • 2003-12-18 17:45

in johan we trust.

Nä men jag försöker ju verkligen lära mig css så då vill jag inte undvika svåra avdelningar genom att tjoppa in lite tables här och var.

Jag kör tills vidare med en div och sen ett table inuti med 100%width och vars innehåll centreras på traditionellt vis.

Johan, vet du hur man centrerar allt innehåll med css?

Som nybörjare gissar jag på att det ligger i display: ??? eller något sånt

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

  • Medlem
  • Stockholm
  • 2003-12-19 00:31

nästan.

jag vill skapa en div-container och allt som ligger inuti den skall centreras.

Frågan är då, krävs det att man lägger en tabell inuti div'en för att göra centreringen? Eller går det att skriva med css?

div'en har ingen fast bredd så då spricker centrering av själva div'en genom margin-left: auto va?

but still, frågan är hur man centrerar allt innehåll inuti div'en

  • Oregistrerad
  • 2003-12-22 22:23

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.

  • Medlem
  • Stockholm
  • 2003-12-23 15:26

Tack !

Vad som saknades var ju att sidan inte skall använda sig av fast bredd :/

Så den enkla frågan kvarstår

Hur centrerar man ALLT som ligger inuti en div? och hur centrerar man en div utan att sätta en fast bredd på den?

God Jul

  • Oregistrerad
  • 2003-12-23 23:25

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.

1
Bevaka tråden