Brauche Hilfe beim Ändern einer css-Datei

[Frank aus S-H]

Hallo zusammen,

ich bin auf der Suche nach der Lösung meines Problems auf dieses Forum gestossen und hoffe, hier Hilfe zu finden.

Also, ich bin dabei für einen Freund eine Website zu bauen.
Auf der Suche nach was passendem haben wir im www ein freies Template gefunden, was ihm gut gefallen hat.

Nun müsste ich eine html-Seite und dann wohl auch die zu dem Template gehörende css-Datei etwas umbauen.

Leider sind meine html-Kenntnisse ziemlich mies.

Ich baue die website mit Frontpage (ja, ja , ich weiss... aber ich habe mich da ganz gut eingefuchst).

Wie man hier:
Dreamline: About This Template

sehen kann, werden in dem Template solche schwarzen Kästen benutzt, die im Ordener images abgelegt sind.
Nun bräuchte ich auf der Termine-Seite aber einen Kasten , der deutlich breiter ist.
Also habe ich das jpg in Photoshop einfach auf die gewünschte Größe gebracht (Breite 800).

Nun ist mein Problem, wie muss ich die css-Datei und den html-Code der Seite verändern, damit der große Kasten auch angezeigt wird ???

Ich füge hier mal den html-Code der seite ein:
(Ich habe mal die html-teile weggelassen, die die Buttons betreffen, da mein text sonst über 10.000 Zeichen lang geworden wäre...)

  <!-- **** layout stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="style/style.css" />

    <script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
 else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
 if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
 for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
 f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
 for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
 return null;
}
// -->
</script>

</head>




<img border="0" id="img3" src="Buttons/button52.gif" height="33" width="100" alt="Termine" fp-style="fp-btn: Metal Tab 5; fp-font: Verdana; fp-font-style: Bold; fp-font-color-normal: #40403E; fp-font-color-press: #006699; fp-bgcolor: #000000; fp-transparent: 1" fp-title="Termine" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'Buttons/button53.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'Buttons/button52.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'Buttons/button54.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'Buttons/button53.gif')"></a></li>
      <li>
        <a href="agb%20s.html">
<img border="0" id="img4" src="Buttons/button55.gif" height="33" width="100" alt="AGB's" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'Buttons/button56.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'Buttons/button55.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'Buttons/button57.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'Buttons/button56.gif')" fp-style="fp-btn: Metal Tab 5; fp-font: Verdana; fp-font-style: Bold; fp-font-color-normal: #40403E; fp-font-color-press: #006699; fp-bgcolor: #000000; fp-transparent: 1" fp-title="AGB's"></a></li>
      <li>
        <a href="impressum.html">

    </ul>
  </div>
  <div id="footer">
  <div id="copy_r">&nbsp;</div>
    <div id="site_content">
        <div id="content">
            <div class="disignBoxSecond">
                <div class="boxContent">
                    <h1 style="text-align: center"><u>
                    <span style="background-position: 0pt 0pt">
<font color="#006699"><span style="font-weight: 700">termine</span></font></span></u></h1>
                    <h1><span style="background-position: 0pt 0pt">
                    <font color="#006699">Andreas Will</font></span></h1>
                    <p>&nbsp;</div>
            </div>
        </div>
    </div>
  <!-- Please do not remove this part. this template is free - the only thing we ask is to live a link to us.-->
    <p align="right">Copyright by andreas will</div>
  </div>
</body>
</html>

Und hier die css-Datei:

/* global */
html{height: 100%;}

body
{ font-family: verdana, arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: .68em;
}

/* ancors Start
---------------------*/
a{outline: none;}

a, a:link, a:visited {
color:#006699;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}

#logo, #logo h1 a
{
  /*color: #40403E;*/
  border:none;
  text-decoration:none;
 }

#menu li a 
{ display: block;
  float: left;
  height:26px;
  text-decoration: none; 
  padding: 6px 19px 0px 19px;
  border-right: 2px solid;
  font-weight: bold;
  background: #40403E;
  color: #929280;
  border-color: #2C2C2A;
  background:transparent url(../images/nav_tab_bg.png) no-repeat scroll left top;
} 

#menu li a:hover, #menu li a.selected, #menu li a.selected:hover
{ background: #82974B;
  color: #EEE;
  border-color: #2C2C2A;
      background:transparent url(../images/nav_tab_bg.png) no-repeat scroll left top;
    background-position: 0 -34px;
} 





/* ancors End
----------------------------*/


/* elementh style Start
--------------------------*/


p
{ margin: 0px;
  padding: 0px 0px 16px 0px;
  line-height: 1.7em;
}

h1
{ font-family: arial, sans-serif;
  letter-spacing: .1em;
  font-weight: normal;
  text-transform: uppercase;
  padding: 16px 0px 5px 0px; 
  margin: 0px 0px 12px 0px; 
  font-size: 150%;
}

.sub
{ font-size: 55%;
  padding-left: 12px; 
  letter-spacing: .1em;
}

img
{ border: 0px; 
  margin: 0px; 
  padding: 0px;
}


/* block quote */
blockquote
{ margin: 20px 0px 20px 0px; 
  padding: 10px 20px 0px 20px;
  border-left: 8px solid;
}

/* unordered list */
ul
{ margin: 2px 0px 18px 16px;
  padding: 0px;
}

ul li
{ list-style-type: square;
  margin: 0px 0px 6px 0px; 
  padding: 0px;
}

/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
  padding: 0px;
}

ol li
{ margin: 0px 0px 11px 0px; 
  padding: 0px;
}



/* elementh style  end
--------------------------*/

/* site content Start 
-----------------------------*/
#main
{
    width:880px;
    padding-top: 50px;
}

/*design box First*/

.disignBoxFirst
{
    background:transparent url(../images/db_first_bg.jpg) no-repeat scroll left top;
clear:left;
margin-bottom:10px;
padding-top:16px;
position:relative;
}

.disignBoxFirst .boxFirstHeader
{
    color:#006598;
font-size:18px;
font-weight:bold;
height:20px;
padding:3px 0px 0px 40px;
position:relative;
text-align:left;
text-transform:uppercase;
}
.disignBoxFirst .boxContent
{
    font-size:13px;
overflow:hidden;
padding:10px 0pt 10px 24px;
position:relative;
}

/*design box Second*/
.disignBoxSecond 
{
    background:transparent url(../images/db_second_bg.jpg) repeat-x scroll left top;
}

.disignBoxSecond .boxSecondHeader
{
    color:#006598;
font-size:110%;
font-weight:bold;
height:20px;
padding:3px 0px 0px 40px;
position:relative;
text-align:left;
text-transform:uppercase;
}
.disignBoxSecond .boxContent
{
    font-size:13px;
overflow:hidden;
padding:10px 24pt 10px 24px;
position:relative;
}

/* thumb images
-----------------------------*/

.thumb_block
{position:relative; height:100px;}
.thumb_image
{
float:left;
margin:0pt 5px 5px 5px;
width:70px;
}


/* margin lefts / margin rights - to centre content */
#logo, #menu, #site_content, #main
{ margin-left: auto; 
  margin-right: auto;
}

/* logo */
#logo
{ width: 880px;
  height: 96px;
}

#logo h1
{ font-family: century gothic, sans-serif;
  font-size: 60px;
  text-transform: lowercase;
  font-weight: normal;
  padding: 0px 0px 0px 14px;
  border: 0px;
  float: left;
  letter-spacing: 0px;
}

#links
{ margin: 15px 9px 0px 0px;
  font-size: 80%;
  text-align: right;
  padding: 20px 10px 0px 0px;
  text-transform: uppercase;
}


/* navigation menu */
#menu
{ height: 32px;
  width: 880px;
}

#menu ul{margin: 0px auto;} 

#menu li
{ float: left; 
  margin: 0px; 
  padding: 0px;
  list-style: none;
} 

#colours
{ height: 0px;
  text-align: right;
  padding: 16px 16px 0px 300px;
}

/* main content */
#site_content
{ width: 878px;
  overflow: hidden;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
} 

/* side menu */
#first_column
{ padding: 22px 3px 10px 19px;
  float: left; 
  width: 300px;
}


.info
{ padding-top: 4px;
  float: left;
}

/* page content */
#content
{ text-align: left;
  width: 542px;
  float: left;
  padding: 12px 0px 18px 0px;
}



#footer
{padding:10px;
font-size:14px;}


#footer #copy_r
{
    float:right;
}


/*colors Start
---------------------------*/

body
{ background: #2C2C2A;
  color: #929280;
  background:#000000 url(../images/body_bg.jpg) repeat-x scroll left top;
}

blockquote{border-color: #40403E;}

#site_content
{ 
    background-color:#000;
    border-color: #40403E;
}



#content h1
{ background: transparent;
  color: #E6E8DC;
  border-color: #40403E;

}

#contact input, #contact textarea, #contact input.submit
{ background: #2C2C2A; 
  color: #929280;
  border-color: #40403E;
}

#menu
{ background: #40403E;
  color: #EEE;
  border-color: #82974B;
}

Bin für jede Hilfe dankbar!

Viele Grüße

Frank

 

[prm]

Die Grafik ist hier eingebunden:

.disignBoxSecond 
{
    background:transparent url(../images/db_second_bg.jpg) repeat-x scroll left top;
}

Das ist die Grafik:
http://www.msc-bennebek.de/Andreas Will Website neu/images/db_second_bg.jpg

Entweder müsstest du generell eine andere Grafik einbinden.
Oder du verwendest eine andere Grafik mit einer anderen Klassenbezeichnung (z.B. ".dsignBoxSecondneu") und verweist auf der Terminseite im HTML-Bereich darauf.