[SITE]Te ingewikkeld pixel werk.!
Ik ben een fun-site voor lokale vrienden aan het maken.
Nu de site is wat ingewikkeld qua structuur vind ik ofwel heb ik het verkeerd aangepakt.
Hier is hoe hij eruit moet zien.!
http://wouter.php-design.be/thadutchmobb.png
Dit is wat ik nu heb.!
http://wouter.php-design.be/thedutchmobb/
..
....
.....Nu mijn probleem is zoals je site die 2 mannetjes , de footer, en de pixel links-rechts boven.
Ik zal hier men css plaatsen:
http://wouter.php-design.be/thedutchmobb/style.css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/* Css Style voor The Dutch Mobb */
*{
background-color: black;
padding: 0px;
margin: 0px;
}
#maincontainer{
height: 590px;
width: 645px;
}
#header{
width: 645px;
height: 100px;
border: 1px solid black;
margin-left: 140px;
background: url('header.png');
}
#maincontent{
background: url('maincontent.png');
width: 647px;
height: 430px;
margin-left: 140px;
}
#menu{
width: 99px;
height: 150px;
background: url('menu(2).png');
background-repeat: no-repeat;
border-right: 1px solid black;
border-left: 1px solid white;
border-top: url('menutop.png');
}
#content{
padding-top: 1px;
background: url('content.png');
height: 200px;
width: 545px;
float: right;
}
#footer{
background: url('footer.png');
height: 50px;
width: 645px;
margin-left: 140px;
border: 1px solid white;
}
*{
background-color: black;
padding: 0px;
margin: 0px;
}
#maincontainer{
height: 590px;
width: 645px;
}
#header{
width: 645px;
height: 100px;
border: 1px solid black;
margin-left: 140px;
background: url('header.png');
}
#maincontent{
background: url('maincontent.png');
width: 647px;
height: 430px;
margin-left: 140px;
}
#menu{
width: 99px;
height: 150px;
background: url('menu(2).png');
background-repeat: no-repeat;
border-right: 1px solid black;
border-left: 1px solid white;
border-top: url('menutop.png');
}
#content{
padding-top: 1px;
background: url('content.png');
height: 200px;
width: 545px;
float: right;
}
#footer{
background: url('footer.png');
height: 50px;
width: 645px;
margin-left: 140px;
border: 1px solid white;
}
Mijn html kan je uit de site halen..
Heeft iemand soms tips of de oplossing want in IE werkt hij ook tegen !.
MVG
ik zou de afbeelding van hoe hij er uit moet zien is stukjes knippen, en zo in html zetten.
Table
header
linkermarge - inhoud - rechtermarge
footer
in de linkermarge zet je als achtergrond ervan die gele lijn, en daar gooi je nog es die afbeelding van die gast boven,
linkermarge net hetzelfde
Je bedoelt het scherm delen verticaal in 3.
Ja ik zal eens proberen.
Maar dan moet ik wel div's aan de zijkant doen niet ?(horizontaal)
mvg
Mijn Merel zegt altijd ...
ik heb iets meer dan 5 minuutjes gewerkt aan je site, ik heb een zip file gemaakt met wat ik gedaan heb.
http://rapidshare.com/files/86003586/dutchmobb.rar ;)
je css is het volgende, er zijn heel wat serieuze flaters in je css zelf waardoor je een verknoeide site krijgt.
omdat ik geen zin had om het allemaal te doen besloot ik om zelf maar een nieuwe aan te make en je te helpe.
hier is je nieuwe css bvb
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
html, body {
background: #000000;
color: #cfcfcf;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: 12px;
width: 943px;
text-align:center;
height: 100%;
}
#maincontainer{
width:943px;
margin: 0 auto;
height:95%;
background:#000000 url(main.png) repeat-y;
text-align:left;
}
#tekst{
background:url(tekst.png) no-repeat;
height:310px;
width:435px;
float:left;
}
#main{
background:url(main.png) repeat-y center;}
#rechts{
background:url(rechts.png) top no-repeat;
width:219px;
float:left;
height:310px;}
#header{
background:url(header.png) no-repeat;
height:141px;
width:943px ;}
#menu{
background:url(menu.png) no-repeat top;
height: 293px;
width:124px;
float:left;
}
#links{
background:url(links.png) no-repeat;
float:left;
width:156px;
height:293px;}
#footer{
height:71px;
background:url(footer.png) no-repeat bottom #000000;
width:934px;
float:left;
margin: 0 auto;
}
background: #000000;
color: #cfcfcf;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: 12px;
width: 943px;
text-align:center;
height: 100%;
}
#maincontainer{
width:943px;
margin: 0 auto;
height:95%;
background:#000000 url(main.png) repeat-y;
text-align:left;
}
#tekst{
background:url(tekst.png) no-repeat;
height:310px;
width:435px;
float:left;
}
#main{
background:url(main.png) repeat-y center;}
#rechts{
background:url(rechts.png) top no-repeat;
width:219px;
float:left;
height:310px;}
#header{
background:url(header.png) no-repeat;
height:141px;
width:943px ;}
#menu{
background:url(menu.png) no-repeat top;
height: 293px;
width:124px;
float:left;
}
#links{
background:url(links.png) no-repeat;
float:left;
width:156px;
height:293px;}
#footer{
height:71px;
background:url(footer.png) no-repeat bottom #000000;
width:934px;
float:left;
margin: 0 auto;
}
Wat je bvb ook nog kan doen is een innertube gebruiken voor je tekst en deze niet in <div id="tekst"> te schrijven.
dit met een margin-left te gebruiken en dan dezelfde width gebruiken als je tekstvak.
je hoeft geen hoogte in te stellen bij die innertube als je dat doet; de site heeft namelijk die achtergrond (main.png) die ervoorzorgt dat je altijd op die achtergrond zal blijven schrijven aangezien html & body op height:100% staan. begrijp je ?
je footer zal ook altijd beneden blijven ;) zoals in je index.php het geval zal zijn.
Kijk goed naar de code enz. en hoe het gebeurd is en dan kan je het zelf namaken op gebruiken doet er niet toe.
Ik hoop dat dit toch iets geholpen heeft ...
Sander
Nu denk ik wel dat ik zie wat er fout was , en mijn aanpak was ook verkeerd.
(ps.:de mannetjes staan nog niet perfect , dus nu dacht ik het volgende, maar dit gaat waarschijnlijk fout aflopen, Gewoon de linkse persoon omdraaien (180°) zodat ze even hoog komen , maar is er dan geen probleem met de 'kap' van Lil Wayne ?.)
Toch Bedankt,.
mvg
Die borders eromheen kun je ook met css doen, maar wil je het mooi enzo doen, maak dan van de hoeken een plaatje en een plaatje van een klein stukje van de balk (die kun je repeaten)
Je hebt nu hele vlakken letterlijk uitgeknipt en op je site geplakt. Die 2 gasten met mutsen op, die moet je netjes op hun plek zetten waar ze horen te staan en helemaal uitknippen. Dus niet met een stukje van je menu er nog bij enzo, want zo kan je site nooit liquid worden.
Wat je kunt doen is die 2 mannetjes in de achtergrond afbeelding verwerken (2 poppetjes in 1 afbeelding), maar dan zo dat ze standaard op de goede hoogte zitten. (je tekst en borders gaan er dan wel overheen lopen) Je doet in je body nog een background-color van zwart erbij en zo lijkt het net zoals het al was.
Je kunt die poppetjes ook apart uitknippen en in een divje stoppen die je absoluut gaat positioneren (dan kan je site niet liquid worden).
Er zijn nog veel meer mogelijkheden, maar de manier die je nu doet zou ik zeker niet doen.
180 graden draaien? (ik denk niet dat ik je begrijpt, maar door hem te draaien blijft hij op dezelfde plek staan. En een plaatje omdraaien ziet er raar uit want die is dan in spiegelbeeld)
Je moet of de ene omhoog zetten of de andere omlaag, pas dan komen ze gelijk.
Maar ik zou eerst even nadenken over de dingen die ik hiervoor allemaal genoemd heb.
(Wij rapen alle dagen)
Gewijzigd op 01/01/1970 01:00:00 door - -
ik zal nog eens kijken naar de code waar ik iets fout heb gedaan en direct posten ;)
Maar als je je verveeld mag je het natuurlijk altijd doen :).
Edit:
Open firebug. Wat zie je direct. in de maincontainer is de footer weg. En die moet er namelijk wel in anders krijg je problemen.!
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
ik zag ook het volgende:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
html, body {
background: #000000;
color: #cfcfcf;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: 12px;
width: 943px;
text-align:center;
height: 90%;
}
background: #000000;
color: #cfcfcf;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: 12px;
width: 943px;
text-align:center;
height: 90%;
}
heb je die height zo verandert ?
het zou 100% moeten zijn.
ook komen de mannetjes mooi op 1 lijn bij mij :s
ik ga ook eens kijken waarom hij niet in het midden wil komen ;)
De mannetjes hebben nooit op 1 rechte lijn gestaan...
Voila mss helpt dit je nog verder :)
wouter schreef op 24.01.2008 18:23:
Neen , ik heb het wel aangepast omdat hij hier niet 100% was en ik dus met een overbodige scroller zat.
De mannetjes hebben nooit op 1 rechte lijn gestaan...
Voila mss helpt dit je nog verder :)
De mannetjes hebben nooit op 1 rechte lijn gestaan...
Voila mss helpt dit je nog verder :)
aha ok dat verklaart veel; had het eerst niet gezien om dat het verschil toch niet zo groot is :)
ik begrijp je idee van overbodige scroller maarja hangt van je resolutie af natuurlijk ;)
ik weet niet precies of hij dan zal uitrekken op 90%, maar je kan altijd een iframe toepassen ;)
ik denk dat alles dan in orde is nee ?
blij dat ik toch kon helpen
de footer zal de fout zijn in je html. doordat die afhankelijk is van de container. dit verklaart ookal veel. Ik ga eens zien dit optelossen . Wat als je de % de groot veranderd dan komen er weer Lege (gegomde) lijnen tegen :(.
je bent trouwens wel hard bedankt.!
div v/d footer in maincontainer zette.
en div van main container in je css op 100% zette, en ook je height uit je body weg doen.
normaal zou dat het moete fixe ;)
Doe ik een volgende keer :) Nu is hij goed :)
1 dingetje in FF toont je menu niet zo als in IE het is compleet anders, mss iets maken dat het bij beide een beetje hetzelfde is ;)