[css+html] Resolutie/positionering - Softwareontwikkeling

woensdag 20 april 2005 16:09

Acties:

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?

woensdag 20 april 2005 16:27

Acties:

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

woensdag 20 april 2005 17:00

Acties:

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>

woensdag 20 april 2005 17:04

Acties:

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?

woensdag 20 april 2005 17:06

Acties:

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

woensdag 20 april 2005 17:12

Acties:

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

woensdag 20 april 2005 17:13

Acties:

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

woensdag 20 april 2005 17:15

Acties:

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>

woensdag 20 april 2005 17:17

Acties:

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 #.

woensdag 20 april 2005 17:18

Acties:

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.

woensdag 20 april 2005 17:19

Acties:

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

woensdag 20 april 2005 17:21

Acties:

Verwijderd

Topicstarter

code:

/* 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:

<!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>

woensdag 20 april 2005 17:22

Acties:

Verwijderd

Topicstarter

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

woensdag 20 april 2005 17:24

Acties:

simon

die mouseovers kunnen die niet met hoves? en die style bij a is ook veeeeel mooier weg te werken.

zaterdag 23 april 2005 14:03

Acties:

Verwijderd

Topicstarter

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

De stijlen a en a:hover gebruik ik niet.

zaterdag 23 april 2005 15:17

Acties:

simon

Hmm, ik vind 't niet echt netjes opgelost zo, kon met a:hover veeeel mooier. Verder is je html... niet echt mooi..

zaterdag 23 april 2005 15:35

Acties:

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:

#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.

zaterdag 23 april 2005 17:01

Acties:

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.

zaterdag 23 april 2005 17:12

Acties:

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.

zaterdag 23 april 2005 17:20

Acties:

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.

zondag 24 april 2005 01:18

Acties:

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.

maandag 9 mei 2005 12:29

Acties:

Verwijderd

Topicstarter

code: