Hjælp til forside problem

[Heinrich]

Hej jeg vil gerne lave en forside i stil med den http://www.dynamicit.dk/, jeg tænker på de fire billeder lige under slider, hvor man kan vælge en af deres ydelser.
Hvordan laves det nemmest, og hvad vil i mene er den bedste løsning, og det skulle være responsive, så den tilpasser jeg til en skærm automatisk

Håber nogle kan hjælpe

[cristian]

Hej jeg vil gerne lave en forside i stil med den http://www.dynamicit.dk/, jeg tænker på de fire billeder lige under slider, hvor man kan vælge en af deres ydelser.
Hvordan laves det nemmest, og hvad vil i mene er den bedste løsning, og det skulle være responsive, så den tilpasser jeg til en skærm automatisk

Håber nogle kan hjælpe

Så vidt jeg forstår så er det bare slideren du gerne ville have hjælp med?

[ThomasI]

Det letteste vil vel være at tage et smugkig kildekoden til denne slider? Du kan selvfølgelig ikke bare kopiere koden, men måske bare få lidt inspiration!
herefter kan du så udnersøge, hvordan du gør billederne responsive osv:

Kode: Vælg alt

<div id="contentslider">
    <div id="topslider">
      <div id="topgrafikslider">
        &nbsp;
      </div>

      <div class="slideshow">
        <div style="position: relative; width: 515px; height: 223px">
        <h4 class="slideheader">Vi laver din hjemmeside</h4>

        <p class="slidetekst"><i>Vi laver gerne din hjemmeside, stor som
        lille</i></p><img width="515" height="223" title=
        "Dynamic-it udf&oslash;rer opbygning af hjemmesider, b&aring;de store og sm&aring;"
        alt="Hos Dynamic-it laver vi gerne din hjemmeside, stor som lille" src=
        "../images/roulette/hjemmeside-referencer.jpg" /></div>

        <div style="position: relative; width: 515px; height: 223px">
        <h4 class="slideheader">S&oslash;gemaskineoptimering / SEO</h4>

        <p class="slidetekst"><i>Vi laver alt indenfor
        s&oslash;gemaskineoptimering</i></p><img width="515" height="223" title=
        "Dynamic-it udf&oslash;rer s&oslash;gemaskineoptimering" alt=
        "Hos Dynamic-it specialiserer vi os indenfor s&oslash;gemaskineoptimering" src=
        "../images/roulette/soegemaskineoptimering.jpg" /></div>

        <div style="position: relative; width: 515px; height: 223px">
        <h4 class="slideheader">IT-support</h4>

        <p class="slidetekst"><i>Vi udf&oslash;rer IT-support</i></p><img width="515"
        height="223" title="Dynamic-it udf&oslash;rer IT-support" alt=
        "Hos Dynamic-it laver vi IT-support" src=
        "../images/roulette/itsupport.jpg" /></div>

        <div style="position: relative; width: 515px; height: 223px">
        <h4 class="slideheader">Facebook markedsf&oslash;ring</h4>

        <p class="slidetekst"><i>Vi laver facebook
        markedsf&oslash;ring</i></p><img width="515" height="223" title=
        "Dynamic-it udf&oslash;rer facebook markedsf&oslash;ring" alt=
        "Hos Dynamic-it laver vi gerne din facebook markedsf&oslash;ring" src=
        "../images/roulette/facebook-markedsfoering.jpg" /></div>

        <div style="position: relative; width: 515px; height: 223px">
        <h4 class="slideheader">Youtube markedsf&oslash;ring</h4>

        <p class="slidetekst"><i>Vi laver youtube markedsf&oslash;ring</i></p><img width=
        "515" height="223" title="Dynamic-it udf&oslash;rer youtube markedsf&oslash;ring"
        alt="Hos Dynamic-it laver vi gerne din youtube markedsf&oslash;ring" src=
        "../images/roulette/youtube-markedsfoering.jpg" /></div>

        <div style="position: relative; width: 515px; height: 223px">
        <h4 class="slideheader">Google Maps</h4>

        <p class="slidetekst"><i>Vi hj&aelig;lper dig til at blive set p&aring; Google
        maps</i></p><img width="515" height="223" title=
        "Dynamic-it laver brugertilpassede Google maps" alt=
        "Hos Dynamic-it laver vi brugertilpassede Google maps" src=
        "../images/roulette/google-maps.jpg" /></div>
      </div>

      <p id="toptekstslider">&nbsp;</p>
    </div>

    <div id="mellemslider">
      <div class="rubrik">
        <a href="http://www.dynamicit.dk/hjemmeside.htm"><img border="0" alt=
        "Brugertilpassede hjemmesider Dynamic-it" src=
        "../images/pics/hjemmesider.jpg" /></a>

        <h2>Hjemmesider</h2>

        <p class="tekst">Brugertilpassede hjemmesider, der tager udgangspunkt i dine
        behov og &oslash;nsker, b&aring;de mht. design og kodning</p>
      </div>

      <div class="rubrik">
        <a href="http://www.dynamicit.dk/soegemaskineoptimering-seo.htm"><img border="0"
        alt="S&oslash;gemaskineoptimering (SEO) fra Dynamic-it" src=
        "../images/pics/seo.jpg" /></a>

        <h2>SEO</h2>

        <p class="tekst">S&oslash;gemaskine- optimering (SEO) hj&aelig;lper dig med at
        blive fundet p&aring; nettet</p>
      </div>

      <div class="rubrik">
        <a href="http://www.dynamicit.dk/it-support.htm"><img border="0" alt=
        "IT-support udf&oslash;rt af Dynamic-it" src="../images/pics/support.jpg" /></a>

        <h2>IT-support</h2>

        <p class="tekst">Alt indenfor It-support, lige fra fjernelse af virus til
        ops&aelig;tning af server og netv&aelig;rk</p>
      </div>

      <div class="rubrik">
        <a href="http://www.dynamicit.dk/facebook.htm"><img border="0" alt=
        "Facebookmarkedsf&oslash;ring lavet af Dynamic-it" src=
        "../images/pics/facebook.jpg" /></a>

        <h2>Facebook</h2>

        <p class="tekst">Facebook markedsf&oslash;ring via facebook sider, facebook
        annoncer og facebook applikationer</p>
      </div>
    </div>
  </div>

[ThomasI]

Du skal nok også ind og finde de tilhørende CSS klasser og stylinger, men det burde ikke være svært at finde...

[Heinrich]

Det er ikke slideren jeg tænkte på det er de fire billeder neden under

[cristian]

Det er ikke slideren jeg tænkte på det er de fire billeder neden under

Er det cirka sådan noget her du tænker på?

Kode: Vælg alt

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <style>
            table {
                border-collapse: collapse;
                max-width: 122px;
                
                margin-left: auto;
                margin-right: auto;
            }
            
            td {
                border: 1px dashed black;
            }
        </style>
        
        
    </head>
    <body>
        
        <div style='width: 100%; height: auto;'>
            
            <div style='margin-left: 15%; margin-right: 15%;'>
                
                <table>
                    <tr>
                        <td><img src='http://www.dynamicit.dk/images/pics/hjemmesider.jpg' alt='error'/></td>
                        <td><img src='http://www.dynamicit.dk/images/pics/seo.jpg' alt='error'/></td>
                        <td><img src='http://www.dynamicit.dk/images/pics/support.jpg' alt='error'/></td>
                        <td><img src='http://www.dynamicit.dk/images/pics/facebook.jpg' alt='error'/></td>
                    </tr>
                    <tr>
                        <td>Hjemmesider</td>
                        <td>SEO</td>
                        <td>IT-Support</td>
                        <td>Facebook</td>
                    </tr>
                    <tr>
                        <td>Brugertilpassede hjemmesider, der tager udgangspunkt i dine behov og ønsker, både mht. design og kodning</td>
                        <td>Søgemaskine optimering (SEO) hjælper dig med at blive fundet på nettet</td>
                        <td>Alt indenfor It-support, lige fra fjernelse af virus til opsætning af server og netværk</td>
                        <td>Facebook markedsføring via facebook sider, facebook annoncer og facebook applikationer</td>
                    </tr>
                </table>
                
            </div>
            
        </div>
        
    </body>
</html>

[Heinrich]

Jep takker og håber det virker, sidst jeg prøvede det sådan her kunne jeg ikke ikke får det til at centrerer sig i midten når browseren blev smal, men det må være en css fejl i min kodning,

Super tak for hjælpen,

[cristian]

Jep takker og håber det virker, sidst jeg prøvede det sådan her kunne jeg ikke ikke får det til at centrerer sig i midten når browseren blev smal, men det må være en css fejl i min kodning,

Super tak for hjælpen,

Det var så lidt hvis det bare var det du skulle bruge, jeg gjorde ikke så meget

[Heinrich]

Hehe, det var ligeså meget css'en bag, men nu bygger jeg sitet op i ren statistics html og css, og bager efter laver jeg en en ccs fil til hver skærm størrelse