Följ Black Week på SweClockers
Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Problem med marginaler i CSS

1
Skriv svar
Permalänk
Hedersmedlem
●

Problem med marginaler i CSS

Jag jobbar lite på ett onlinespel (manager för ett handbollslag) men har lite problem med marginalerna. Jag skulle vilja ha en marginal längst ned på sidan så att det blir ett litet tomt mellanrum innan sidan tar slut. Som det är nu slutar sidan på pixeln efter nedersta bordern. Jag skulle alltså vilja ha ett mellanrum på ca 10 px där. Hur skall jag genomföra detta? Jag har testat lite med margin samt padding, men jag får inget att fungera.

Det jag har gjort nu är att slängt in en tom DIV under de som existerar just nu och sätter en height på den, men det känns som en rejäl fullösning.

sidan hittas här: fleen.se/swec

min css-fil ser ut såhär:

html {
	height: 100%;
}

body {
	background-color: #EDEDED;
}

.header {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 600px;
	height: 50px;
	border-color: #A1A1A1;
	border-style: dashed;
	border-width: 1px;
	background-color: #ECEBDA;
	padding: 5px;
}


.menu {
	position: absolute;
	left: 10px;
	top: 80px;
	width: 150px;
	border-color: #A1A1A1;
	border-style: dashed;
	border-width: 1px;
	background-color: #ECEBDA;
	padding: 5px;
}

.main {
	position: absolute;
	left: 180px;
	top: 80px;
	width: 430px;
	border-color: #A1A1A1;
	border-style: dashed;
	border-width: 1px;
	background-color: #ECEBDA;
	padding: 5px;
}

Det finns lite annat också, men endast detta som skall vara nödvändigt.

Någon som vet hur jag skall göra?

Visa signatur

Är du lycklig nu?

Frågor och funderingar angående modereringen tas med mail, inte genom forumet. dennizpop@sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

body { margin-bottom: 5px; }

Visa signatur

Äntligen har jag fått svar på om vandrande pinnar kan gäspa. Det kan de inte. Ett av världens stora mysterier är löst.

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Det verkar inte fungera med det där heller. Kan det ha och göra med att jag kör position: absolute på alla? Jag kanske skall ändra till relative? Iofs klarade jag inte av det förut, men jag skall ge mig på ett försök.

Någon som har några tips om hur det skall gå till för att få exakt lite med position: relative?

EDIT:

Okey, det var inte så svårt att få till position: relative. Det var float som jag tittat för lite på bara. Nu fungerar det med marginalen längst ned!

Dock har jag ett annat problem. Nu vet jag inte om detta är ett problem egentligen, eller om det bara är såhär som css fungerar.
När webbläsaren blir för smal (på bredden) så hoppar main-rutan ned under meny-rutan. Kan jag förhindra detta? Jag vill bara att det skall skapas en scroll i x-led.

Ni kan gå in på fleen.se/swec för att se hur jag menar. Förminska sidan på bredden så kommer ni förstå.

Senast redigerat
Visa signatur

Är du lycklig nu?

Frågor och funderingar angående modereringen tas med mail, inte genom forumet. dennizpop@sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det bästa om du lägger div-arna i en tabell.

Jag skulle gjort så här:

<table>
<tr>
<td>
Placera den övre div-en här
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
Den vänstra här
</td>
<td>
Den högra här
</td>
</tr>
</table>
</td>
</tr>
</table>

Visa signatur

[Clear-Host]

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Att använda tabeller på sidan är tyvärr inte ett alternativ (så länge det inte är för tabulär data förståss). Jag tycker att det borde gå att lösa på något annat vis. Annars struntar jag i det bara. Är ju inte så ofta som webbläsarna är så pass smala.

Visa signatur

Är du lycklig nu?

Frågor och funderingar angående modereringen tas med mail, inte genom forumet. dennizpop@sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Att placera taggarna i en tabell låter ju som ett riktigt tokigt förslag.
"¤ Jag ska skjussa tre personer till posX."
"* Då kan du sätta dom i en personbil som du sätter på en lastbil."
"¤ ... fiffigt..."
[skojade lite, no offence]

varför kör du med pos: abs?
body{ padding: 5px; padding-bottom: Xpx; }
Div.head { width: Xpx;}
Div.main { width: Xpx;}
Div.left { width: Xpx; float; left}
Div.right { width: Xpx; float; right}

[kod]<div class="head">
Teh Rubriken
</div>
<div class="main">
<div class="left">
Vänster
</div>
<div class="right">
Höger
</div>
</div>[/kod]

Jag garanterar dock inte att ovanstående kod fungerar 100%igt.

edit: kanske skulle komentera ditt problem oxå... sry, glömde.
la' till padding-bottom.
funka?

Visa signatur

Griffon Sqd
The SketchUp Component Collection

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Jag garanterar dock inte att ovanstående kod fungerar 100%igt.

Därför använder man en tabell, då kan inget gå fel!

Visa signatur

[Clear-Host]

Redigera
Citera flera Citera
Permalänk
Medlem
●

Nu menade jag att det inte var 100%igt för att jag inte provat koden.
Tabeller blir aldrig 100%iga.

Visa signatur

Griffon Sqd
The SketchUp Component Collection

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●
Citat:

Ursprungligen inskrivet av papabear
Att placera taggarna i en tabell låter ju som ett riktigt tokigt förslag.
"¤ Jag ska skjussa tre personer till posX."
"* Då kan du sätta dom i en personbil som du sätter på en lastbil."
"¤ ... fiffigt..."
[skojade lite, no offence]

varför kör du med pos: abs?
body{ padding: 5px; padding-bottom: Xpx; }
Div.head { width: Xpx;}
Div.main { width: Xpx;}
Div.left { width: Xpx; float; left}
Div.right { width: Xpx; float; right}

[kod]<div class="head">
Teh Rubriken
</div>
<div class="main">
<div class="left">
Vänster
</div>
<div class="right">
Höger
</div>
</div>[/kod]

Jag garanterar dock inte att ovanstående kod fungerar 100%igt.

edit: kanske skulle komentera ditt problem oxå... sry, glömde.
la' till padding-bottom.
funka?

Tackar så mycket för hjälpen. Dock har jag redan ändrat designen så att jag nu använder position: relative. Läs mitt andra inlägg i tråden.

Jag har dock ett annat "problem" nu (samma inlägg). Vet du något om hur jag skall lösa det?

Visa signatur

Är du lycklig nu?

Frågor och funderingar angående modereringen tas med mail, inte genom forumet. dennizpop@sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

hmm, kan inte se sidan, men blir det någolunda rätt med overflow: atuo; ?

Visa signatur

Griffon Sqd
The SketchUp Component Collection

Redigera
Citera flera Citera
Permalänk
Medlem
●

Är det inte padding: 5px som är helt fel.

Skriv istället

padding: 0px 0px 5px 0px;

för att veta siffra som justerar vilken kant kan du tänka på klockan

12 15 18 21!

Tror dessutom att

"
html {
height: 100%;
}

"
är helt onödigt. hoppas du får ordning på sidan

Visa signatur

|| i7-6700K @ 4.0 GHz ~~ 16gb RAM ~~ GTX 970 ||

Redigera
Citera flera Citera
Permalänk
Medlem
●

OK, vill inte starta en ny tråd så jag skriver här istället (hope you don't mind):

Har försökt få min XHTML 1.0 Strict / CSS-sida att bli Valid!
Tyvärr gick det inte, utan den upptäckte ett antal errors (jag är n00b)...

-----

xhtml.html:

1. DOCTYPE Override in effect! Any DOCTYPE Declaration in the document has been suppressed and the DOCTYPE for «XHTML 1.0 Strict» inserted instead. The document will not be Valid until you alter the source file to reflect this new DOCTYPE.

- Hur fixar jag det?

2. Har skapat en <form> med olika <input>-element. Den säger att man inte kan ha <input> just där, varför?

 26:                 <form method = "post" action = "adminLogin.php">
  27:                       <input class = "stajl" type = "text" size = "19" name = "user" /><br />
  28:                       <input class = "stajl" type = "password" size = "19" name = "pass" /><br />
  29:                       <input class = "stajl" type = "submit" value = "Validate" />
  30:                 </form>

3. Har en <hr> där jag angivit size = "1" och noshade = "noshade". Detta säger den är fel, hur kan jag ersätta detta med något annat eller i min CSS?

Visa signatur

[size="2"]There's no place like 127.0.0.1![/size]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av dLt
OK, vill inte starta en ny tråd så jag skriver här istället (hope you don't mind):

Har försökt få min XHTML 1.0 Strict / CSS-sida att bli Valid!
Tyvärr gick det inte, utan den upptäckte ett antal errors (jag är n00b)...

-----

xhtml.html:

1. DOCTYPE Override in effect! Any DOCTYPE Declaration in the document has been suppressed and the DOCTYPE for «XHTML 1.0 Strict» inserted instead. The document will not be Valid until you alter the source file to reflect this new DOCTYPE.

- Hur fixar jag det?

2. Har skapat en <form> med olika <input>-element. Den säger att man inte kan ha <input> just där, varför?

 26:                 <form method = "post" action = "adminLogin.php">
  27:                       <input class = "stajl" type = "text" size = "19" name = "user" /><br />
  28:                       <input class = "stajl" type = "password" size = "19" name = "pass" /><br />
  29:                       <input class = "stajl" type = "submit" value = "Validate" />
  30:                 </form>

3. Har en <hr> där jag angivit size = "1" och noshade = "noshade". Detta säger den är fel, hur kan jag ersätta detta med något annat eller i min CSS?

1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
forts. av sida.

2,3: lägg in 1an och kolla vilka fel du får sen.

Visa signatur

Griffon Sqd
The SketchUp Component Collection

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hm, nej.. Den vill inte... http://html.hybreed.dk/532/
Har provat lite olika varianter, men ingenting funkar. Den säger bara Override...

Visa signatur

[size="2"]There's no place like 127.0.0.1![/size]

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://validator.w3.org/check?uri=http://html.hybreed.dk/532/

Visa signatur

Griffon Sqd
The SketchUp Component Collection

Redigera
Citera flera Citera
Permalänk
Medlem
●

dLt: <form>-taggen kräver att du har <fieldset> också, annars kan du inte ha någon <input>

<form method = "post" action = "adminLogin.php">
<fieldset>
<input class = "stajl" type = "text" size = "19" name = "user" /><br />
<input class = "stajl" type = "password" size = "19" name = "pass" /><br />
<input class = "stajl" type = "submit" value = "Validate" />
</fieldset>
</form>

detta ger dig en ganska ful ram runt formuläret, men jag tror att du kan bli av med den genom att sätta form {display: inline;} inte helt säker dock, testa!

Redigera
Citera flera Citera
Permalänk
Medlem
●

blev av med den genom fieldset { border: 0; }
men jag kan inte bli av med doctype override, förstår inte vad som är fel..

Visa signatur

[size="2"]There's no place like 127.0.0.1![/size]

Redigera
Citera flera Citera
Permalänk
Medlem
●

validerade din sida, inga fel ju!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Har en fråga angående css också:
Kan man ha något som fungerar som en <iframe> i xhtml/css (iframe tillåts ju inte i strict).

Edit: http://validator.w3.org/check?uri=http%3A%2F%2Fwww26.brinkste...

Ändra till XHTML 1.0 Strict och ISO-8859-1 (Western Europe)!

Varför blir det override? Förstår inte!

Senast redigerat
Visa signatur

[size="2"]There's no place like 127.0.0.1![/size]

Redigera
Citera flera Citera
Permalänk
Medlem
●

din sida är ju godkänd.

Ändra till XHTML 1.0 Strict och ISO-8859-1 (Western Europe)!
Varför blir det override? Förstår inte!
Just för att du ändrar.

Visa signatur

Griffon Sqd
The SketchUp Component Collection

Redigera
Citera flera Citera
Permalänk
Medlem
●

dLt: Ja, <div style="width: 500px; height: 500px; overflow: auto;">en massa text som fyller rutan och som inte får plats på de 500x500 pixlarna</div>.

Visa signatur

Äntligen har jag fått svar på om vandrande pinnar kan gäspa. Det kan de inte. Ett av världens stora mysterier är löst.

Redigera
Citera flera Citera
1
Skriv svar