Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Centrera sida oavsett upplösning på skärmen

roger_malmö

Startad av roger_malmö,
i Webbutveckling

Rekommendera Poster

roger_malmö

roger_malmö

Postad
Postad

Om man använder Dreamweaver och css och placering finns alternativen absolut ,fast, relativ, statisk men vad jag förstår gör detta inte saken så mkt bättre. LÅt säga att jag har vänstermarginal på 88 pxl i inställningen placering, och då blir ju sidan vänsterjusterad vid större upplösning än 1024 exvis, skall jag välja %, ems eller ngt annat i den inställningen och isåfall hur vet jag om det skall vara ex 34% eller xx ems ?

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

Använde margin:0 auto; på divboxen som omsluter hemsidan.

Sätt även en fast storlek på boxen.

 

Länk till kommentar
Dela på andra webbplatser
roger_malmö

roger_malmö

Postad
  • Trådskapare
Postad

TACK för svaret såhär ser koden ut skulle du vilja visa var jag skall sätta in

margin:0 auto och den fasta storleken på boxen

<div id="apDiv1"></div>

<div class="apDiv2" id="apDiv2">

Edit:testade att lägga in margin:0 auto och hela diven hamnade längst uttill vänster, förmodar att du menar att jag skall välja ett annat värde än 0

 

#apDiv6 {

position:absolute;

left:98px;

top:225px;

width:263px;

height:122px;

z-index:5;

 

[inlägget ändrat 2008-06-21 20:34:35 av roger_malmö]

[inlägget ändrat 2008-06-21 20:40:48 av roger_malmö]

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

Ett grundex du kan utgå ifrån:

[log]

<!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" lang="sv" xml:lang="sv">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Language" content="sv" />
<title>Untitled</title>
<style type="text/css">
* {margin:0;padding:0;}
#a {
margin:10px auto;
background:red;
width:500px;
height:500px;
}
</style>
</head>

<body>
<div id="a"></div>
</body>
</html>

[/log]

#apDiv6
Vilken div är detta?

 

Länk till kommentar
Dela på andra webbplatser
roger_malmö

roger_malmö

Postad
  • Trådskapare
Postad

Poäng för hjälpen så här långt !

Har kommit så långt att det återstår att få bla header att flyta ut i hela fönstret, kan jag då bara diven ex 1200 px stor för att klara större skärmar (se bild)

 

 

[inlägget ändrat 2008-06-22 11:08:41 av roger_malmö]

[inlägget ändrat 2008-06-22 14:05:07 av roger_malmö]

[bild bifogad 2008-06-22 14:05:26 av roger_malmö]

[inlägget ändrat 2008-06-22 14:07:09 av roger_malmö]

1060226_thumb.jpg

Länk till kommentar
Dela på andra webbplatser
roger_malmö

roger_malmö

Postad
  • Trådskapare
Postad

har testat och testat men får inte allt att ligga centrerat i högre upplösning

bifogar hela koden om ngn vill se och visa var jag skall göra erfoderliga ändringar för att lyckas

<!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" xml:lang="en" >
<head>
<title>Afghanska F&ouml;reningen</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
 <div id="header">
   <h1>Afghanska F&ouml;reningen</h1>
 </div>
 <div id="title">
   <p>AFGHANSKA F&Ouml;RENINGEN MALM&Ouml;</p>
 </div>
 <div id="leftcol">
   <h2>MENY</h2>
   <p>&nbsp;</p>
   <div id="navcontainer">
     <ul id="navlist">
       <li id="active"><a href="../index.html" id="current">L&auml;nk1</a></li>
       <li><a href="../sida2.htm">L&auml;nk 2</a></li>
       <li><a href="../sida3.htm">L&auml;nk 3</a></li>
       <li><a href="../sida4.htm">L&auml;nk 4</a></li>
       <li><a href="../sida4.htm">L&auml;nk 5</a></li>
     </ul>
   </div>
   <ul>
     <li>Lorem ipsum dolor sit amet.</li>
     <li>Mauris consectetuer congue ante.</li>
     <li>Sed pulvinar consectetuer risus.</li>
     <li>Maecenas placerat laoreet nisi.</li>
     <li>Donec faucibus ligula non purus.</li>
   </ul>
 </div>
 <div id="content">
   <h2>V&Auml;LKOMMEN</h2>
   <p>Donec fringilla. Nullam consectetuer fermentum enim. Vestibulum vitae  neque dapibus velit auctor pulvinar. Fusce arcu ligula, fermentum id,  aliquet nec, tincidunt eget, diam. Curabitur nibh dolor, euismod in,  aliquet nec, dapibus et, risus. Nam a urna. Suspendisse mauris augue,  commodo vel, tempus nec, lacinia et, pede. Etiam sagittis elit sodales  odio. Phasellus consectetuer egestas velit. Ut a turpis eu dui vehicula  consequat. Curabitur ut mi nec turpis gravida imperdiet. Aenean  consectetuer, augue vitae molestie laoreet, enim ligula eleifend arcu,  in sodales sem dolor id ligula.</p>
   <p><img src="../images/image.jpg" alt="" /></p>
   <p> Fusce lorem. Suspendisse sit amet lectus. Nam laoreet, diam vel consequat consequat, eros nunc consectetuer libero, non elementum urna dui sed wisi. Phasellus vitae sapien. Nunc vestibulum malesuada dolor. Phasellus commodo neque nec purus. Praesent nec wisi id augue pulvinar ultrices. Ut malesuada, orci eget bibendum varius, sem ligula ultricies urna, at pharetra justo elit in diam. Vestibulum sit amet felis. In velit. Aenean sagittis pede vitae sem. In hac habitasse platea dictumst. Sed eleifend molestie est. Phasellus enim est, facilisis vel, placerat facilisis, ultricies sit amet, erat. Nullam sit amet velit et wisi dignissim placerat. Phasellus non lorem nec nunc aliquam lobortis. Nullam nec lectus. </p>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec nibh in massa pellentesque scelerisque. Nullam in odio. Curabitur accumsan aliquet leo. Sed id nibh. Sed tempor. Integer ultricies. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec nibh in massa pellentesque scelerisque. Nullam in odio. Curabitur accumsan aliquet leo. Sed id nibh. Sed tempor. Integer ultricies.</p>
 </div>
 <div id="footer">
   <p align="left">Copyright Afghanska F&ouml;reningen - 2008</p>
 </div>
</div>
</body>
</html>

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad
bifogar hela koden
CSS-koden?

 

Vad är detta?

<ul>
     <li>Lorem ipsum dolor sit amet.</li>
     <li>Mauris consectetuer congue ante.</li>
     <li>Sed pulvinar consectetuer risus.</li>
     <li>Maecenas placerat laoreet nisi.</li>
     <li>Donec faucibus ligula non purus.</li>
</ul>

Varför har du en div med id="title" och inte alltsamman i head-diven?

 

<p>& nbsp;</p>
Detta ska du sluta att använda för att justera dem olika elementen mot varandra.

Ändra h2:s botten-marginal istället.

 

[inlägget ändrat 2008-06-22 17:18:46 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser
roger_malmö

roger_malmö

Postad
  • Trådskapare
Postad

Jättesnällt att du tar dig tid att titta ,förstår att du såklart vill att man själv skall kunna lösa problemen med din hjälp men det gör man knappast bara genom att exläsa Ändra h2:s botten-marginal istället. Jaha och hur då ?

Men nu var det ju inte huvudfrågan utan den gällde hur jag centrerar sidan.

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad
Men nu var det ju inte huvudfrågan utan den gällde hur jag centrerar sidan.
Japp och jag efterfrågar css-koden som första punkt i mitt tidigare inlägg. Utan den är det svårt då vi inte vet alls hur du tänkt dig det och sitta och skriva en egen chansartad css-kod är ju dumt.

Använder du margin:0 auto; på container-diven?

 

men det gör man knappast bara genom att exläsa
Du använder ju en <h2>-tagg på sidan där du under använder <p>& nbsp;</p> så jag trodde du enkelt skulle hitta det.

Margin kan du sätta på fyra olika sidor i följande turordning vid kortformen; uppe,höger,nere och vänster.

Antingen gör man det med(0 som ex-värde):

margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;

Eller så gör man det i en gemensam deklaration(kortform):

margin:0 0 0 0;

Eller(vid 0 som värde på alla sidor):

margin:0;

 

 

 

Länk till kommentar
Dela på andra webbplatser
roger_malmö

roger_malmö

Postad
  • Trådskapare
Postad

Sorry om jag lät barsk det var inte min mening, försöker att lära mig css , inte så lätt alltid

body {
margin : 0;
padding : 0;
font : 73%/1.7em "lucida sans", "Trebuchet MS", verdana, tahoma, arial, sans-serif;
background : #333 url(images/bgd.jpg) no-repeat;
color : #eee;
position: absolute;
}
a:link, a:visited, a:active {
color : #9BBA7F;
background : inherit;
}
a:hover {
color : #7A7B75;
background : inherit;
}
h1 {
margin : 0;
padding : 20px;
font-size : 130%;
color : #adae75;
background : inherit;
}
#content h2 {
padding : 10px 0 10px 30px;
margin : 0;
font-size : 120%;
text-transform : uppercase;
color : #adae75;
background : inherit;
}
#container {
width : 1000px;
margin-left : 0;
margin-right : auto;
color : #d6ddbc;
background : inherit;
}
#header {
width : 1000px;
height : 172px;
border-bottom : 0 solid #ccc;
background : transparent url(images/head.jpg) no-repeat;
margin-bottom : 0;
left: 50%;
top: 50%;
clip: rect(250px,auto,auto,450px);
}
#title {
width : 1000px;
height : 50px;
margin-bottom : 10px;
background : transparent url(images/title.jpg) no-repeat;
}
#title p {
text-align : center;
text-transform : uppercase;
letter-spacing : 5px;
color : #adae75;
background : inherit;
font-size : 130%;
padding : 20px 0 20px 0;
}
#leftcol {
width : 260px;
float : right;
padding : 5px 0 5px 0;
}
#leftcol p {
padding : 5px 20px 5px 20px;
margin : 0;
}
#leftcol h2 {
padding : 10px 0 10px 20px;
margin : 0;
font-size : 120%;
text-transform : uppercase;
color : #adae75;
background : inherit;
}
#leftcol ol, ul {
font-size : 90%;
color : #7A7B75;
background : inherit;
}
#content {
margin-right : 0;
width : 625px;
}
#content p {
padding : 5px 20px 5px 30px;
margin : 0;
}
#footer {
width : 1000px;
height : 50px;
clear : right;
border-top : 1px solid #666;
background : inherit;
color : #eee;
padding : 5px 0;
}
#footer p {
text-align : left;
padding-left : 25px;
font-size : 0.9em;
}
#navcontainer {
width : 200px;
margin-left : 20px;
padding-bottom : 20px;
}
#navcontainer ul {
margin-left : 0;
padding-left : 0;
list-style-type : none;
}
#navcontainer a {
display : block;
padding : 3px;
width : 160px;
background-color : #333;
color : #adae75;
border-bottom : 1px solid #adae75;
}
#navcontainer a:link, #navlist a:visited {
background : inherit;
color : #adae75;
text-decoration : none;
}
#navcontainer a:hover {
background-color : #424a33;
color : #d6ddbc;
}

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

Det borde centrera sig om du ändrar container-värdena till:

#container {
width : 1000px;
margin:0 auto;
color : #d6ddbc;
background : inherit;
}

Övrig css-kod har jag inte tittar igenom.

 

Länk till kommentar
Dela på andra webbplatser
roger_malmö

roger_malmö

Postad
  • Trådskapare
Postad

Hmm undrar om jag inte börjar förstå äntligen, jag har en del olika som ex header, container och liknande har nu provat att lägga in "margin:0 auto;"på ett par av de och tro`t om du vill men det ser genast bättre ut.

MEN då undrar jag ju som följdfråga inte skall man behöva göra på mitt omständiga sätt , kan /skall man göra en cointainer som täcker hela den tänkta sidan och DÄR lägga "margin:0 auto;" och sedan stoppa in de divar man behöver i den befitliga cointainern och dessa är underordnade och visas centrerade.

 

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad
inte skall man behöva göra på mitt omständiga sätt
Nej, du har gjort det lite omständigt!

 

kan /skall man göra en cointainer som täcker hela den tänkta sidan och DÄR lägga "margin:0 auto;" och sedan stoppa in de divar man behöver i den
Japp! Det var ju det mitt grundex igår vid 21.27 gjorde åt dig ;)

 

Börja med att överst i css-koden lägga:

* {margin:0;padding:0;}

Nu är allt nollställt. Sätt sedan margin resp padding på dem element du behöver ändra dessa värden på, t ex på h2-elementet.

 

[inlägget ändrat 2008-06-22 19:39:12 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser
roger_malmö

roger_malmö

Postad
  • Trådskapare
Postad

Puhh , tack för lektionen ! Det satt hårt åt i min gamla hjärna men nu tror jag att jag är på rätt spår .

 

Länk till kommentar
Dela på andra webbplatser
roger_malmö

roger_malmö

Postad
  • Trådskapare
Postad

Det var en fråga kvar , nu när vi kommit så långt att vi kan centrera sidan oavsett upplösning, ett problem, texten ! En font på 12 pxl blir oläsbar på en widescreen skärm, kom just på att kanske det fungerar att via Visa textstorlek går att åtgärda detta , är det så ?

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

Visst går det men bäst blir det om du använder em-enheter för font-storleken.

 

Länk till kommentar
Dela på andra webbplatser
mac3

mac3

Postad
Postad 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>sida</title>

<style type="text/css">
html{
	height: 100%; 
	width: 100%;
}
body{
	height: 100%; 
	width: 100%;
	padding: 0px;
	margin: 0px;
}
</style>
</head>
<body>
<table style="height: 100%; width: 100%;" cellspacing="0" cellpadding="0">
<tr>
 <td align="center" valign="middle">
   mitt ifrån top och vänster 
 </td>
</tr>
</table>
</body>
</html>

 

eller

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>sida</title>
</head>
<body style="margin: 0px; padding: 0px;">
 <div style="margin-left: auto; margin-right: auto; border: 1px solid Black; margin-top: 10px; width: 10%;">center</div>
</body>
</html>

 

mvh

 

mac3

 

KOD-taggar tillagda av moderator

 

[inlägget ändrat 2008-06-23 09:41:08 av Cluster]

Länk till kommentar
Dela på andra webbplatser
roger_malmö

roger_malmö

Postad
  • Trådskapare
Postad

Nu blev det förvirrat, är detta ett förslag på min ursprungliga fråga ?

Var skall den kiden läggas ? IDirekt på sidan eller i css mallen ?

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad
Nu blev det förvirrat
Ja...;)

Tror han ville visa hur man får en sida att täcka hela fönstret oavsett upplösning.

 

Länk till kommentar
Dela på andra webbplatser
mac3

mac3

Postad
Postad

ja , jag gjorde två förslag på "Centrera sida oavsett upplösning på skärmen "

 

för att Jag vet inte hur du har tänkt dig.

 

Den första förslag har css mallen Direkt på sidan och mellan html taggarna

 

jag gjorde så att jag sätter mått på både <html> och <body> på 100% på höjden och 100% på bredden

 

sen tog jag in en tabell med en cell, tabell fick måtten 100% på höjden och 100% på bredden. sen efter fick cellen egenskaperna align="center" valign="middle" det är = med mitt från toppen och vänster.

 

då kan man göra sidan i cellen med Centrera sida oavsett upplösning på skärmen.

 

den andra förslaget är

jag tog in en div-box. den få egenskaperna yttermarginalsvänster och yttermarginalshöger på auto. sen måste man sätta ett värde på bredden

för få Centrerat.

 

jag rekommenderar att du går in på http://www.webbdesignskolan.com/ på CSS - grunder och Dreamweaverskolan.

 

 

mvh mac3

 

 

Länk till kommentar
Dela på andra webbplatser
mac3

mac3

Postad
Postad

hejsan

 

svar nej det är bästa är i % allså font-size: 75%;

 

mvh

 

ifrån w3c-webbdesigner

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...