[css / html] resolutie probleem - Softwareontwikkeling

maandag 21 maart 2005 09:11

Acties:

Topicstarter

Ik krijg maar geen manier gevonden om de background en de rest van de website ongeacht de resolutie op dezelfde plek te houden.

Mijn huidige oplossing is de website openen in een pop-up schermpje, maar dat vind ik eigenlijk niet zo mooi. Zie hiervoor http://www.smd-bv.com

Een voorbeeld zoals ik het graag zou willen is http://www.wwa.nl

Als je het venster groter of kleiner maakt blijft toch alles op zijn plek.

Mijn website ziet er als volgt uit. Ik heb geprobeert de background te zien als een plaatje en de andere texten er dus gewoon over te laten gaan, maar toch krijg je dan niet het gewenste effect.

code:

<html>

<head>
<style type="text/css">
body
{ 
background-image: 
url('back1.jpg');
background-repeat: 
no-repeat;
background-position: 
  center;
}
</style>
<style type="text/css">
h1.padding {padding-right: 25%}
h1 {position: absolute; top: 12%; left: 7%}
h1 {color: rgb(0,0,0)}
h1 {font: 25px arial}
p.padding {padding-right: 25%}
p {position: absolute; top: 28%; left: 23%}
p {color: rgb(0,0,0)}
p {font: 25px arial}
h2.padding {padding-right: 25%}
h2 {position: absolute; top: 12%; left: 24%}
h2 {color: rgb(0,0,0)}
h2 {font: 25px arial}
h3.padding {padding-right: 25%}
h3 {position: absolute; top: 12%; left: 36%}
h3 {color: rgb(0,0,0)}
h3 {font: 25px arial}
h4.padding {padding-right: 150px}
h4 {position: absolute; top: 25%; left: 7%}
h4 {color: rgb(0,0,0)}
h4 {font: 25px arial}
h5.padding {padding-right: 150px}
h5 {position: absolute; top: 35%; left: 7%}
h5 {color: rgb(0,0,0)}
h5 {font: 15px arial}
h6.padding {padding-right: 150px}
h6 {position: absolute; top: 55%; left: 7%}
h6 {color: rgb(0,0,0)}
h6 {font: 15px arial}

</style>
<title>New Page 1</title>
</head>

<body font="arial" link="#000000" vlink="#000000" alink="#000000">

<h1 class="padding"><a href="main1.htm">Home</a></h1>

<h2 class="padding"><a href="main2.php">Info</a></h2>

<h3 class="padding"><a href="main3.htm">Portfolio</a></h3>

<h4 class="padding">TEXT A</h4>

<h5 class="padding">TEXT B</h5>

<h6 class="padding">TEXT C</h6>
</body>
</html>

maandag 21 maart 2005 09:40

Acties:

Sappie

De Parasitaire Capaciteit!

Je achtergrond in het midden houden dus bijvoorbeeld? Dat kan erg gemakkelijk.. zet je background-image niet op de body, maar op een <div> die precies op de plaats staat waar je de content van je site in de browser weer wilt geven.

Verder nog wat tips. Je geposte html mist nog een DocType Definition, een content-type en een charset. Ik weet niet of je zer er in je echte code ook niet hebt staan, maar ik zou wel even de juiste DTD enzo toevoegen. Ook vind ik je css niet erg overzichtelijk zo. Dit bijvoorbeeld:

code:

1
2
3

h6 {position: absolute; top: 55%; left: 7%}
h6 {color: rgb(0,0,0)}
h6 {font: 15px arial}

kan ook zo:

code:

h6  {
    position: absolute; 
    top: 55%; 
    left: 7%
    color: rgb(0,0,0);
    font: 15px arial;
}

[ Voor 15% gewijzigd door Sappie op 21-03-2005 09:42 ]

Specs | Audioscrobbler

maandag 21 maart 2005 09:58

Acties:

JayVee

shibby++!

Probeer eens background-attachement: fixed;

ASCII stupid question, get a stupid ANSI!

maandag 21 maart 2005 10:06

Acties:

crisp

Devver

Pixelated

JayVee schreef op maandag 21 maart 2005 @ 09:58:
Probeer eens background-attachement: fixed;

Waarbij natuurlijk wel opgemerkt dient te worden dat dat niet werkt in verouderde browsers zoals Internet Explorer

Intentionally left blank

maandag 21 maart 2005 10:11

Acties:

DizzyWeb

Ondertiteld

crisp schreef op maandag 21 maart 2005 @ 10:06:
[...]

Waarbij natuurlijk wel opgemerkt dient te worden dat dat niet werkt in verouderde browsers zoals Internet Explorer

Werkt prima in IE, is alleen beperkt tot body

maandag 21 maart 2005 10:16

Acties:

Icey

Moet het ook meeschralen? Dus als het scherm groter word dat dan ook het 'venstertje' groter word?

Wat je kan doen is een divje maken die je centreerd.

code:

.main {

    position: absolute;

    width : 760px;

    height : 480px;

    margin-left : -380px; //Helft van de width

    margin-top : -240px; //Helft van de height

    left : 50%;

    top : 50%;

}

Wellicht niet zo'n mooie oplossing, want het werkt slecht onder sommige linux browsers. Je kan het ook oplossen met een :auto als je wilt, dat is netter.

maandag 21 maart 2005 10:25

Acties:

Loona35

Topicstarter

is het volgende niet het simpelste?

code:

{ 
background-image: 
url('back1.jpg');
background-repeat: 
no-repeat;
background-position: 
// aanpassen
background-attachment: 
scroll;
}

kan ik deze positie niet gewoon invoeren? Dus gelijk maken aan die van de text...

Als ik hetzelfde invul als bij de text werkt het niet
dus bij positie:

code:

1	top: 12%; left: 7%

Icey schreef op maandag 21 maart 2005 @ 10:16:
Moet het ook meeschralen? Dus als het scherm groter word dat dan ook het 'venstertje' groter word?

Wat je kan doen is een divje maken die je centreerd.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.main {

    position: absolute;

    width : 760px;

    height : 480px;

    margin-left : -380px; //Helft van de width

    margin-top : -240px; //Helft van de height

    left : 50%;

    top : 50%;

}
Wellicht niet zo'n mooie oplossing, want het werkt slecht onder sommige linux browsers. Je kan het ook oplossen met een :auto als je wilt, dat is netter.

Nee dat is niet de bedoeling. Het moet alleen mee schuiven.

[ Voor 66% gewijzigd door Loona35 op 21-03-2005 10:29 ]

maandag 21 maart 2005 10:31

Acties:

Icey

loona35 schreef op maandag 21 maart 2005 @ 10:25:

Nee dat is niet de bedoeling. Het moet alleen mee schuiven.

Dan zou mijn oplossing moeten werken, druk eens op het huisje onder mijn icoon, ik heb het toegepast op mijn site

.

maandag 21 maart 2005 10:37

Acties:

deviltje

Icey schreef op maandag 21 maart 2005 @ 10:31:
[...]

Dan zou mijn oplossing moeten werken, druk eens op het huisje onder mijn icoon, ik heb het toegepast op mijn site .

Hierbij zou ik wel willen opmerken dat jouw site voor mensen met te kleine browser-vensters voor een deel niet te bekijken is, aangezien je content dan links of bovenin uit het venster loopt

Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op

maandag 21 maart 2005 10:39

Acties:

Loona35

Topicstarter

Icey schreef op maandag 21 maart 2005 @ 10:31:
[...]

Dan zou mijn oplossing moeten werken, druk eens op het huisje onder mijn icoon, ik heb het toegepast op mijn site .

Klopt. Ik ga het op die manier oplossen. Bedankt, ook voor de andere tips van iedereen.

deviltje schreef op maandag 21 maart 2005 @ 10:37:
[...]

Hierbij zou ik wel willen opmerken dat jouw site voor mensen met te kleine browser-vensters voor een deel niet te bekijken is, aangezien je content dan links of bovenin uit het venster loopt

Klopt. Maar geef ik niet veel om zolang de site vanaf 800x600 goed zichtbaar is.

maandag 21 maart 2005 10:43

Acties:

Icey

deviltje schreef op maandag 21 maart 2005 @ 10:37:
[...]

Hierbij zou ik wel willen opmerken dat jouw site voor mensen met te kleine browser-vensters voor een deel niet te bekijken is, aangezien je content dan links of bovenin uit het venster loopt

Op 800*600 werkt het goed (behalve dat ik de bovenkant er dan af laat lopen, is toch niet intressant). Daarom zei ik ook dat er andere oplossingen waren

.

maandag 21 maart 2005 16:22

Acties:

Verwijderd

als je het mij vraagt, wat je vast niet doet maar ik geef toch even lastig mijn antwoord, kun je beter hulp vragen voor de vormgeving