Jump to content
  • 0

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

vitaxastifler

Asked by vitaxastifler,

 Share

Question

vitaxastifler Explorer

vitaxastifler

Posted
Posted

Ребята,помогите сделать слайд (выделил) ну и конечно он должен иметь текст как вы видите и кнопочку (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

27 answers to this question

Recommended Posts

  • 0
vitaxastifler Explorer

vitaxastifler

Posted
  • Author
Posted (edited)

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
Bloomerwd Explorer

Bloomerwd

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
Veseloff Explorer

Veseloff

Posted
Posted

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

Link to comment
Share on other sites
  • 0
cyklop77 Explorer

cyklop77

Posted
Posted (edited)

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

 

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

Edited by cyklop77
Link to comment
Share on other sites
  • 0
vitaxastifler Explorer

vitaxastifler

Posted
  • Author
Posted (edited)

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

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
Veseloff Explorer

Veseloff

Posted
Posted

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

Link to comment
Share on other sites
  • 0
vitaxastifler Explorer

vitaxastifler

Posted
  • Author
Posted

Ребята,подскажите как мне с 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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept