Toon posts:

[css+html] Resolutie/positionering

Pagina: 1
Acties:
  • 44 views sinds 30-01-2008

Verwijderd

Topicstarter
Ik heb een website gemaakt onder een resolutie van 1280x1024.
Ik heb meerder topics uitgeprobeerd maar het wil niet lukken.

De webistie is niet volledig al ik deze bekijk op een resolutie van 1024x768. NIET in internet explorer WEL in firefox.

Ik heb dus alle mogelijke optie bij position aangepast maar het mag niet baten. Wat kan ik doen zodat ie ook in IE goed weergegeven wordt terwijl hij dat met firefox wel gewoon doet?

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Misschien loop je tegen een probleem aan mbt verschillende gebruikte box-models in FF en IE (al lijkt het me dan sterk dat het in IE groter is dan in FF), misschien gaat er wel iets anders helemaal fout.

Zonder wat code hebben wij geen flauw id wat er fout gaat en de "mogelijke optie bij position" zegt me ook niks. De position property kun je op elk element toepassen.

Laat es wat code zien dan hoeven wij onze glazen bol niet uit de kast te pakken :)

Specs | Audioscrobbler


Verwijderd

Topicstarter

Dit is het blok waar het mis gaat,....Hier heb ik alle tekst in gezet

#contentNieuws {
position:absolute;
height:100%;
width:550px;
left:270px;
top:180px;
font-size:11px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}

HIer de body:
#body {
padding: 0px;
font: 13px Verdana;
position:absolute;
}

Verder heb ik nog een blok voor het menu en het logo:
#contentLeft { */menu*/
position:absolute;
left:75px;
top:180px;
}
#logo { */logo, -5 omdat het plaatje anders over het blok van de tekst valt*/
position:absolute;
left:20px;
top:-5px;
}

In de html heb ik gewoon doodnoormale <div> met bijbehorende id of class gebruikt.
voorbeeld van een tekstvak en menu:

<link href= "style.css" media="screen" rel="stylesheet" type="text/css"/>
</head>

<body background="img/backgroundFoto's.png">

<div id="logo"> [img]"img/TopaSalesLogo.png">[/img]

<div id="contentLeft">
<a href="home.html" > <img src="img/btnHome.png"
onmouseover= "this.src='img/btnHomeOver.png'"
onmouseout= "this.src='img/btnHome.png'" alt="btn"/> </a> <br><br>
<a href="profiel.html" > <img src="img/btnProfiel.png"
onmouseover= "this.src='img/btnProfielOver.png'"
onmouseout= "this.src='img/btnProfiel.png'" alt="btn" /> </a><br><br>
<a href="diensten.html"> <img src="img/btnDiensten.png"
onmouseover= "this.src='img/btnDienstenOver.png'"
onmouseout= "this.src='img/btnDiensten.png'" alt="btn" /> </a><br><br>
<a href="nieuws.html" > <img src="img/btnNieuws.png"
onmouseover= "this.src='img/btnNieuwsOver.png'"
onmouseout= "this.src='img/btnNieuws.png'" alt="btn" /> </a><br><br>
<a href="fotos.html" > <img src="img/btnFotos.png"
onmouseover= "this.src='img/btnFotosOver.png'"
onmouseout= "this.src='img/btnFotos.png'" alt="btn" /> </a><br><br>
<a href="contact.html" > <img src="img/btnContact.png"
onmouseover= "this.src='img/btnContactOver.png'"
onmouseout= "this.src='img/btnContact.png'" alt="btn" /> </a><br><br>
</div>
<div id="contentNieuws">
Op dit moment zijn er nog geen fotos....
</div>

</body>
</html>

  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Gebruik geen hoofdletters in bestandnamen ;) Voor een html-element aanroep in je CSS hoeft geen #, dus body { ipv #body { ;)

En hoe ziet het er uit in beide browsers en waar gaat het fout?

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Nog één vraagje, ofjah eigenlijk twee :)

Zou je misschien het volledige html bestand even kunnen copy pasten.. dus inclusief DTD en dergelijke (ivm box-model). En zou je ook zo aardig willen zijn je code even tussen
code:
1
hier dus code
tags te zetten :)

[ Voor 4% gewijzigd door Sappie op 20-04-2005 17:06 ]

Specs | Audioscrobbler


Verwijderd

Topicstarter
Ok.....Ik kom hier later op terug..Ik moet vanavond eerst even de site uploaden dan kunnen jullie zelf kijken waar het mis gaat.

als ik de # bij #body weghaal dan verspringt alles dus:S

  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Verwijderd schreef op woensdag 20 april 2005 @ 17:12:
Ok.....Ik kom hier later op terug..Ik moet vanavond eerst even de site uploaden dan kunnen jullie zelf kijken waar het mis gaat.

als ik de # bij #body weghaal dan verspringt alles dus:S
Ja omdat hij dan de stijl wel aan de body koppelt :/ Dus weglaten dat #je :)

Verwijderd

Topicstarter
<div>
/* CSS Document */
a {

}

a:hover {
}
img {
border: none;
}

#body {
padding: 0px;
font: 13px Verdana;
position:absolute;

}

/*#background {
color:#000099;
position:absolute;
size:auto;
}

#ul {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
}

#center{
height:500px;
position:absolute;
width:500px;
top:180px;
left:200px;

}*/

#contentLeft {
position:absolute;
left:75px;
top:180px;
}

#contentNieuws {
position:absolute;
height:100%;
width:550px;
left:270px;
top:180px;
font-size:11px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
#contentTop {
position:absolute;
}

#logo {
position:absolute;
left:20px;
top:-5px;
}
#contentRight {

}

#top {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:100px;
color:#FFFFFF;
left:300px;
}

#under {
color:#FFFFFF;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
padding-top:550px;
}
</div>

HTML
<div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href= "style.css" media="screen" rel="stylesheet" type="text/css"/>
</head>

<body background="img/backgroundDiensten.png">

<div id="logo"> [img]"img/TopaSalesLogo.png">[/img]

<div id="contentLeft">
<a href="home.html" > <img src="img/btnHome.png"
onmouseover= "this.src='img/btnHomeOver.png'"
onmouseout= "this.src='img/btnHome.png'" alt="btn"/> </a> <br><br>
<a href="profiel.html" > <img src="img/btnProfiel.png"
onmouseover= "this.src='img/btnProfielOver.png'"
onmouseout= "this.src='img/btnProfiel.png'" alt="btn" /> </a><br><br>
<a href="diensten.html"> <img src="img/btnDiensten.png"
onmouseover= "this.src='img/btnDienstenOver.png'"
onmouseout= "this.src='img/btnDiensten.png'" alt="btn" /> </a><br><br>
<a href="nieuws.html" > <img src="img/btnNieuws.png"
onmouseover= "this.src='img/btnNieuwsOver.png'"
onmouseout= "this.src='img/btnNieuws.png'" alt="btn" /> </a><br><br>
<a href="fotos.html" > <img src="img/btnFotos.png"
onmouseover= "this.src='img/btnFotosOver.png'"
onmouseout= "this.src='img/btnFotos.png'" alt="btn" /> </a><br><br>
<a href="contact.html" > <img src="img/btnContact.png"
onmouseover= "this.src='img/btnContactOver.png'"
onmouseout= "this.src='img/btnContact.png'" alt="btn" /> </a><br><br>
</div>
<div id="contentNieuws">
<a style="color:#FFFFFF" style="text-decoration:none" style="font-size:14px" href="telecommunicatie.html">Telecommunicatie</a><br><br><br><br>

<a style="color:#FFFFFF" style="text-decoration:none" style="font-size:14px" href="beveiliging.html">Beveiliging</a>

</div>

</body>
</html>
</div>

Verwijderd

Topicstarter
foutje...hoe doe je dat?

Ok...dan hoef ik alleen de pixels aan te passen zodat alles weer goed positioneerd na het weghalen van het #.

  • MBV
  • Registratie: Februari 2002
  • Laatst online: 20:19

MBV

Wil je a.u.b. de FAQ lezen, en alles tussen [ code] en [ /code] tags zetten? Dit is onleesbaar, omdat de spaties wegvallen. Misschien, heel misschien, ga ik er dan naar kijken. En een online voorbeeld zal idd helpen.

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

"(code)hier je code(/code)"

Verander in bovenstaande wel de ronde haken door brackets "[" en "]"

Je kunt je post verder ook editen :)

[ Voor 164% gewijzigd door Sappie op 20-04-2005 17:22 ]

Specs | Audioscrobbler


Verwijderd

Topicstarter
code:
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
72
73
74
75
76
77
78
79
80
81
82
/* CSS Document */
a {
    
}

a:hover {
}
img {
    border: none;
}

body {
    padding: 0px;
    font: 13px Verdana;
    position:absolute;
    
    }

/*#background {
    color:#000099;
    position:absolute;
    size:auto;
}

#ul {
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
} 

#center{
    height:500px;
    position:absolute;
    width:500px;
    top:180px;
    left:200px;
    
}*/

#contentLeft {
    position:absolute;
    left:75px;
    top:180px;
}

#contentNieuws {
    position:absolute;
    height:100%;
    width:550px;
    left:270px;
    top:180px;
    font-size:11px;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
}       
#contentTop {
    position:absolute;
}

#logo {
    position:absolute;
    left:20px;
    top:-17px;
    }   
#contentRight {

}

#top {
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:100px;
    color:#FFFFFF;
    left:300px;
}

#under {
    color:#FFFFFF;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:36px;
    padding-top:550px;
}

HTML
code:
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href= "style.css" media="screen" rel="stylesheet" type="text/css"/>
</head>

<body background="img/backgroundDiensten.png">
                
                <div id="logo"> [img]"img/TopaSalesLogo.png">[/img]
                            
                <div id="contentLeft"> 
                        <a href="home.html" > <img src="img/btnHome.png"
                        onmouseover= "this.src='img/btnHomeOver.png'" 
                        onmouseout= "this.src='img/btnHome.png'" alt="btn"/> </a> <br><br>
                        <a href="profiel.html" > <img src="img/btnProfiel.png"
                        onmouseover= "this.src='img/btnProfielOver.png'" 
                        onmouseout= "this.src='img/btnProfiel.png'" alt="btn" /> </a><br><br>
                        <a href="diensten.html"> <img src="img/btnDiensten.png"
                        onmouseover= "this.src='img/btnDienstenOver.png'" 
                        onmouseout= "this.src='img/btnDiensten.png'" alt="btn" /> </a><br><br>
                        <a href="nieuws.html" > <img src="img/btnNieuws.png"
                        onmouseover= "this.src='img/btnNieuwsOver.png'" 
                        onmouseout= "this.src='img/btnNieuws.png'" alt="btn" /> </a><br><br>
                        <a href="fotos.html" > <img src="img/btnFotos.png"
                        onmouseover= "this.src='img/btnFotosOver.png'" 
                        onmouseout= "this.src='img/btnFotos.png'" alt="btn" /> </a><br><br>
                        <a href="contact.html" > <img src="img/btnContact.png"
                        onmouseover= "this.src='img/btnContactOver.png'" 
                        onmouseout= "this.src='img/btnContact.png'" alt="btn" /> </a><br><br>
                </div>
                <div id="contentNieuws">
<a style="color:#FFFFFF" style="text-decoration:none" style="font-size:14px" href="telecommunicatie.html">Telecommunicatie</a><br><br><br><br>

<a style="color:#FFFFFF" style="text-decoration:none" style="font-size:14px" href="beveiliging.html">Beveiliging</a>

                </div>

</body>
</html>

Verwijderd

Topicstarter
Voor de upload kan het helaas pas na tienen worden...maar dan laat ik het wel even weten.

  • simon
  • Registratie: Maart 2002
  • Laatst online: 06-05 09:17
die mouseovers kunnen die niet met hoves? en die style bij a is ook veeeeel mooier weg te werken.

|>


Verwijderd

Topicstarter
De website is nu online....www.topsales.nu

De stijlen a en a:hover gebruik ik niet.

  • simon
  • Registratie: Maart 2002
  • Laatst online: 06-05 09:17
Hmm, ik vind 't niet echt netjes opgelost zo, kon met a:hover veeeel mooier. Verder is je html... niet echt mooi..

|>


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Simon schreef op zaterdag 23 april 2005 @ 15:17:
Hmm, ik vind 't niet echt netjes opgelost zo, kon met a:hover veeeel mooier. Verder is je html... niet echt mooi..
Het is mijns inziens geen kwestie van mooi, maar meer een kwestie van handig. Plaatjes als menu-items stellen helemaal niet voor, beter is dan om deze constructie te gebruiken:
code:
1
2
3
<ul id="nav">
  <li><a href="...."><span class="menuitem">Link beschrijving</span></a></li>
</ul>

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
#nav a {
  display: block;
  width: xx;
  height: xx;
  background-image: url("bla");
}
#nav li a .menuitem {
  display: none;
}

offtopic:
Even uit de losse pols, typfouten en andere vergeetseltjes voorbehouden.

Verwijderd

Topicstarter
Mijn html is ook niet mooi....maar ben nog in mijn beginfase...Ik heb die site gemaakt en die moet nog een betere functionaliteit hebben. Er moet ook nog PHP bij komen enzo.

Hoe kan je in css aangeven dat de resolutie 1024x768 moet zijn? De site wordt niet volledig weergegeven.

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Verwijderd schreef op zaterdag 23 april 2005 @ 17:01:
Hoe kan je in css aangeven dat de resolutie 1024x768 moet zijn? De site wordt niet volledig weergegeven.
Nee, je kan je site in het mooiste geval mee laten schalen door in je css afmetingen in procenten op te geven. Anders is het misschien verstanding om je site in een container te proppen met een breedte van ongeveer 750px, dan doet hij het goed vanaf 800x600. Als je je site alleen voor mensen met een resolutie van 1024x768 wil alten weergeven biedt google allicht verlichten bij het zoeken naar een geschikt stukje javascript.

Verwijderd

Ik kan met mijn normale instellingen niet eens de hele tekst lezen. Mijn venster is maar 800 pixels breed, en dat is geen vreemde instelling. Waarom maak je de website niet gewoon een vaste breedte van ongeveer 760 pixels? Dan ziet het er in een iets groter venster waarschijnlijk nog prima uit, en je hebt al die ruimte toch nergens voor nodig.

Verwijderd

Topicstarter
ik zal eens proberen wat het beste is..Dat met percentage laten schalen en een container van 750 pixels lijkt me wel het beste dan ja.

Verwijderd

Topicstarter
code:
1
 hallo

  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Beetje rare kick vind je niet?
Pagina: 1

Dit topic is gesloten.