Plassere designet i midten av skjermbildet ?

RedRocK · 18. februar 2006

Hei!

Når jeg har slicet et layout i photoshop, og lagret det som et html dokument! Blir designet plassert helt ut til venstre! Jeg har lenge fundert på hvordan jeg kan få midtstilt hele greia ?

Lovskogen · 18. februar 2006

I og med at du bruker photoshop til lage HTML, vet du hva hva CSS er?

RedRocK · 18. februar 2006

egentlig ikke nei Har hørt om det, men aldri vært borti det før

uranus · 18. februar 2006

Lag en div:

<div style="margin: 0 auto;">Dette kommer i midten.</div>

Hvis du har: <div style="margin: 0 auto;"> på toppen av siden din, så plasserer du all koden din etter den, så har du </div> på slutten. Da vil hele siden være midtstilt.

Dette er CSS.

Lovskogen · 18. februar 2006

Det er inline CSS, bruk heller et separat stilark.

uranus · 18. februar 2006

Ja jeg vet det, jeg ville også anbefalt det men siden han ikke kan css tenkte jeg det er greit å starte sånn.

Lag en css stilark, lag body {} med litt font greier og slikt. Lag også en div som heter f.eks #wrap.

Da gjør du det samme som istad, bare <div id="wrap"> istedet.

RedRocK · 25. mars 2006

mhmmm, men hvordan gjør jeg slik at siden min leser av stilarket ?

JohnRichard · 25. mars 2006

Legger følgende inn mellom <head> og </head>

<link rel="stylesheet" type="text/css" href="Style.css" media="screen" title="style">

bytt ut "Style.css" med navnet på din fil

RedRocK · 25. mars 2006

Takk, men jeg valgte å bruke sånn inline css! Jeg har greid å få midtstilt designet. Men teksten vil ikke følge etter

Hva har jeg gjort feil !?

Endret 25. mars 2006 av RedRocK

RedRocK · 25. mars 2006

Ingen som vet noe ?

neivoll · 25. mars 2006

Kan du legge ut kode eller link så er det lettere for folk å hjelpe.

RedRocK · 25. mars 2006

</style><div align="center">
<html>
<head>
<title>design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #969696;
}
#Layer1 {
position:absolute;
left:80px;
top:292px;
width:749px;
height:17px;
z-index:1;
}
.style2 {	font-size: 14;
font-family: Arial, Helvetica, sans-serif;
}
.style3 {	font-size: 14;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
}
#Layer2 {
position:absolute;
left:82px;
top:739px;
width:153px;
height:21px;
z-index:2;
}
#Layer3 {
position:absolute;
left:81px;
top:293px;
width:748px;
height:17px;
z-index:1;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#Layer4 {
position:absolute;
left:79px;
top:291px;
width:750px;
height:22px;
z-index:1;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (design.psd) -->
<div id="Layer4">
 <table width="751" border="0">
   <tr>
     <td>Dette skal i midten, men det kommer ikke der :S </td>
   </tr>
 </table>
</div>
<table id="Table_01" width="908" height="770" border="0" cellpadding="0" cellspacing="0">
<tr>
 <td colspan="5">
 	<img src="images/design_01.jpg" width="908" height="18" alt=""></td>
</tr>
<tr>
 <td rowspan="4">
 	<img src="images/design_02.gif" width="4" height="751" alt=""></td>
 <td colspan="3">
 	<img src="images/design_03.gif" width="900" height="33" alt=""></td>
 <td rowspan="4">
 	<img src="images/design_04.gif" width="4" height="751" alt=""></td>
</tr>
<tr>
 <td colspan="3">
 	<img src="images/design_05.jpg" width="900" height="198" alt=""></td>
</tr>
<tr>
 <td colspan="3">
 	<img src="images/design_06.gif" alt="" width="900" height="34" border="0"></td>
</tr>
<tr>
 <td>
 	<img src="images/design_07.gif" width="71" height="486" alt=""></td>
 <td>
 	<img src="images/design_08.gif" width="760" height="486" alt=""></td>
 <td>
 	<img src="images/design_09.gif" width="69" height="486" alt=""></td>
</tr>
<tr>
 <td colspan="5">
 	<img src="images/design_10.gif" width="908" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
<div\>

RedRocK · 25. mars 2006

Der har dere koden, selve siden kan dere se her: http://www.redrock.arkhost.co.uk/rx/

JiGGe · 25. mars 2006

Hei jeg kan hjelpe deg med siden...

Kopier dette, det skal funke:

</style><div align="center">
<html>
<head>
<title>design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #969696;
}
#Layer1 {
position:absolute;
left:80px;
top:292px;
width:749px;
height:17px;
z-index:1;
}
.style2 {	font-size: 14;
font-family: Arial, Helvetica, sans-serif;
}
.style3 {	font-size: 14;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
}
#Layer2 {
position:absolute;
left:82px;
top:739px;
width:153px;
height:21px;
z-index:2;
}
#Layer3 {
position:absolute;
left:81px;
top:293px;
width:748px;
height:17px;
z-index:1;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#Layer4 {
position:absolute;
left:79px;
top:291px;
width:750px;
height:22px;
z-index:1;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (design.psd) -->
<div id="Layer4">
 <td colspan="0" rowspan="0" width="751" height="" valign="top" background="images/design_08.gif">

   <tr>
     <td>Dette skal i midten, men det kommer ikke der :S </td>
   </tr>
 </table>
</div>
<table id="Table_01" width="908" height="770" border="0" cellpadding="0" cellspacing="0">
<tr>
 <td colspan="5">
 	<img src="images/design_01.jpg" width="908" height="18" alt=""></td>

</tr>
<tr>
 <td rowspan="4">
 	<img src="images/design_02.gif" width="4" height="751" alt=""></td>
 <td colspan="3">
 	<img src="images/design_03.gif" width="900" height="33" alt=""></td>
 <td rowspan="4">
 	<img src="images/design_04.gif" width="4" height="751" alt=""></td>

</tr>

<tr>
 <td colspan="3">
 	<img src="images/design_05.jpg" width="900" height="198" alt=""></td>
</tr>
<tr>
 <td colspan="3">
 	<img src="images/design_06.gif" alt="" width="900" height="34" border="0"></td>

</tr>
<tr>

 <td>
 	<img src="images/design_07.gif" width="71" height="486" alt=""></td>
 <td>
 	<img src="images/design_08.gif" width="760" height="486" alt=""></td>
 <td>
 	<img src="images/design_09.gif" width="69" height="486" alt=""></td>

</tr>
<tr>
 <td colspan="5">

 	<img src="images/design_10.gif" width="908" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
<div\>

Håper det funker. Funket for meg.

25. mars 2006

Der har dere koden, selve siden kan dere se her: http://www.redrock.arkhost.co.uk/rx/

5810568[/snapback]

Hadde du skrevet korrekt HTML hadde det nok gått bedre. Du skal ikke ha noen div-er før <html> i uansett, og for at et element skal kunne midstilles må det ha noe med fast bredde å forholde seg til. Eksempel;

CSS:

div#wrap {
   height: 100px;
   width: 100px;
}

div#centered {
   height: 50px;
   width: 50px;
   margin: 0 auto;
}

JiGGe · 25. mars 2006

Sånn denne funker


</style><div align="center">
<html>
<head>
<title>design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #969696;
}
#Layer1 {
position:absolute;
left:80px;
top:292px;
width:749px;
height:17px;
z-index:1;
}
.style2 { font-size: 14;
font-family: Arial, Helvetica, sans-serif;
}
.style3 { font-size: 14;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
}
#Layer2 {
position:absolute;
left:82px;
top:739px;
width:153px;
height:21px;
z-index:2;
}
#Layer3 {
position:absolute;
left:81px;
top:293px;
width:748px;
height:17px;
z-index:1;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#Layer4 {
position:absolute;
left:00px;
top:291px;
width:750px;
height:22px;
z-index:1;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (design.psd) -->

<table id="Table_01" width="908" height="770" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
 <img src="http://www.redrock.arkhost.co.uk/rx/images/design_01.jpg" width="908" height="18" alt=""></td>

</tr>
<tr>
<td rowspan="4">
 <img src="http://www.redrock.arkhost.co.uk/rx/images/design_02.gif" width="4" height="751" alt=""></td>
<td colspan="3">
 <img src="http://www.redrock.arkhost.co.uk/rx/images/design_03.gif" width="900" height="33" alt=""></td>
<td rowspan="4">
 <img src="http://www.redrock.arkhost.co.uk/rx/images/design_04.gif" width="4" height="751" alt=""></td>

</tr>

<tr>
<td colspan="3">
 <img src="http://www.redrock.arkhost.co.uk/rx/images/design_05.jpg" width="900" height="198" alt=""></td>
</tr>
<tr>
<td colspan="3">
 <img src="http://www.redrock.arkhost.co.uk/rx/images/design_06.gif" alt="" width="900" height="34" border="0"></td>

</tr>
<tr>

<td>
 <img src="http://www.redrock.arkhost.co.uk/rx/images/design_07.gif" width="71" height="486" alt=""></td>
<td colspan="0" rowspan="0" width="760" height="486" valign="top" background="http://www.redrock.arkhost.co.uk/rx/images/design_08.gif">
<br>
Vis du skriver her så funker alt veldig bra....
<br>
ejkgeopijeopj
<br>
egfsfsg
</td>
<td>
 <img src="http://www.redrock.arkhost.co.uk/rx/images/design_09.gif" width="69" height="486" alt=""></td>

</tr>
<tr>
<td colspan="5">

 <img src="http://www.redrock.arkhost.co.uk/rx/images/design_10.gif" width="908" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
<div\>

25. mars 2006

Sånn denne funker
*søppel*
5810750[/snapback]

Eh, nei? Som jeg sa; ingen <div> før <html>.

JiGGe · 25. mars 2006

Sånn denne funker
*søppel*
5810750[/snapback]
Eh, nei? Som jeg sa; ingen <div> før <html>.

5810768[/snapback]

Jeg gidder ikke skjekke det... Jeg fiksa bare at teksten kom der den skulle jeg...

Eh, nei?

Eh, jo

25. mars 2006

Jeg gidder ikke skjekke det... Jeg fiksa bare at teksten kom der den skulle jeg...

5810805[/snapback]

Hjelper ikke om teksten kommer der den skal om HTML-koden er 100% feil. Du fester ikke bilder på veggen med tømmerspiker bare fordi de ellers vil henge skjevt

JiGGe · 25. mars 2006

Jeg gidder ikke skjekke det... Jeg fiksa bare at teksten kom der den skulle jeg...

5810805[/snapback]

Hjelper ikke om teksten kommer der den skal om HTML-koden er 100% feil. Du fester ikke bilder på veggen med tømmerspiker bare fordi de ellers vil henge skjevt

5810822[/snapback]

Hehe, okda litt dumt sakt av meg. Får jeg lov til og si at jeg ikke hadde tid på og fikse på hele html koden da?

Plassere designet i midten av skjermbildet ?

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Gjest Slettet+6132

Lenke til kommentar

Lenke til kommentar

Gjest Slettet+6132

Lenke til kommentar

Lenke til kommentar

Gjest Slettet+6132

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer