Wątek przeniesiony 2015-11-10 21:42 z Webmastering przez dzek69.

Obrazek, a zwężanie się okna...

0

Witam, potrzebuję zrobić coś takiego, że gdy zwężam okno przeglądarki obrazek(baner) najpierw równomiernie mu schodzi margines z lewej jak i z prawej, ale na końcu niestety, a lewej strony obrazek stoi, a z prawej go ucinam, a chcę, żeby ucinało go z dwóch stron jak i te marginesy...

<div id="test"><img src="850ca7d90566b9ed82c60d9d50771230.jpg" /></div>

#test{width: 651px;margin: 10px auto;}
1

Ustaw obrazek jako tło diva i nadaj odpowiednie właściwości:

#test {
    background: url('850ca7d90566b9ed82c60d9d50771230.jpg') no-repeat center center;
}
0
Maciej Cąderek napisał(a):

Ustaw obrazek jako tło diva i nadaj odpowiednie właściwości:

#test {
    background: url('850ca7d90566b9ed82c60d9d50771230.jpg') no-repeat center center;
}

#test{
	background: url('850ca7d90566b9ed82c60d9d50771230.jpg') no-repeat center center;
	width: 651px;
	height: 418px;
	margin: 5px auto;
}

Nie idzie to za bardzo :/

1

Zamiast width daj max-width

0

O to chodziło, dzięki wielkie :)

0

Nie wiem co jest, zrobiłem tak jak było mówione, ale obrazek jednak ma to w d..., aby się przesuwać...

Plik HTML

<!DOCTYPE html>
<html lang="pl">

<head>

	<meta charset="utf-8">
	<link href="styles/main.css" rel="stylesheet" type="text/css">
	<title>Jewelers...</title>
	<meta name="description" content="Na stronie możesz się dowiedzieć dużo rzeczy na temat biżuterii.">
	<meta name="keywords" content="biżuteria, nauka, tanio, tania biżuteria, nauka o biżuterii, poradnik o biżuterii, poradnik">
	<meta name="robots" content="all,index,follow">
	<meta name="author" content="Tomasz Dulak>"

</head>

<body>
	<header>
    	<div id="kontener_header">
            	
            <h1>
            	JEWELERY
            </h1>
            
            <nav>
            
            	<ul>
                	<li><a href="#" name="Home.">Home.</a></li>
               	 	<li><a href="#" name="News.">News.</a></li>
                	<li><a href="#" name="Work.">About.</a></li>
               		<li><a href="#" name="Contact.">Contact.</a></li>
                </ul>
                
            </nav>
            <div id="header_social_media">
            	<a href="#" name="Twitter">L</a>
            	<a href="#" name="Facebook">F</a>            
            </div>
        	<div id="opis_tla">
        		<div id="opis1">
            		Creating realistics
            	</div>
           	 	<div id="opis2">
            		WORKSHOP UNIQUE DECORATIONS
            	</div>
            	<div id="przyciski_opis">
            		<a href="#" name="Learn more">Learn more</a>
            		<a href="#" name="Choose decoration">Choose decoration</a>
            	</div>
        	</div>
        </div>
	</header>
</body>

</html>

CSS

header, div, a, h1 {
	outline: 1px solid red;
}

/* OGÓLNE */

body {
	margin: 0;
}

.clear {
	clear: both;
}

/* CZCIONKI */

@font-face {
    font-family: Roboto-Bold;
    src: url(../fonts/Roboto-Bold.ttf);
}

@font-face {
    font-family: Roboto-Regular;
    src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: Socialico;
    src: url(../fonts/Socialico.ttf);
}

/* HEADER */

header {
	background-image: url(../images/logo.jpg) no-repeat center center;
	max-width: 1920px;
	height: 800px;
}

#kontener_header {
	width: 940px;
	height: 800px;
	margin: 0 auto;
	outline: 1px solid blue; /* KONT */
	position: relative;
}

h1 {
	font-family: Roboto-Bold;
	color: white;
	float: left;
	position: relative;
	top: 10px;
}

nav {
	float: left;
	position: absolute;
	right: 80px;
	outline: 1px solid orange; /* KONT */
}

nav ul li {
	float: left;
	margin: 30px 20px;
	list-style: none;
}

nav ul li a {
	color: #ffffff;
	text-decoration: none;
	font-family: Roboto-Regular;
	font-size: 14pt;
}

nav ul li a:hover {
	opacity: 0.5;
}

#header_social_media {
	float: left;
	position: absolute;
	right: 10px;
	top: 42px;
}

#header_social_media a {
    font-family: Socialico;
	color: #ffffff;
	text-decoration: none;
	margin: 40px 10px;
}

#header_social_media a:hover {
	opacity: 0.5;
}

#header_social_media a:visited {
	text-decoration: none;
}  

/* OPIS HEADER */
#opis_tla {
	outline: 1px solid green; /* KONT */
	position: relative;
	top: 600px;
}

Zdjęcie w załączniku...

1 użytkowników online, w tym zalogowanych: 0, gości: 1