Hallo Community!
Also ich habe in der Zwischenzeit mit der Hilfe eines Forenmitgliedes (danke an favouriteSD ) bereits einiges an dem Code (source & style.css) ändern können um meinen webauftritt etwas anschaulicher & korrekter darzustellen! Zudem bin ich nun mit literarischen Werken (CSS) bewaffnet und schön langsam blick ich durch den CSS ?Dschungel? durch.
Allerdings bräuchte ich bitte eure Hilfe, denn ich komm einfach nicht dahinter wie ich bei den folgenden Dokumenten ein weiteres gefloatetes bzw. richitg positioniertes ?Div? hinbekomme!
Aber erst mal zum Verschaulichen bevor ich weiterrede
Ich gestalte die Seite überwiegend im Dreamweaver CS4!
Auf dieser Seite möchte ich neben dem Bild einen Text hinschreiben (als Div wenn möglich)
Hier der Source:
[/code]
Hier die style.css:
Laut meinem Buch sollte sich ein gefloatetes Element ja entweder dem Elternelement ODER dem nächst bereits gefloateten Element anpassen ? nunja, wenn ich ein neues Div eröffne (Textdiv zB) und dies dann floate ist es irgendwo?!? Ich möchte eigentlich nur dass sich das Div in das andere (in meinem Fall ContentPortfolio) integriert, sodass ich den Text willkürlich platzieren kann ohne dass es Einfluss auf andere Elemente nimmt!
ich habe es auch schon probiert das IMG in ein eigenes div zu setzen, aber hier war leider auch kein Erfolg zu verbuchen!
Ich würde mich freuen, wenn ihr mir ein paar Tipps geben könntet, damit ich das in den Griff bekomme!
Vielen Dank im Voraus!
LG
Tschisma
Also ich habe in der Zwischenzeit mit der Hilfe eines Forenmitgliedes (danke an favouriteSD ) bereits einiges an dem Code (source & style.css) ändern können um meinen webauftritt etwas anschaulicher & korrekter darzustellen! Zudem bin ich nun mit literarischen Werken (CSS) bewaffnet und schön langsam blick ich durch den CSS ?Dschungel? durch.
Allerdings bräuchte ich bitte eure Hilfe, denn ich komm einfach nicht dahinter wie ich bei den folgenden Dokumenten ein weiteres gefloatetes bzw. richitg positioniertes ?Div? hinbekomme!
Aber erst mal zum Verschaulichen bevor ich weiterrede
Ich gestalte die Seite überwiegend im Dreamweaver CS4!
Auf dieser Seite möchte ich neben dem Bild einen Text hinschreiben (als Div wenn möglich)
Hier der Source:
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" />
<link href="Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/MM_Script.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<title>arts & multimedia horvath</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>
<body bgcolor="#000000" onload="MM_preloadImages('Images/Imp_up.gif','Images/kontakt_up1.gif','Images/Home_Up.gif','Images/Portfolio_up.gif','Images/Galerie_up.gif','Images/referenzen_up.gif','Images/Equip_up.gif','Images/Kontakt_up.gif','Images/broadcast_up.gif','Images/Special_up.gif','Images/Videoproduktion_over.gif')">
<div id="header"></div>
<div id="navigation">
<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','Images/Home_Up.gif',1)"><img src="Images/Home_Over.gif" alt="home" name="Image17" width="120" height="18" border="0" id="Image17" /></a><a href="Portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','Images/Portfolio_up.gif',1)"><img src="Images/Portfolio_over.gif" alt="portfolio" name="Image18" width="120" height="18" border="0" id="Image18" /></a><a href="Galerie .html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','Images/Galerie_up.gif',1)"><img src="Images/Galerie_over.gif" alt="galerie" name="Image19" width="120" height="18" border="0" id="Image19" /></a><a href="Referenzen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','Images/referenzen_up.gif',1)"><img src="Images/referenzen_over.gif" alt="referenzen" name="Image20" width="120" height="18" border="0" id="Image20" /></a><a href="Equipment.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Images/Equip_up.gif',1)"><img src="Images/Equip_over.gif" alt="equipment" name="Image21" width="120" height="18" border="0" id="Image21" /></a><a href="kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','Images/Kontakt_up.gif',1)"><img src="Images/Kontakt_over.gif" alt="kontakt" name="Image22" width="120" height="18" border="0" id="Image22" /></a></div>
<div id="content">
<div id="ContentPortfolio">
<p>Hier finden Sie in Kürze unser Angebot für Sie!<img src="portfolio_img/001-Videoproduktion.gif" width="400" height="900" align="left" /></p>
</div>
<div id="SubNavi">
<p><br />
<br />
<br />
<br />
<br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','Images/Videoproduktion_over.gif',1)"><img src="Images/Videoproduktion_up.gif" alt="video" name="Image15" width="140" height="22" border="0" id="Image15" /><br />
</a><br />
</p>
<p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','Images/broadcast_up.gif',1)"><img src="Images/broadcast_over.gif" alt="broadcast" name="Image13" width="140" height="22" border="0" id="Image13" /></a><br />
<br />
</p>
<p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','Images/Special_up.gif',1)"><img src="Images/special_over.gif" name="Image14" width="150" height="22" border="0" align="right" id="Image14" /></a><br />
<br />
<br /><br />
<br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><hr width="960" />
<div id="Footer">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','Images/Imp_up.gif',1)"><img src="Images/Imp_over.gif" name="Image9" width="100" height="20" border="0" id="Image9"/></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','Images/Sitemap_up.gif',0)"><img src="Images/Sitemap_over.gif" name="Image10" width="100" height="20" border="0" id="Image10" hspace="150" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','Images/kontakt_up1.gif',1)"><img src="Images/kontakt_over1.gif" name="Image11" width="100" height="20" border="0" id="Image11"/></a>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12509304-1");
pageTracker._trackPageview();
} catch(err) {}
swfobject.registerObject("FLVPlayer");
</script>
</div>
</body>
</html>
Hier die style.css:
Code:
body {
background-color: #000;
}
#content {
background-color: #000;
padding: 0px;
margin:0 auto;
margin-bottom: 20px;
width: 960px;
height:auto;
color: #FFF;
font-size: smaller;
text-align: left;
font-family: "Swis721 Ex BT";
}
#header {
margin:0 auto;
height: 140px;
width: 960px;
padding: 1px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-color: #C0C0C0;
border-right-color: #C0C0C0;
border-bottom-color: #C0C0C0;
border-left-color: #C0C0C0;
background-color: #000;
background-image: url(Images/pic-002_passt.gif);
}
#navigation {
margin:0 auto;
height: 22px;
width: 960px;
margin-top: 8px;
margin-bottom: 2px;
text-align: center;
background-color: #CCC;
background-image: url(Images/navigation_bg_image.gif);
}
a:active { text-decoration: none; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
#TextDivRechts {
width:100%;
height:auto;
z-index:1;
left: 0px;
bottom:250px;
font-family: "Swis721 Ex BT";
font-size: 12px;
text-decoration: none;
color: #FFF;
}
#TextDivLinks {
width:100%;
height:auto;
z-index:1;
left: 0px;
bottom:250px;
font-family: "Swis721 Ex BT";
font-size: 12px;
text-decoration: none;
color: #CCC;
}
.LAUFENDE {
position: relative;
left:10%;
bottom:-70px;
}
#AktProjekt {
position:relative;
width:200px;
height:115px;
top:200px;
left: 210px;
font-family: "Swis721 Ex BT";
font-size: 11px;
text-decoration: none;
}
#VideoDiv {
position:relative;
width:400px;
height:225px;
left: 530px;
}
#Spalten {
width:100%;
height:inherit;
}
#SpalteLinks{
width:410px;
height:auto;
padding-left:10px
}
#SpalteRechts{
float:right;
width:410px;
height:auto;
padding-right:10px;
}
#SubNavi {
padding-left:10px;
padding-right:10px;
width:140px;
height:100%;
text-align: right;
border-right-width: 0px;
border-right-style: solid;
border-right-color: #333;
}
#ContentPortfolio{
float:right;
width:780px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
color: #FFF;
text-align: left;
}
#Footer {
margin:0 auto;
width:960px;
height:auto;
text-align:center;
}
#content {
color: #F00;
}
#content {
font-size: xx-small;
}
#content {
font-size: small;
}
ich habe es auch schon probiert das IMG in ein eigenes div zu setzen, aber hier war leider auch kein Erfolg zu verbuchen!
Ich würde mich freuen, wenn ihr mir ein paar Tipps geben könntet, damit ich das in den Griff bekomme!
Vielen Dank im Voraus!
LG
Tschisma