<b>REGISTER</b>

GFX-Sector - HTML, CSS


 
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » HTML Optimale Mitte. » Hello Guest [Login|Register]
Last Post | First Unread Post Print Page | Recommend to a Friend | Add Thread to Favorites

HTML, CSS
Einfache Scriptsprachen und deren Layout mit HTML und CSS
Post New Thread Post Reply

HTML Optimale Mitte.

     Deutsche Version  English version
Author
Post « Previous Thread | Next Thread »

Amphetamin
Zauberstabbenutzer

Spender


Avatar von Amphetamin

Registration Date: 20.05.2008
Posts: 22

Spacer
HTML Optimale Mitte.

HTML Optimale Mitte.

       
Hallo Leute,
Ich habe folgendes Problem ich arbeite mit Dreamweaver CS5 und will das die Seite in der genau in der mitte plaziert ist. wie mache ich das?

hier der Code:
php: 
1:

<title>Cellspac3r - iDevice Paradise</title>  <script type="text/javascript"> function MM_swapImgRestore() { //v3.0   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }  function MM_findObj(n, d) { //v4.01   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);   if(!x && d.getElementById) x=d.getElementById(n); return x; }  function MM_swapImage() { //v3.0   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script>  <style type="text/css"> body,td,th {     font-size: 14px;     color: #666; } </style>  <body onLoad="MM_preloadImages('Bilder/twitter_over.jpg','Bilder/facebook_over.jpg','Bilder/rss_over.jpg','Bilder/youtube _over.jpg','Bilder/devianart_over.jpg')"> <table width="500" border="0"  cellpadding="0" cellspacing="0">   <tr>     <th scope="col"><img src="Bilder/Unbenannt-2_01.jpg" width="33" height="299"></th>     <th scope="col"><img src="Bilder/Unbenannt-2_02.jpg" width="395" height="299"><img src="Bilder/header.jpg" width="317" height="299"></th>     <th scope="col"><table width="0" border="0" cellpadding="0" cellspacing="0">   <tr>     <th scope="col"><img src="Bilder/Unbenannt-2_04.jpg" width="481" height="72"></th>   </tr>   <tr>     <td><a href="http://twitter.com/cellspac3r" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Twitter','','Bilder/twitter_over.jpg',1)"><img src="Bilder/twitter.jpg" name="Twitter" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_07.jpg" width="8" height="32"><a href="http://www.facebook.com/pages/Cellspac3r-iDevice-Paradise/121936307872965" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Facebook','','Bilder/facebook_over.jpg',1)"><img src="Bilder/facebook.jpg" name="Facebook" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_09.jpg" width="8" height="32"><a href="http://www.google.de/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Rss','','Bilder/rss_over.jpg',1)"><img src="Bilder/rss.jpg" name="Rss" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_11.jpg" width="369" height="32"></td>   </tr>   <tr>     <td><img src="Bilder/Unbenannt-2_12.jpg" width="481" height="8"></td>   </tr>   <tr>     <td><a href="http://www.youtube.com/user/Cellspac3r" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Youtube','','Bilder/youtube _over.jpg',1)"><img src="Bilder/youtube.jpg" name="Youtube" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_14.jpg" width="8" height="32"><a href="http://cellspac3r.deviantart.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Deviantart','','Bilder/devianart_over.jpg',1)"><img src="Bilder/deviantart.jpg" name="Deviantart" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_16.jpg" width="409" height="32"></td>   </tr>   <tr>     <td><img src="Bilder/Unbenannt-2_17.jpg" width="481" height="155"></td>   </tr> </table> </th>     <th scope="col"><img src="Bilder/Unbenannt-2_05.jpg" width="54" height="299"></th>   </tr> </table> <p align="center">Startseite | News | Apps</p>
HTML Optimale Mitte. 27.12.2010 14:11 Amphetamin is offline Search for Posts by Amphetamin

kaltfrei
Buntstiftmaler


Avatar von kaltfrei

Registration Date: 31.01.2010
Posts: 87

Spacer
      

über css
margin: auto ?
HTML Optimale Mitte. 27.12.2010 14:15 kaltfrei is offline Search for Posts by kaltfrei

Amphetamin
Zauberstabbenutzer

Spender


Avatar von Amphetamin

Registration Date: 20.05.2008
Posts: 22

Thread Starter Thread Started by Amphetamin
Spacer
      

Ich habe noch nie mit CSS gearbeitet weißt du wie ich es machen muss? bzw. wie ich eine CSS datei in einen HTML hinzufüge?!

Mit freundlichen Grüßen.
HTML Optimale Mitte. 27.12.2010 14:23 Amphetamin is offline Search for Posts by Amphetamin

kaltfrei
Buntstiftmaler


Avatar von kaltfrei

Registration Date: 31.01.2010
Posts: 87

Spacer
      

Na dann sind noch einige Tutorials nötig Wink
Hier mal ein Link. Weitere findest du über Google

http://de.html.net/tutorials/css/
HTML Optimale Mitte. 27.12.2010 14:25 kaltfrei is offline Search for Posts by kaltfrei

Amphetamin
Zauberstabbenutzer

Spender


Avatar von Amphetamin

Registration Date: 20.05.2008
Posts: 22

Thread Starter Thread Started by Amphetamin
Spacer
      

quote:
Original von kaltfrei
Na dann sind noch einige Tutorials nötig Wink
Hier mal ein Link. Weitere findest du über Google

http://de.html.net/tutorials/css/

Vielendank ich lerne aufjedenfall von der Seite, aber brauche es dringend den Code und wie ich hinzufügen soll. Bitte Leute!

Mit freundlichen Grüßen.
HTML Optimale Mitte. 28.12.2010 16:28 Amphetamin is offline Search for Posts by Amphetamin

AzRalL AzRalL is a male
Polygonmeister


Avatar von AzRalL

Registration Date: 02.05.2010
Posts: 990
Location: Berlin
Program: Photoshop CS5
Deviantart: AzRaIL922

Spacer
      

ich denke in CSS müsste das in etwa so aussehen:

code: 
1:
2:
3:
4:
5:
6:
7:

body {

margin: auto;

}


das schreibst du in ne normale Textdatei und speicherst es als .css ab

dann gehste in dein Html Dokument und schreibst im Head Bereich:

<link rel="stylesheet" type="text/css" href="dateiname.css" />


http://azrail922.deviantart.com/

This post has been edited 2 time(s), it was last edited by AzRalL: 28.12.2010 16:35.
HTML Optimale Mitte. 28.12.2010 16:33 AzRalL is online Search for Posts by AzRalL

Amphetamin
Zauberstabbenutzer

Spender


Avatar von Amphetamin

Registration Date: 20.05.2008
Posts: 22

Thread Starter Thread Started by Amphetamin
Spacer
      

Nein leider funktioniert es nicht!

php: 
1:

<head><link rel="stylesheet" type="text/css" href="dateiname.css" /> </head>  <title>Cellspac3r - iDevice Paradise</title>  <script type="text/javascript"> function MM_swapImgRestore() { //v3.0   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }  function MM_findObj(n, d) { //v4.01   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);   if(!x && d.getElementById) x=d.getElementById(n); return x; }  function MM_swapImage() { //v3.0   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script>  <style type="text/css"> body,td,th {     font-size: 14px;     color: #666; } </style>  <body onLoad="MM_preloadImages('Bilder/twitter_over.jpg','Bilder/facebook_over.jpg','Bilder/rss_over.jpg','Bilder/youtube _over.jpg','Bilder/devianart_over.jpg')"> <table width="500" border="0"  cellpadding="0" cellspacing="0">   <tr>     <th scope="col"><img src="Bilder/Unbenannt-2_01.jpg" width="33" height="299"></th>     <th scope="col"><img src="Bilder/Unbenannt-2_02.jpg" width="395" height="299"><img src="Bilder/header.jpg" width="317" height="299"></th>     <th scope="col"><table width="0" border="0" cellpadding="0" cellspacing="0">   <tr>     <th scope="col"><img src="Bilder/Unbenannt-2_04.jpg" width="481" height="72"></th>   </tr>   <tr>     <td><a href="http://twitter.com/cellspac3r" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Twitter','','Bilder/twitter_over.jpg',1)"><img src="Bilder/twitter.jpg" name="Twitter" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_07.jpg" width="8" height="32"><a href="http://www.facebook.com/pages/Cellspac3r-iDevice-Paradise/121936307872965" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Facebook','','Bilder/facebook_over.jpg',1)"><img src="Bilder/facebook.jpg" name="Facebook" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_09.jpg" width="8" height="32"><a href="http://www.google.de/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Rss','','Bilder/rss_over.jpg',1)"><img src="Bilder/rss.jpg" name="Rss" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_11.jpg" width="369" height="32"></td>   </tr>   <tr>     <td><img src="Bilder/Unbenannt-2_12.jpg" width="481" height="8"></td>   </tr>   <tr>     <td><a href="http://www.youtube.com/user/Cellspac3r" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Youtube','','Bilder/youtube _over.jpg',1)"><img src="Bilder/youtube.jpg" name="Youtube" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_14.jpg" width="8" height="32"><a href="http://cellspac3r.deviantart.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Deviantart','','Bilder/devianart_over.jpg',1)"><img src="Bilder/deviantart.jpg" name="Deviantart" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_16.jpg" width="409" height="32"></td>   </tr>   <tr>     <td><img src="Bilder/Unbenannt-2_17.jpg" width="481" height="155"></td>   </tr> </table> </th>     <th scope="col"><img src="Bilder/Unbenannt-2_05.jpg" width="54" height="299"></th>   </tr> </table>

HTML Optimale Mitte. 28.12.2010 16:46 Amphetamin is offline Search for Posts by Amphetamin

Robbyn Robbyn is a male
Das ist ein Test.

Spender


Avatar von Robbyn

Registration Date: 31.03.2010
Posts: 2,138
Location: Düsseldorf
Program: Photoshop CS5
Forums: Showroom; Allgemeine Diskussion; Battle-Section

Spacer
      

Mach es so wie Azrail obwohl du auch CSS direkt in dein HTML Dokument schreiben kannst. Sieht dann zum Beispiel so aus:

code: 
1:
2:
3:
4:
5:

<style type="text/css">
{
margin: auto;
}
</style>


Das ganze dann einfach innerhalb von <body> schreiben.




Borussia <3


 
HTML Optimale Mitte. 28.12.2010 16:50 Robbyn is offline Homepage of Robbyn Search for Posts by Robbyn

Azraél Azraél is a male
Scharfzeichner


Avatar von Azraél

Registration Date: 21.09.2008
Posts: 139
Location: (Alten)bochum
Program: Creative Suite 5

Spacer
      

Die optimalste Variante

HTML:

code: 
1:
2:
3:

<div id="wrapper">
Hier kommt dein Code, bzw. das Layout rein!
</div>

CSS:
code: 
1:
2:
3:

*{margin:0;padding:0;}
body{text-align:center;}
#wrapper{text-align:left;margin:0 auto;width:999px;}


Dem Container mit der ID "wrapper" vergibst du die selbe Breite wie dem größten Element deines Layouts. Wahrscheinlich die Tabelle - das sieht in CSS so aus:
width:999px;

Der Body erhält text-align:center;.
Dadurch zentriert sich der Container auch in alten IE Versionen. Das text-align:left; im "wrapper" dient zur Aufhebung der Zentrierung, damit der Text wieder linksbündig ist.

margin:0 auto; - damit sagst du dem "wrapper" dass er nach oben 0px Abstand und sich automatisch horizontal zentrieren soll.
Margin kann 4 Werte aufweisen, die erste Zahl ist der obere Abstand, dann geht es im Uhrzeigersinn weiter (oben rechts unten links).
Wenn du nach oben ebenfalls zentrieren möchtest, musst du die 0 natürlich weg lassen.




I'm a designer, not a fucking screwdriver*
a global message for clients around the world who believe that a designer is a mere tool to execute their ugly ideas.

This post has been edited 1 time(s), it was last edited by Azraél: 28.12.2010 16:52.
HTML Optimale Mitte. 28.12.2010 16:52 Azraél is offline Homepage of Azraél Search for Posts by Azraél

Amphetamin
Zauberstabbenutzer

Spender


Avatar von Amphetamin

Registration Date: 20.05.2008
Posts: 22

Thread Starter Thread Started by Amphetamin
Spacer
      

Jungs es geht wirklich nicht!

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:

"<div id="wrapper">
<title>Cellspac3r - iDevice Paradise</title>


<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>


<style type="text/css">
body,td,th {
	font-size: 14px;
	color: #666;
}
</style>


<body onLoad="MM_preloadImages('Bilder/twitter_over.jpg','Bilder/facebook_over.jpg','Bilder/rss_over.jpg','Bilder/youtube _over.jpg','Bilder/devianart_over.jpg')">
<table width="500" border="0"  cellpadding="0" cellspacing="0">
  <tr>
    <th scope="col"><img src="Bilder/Unbenannt-2_01.jpg" width="33" height="299"></th>
    <th scope="col"><img src="Bilder/Unbenannt-2_02.jpg" width="395" height="299"><img src="Bilder/header.jpg" width="317" height="299"></th>
    <th scope="col"><table width="0" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <th scope="col"><img src="Bilder/Unbenannt-2_04.jpg" width="481" height="72"></th>
  </tr>
  <tr>
    <td><a href="http://twitter.com/cellspac3r" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Twitter','','Bilder/twitter_over.jpg',1)"><img src="Bilder/twitter.jpg" name="Twitter" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_07.jpg" width="8" height="32"><a href="http://www.facebook.com/pages/Cellspac3r-iDevice-Paradise/121936307872965" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Facebook','','Bilder/facebook_over.jpg',1)"><img src="Bilder/facebook.jpg" name="Facebook" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_09.jpg" width="8" height="32"><a href="http://www.google.de/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Rss','','Bilder/rss_over.jpg',1)"><img src="Bilder/rss.jpg" name="Rss" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_11.jpg" width="369" height="32"></td>
  </tr>
  <tr>
    <td><img src="Bilder/Unbenannt-2_12.jpg" width="481" height="8"></td>
  </tr>
  <tr>
    <td><a href="http://www.youtube.com/user/Cellspac3r" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Youtube','','Bilder/youtube _over.jpg',1)"><img src="Bilder/youtube.jpg" name="Youtube" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_14.jpg" width="8" height="32"><a href="http://cellspac3r.deviantart.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Deviantart','','Bilder/devianart_over.jpg',1)"><img src="Bilder/deviantart.jpg" name="Deviantart" width="32" height="32" border="0"></a><img src="Bilder/Unbenannt-2_16.jpg" width="409" height="32"></td>
  </tr>
  <tr>
    <td><img src="Bilder/Unbenannt-2_17.jpg" width="481" height="155"></td>
  </tr>
</table>
</th>
    <th scope="col"><img src="Bilder/Unbenannt-2_05.jpg" width="54" height="299"></th>
  </tr>
</table>
</div>"

und so sieht die css aus:
*{margin:0;padding:0;}
body{text-align:center;}
#wrapper{text-align:left;margin:0 auto;width:999px;}
</div>"


Edit by bpr: Bitte code tags benutzen!
HTML Optimale Mitte. 28.12.2010 16:59 Amphetamin is offline Search for Posts by Amphetamin

Azraél Azraél is a male
Scharfzeichner


Avatar von Azraél

Registration Date: 21.09.2008
Posts: 139
Location: (Alten)bochum
Program: Creative Suite 5

Spacer
      

Ein <div> Container gehört ausschließlich in den <body> Bereich und umschließt dein Layout, sodaß es zentriert werden kann.

In dein bereits vorhandenes <style type="text/css"> kommt der css Code rein.
Und die Breite des wrappers (width) musst du natürlich anpassen. Wahrscheinlich 500px, da deine Tabelle so breit ist.




I'm a designer, not a fucking screwdriver*
a global message for clients around the world who believe that a designer is a mere tool to execute their ugly ideas.
HTML Optimale Mitte. 29.12.2010 07:57 Azraél is offline Homepage of Azraél Search for Posts by Azraél
 
Spacer
   
GFX-Sector
unregistered


hat kein Avatar


Spacer

Have you enjoyed this topic?

If you were enjoying this post and if you keen on reading more interesting stuff then do not hesitate to complete the free sign up.

After the free registration you will gain access to all areas and you will be able to communicate with other artists from all over the world.

In addition you will benefit from our Photoshop and coding section as well as from our huge (hundreds of gigabytes) free resource section where you can find everything you will need to be a successful (web) designer/artist.

Sign up now and enjoy the advantages as a registered member.

(This website will be ad-free after a complete free sign up.)
New Post 29.12.2010 07:57  
Tree Structure | Board Structure
Post New Thread Post Reply
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » HTML Optimale Mitte.

Similar topics to HTML Optimale Mitte.
Thread
[Biete Leistung] [B] Erstelle Werbemittel (Banner and Grafiken) / Webdesigns (Forum: Archiv)
Bild in HTML xD (Forum: Fun & Spam)
[HTML/CSS] [HTML] Lauftext mit stoppenden Text [Anfänger] (Forum: HTML & CSS Tutorials)
Newsdesign [inkl. HTML-Code] (Forum: Archiv)
[Suche] Page Coder / HTML / PHP / u.s.w (Forum: Angebote und sonstige Anfragen)

 
Heutige TOP 10 Suchbegriffe:
Gfx Wallpaper Cro One Piece Wallpaper Cro Dreieck Cro Hd Wallpaper Schwarzer Mann Gfx Effect Stocks Pack Bedienungsanleitung Fujifilm Finepix S2950 Audi Rs8
HTML Optimale Mitte. : HTML, CSS (Permalink)
  Sectorbereich   Forenbereich   Battlesection