Hilfe bei Coden CSS


 
Reply to this topicStart new topicStart Poll





Unter-der-Dusche Sänger/in
*

Gruppe: Mitglieder
Mitglied seit: 06. Oct 2013
Beiträge: 5
07. Oct 2013, 16:18
Link · · · · Zitat
Hallo,

und zwar bin ich absolouter Beginner in Sachen CSS.
Nach ein paar Jahren, möchte ich nun wieder anfangen eine Fanpage zu erstellen, bisher habe ich aber nur etwas Erfahrung allerdings nur mit HTML

So soll es später aussehen ...
user posted image

Bin auch mittlerweile soweit das ich die Positionierung eigentlich soweit habe (nur unten das orange ist so breit gezogen ich weiß nicht woran es liegt?) und auch die navigation, allerdings bekomme ich sie nicht wirklich an die stelle

Außerdem hab ich überhaupt keinen plan wie ich den content einbinden kann

user posted image

user posted image

Vielleicht kann mir jemand ja ein wenig helfen? würde dann den code per pn bzw. email zuschicken lassen.

Danke
Kevin





4FANS-Team
*********

Gruppe: 4FANS-Admins
Mitglied seit: 10. Oct 2004
Beiträge: 9392
07. Oct 2013, 22:30
Link · · · · Zitat
Content einbinden bei diesem Layout wohl nur mit einem eingebetteten Frame (Iframe) sinnvoll.

Beim Coding helfe ich gerne, lade aber bitte die Seite irgendwo hoch und stelle anschließend den Link hier rein. Nur HTML-Code senden reicht mir nicht, ich muss das Layout sehen um die Fehler beheben zu können.





Unter-der-Dusche Sänger/in
*

Gruppe: Mitglieder
Mitglied seit: 06. Oct 2013
Beiträge: 5
13. Oct 2013, 11:41
Link · · · · Zitat
Danke für die Hilfe mit dem Content hat schonmal geklappt smile.gif

Und auch den orangenen Streifen unten habe ich weg bekommen ... Es gibt nur probleme wenn ich die Seite über Handy aufrufe ... dann wird das Bild nämlich wiederholt


Aber die Navigation bekomme ich einfach nicht eingefügt, immer wenn ich diese einfüge erscheint nur die navigation und der rest ist weg

http://benheinrich.funpic.de/BH4_423.html

CODE

<html>


 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
 <link href="mystyles.css" rel="stylesheet" type="text/css" />
 <style type="text/css">
 body
{ background-image: url((EmptyReference!)); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0 }
.style2 {font-family: Arial, Helvetica, sans-serif}
       </style>
 
 <title>BENJAMIN HEINRICH</title>
 <meta name="keywords" content="schauspieler, unter uns, benjamin heinrich, bambi, tiger der serie, "
 


 
</script>
 </csactiondict>
</head>
<img style="display:none;" src="http://s7.directupload.net/images/130904/vj9sf89d.png"/>
<body onLoad="CSScriptInit();" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
 <div align="center">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
   <tr>
     <td align="center" valign="middle" background="background1.jpg" bgcolor="#B56A6A"><table border="0" cellspacing="0" cellpadding="0" width="996" height="655">
                   <tr align="left" valign="top">
                     <td rowspan="1" colspan="1" height="1" width="29"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="238"></td>
                     <td width="67" height="1" colspan="1" rowspan="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="68"></td>
                     <td rowspan="1" colspan="1" height="1" width="10"></td>
                     <td rowspan="1" colspan="1" height="1" width="115"></td>
                     <td rowspan="1" colspan="1" height="1" width="45"></td>
                     <td rowspan="1" colspan="1" height="1" width="77"></td>
                     <td rowspan="1" colspan="1" height="1" width="41"></td>
                     <td rowspan="1" colspan="1" height="1" width="66"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="179"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="52"></td>
                   </tr>
                   <tr align="left" valign="top">
                     <td rowspan="1" colspan="1" width="29" height="3"></td>
                     <td rowspan="1" colspan="20" height="3"></td>
                   </tr>
                   <tr align="left" valign="top">
                     <td rowspan="1" colspan="1" width="29" height="23"><p>&nbsp;</p>
                         <p>&nbsp;</p></td>
                     <td rowspan="1" colspan="2" height="23"></td>
                   <tr align="margin" valign="margin">
                     <td rowspan="1" colspan="1" width="29" height="36"></td>
                     <td height="16" colspan="14" rowspan="1" bgcolor="FD9732" class="style2">  <body>
                                               </td>
                   </tr>
                   <tr align="left" valign="top">
                     <td rowspan="1" colspan="1" width="29" height="1"></td>
                     <td rowspan="2" colspan="1" width="1" height="467"></td>
                     <td height="560" colspan="4" rowspan="5" align="right" background="ben3.jpg"></td>
                     <td rowspan="1" colspan="14" height="2" background="Bilder/top.JPG"></td>
                     <td rowspan="5" colspan="1" width="52" height="437"></td>
                   </tr>
                   <tr align="margin" valign="top">
                     <td rowspan="1" colspan="1" width="29" height="554"></td>
                     <td height="554" colspan="11" rowspan="1" bgcolor="FD9732"><iframe src="vita1.html" width="528" height="535" name="SELFHTML_in_a_box">
                       <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
                         Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
                         aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
                       </iframe>
                         <p>&nbsp;</p>
                     <td height="524" colspan="3" rowspan="1" background=""></td>
                   </tr>
 <td rowspan="1" colspan="1" width="29" height=""></td>
 </tr>
 <tr align="LEFT" valign="top">
                 </table>
   </tr>
  </table>
 </div>
 
 
   </body>

</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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="http://benheinrich.funpic.de/mystyles.css" rel="stylesheet" type="text/css" />

</head>

<body>
<ul>
 <li><a href="#" class="first">About</a></li>
 <li><a href="#" class="second">Film / Fernsehen</a> </li>
 <li><a href="#" class="third">Stimme</a></li>
 <li><a href="#" class="fourth">Werbung</a></li>
  <li><a href="#" class="five">showreal</a></li>
<li><a href="#" class="sixt">Werbung</a></li>
</ul>


</body>
</html>








Unter-der-Dusche Sänger/in
*

Gruppe: Mitglieder
Mitglied seit: 06. Oct 2013
Beiträge: 5
18. Oct 2013, 13:44
Link · · · · Zitat
So siehts dann übrigends per mobile browser aus

user posted image





Unter-der-Dusche Sänger/in
*

Gruppe: Mitglieder
Mitglied seit: 06. Oct 2013
Beiträge: 5
18. Oct 2013, 21:39
Link · · · · Zitat
hab nun etwas wieder rumprobiert
und die navi eingefügt bekommen

nun aber das nächste problem ich möchte die navi noch etwas nach rechts haben

außerdem ist der balken oben jetzt so riesig und unten nicht mehr so zentriert wie vorher

user posted image
http://benheinrich.funpic.de/BH4_4234.html

CODE

<html>


 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
 <link href="mystyles.css" rel="stylesheet" type="text/css" />
 <style type="text/css">
 body
{ background-image: url((EmptyReference!)); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0 }
.style2 {font-family: Arial, Helvetica, sans-serif}
       </style>
 
 <title>BENJAMIN HEINRICH</title>
 <meta name="keywords" content="schauspieler, unter uns, benjamin heinrich, bambi, tiger der serie, "
 


 
</script>
 </csactiondict>
</head>
<img style="display:none;" src="http://s7.directupload.net/images/130904/vj9sf89d.png"/>
<body onLoad="CSScriptInit();" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
 <div align="center">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
   <tr>
     <td align="center" valign="middle" background="background1.jpg" bgcolor="#B56A6A"><table border="0" cellspacing="0" cellpadding="0" width="996" height="655">
                   <tr align="left" valign="top">
                     <td rowspan="1" colspan="1" height="1" width="29"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="238"></td>
                     <td width="67" height="1" colspan="1" rowspan="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="68"></td>
                     <td rowspan="1" colspan="1" height="1" width="10"></td>
                     <td rowspan="1" colspan="1" height="1" width="115"></td>
                     <td rowspan="1" colspan="1" height="1" width="45"></td>
                     <td rowspan="1" colspan="1" height="1" width="77"></td>
                     <td rowspan="1" colspan="1" height="1" width="41"></td>
                     <td rowspan="1" colspan="1" height="1" width="66"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="179"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="1"></td>
                     <td rowspan="1" colspan="1" height="1" width="52"></td>
                   </tr>
                   <tr align="left" valign="top">
                     <td rowspan="1" colspan="1" width="29" height="3"></td>
                     <td rowspan="1" colspan="20" height="3"></td>
                   </tr>
                   <tr align="left" valign="top">
                     <td rowspan="1" colspan="1" width="29" height="23"><p>&nbsp;</p>
                         <p>&nbsp;</p></td>
                     <td rowspan="1" colspan="2" height="23"></td>
                   <tr align="margin" valign="margin">
                     <td rowspan="1" colspan="1" width="29" height=""></td>
                     <td height="" colspan="14" rowspan="1" bgcolor="FD9732" class="style2"><div align="">
<ul>
 <li><a href="#" class="first">About</a></li>
 <li><a href="#" class="second">Film / Fernsehen</a> </li>
 <li><a href="#" class="third">Stimme</a></li>
 <li><a href="#" class="fourth">Werbung</a></li>
  <li><a href="#" class="five">showreal</a></li>
<li><div><a href="#" class="sixt">Werbung</a></div></li>
</ul>


</div></td>
                   </tr>
                   <tr align="left" valign="top">
                    <td rowspan="1" colspan="1" width="29" height="1"></td>
                     <td rowspan="2" colspan="1" width="1" height="467"></td>
                     <td height="560" colspan="4" rowspan="5" align="right" background="http://benheinrich.funpic.de/ben5.jpg"></td>
                     <td rowspan="1" colspan="14" height="2" background="Bilder/top.JPG"></td>
                     <td rowspan="5" colspan="1" width="52" height="437"></td>
                   </tr>
                   <tr align="margin" valign="top">
                     <td rowspan="1" colspan="1" width="29" height="554"></td>
                     <td height="554" colspan="11" rowspan="1" bgcolor="FD9732"><iframe src="vita1.html" width="528" height="535" name="SELFHTML_in_a_box">
                       <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
                         Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
                         aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
                       </iframe>
                         <p>&nbsp;</p>
                     <td height="524" colspan="3" rowspan="1" background=""></td>
                   </tr>
 <td rowspan="1" colspan="1" width="29" height=""></td>
 </tr>
 <tr align="LEFT" valign="top">
                 </table>
        </tr>
  </table>
 </div>
 
 
   </body>

</html>


css

CODE
ul {
width: 625px;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
}
ul li {
float: left;
}
ul li a {
height: 40px;
width: 80px;
display: block;
background-color: #FFCCCC;
text-indent: -9999px;
}
ul li a.first {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
ul li a.first:hover {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: 0px -46px;
}
ul li a.second {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -86px 0px;
}
ul li a.second:hover {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -86px -46px;
}
ul li a.third {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -166px 0px;
}
ul li a.third:hover {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -166px -46px;
}
ul li a.fourth {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -246px 0px;
}
ul li a.fourth:hover {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -246px -46px;
}
ul li a.five {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -327px 0px;
}
ul li a.five:hover {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -327px -46px;
}
ul li a.sixt {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -409px 0px;
}
ul li a.sixt:hover {
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -409px -46px;
}


#high{
  padding: 10px;
  height: 260px;
  width: 930px;
  overflow:scroll;
}
.scase{
  position:relative;
  text-align:center;
  float: left;
  width: 86px;
  height: 41px;
  margin-right: 10px;
  background-color: #FFF;
  border: 1px solid #333;
}

<style type="text/css">
body {
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
}
</style>


Bearbeitet von FeelingGood am 18. Oct 2013, 21:40





4FANS-Team
*********

Gruppe: 4FANS-Admins
Mitglied seit: 10. Oct 2004
Beiträge: 9392
22. Oct 2013, 22:42
Link · · · · Zitat
Sorry dass du so lange warten musstest. Mach das am besten so. smile.gif

HTML
QUOTE
<!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="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="language" content="de" />
<meta name="robots" content="index,follow" />
<meta name="author" content="benheinrich.funpic.de" />
<meta name="copyright" content="benheinrich.funpic.de" />
<meta name="designer" content="benheinrich.funpic.de" />
<meta name="description" content="Fanseite über Benjamin Heinrich" />
<meta name="publisher" content="benheinrich.funpic.de" />
<meta name="distribution" content="global" />
<meta name="keywords" content="schauspieler, unter uns, benjamin heinrich, bambi, tiger der serie" />
<title>BENJAMIN HEINRICH</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="space">
</div>
<div id="content">
<div id="top">
  <div id="menu">
  <ul>
    <li><a href="#" class="first">About</a></li>
    <li><a href="#" class="second">Film / Fernsehen</a> </li>
    <li><a href="#" class="third">Stimme</a></li>
    <li><a href="#" class="fourth">Werbung</a></li>
    <li><a href="#" class="five">showreal</a></li>
    <li><div><a href="#" class="sixt">Werbung</a></div></li>
  </ul>
  </div>
</div>
<div id="header">
</div>
<div id="frame">
  <iframe src="http://benheinrich.funpic.de/vita1.html" width="530" height="530" name="content">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
                      </iframe>
</div>
<div class="clearboth">
</div>
<div id="bottom">
</div>
</div>

</body>
</html>


CSS
QUOTE
/* Body */
*
{
border: none;
margin: 0;
padding: 0;
}

body, html
{
background: url(http://benheinrich.funpic.de/background1.jpg);
color: #000000;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
height: 100%;
margin: 0;
padding: 0;
}


/* Elements */
.clearboth
{
clear:both;
}


/* Layout */
#space
{
height: 50%;
margin-bottom: -300px;
width: 910px;
}

#content
{
background: #fd9732;
height: 610px;
overflow: hidden;
position: relative;
margin: auto auto;
width: 910px;
}

#top
{
background: #fd9732;
height: 60px;
width: 910px;
}

#menu
{
float:right;
width: 520px;
}

#header
{
background: url(http://s7.directupload.net/images/130904/vj9sf89d.png) 0;
float: left;
height: 530px;
width: 350px;
}

#frame
{
float: right;
height: 530px;
width: 530px;
}

#bottom
{
background: #fd9732;
height: 60px;
width: 910px;
}


/* Menu */
ul
{
width: 625px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
}
ul li
{
float: left;
}
ul li a
{
height: 40px;
width: 80px;
display: block;
text-indent: -9999px;
}
ul li a.first
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
ul li a.first:hover
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: 0px -46px;
}
ul li a.second
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -86px 0px;
}
ul li a.second:hover
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -86px -46px;
}
ul li a.third
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -166px 0px;
}
ul li a.third:hover
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -166px -46px;
}
ul li a.fourth
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -246px 0px;
}
ul li a.fourth:hover
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -246px -46px;
}
ul li a.five
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -327px 0px;
}
ul li a.five:hover
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -327px -46px;
}
ul li a.sixt
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -409px 0px;
}
ul li a.sixt:hover
{
background-image: url(http://benheinrich.funpic.de/navibar.gif);
background-repeat: no-repeat;
background-position: -409px -46px;
}





Unter-der-Dusche Sänger/in
*

Gruppe: Mitglieder
Mitglied seit: 06. Oct 2013
Beiträge: 5
26. Oct 2013, 20:18
Link · · · · Zitat
vielen vielen dank
danke das du dir die zeit dafür genommen hast



Thema wird von 1 Benutzer(n) gelesen (0 Mitglieder, 1 Gäste und 0 Anonyme Benutzer)
 


Reply to this topic Start new topicStart Poll