html - Gentagning af grafik - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #12118 @ 02.01.09 22:11

Hejsa, jeg er igang med at lave et design, jeg vil så gerne have at "content" skal fortsætte ned af hvis ens skærm er højere end selve designet,

her er designet: http://ziimx.zeekoo.dk/design2.jpg

Vil gerne høre hvordan jeg kan få den til at fortsætte nedaf eventuelt hvordan jeg skal skære grafikken ud, og hvordan det skal sættes op i div

Håber i forstår hvad jeg mener

19 svar postet i denne tråd vises herunder
5 indlæg har modtaget i alt 7 karma

Sorter efter stemmer Sorter efter dato

Bruger #10647 @ 03.01.09 01:45

233

Du kan lure koden af på www.whiskybaeltet.com
Det er en side jeg har lavet hvor der er 100% højde vha. javascript på de sider som ikker høje nok

EDIT Argh, havde glemt den var komprimeret :p Finder lige koden til dig

EDIT Her er eksemplet.
Håber du er lidt hardcore i HTML og Javascript ellers forstår du nok ikke meget af følgende

:
eksemplet kræver at du har Prototype JS frameworket inkluderet og at har et id på det sidste element på din side:

JScript kode

 document.observe("dom:loaded", function(){
                 bodyHeight();
                 });
             });
  Event.observe(window, "resize", function(){
                 bodyHeight();
             });
 function bodyHeight(){
                 var childElements = $$("ID_PÅ_SIDSTE_ELEMENT");
                 var lastChildElement = childElements[childElements.length - 1];
                 document.body.style.height = (((lastChildElement.offsetTop + lastChildElement.offsetHeight + 43) < document.viewport.getHeight()) ? document.viewport.getHeight() : (lastChildElement.offsetTop + lastChildElement.offsetHeight + 10)) + "px";
                 lastChildElement.style['height'] = (lastChildElement.offsetHeight) + "px";
             }

Scriptet tager desuden højde for resizing af browseren. Det kan også være du vil pille ved de numre der bliver lagt til i de 2 sidste linjer af bodyHeight().

Indlæg senest redigeret d. 03.01.2009 01:52 af Bruger #10647

Bruger #5097 @ 03.01.09 00:38

818

Det er stort problem. Spørg mig ikke hvorfor man ikke har gjort det lettere.

Jeg ved at mange har spurgt her på udvikleren igennem tiden, men ikke rigtig har fået løst deres problem.

Mangle sider forklare dog løsninger, men mener vist at de kan være lidt problematiske - især hvis de skal virke i de fleste browsers.

Læs:
http://www.xs4all.nl/~peterned/examples/csslayout1.html
http://www.webmasterworld.com/forum83/200.htm
http://apptools.com/examples/tableheight.php

eller søg selv videre på google:
http://www.google.dk/search?q=100+%25+height&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:da:official&client=firefox-a

Men igen, tror ikke det er lige let.

Bruger #5789 @ 03.01.09 17:30

640

han vil have height: 100%;

Men du er da velkommen til at komme med en løsning i ren CSS

Jeg arbejder pro, så vil da gerne hjælpe men ville være ked af at skulle bruge tid på at lave andres arbejde.

Her er et udkast der evt lige kan pudses lidt af, det er ikke testet ordentligt, sidder på min desktop herhjemme, og har ikkke lige alle de skide browsere installeret.

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>100% height</title>

<style type="text/css">
@import "http://developer.yahoo.com/yui/build/reset/reset.css";
html, body
{
	height: 100%;
}
#Wrapper
{
	width: 60em;
	margin: 0 auto;
	background-color: red;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
}

.Box
{
	position: absolute;
	border: 2px solid blue;
	top: 10em;
	width: 10em;
	right: -10em;
}

#LeftBox
{
	left: -10em;
}
</style>
</head>

<body>
<div id="Wrapper">
	<div id="Content">
		    sdfgas df asdf sadf asdf<br />	
    </div>
    <div id="LeftBox" class="Box">
        	Left
     </div>
     <div id="RightBox" class="Box">
        	Right
     </div>
</div>
</body>
</html>

Bruger #10216 @ 03.01.09 20:15

4.283

Lav et tværsnit af det der skal gentages over siden - uden top, uden bund og måske uden sider.

Du har jo selv lige forklaret hvordan det skal skæres. Se hvor mange gentagelser du laver.

Bruger #11328 @ 04.01.09 02:21

1.323

Jeg kan virkelige ikke forstå hvorfor over 20% af alle internet brugere bruger IE6?? Det er så enkelt at opdatere, og programmet er ikke specielt mere krævende??

Bruger #5789 @ 03.01.09 11:42

640

Hvad er problemet, det kan let løses med CSS, som det bør. ?

Bruger #10647 @ 03.01.09 16:49

233

han vil have height: 100%;

Men du er da velkommen til at komme med en løsning i ren CSS

Bruger #10647 @ 03.01.09 17:44

233

Jeg arbejder pro, så vil da gerne hjælpe men ville være ked af at skulle bruge tid på at lave andres arbejde.

Selvfølgelig, kan godt forstå dig. Nu er det heller ikke mig der er problemstilleren, jeg var bare nysgerrig efter om det kunne lade sig gøre

Så lærte jeg sku også en ting idag :roll:

Har bare ikke testet den i IE6 og det var det problem jeg selv havde i sin tid hvor jeg kom op med det hack jeg jeg har postet længere oppe.

Bruger #5789 @ 03.01.09 17:53

640

ja tricket er

min-height: 100% -> til moderne browsere
height: auto !important -> til moderne browsere
height: 100%; -> til IE6

minheight siger sig selv, den vil forøge sig hvis der kommer mere indhold.

height: auto !important, overskriver height: 100% i de moderne browsere.. Så det er kun IE6 der fanger de height: 100%;

/J

Bruger #10647 @ 03.01.09 18:20

233

ja det ved jeg, men følger IE6 så reglerne i dette tilfælde ?

<< < 1 2 > >>

Gentagning af grafik

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler