Jump to content
  • 0

Помогите со слайдами


vitaxastifler
 Share

Question

Ребята,помогите сделать слайд (выделил) ну и конечно он должен иметь текст как вы видите и кнопочку (meer info) остальные страницы слайда не важны.

http://hostingkartinok.com/show-image.php?id=155a20e4f8a5d58970c02fcd071359db

 

Вот такой он в порезке.

 

http://hostingkartinok.com/show-image.php?id=bcc09da63473f98f1e25291c5a8e2792

Link to comment
Share on other sites

Recommended Posts

  • 0

http://hostingkartinok.com/show-image.php?id=00e2e5691aaeec86352563abde3a0f40

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>SYNTHESE</title>  <link rel="stylesheet" type="text/css" href="css.css">   </head> <body><div id="global"><div id="header"><img src="images/logo.jpg"></div><div id="Home"><a href="http://vk.com">Home</a><img class="line" src="images/Line1.jpg"><a href="http://vk.com">Sitemap</a><img class="line" src="images/Line1.jpg"><a href="http://vk.com">Links</a><img class="line" src="images/Line1.jpg"><a href="http://vk.com">Contact</a></div><div class="ctr"><span class="menu"><button type="button">Afval & reiniging</button><button type="button">Inkopen & aanbesyeden</button><button type="button">Logistiek & mobiliteit</button><br/><button type="button">MVO & duurzaamheid</button><button type="button">Energie & klimaat</button><button type="button">Training & coaching</button></div><div class="block"><button type="button">Home</button><br/><button type="button">Over Synthese</button><br/><button type="button">MVO</button><br/><button type="button">Mensen achter Synthese</button><br/><button type="button">Opdrachten</button><br/><button type="button">Netwerk Synthese</button><br/><button type="button">Contact en bereikbaarheid</button><br/><button type="button">Nieuws</button>														</div>  	 </div> </body></html>

CSS

#header{float: left;}#Home img, #Home a {float: left;}#Home{float: right;margin-right: 45px;}a{text-decoration: none;}.line{}#global {  background-image: url("images/BG.jpg");  width: 903px;  height: 1373px; margin:auto;}.ctr {    text-align: center;}.menu {    display: inline-block;    text-align: left;padding: 45pt 7pt 2pt 7pt;}.ctr button {    background: #2d2d2d;    border: none;    color: #d5d5d5;    cursor: pointer;    line-height: 23px;}button:first-child {    background: #306dbd;    color: white;    cursor: default;}button:hover {    background: #306dbd;    color: white;}.block button {        border: none;    color: #d5d5d5;    cursor: pointer;    line-height: 35px;}.block button:hover {    background: #306dbd;    color: white;text-decoration: underline;}.block {  background-image: url("images/block.jpg");  width: 220px;  height: 251px;  padding-top:25px;  padding-left:10px;}.block button {    background: #461864;    border: none;    color: white;    cursor: pointer;    line-height: 20px;}.block button:hover {    background: #6b4683;    color: white;}
Edited by vitaxastifler
Link to comment
Share on other sites

  • 0

Как я понял нужен слайд с картинкой а на картинке должен быть текст и кнопка, да?

Это можно сделать так:

Создать обертку, в обертку вставить нужную вам картинку текст и кнопку.

Тексту и кнопке задать абсолютное позиционирование и настроить их положение.

Link to comment
Share on other sites

  • 0

Картинки можно залить на любой бесплатный хостинг картинок. А по теме — я вообще не вижу ничего похожего на то, что нарисовано в изначальном макете.

Link to comment
Share on other sites

  • 0

ТС, поимей уже совесть, перестань издеваться и напиши в чем конкретно задача, приведи пример рабочего кода

 

на любом другом форуме тебя уже послали бы несколько раз в гугл

Edited by cyklop77
Link to comment
Share on other sites

  • 0

Простите ребята)

http://stifler.netii.net

Вот собственно мой сайт,уже готовый,только там должен быть слайд.

Вот типа такого типа http://slidesjs.com

Но в моём случаи его надо передалать вот так.

http://hostingkartinok.com/show-image.php?id=6a9c84a1126e804948c698358c398d3b

Edited by vitaxastifler
Link to comment
Share on other sites

  • 0

Оберните три блока в ещё один у коготого будет overflow: hidden и position: relative. Внутри него ещё один с position: absolute. Далее расставте слайды внутри него в нужном количестве. Ну и повесьте события на кнопки, чтобы они изменяли left у блока с абсолютным позиционированием. Я делаю примерно так.

Link to comment
Share on other sites

  • 0

Ребята,подскажите как мне с http://jsbin.com/OBiSIjek/3/edit сохранить всё на пк?

Получается что когда я копирую html и css то в нём не все есть(

Инспектирую элементы и не всё есть.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy