W tej chwili, gdy zmniejszasz stronę, moje elementy kończą się na sobie, zamiast powodować przewijanie strony. Czy ktoś może wskazać mi właściwy kierunek?
<html>
<head>
<title> Div Blocks</title>
<style type="text/css">
html {
background: url(bgo.jpg) no-repeat center center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
a{
cursor : url("nav.png"), pointer;
}
div.one a
{
position:absolute;
top:50px;
left:60px;
width: 400px;
height: 100px;
text-decoration:none;
background:url("branding.png");
background-repeat:no-repeat;
padding-bottom:35px;
}
div.one a:hover
{background: url("brandingalt.png");
background-position: 0px 0px;
background-repeat:no-repeat;
}
div.two a
{
position: absolute;
top:264px;
left:60px;
width: 400px;
height: 100px;
text-decoration:none;
background:url("marketing.png");
background-repeat:no-repeat;
padding-bottom:35px;
}
div.two a:hover
{background: url("marketingalt.png");
background-position:0px 0px;
background-repeat:no-repeat;
}
div.three a
{
position: absolute;
top:457px;
left:56px;
width: 500px;
height: 100px;
text-decoration:none;
background:url("ecommerce.png");
background-repeat:no-repeat;
padding-bottom:20px;
}
div.three a:hover
{background: url("ecommercealt.png");
background-position: 0 0px;
background-repeat:no-repeat;
}
div.r1 a
{
position: absolute;
top:50px;
right:60px;
width: 400px;
height: 100px;
text-decoration:none;
background:url("webdesign.png");
background-repeat:no-repeat;
padding-bottom:25px;
}
div.r1 a:hover
{background: url("webdesignalt.png");
background-position: 0px 0px;
background-repeat:no-repeat;
}
div.r2 a
{
position: absolute;
top:254px;
right:75px;
width: 450px;
height: 150px;
text-decoration:none;
background:url("optimization.png");
background-repeat:no-repeat;
padding-bottom:20px;
}
div.r2 a:hover
{background: url("optimizationalt.png");
background-repeat:no-repeat;
}
div.r3 a
{
position: absolute;
top:457px;
right:60px;
width: 400px;
height: 75px;
text-decoration:none;
padding-bottom: 20px;
background:url(packaging.png);
background-repeat:no-repeat;
}
div.r3 a:hover
{background: url("packagingalt.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="one">
<a href="#" value="Branding" class="go" ></a>
</div>
<div class="two">
<a href="#" class="go"></a>
</div>
<div class="three">
<a href="#"class="go" ></a>
</div>
<div class="r1">
<a href="#"class="go" ></a>
</div>
<div class="r2">
<a href="#"class="go" ></a>
</div>
<div class="r3">
<a href="#"class="go" ></a>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$("a").click(function(event){
event.preventDefault(); // prevent the link from changing the location
$(this)
.closest("div") // select the parent div of the link
.siblings() // select all the siblings of the div
.hide("slow") // hide them
setTimeout(function() {
$(".go").animate({top: "0"}, "slow");},1200);
});
</script>
Spróbowałem przestawić elementy, używając sztuczki stołowej, używając przepełnienia, a mimo to wydaje mi się, że nie działa poprawnie.
Odpowiedzi:
0 dla odpowiedzi № 1Za pomocą position: absolute; usuwa elementy z przepływu strony, aby nie "wpadały" na siebie. Zamiast tego, jeśli możesz dowiedzieć się, jak to zrobić bez tego, uzyskasz pożądany efekt. Możesz także ustawić a min-width na stronie, ale nie spowoduje pionowego przewijania, ale poziomego.
0 dla odpowiedzi nr 2
Trudno powiedzieć, ale wydaje się, że masz problemy ze swoim absolutnym pozycjonowaniem ...
Spójrz na tę stronę http://jsfiddle.net/RQ8QA/1/
Zauważ, że zmieniłem wszystko z pozycji: absolutna na pozycję: względna.
0 dla odpowiedzi № 3
Oczywistym rozwiązaniem, o ile widzę, byłoby owinięcie wszystkich elementów w pojemnik o stałej szerokości, który nie zmieni się, gdy przeglądarka się skurczy.
Jeśli próbujesz zachować zmienną szerokość, arozwiązanie, z którego korzystałem ostatnio całkiem sporo, polegało na wstawianiu wszystkich elementów w linii (lub w inline-block), umieszczaniu ich obok siebie, a następnie dodawaniu white-space: nowrap do ich pojemnika.
<div id="container">
<div class="elem-1">
...
</div><div class="elem-2">
...
</div><div class="elem-3">
...
</div><div class="elem-4">
...
</div>
</div>
Zwróć uwagę, że kolejne elementy dotykają: </div><div class="elem. To nie jest literówka; usunięcie spacji w znacznikach powoduje, że elementy śródliniowe dotykają, gdy są wyświetlane.
CSS:
#container { white-space: nowrap; }
#container > div {
white-space: normal;
display: inline-block; }
Pamiętaj, że musisz ustawić white-space: normal w każdym z wewnętrznych elementów, jeśli chcesz, aby zachowywały się normalnie.