Форум Сайтостроение Веб-строительство

CSS

Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
712

Ребят, подскажите как сделать так?

Задача в том, что нужно сделать отображение карты на сайте как на этом скрине, только вместо фото девушки, карта Google.

Сейчас вот так у меня:

HTML 

    <div id="module-container"><!-- start #module-container -->

        <div id="module-background-holder">

            <div id="module-background-solid2" class="opacity_0"></div>        	

        </div>

        <div id="module-container-holder" class="module-position-lc" data-id="module-position-lc">

            <div id="module-wrapper">

                <div id="module-contact-container">

                    <div id="map-holder" data-latitude="51.52633" data-longitude="-0.109166" data-icon="assets/media/contact/contact_map_pin.png" data-size="60, 44" data-anchor="30,44">

                       

                    </div>            

                    <div id="module-contact" class="module-position-no-shadow-lb">

                    	<div class="module-contact-background opacity_8"></div>

                    	<div id="module-contact-holder"> 

                        	

                            <div class="title-holder">

                            	<span class="title-text_normal">CONTACT US</span>

                            </div>

                            <div class="custom-separator-careers"></div>

                            <div class="contact-information">

                            	<div class="contact-information-title">

                                </div>

                                <div class="contact-information-details">

                                	<img src="assets/media/contact/icons/icon_address.png" alt="" class="opacity_0" onload="animateThumb(this)" />

                                    <p>                    	

                                    	  156 Blackfriars Road

                                          <br />

                                          Southwark 

                                          <br />

                                          London, UK

                                    </p>

                                </div>

                                <div class="contact-information-details">

                                	<img src="assets/media/contact/icons/icon_phone.png" alt="" class="opacity_0" onload="animateThumb(this)" />

                                    <p>                    	

                                    	   + 44 (0)20 6538 9278

                                    </p>

                                </div>

                                <div class="contact-information-details">

                                	<img src="assets/media/contact/icons/icon_mail.png" alt="" class="opacity_0" onload="animateThumb(this)" />

                                    <p>                    	

                                    	   <a href="mailto:info@domen.com">info@domen.com</a> 

                                    </p>

                                </div>

                            </div>

                            <div class="contact-form-holder">

                            	<form id="contact-form" />

                                	<div class="form-input-half-left form-input-border">

                                    	<div class="form-input-background opacity_2"></div>

                                    	<input id="Your name" type="text" name="Your name" value="Your name*" />

                                    </div>

                                    <div class="form-input-half-right form-input-border">

                                    	<div class="form-input-background opacity_2"></div>

                                    	<input id="Your e-mail" type="text" name="Your e-mail" value="Your e-mail*" />

                                    </div>   

                                    <div class="form-input-large form-input-border">

                                    	<div class="form-input-background opacity_2"></div>

                                     	<input id="Your phone" type="text" name="Your phone" value="Your phone*" />

                                    </div>

                                    <div class="form-input-textarea form-input-border">

                                    	<div class="form-input-background opacity_2"></div>

                                    	<textarea id="Your message" name="Your message">Your message*</textarea>

                                    </div>

                                    <div id="response-form">

                                        <p>Message delivered! Thank You!</p>

                                        <span id="form-warning">PLEASE FILL ALL RQUIRED (*) FIELDS!</span>

                                        <span id="server-error"></span>

                                    </div>

                                    <div class="form-buttons">

                                    	<div id="form-reset">

                                            <p>RESET</p>

                                        </div> 

                                        <div id="form-send" data-sending-txt="SENDING...">

                                            <p>SEND</p>

                                        </div>

                                    </div>

                                    

                                </form>

                            </div>

                        </div>   

                    </div>

                </div>

            </div><!-- end #module-wrapper -->            

        </div>    

        <div id="module-scrollbar-holder_v2">

            <div id="module-scrollbar-background" class="opacity_8"></div>

            <div id="module-scrollbar-dragger"></div>

        </div>

    </div><!-- end #module-container -->
Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#1

CSS 

/* ============================ 6. CONTACT ========================= */

#module-contact-container{

	display: inline-block;

    position: relative;

	width:100%;

}

#map-holder, #media-holder-contact

{

	position:relative;

	float:left;

	width: 100%;

	height: 445px;

	z-index:2;	

	display:none;

	background-image:url(../assets/loaders/loader.gif);

    background-repeat:no-repeat;

	background-position:center;

	background-color: #f5f5f5;

}

#media-holder-contact{ display: inline-block; overflow:hidden;}

#map-holder iframe

{

	position:absolute;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	display:none;	

}

#module-contact

{

	clear:both;

	position:relative;

	float:left;

	z-index:3;

	width:100%;

	height:330px;

	visibility:hidden;

}

.module-contact-background

{

  	position:relative;

	float:left;

	width:100%;

	height:330px;

  	background-color:#ffffff;

}

#module-contact-holder

{

	position:absolute;

	width: 635px;	

	right:0;

	margin-top: 20px;	

}

.contact-information

{

	position:relative;

	float:left;

	width: 40%; 

	height: 230px;

	margin-top: -20px;

}

.contact-information-title

{

	position:relative;

	float: left;

	width: 100%;

	margin-top: 16px;	

}

.contact-information-title p

{

	font-family:PT Sans;

	font-weight: bold;

	font-size:20px;

	color:#333333; 

	text-align:left;	

}

.contact-information-details

{

	position:relative;

	float: left;

	width: 100%;

	margin-top: 20px;

}

.contact-information-details img

{

	position:relative;

	float: left;

	width: 30px;

	height: 30px;

}

.contact-information-details p

{

	position:relative;

	float: left;

	width: 160px;

	margin-left: 15px;

	margin-top: 8px;

	font-family:PT Sans;

	font-weight: normal;

	font-size:14px;

	color:#444444; 

	text-align:left;

}

.contact-information-details p a

{

	position:relative;

	float: left;	

	font-family:PT Sans;

	font-weight: normal;

	text-decoration: none;

	font-size:14px;

	color:#4c4c4c; 

	text-align:left;

}

.contact-information-details p a:hover

{

	font-family:PT Sans;

	font-weight: normal;

	text-decoration: underline;

	font-size:14px;

	color:#4c4c4c; 

	text-align:left;

}

.contact-form-holder

{

	position:relative;

	float:left;

	width: 56%; 

	height: 250px;

	margin-top: 10px;

	margin-left: 4%;

}

.contact-form-holder form

{

	position: relative;

	float: left;

	width: 100%; 

	margin-top: 8px;	

}

.form-input-half-left

{

	position:relative;

	float: left;

	width: 48%; 

	height: 30px;

	margin: 2px auto;	

}

.form-input-half-left input, .form-input-half-right input

{

	position:absolute;

	float:left;

	left: 0px;

	width: 97%; 

	height:25px;

	top: 0px;

	margin: 3px auto;

	margin-left: 5px;

	padding: 0;

	background-color:transparent;

	border: none;

    font-family:PT Sans;

	font-weight: normal;

	text-decoration: none;

	font-size:14px;

	color:#0c0c0c; 

	text-align:left;

	overflow:hidden;

	outline: none;

}



.form-input-half-right

{

	position:relative;

	float:left;

	width: 48%;  

	height: 30px;

	margin: 2px auto;

	margin-left: 2%;

}



.form-input-large

{

	position:relative;

	float: left;

	width: 98.5%;  

	height:30px;

	margin: 5px 1% 2px 0;

}

.form-input-large input

{

	position:absolute;

	float:left;

	left: 0px;

	width: 98.5%; 

	height:25px;

	top: 0px;

	margin: 3px auto;

	margin-left: 5px;

	padding: 0;

	background-color:transparent;

	border: none;

    font-family:PT Sans;

	font-weight: normal;

	text-decoration: none;

	font-size:14px;

	color:#0c0c0c; 

	text-align:left;

	overflow:hidden;

	outline: none;

}

.form-input-textarea

{

	position:relative;

	float: left;

	width: 98.5%; 

	height:120px;

	margin: 5px 1% 2px 0;

	

}

.form-input-textarea textarea

{

	position:absolute;

	float:left;

	left: 0px;

	width: 98.5%; 

	height:115px;

	margin: 3px auto;

	margin-left: 5px;

	padding: 0;

	background-color: transparent;

	border: none;

    font-family:PT Sans;

	font-weight: normal;

	text-decoration: none;

	font-size:14px;

	color:#0c0c0c; 

	text-align:left;

	overflow:hidden;	

	outline: none;

}

.form-input-border{

	border: #6e6e6e 1px solid;	

}

.form-input-error-border{

	border: #cc0033 1px solid;	

}

.form-input-background

{

	position: relative;

	float: left;

	width: 100%;

	height: 100%;

	background-color: #9e9e9e;	

}

#response-form{

	display:none;

	position:relative;

	float:left;

	left: 0px;

	margin-top: 6px;

	margin-right: 0px;	

	line-height: 110%;

	width: 48%;	

}

#response-form p, #response-form span

{

	display:none;

	font-family:PT Sans;

	font-weight: bold;

	text-decoration: none;

	font-size:13px;

	color:#3f3f3f; 

	text-align:left;

}

#response-form span{ color: #cc0033; }

.form-buttons

{

	position:relative;

	float:right;

	right: 0px;

	margin-top: 6px;

	margin-right: 0px;

	width: 48%;

}

#form-reset, #form-send

{

	position:relative;

	float:left;

	width: 45%;

	line-height: 200%;

	background-color: #3F3F3F;

	margin-left: 7px;

	cursor: pointer;

	cursor: hand;

}

#form-reset p, #form-send p

{

	font-family:PT Sans;

	font-weight: normal;

	text-decoration: none;

	font-size:13px;

	color:#FFFFFF; 

	text-align:center;

}

Т.е. белый фон нужно сделать полупрозрачным и карту сделать на всю страницу. Подскажите пожалуйста как это сделать.

C
На сайте с 04.02.2005
Offline
291
Chukcha
#2
белый фон нужно сделать полупрозрачным

ну так наложите полупрзрачный фон из изображения.

Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#3

Chukcha, как увеличить карту на всю страницу? как сделать фон поверх карты?

N
На сайте с 06.04.2011
Offline
53
nemartirosyan
#4

для блока карты в стилях position:relative;

блоку контактов задать в стилях position:absolute;

и полупрозрачный фон накладкой в .png вместо background с белым фоном

Грамотная верстка. Изготовление сайтов на базе CMS Joomla. (/ru/forum/897104)
Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#5

nemartirosyan, спасибо большое. Как избавится от строки 780px? 

#map-holder, #media-holder-contact

{

	position:relative;

	float:left;

	width: 100%;

	height: 780px;

	z-index:2;	

	display:none;

	background-image:url(../assets/loaders/loader.gif);

             background-repeat:no-repeat;

	background-position:center;

	background-color: #f5f5f5;

}

И почему в Опере на странице появилась вертикальная прокрутка, а в Сафари нет. Как убрать ее в Опере?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий