Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 21.07.2008 18:18
Titel
|
|
|
hast du das wirklich ausprobiert?
|
|
|
|
|
MarcelP
Threadersteller
Dabei seit: 15.07.2008
Ort: -
Alter: 30
Geschlecht:
|
Verfasst Mo 21.07.2008 18:22
Titel
|
|
|
hab nur den ersten vorschlag von dir, bevor du den beitrag bearbeitet hast probiert
ok, da ich erst seit kurzem mit html arbeite, weiß ich leider nicht so genau was ein wrapper ist, geschweige denn wie man den benutzt...
kannst vllt. ganz kurz erklären wie ich das mache?
bist echt ne riesen hilfe für mich
Zuletzt bearbeitet von MarcelP am Mo 21.07.2008 18:26, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 21.07.2008 18:34
Titel
|
|
|
CSS
Code: |
* {
margin: 0;
padding: 0;
}
body {
background:#ffffff;
}
html, body {
margin:0;
padding:0;
height:100%;
}
.hidden {
display:none;
}
div#wrapper {
position: relative;
margin:auto auto;
width:800px;
min-height: 100%;
background:#cccccc;
}
/* IE - Hack */
* html div#wrapper {
height:100%;
}
/* IE - Hack */
dein weiteres css
...
|
HTML
Code: |
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<title></title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<style type="text/css" media="all">@import "css/deincssfile.css";</style>
</head>
<body>
<div id="wrapper">
hier drinnen dein weitere sourcecode.
</div>
</body>
</html>
|
|
|
|
|
|
MarcelP
Threadersteller
Dabei seit: 15.07.2008
Ort: -
Alter: 30
Geschlecht:
|
Verfasst Mo 21.07.2008 19:19
Titel
|
|
|
ok, entweder es funktioniert nicht oder ich bin echt ein hoffnungsloser fall:
weiß jetzt überhaupt nicht, wie ich meinen code umändern muss um es zu schaffen
tut mir echt leid falls ich nerve, bin halt erst seit ner woche mit html dran...
das ist jetzt die version, die mit deinen tipps überarbeitet wurde (warscheinlich 100% falsch )
Komplette version:
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Peifer+Schulz</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-image: url(Fertiges%20Logo.jpg);
background-repeat: no-repeat;
background-position:50% 50%;
background-color: #4EA1AD;
}
a:link {
color: #78B8C1;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #78B8C1;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#apDiv1 { /* Galerie */
position:relative;
margin:auto auto;
left:248px;
top:5px;
width:441px;
height:601px;
z-index:1;
background-color: #EAEAEA;
}
#apDiv1#wrapper {
position: relative;
margin:auto auto;
width:800px;
min-height: 100%;
background:#cccccc;
}
* html apDiv1#wrapper {
height:100%;
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="apDiv1">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','447','height','600','src','Gallery','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Gallery' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="447" height="600">
<param name="movie" value="Gallery.swf" />
<param name="quality" value="high" />
<embed src="Gallery.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="447" height="600"></embed>
</object>
</noscript></div>
</body>
</html>
|
apdiv1 muss auf die rechte seite des layouts (im video gezeigt)
der background ist 50% 50% positioniert, also genau in der mitte,
wenn ich die seite kliener/größer ziehe verändert sich der background , das div element bleibt vertikal an seiner position
Zuletzt bearbeitet von MarcelP am Mo 21.07.2008 19:36, insgesamt 2-mal bearbeitet
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 21.07.2008 19:34
Titel
|
|
|
ja sorry das ich das sagen muß,
aber das ist wirklich nicht gut.
ich habe dir doch alles vorgegeben.
ich habe eigentlich keine lsut dir jetzt dein zeug zusammen zu basteln.
du mußt deinen div '#apDiv1' als kindelement des divs '#wrapper' anlegen.
d.h. im css file (egal ob eingebunden oder nicht) muß die deklaration nach dem wrapper erfolgen.
und im HTML file in dem div '#wrapper' sitzen
Code: |
<div id="wrapper">
<div id="apDiv1"></div>
</div>
|
Zuletzt bearbeitet von Kash am Mo 21.07.2008 19:39, insgesamt 1-mal bearbeitet
|
|
|
|
|
MarcelP
Threadersteller
Dabei seit: 15.07.2008
Ort: -
Alter: 30
Geschlecht:
|
Verfasst Mo 21.07.2008 19:39
Titel
|
|
|
dann werd ich jetzt nochn paar mal probieren...
eine Frage:
muss ich den wrapper umbenennen und apdiv1 löschen?
dann versteh ich's vllt.
Kann ich vollkommen verstehen dass du mir nicht mehr helfen willst
Würd ich an deiner Stelle auch nicht mehr
Kein Problem, vielleicht klappts ja jetzt...
klappt leider nicht
trotzdem Vielen vielen dank
Zuletzt bearbeitet von MarcelP am Mo 21.07.2008 19:59, insgesamt 4-mal bearbeitet
|
|
|
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Mo 21.07.2008 20:29
Titel
|
|
|
Moin
nicht so schnell den Kopf in den Sand stecken
Du solltest das Problem ganz anders angehen: Du hast ein Hintergrundbild. Das würde ich nicht dem body zuweisen, sondern einem div, dass du um deine ganze Seite legst (in dem Beispiel von Kash heißt dieser #wrapper, kann aber natürlich auch jeden anderen Namen tragen).
Nun hast du dieses Div und kannst das positionieren wie du willst, eben auch zentriert, wie anfänglich das Hintergrundbild.
Vorteil: Die restlichen Objekte, wie deine Flashgalerie kannst du leichter positionieren.
Kannst du mal dein Hintergrundbild herzeigen, damit man da schnell mal ein Beispiel machen kann. Ist ja keine komplizierte Sache, man muss das nur richtig angehen.
Ein Meister ist noch nicht vom Himmel gefallen, also keine Sorge, wenn du nach einer Woche noch nicht alles von HTML und CSS verstehst
Mach dich mal schlau in Sachen Vererbung und Positionierung in CSS
http://www.css4you.de/wscss/css08.html
http://www.yaml.de/
http://blog.html.it/layoutgala/
etc, einfach schauen wies gemacht wurde
|
|
|
|
|
MarcelP
Threadersteller
Dabei seit: 15.07.2008
Ort: -
Alter: 30
Geschlecht:
|
Verfasst Mo 21.07.2008 23:36
Titel
|
|
|
Hier das Hintergrundbild:
Foto bei Flickr
die Website ist halt noch im sehr frühen Anfangsstatus
auf die linke Seite nter das Logo kommt die Navigation, die ganz rechte hellblaue Spalte wir mit der Flashgalerie ausgefüllt, welche die gleichen Ausmaße wie die Spalte hat (und Hintergrundfarbe)
Dieses Layout wird in der Mitte der Site platziert und der hintergrund wird in dem Türkis des Logos gefärbt.
Also ich glaub ich hab jetzt auch verstanden was man da macht (ungefähr )
Ich bau also nen großen div container mit den ausmaßen der Hintergundgrafik und platziere in Kind-Elementen den Inhalt in diesem großen div tag und dan kann ich den großen container mittig ausrichten.
Richtig?
Zuletzt bearbeitet von MarcelP am Mo 21.07.2008 23:37, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Padding von Listenpunkten setzt sich über allg. Padding
padding?
[CSS] padding-right?
Padding im NS4 - wie bzw. Alternativen?
textarea mit padding auf 100%
[CSS] padding Problem
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|