Anpassen eines Templates

dodo87

Hallo,

als erstes möchte ich sagen, das mir die Idee dieses Forums sehr gefällt. Nun weiter zum eigentlichen Problem. Ich bin im Moment dabei ein Template für mein cms anzupassen und wollte noch ein bis zwei Singe ändern. Leider ist da ein wenig mehr css im Spiel als mir lieb ist und ich bin echt am verzweifeln.

hab es mal geuploaded. http://gamersweb.info/neuestemplate/

Hab das Design schon verbreitert aber verzweifle seit einiger Zeit daran neben dem slider noch content zu platzieren. Kann mir da jemand von Euch weiter helfen?

danke schonmal
dodo

synaptic

also auf doof würd ich jetzt behaupten dass du auf gleicher ebene wie dein #loopedSlider

in das div mit der class="inner"
noch nen div reinmachen musst
dann musste beide divs left floaten lassen und fertig..
aber problem wird wahrscheinlich dein position:-gedöhnse werden, kann ich aber jetzt auf fix weder bestimmt sagen noch dir ne alternative coden..
(bin jetzt nämlich wieder weg vom pc)

dodo87

Zitat von synaptic

also auf doof würd ich jetzt behaupten dass du auf gleicher ebene wie dein #loopedSlider

in das div mit der class="inner"
noch nen div reinmachen musst
dann musste beide divs left floaten lassen und fertig..

danke dir, ich werds gleich probieren aber glaube fast, das ich das schon versucht habe.

Zitat

aber problem wird wahrscheinlich dein position:-gedöhnse werden, kann ich aber jetzt auf fix weder bestimmt sagen noch dir ne alternative coden..

das denke ich auch und es bereitet mir eine menge schwierigkeiten

dodo87

ich bekomm es nicht hin... kommt mir vor wie ne algebra aufgabe weil ichs nich packe.

HTML

<!-- content -->
          <div id="content">            
            <!-- .slider -->
			<div class="slider">
              <div class="inner">
                <div id="loopedSlider">	
                  <div class="container">
                    <div style="width: 2484px; left: -1242px;" 
class="slides">


                      <div style="position: absolute; left: 0px; 
display: block;"><img alt="" src="images/slide1.jpg"></div>
                      <div style="position: absolute; left: 621px; 
display: block;"><img alt="" src="images/slide2.jpg"></div>
                      <div style="position: absolute; left: 1242px; 
display: block;"><img alt="" src="images/slide3.jpg"></div>
                      <div style="position: absolute; left: 1863px; 
display: block;"><img alt="" src="images/slide4.jpg"></div>
                    </div>
                  </div>
                  <ul class="pagination">
                    <li class="">
                      <a rel="1" href="#">


                        <img alt="" src="images/thumb1.jpg">
                        <strong>Mass Effect 2</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>
                    </li>
                    <li class="">


                      <a rel="2" href="#">
                        <img alt="" src="images/thumb2.jpg">
                        <strong>NIER</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>
                    </li>


                    <li class="">
                      <a rel="3" href="#">
                        <img alt="" src="images/thumb3.jpg">
                        <strong>Dante's Inferno</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>


                    </li>
                    <li class="">
                      <a rel="4" href="#">
                        <img alt="" src="images/thumb4.jpg">
                        <strong>Army of Two</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>


                      </a>
                    </li>
                  </ul>	
                </div>
              </div>
            </div>
            <!-- /.slider -->

Alles anzeigen

Könnt Ihr/kannst Du mir zeigen was ich ändern muss?

Danke schonmal.

synaptic

aber nur weil du so lieb verzweifelt bist :D:D:D:D

HTML

<!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" dir="ltr" lang="de">
<head>
<title></title>
<style type="text/css">
#minicontent{
    float:left;
    height:388px;
    width:280px;
    margin-left:15px;
}
#loopedSlider{
float:left;
}
.clear{
    clear:both;
}


</style>
<link href="http://gamersweb.info/neuestemplate/images/style.css" rel="stylesheet" type="text/css">
<link href="http://gamersweb.info/neuestemplate/images/layout.css" rel="stylesheet" type="text/css">
<script src="http://gamersweb.info/neuestemplate/images/jquery-1.js" type="text/javascript"></script>
<script src="http://gamersweb.info/neuestemplate/images/loopedslider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#loopedSlider').loopedSlider();
    });
</script>


<body>
<div id="content">            
            <!-- .slider -->
            <div class="slider">
              <div class="inner">
                <div id="loopedSlider">    
                  <div class="container">
                    <div style="width: 2484px; left: -1242px;" 
class="slides">


                      <div style="position: absolute; left: 0px; 
display: block;"><img alt="" src="http://gamersweb.info/neuestemplate/images/slide1.jpg"></div>
                      <div style="position: absolute; left: 621px; 
display: block;"><img alt="" src="http://gamersweb.info/neuestemplate/images/slide2.jpg"></div>
                      <div style="position: absolute; left: 1242px; 
display: block;"><img alt="" src="http://gamersweb.info/neuestemplate/images/slide3.jpg"></div>
                      <div style="position: absolute; left: 1863px; 
display: block;"><img alt="" src="http://gamersweb.info/neuestemplate/images/slide4.jpg"></div>
                    </div>
                  </div>
                  <ul class="pagination">
                    <li class="">
                      <a rel="1" href="#">


                        <img alt="" src="http://gamersweb.info/neuestemplate/images/thumb1.jpg">
                        <strong>Mass Effect 2</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>
                    </li>
                    <li class="">


                      <a rel="2" href="#">
                        <img alt="" src="http://gamersweb.info/neuestemplate/images/thumb2.jpg">
                        <strong>NIER</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>
                    </li>


                    <li class="">
                      <a rel="3" href="#">
                        <img alt="" src="http://gamersweb.info/neuestemplate/images/thumb3.jpg">
                        <strong>Dante's Inferno</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>


                    </li>
                    <li class="">
                      <a rel="4" href="#">
                        <img alt="" src="http://gamersweb.info/neuestemplate/images/thumb4.jpg">
                        <strong>Army of Two</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>


                      </a>
                    </li>
                  </ul>    
                </div>
                 <!-- hier kommt das div rechts vom slider -->
                <div id="minicontent">
                awdawdawda<br />awdawdawda<br />awdawdawda<br />awdawdawda<br />awdawdawda<br />awdawdawda<br />awdawdawda<br />
                </div>
              </div>
              <span class="clear"></span>
            </div>
            <!-- /.slider -->
</body>
</html>

Alles anzeigen

vergiss nich auf http://www.kaninchenrettung.de was zu spenden...

dodo87

loool, jetzt wo ich das so sehe und ausprobiert habe denk ich, das ich das schon versucht habe... aber es funktioniert, damit schließe ich es einfach mal aus

Ich hatte nur solange dran herum gebastelt, da ist es ein wunder,d as ich das nicht mit dabei hatte *fg

Dann kann es jetzt an das implementieren des cms gehen. danke dir.

Ich hatte aus Erfahrung eigentlich erwartet, entweder keine Antwort oder eine freche zu bekommen, aber ich bin echt positiv von diesem forum überraschrt- werde jetzt öfter mal vorbei kommen und euch auch weiter empfehlen, wenn mal jemand css-fragen hat

dodo87

Hi, nun doch schon schneller als gedacht die nächste Frage:

wie lege ich über dem sliderbild im unteren viertel des sliderbildes ein neuen text mit einem transparenten hintergundbild - so das dort ein wenig erklärender text geschrieben werden kann?

hab au schon einw enig dran gebastelt, nur mal wieder ohne erfolg...xD

HTML

<!-- .slider -->
            <div class="slider">
              <div style="float: left; width: 950px;" class="inner">
                <div id="loopedSlider">    
                  <div class="container">
                    <div style="width: 2484px; left: -1242px;" 
class="slides">
                      <div style="position: absolute; left: 0px; display: block;" class="ui-tabs-panel ui-tabs-hide"><img alt="" src="images/slide1.jpg">
                      <div class="info png"> 
                                                    <h3>Mass Effect</h3>
                                                    <p>If you have any 
interest whatsoever in off-road racing you'd do well to take this 
beautiful and thrilling game for a spin.</p>
                                                 </div> </div>


                      <div style="position: absolute; left: 621px; display: block;" class="ui-tabs-panel ui-tabs-hide"><img alt="" src="images/slide2.jpg">
                      <div class="info png"> 
                                                    <h3>Nier</h3>
                                                    <p>If you have any 
interest whatsoever in off-road racing you'd do well to take this 
beautiful and thrilling game for a spin.</p>
                                                 </div></div>


                      <div style="position: absolute; left: 1242px; display: block;" class="ui-tabs-panel ui-tabs-hide"><img alt="" src="images/slide3.jpg">
                      <div class="info png"> 
                                                    <h3>Dantes Inferno</h3>
                                                    <p>If you have any 
interest whatsoever in off-road racing you'd do well to take this 
beautiful and thrilling game for a spin.</p>
                                                 </div> </div>


                      <div style="position: absolute; left: 1863px; display: block;" class="ui-tabs-panel ui-tabs-hide"><img alt="" src="images/slide4.jpg">
                      <div class="info png"> 
                                                    <h3>Army of two</h3>
                                                    <p>If you have any 
interest whatsoever in off-road racing you'd do well to take this 
beautiful and thrilling game for a spin.</p>
                                                 </div></div>


                    </div>
                  </div>
                  <ul class="pagination">
                    <li class="">
                      <a rel="1" href="#">
                        <img alt="" src="images/thumb1.jpg">
                        <strong>Mass Effect 2</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>
                    </li>
                    <li class="">
                      <a rel="2" href="#">
                        <img alt="" src="images/thumb2.jpg">
                        <strong>NIER</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>
                    </li>
                    <li class="">
                      <a rel="3" href="#">
                        <img alt="" src="images/thumb3.jpg">
                        <strong>Dante's Inferno</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>
                    </li>
                    <li class="">
                      <a rel="4" href="#">
                        <img alt="" src="images/thumb4.jpg">
                        <strong>Army of Two</strong><br>
                        <span>X360 Screens</span><br>
                        <b>Video preview</b>
                      </a>
                    </li>
                  </ul>    
                </div>
              </div>
              <div style="float: left;" class="neuercontent"> blah blah blub </div>
<div style="clear: both;"></div>


            </div>
            <!-- /.slider -->

Alles anzeigen

hab mir das ganze aus nem anderen free slider abgeguckt, aber wirklich helfen tuts au net.

HTML

#featured{ 
    width:612px; 
    position:relative; 
    height:421px;

}


#featured .ui-tabs-panel .info{ 
    position:absolute; 
    top:336px; left:0; 
    height:75px;
    width:669px;
    background:url(transparent_bg.png) 0 0 repeat-x;  display:block;
}


#featured .ui-tabs-hide{ 
    display:none; 
}


.info h3{color:#f2f2f2; font-size:12px; margin:0 0 0 0;}
.info p{ margin:0 0 0 0; color:#88888b; font-size:13px; line-height:13px; width:539px;}

Alles anzeigen

ich kann nun au nich wirklich sagen was rein gehört und was nicht, bevor es läuft xD wenns einmal läuft könnt ich langsam alles was ich nich brauche raus hauen.

Tags