layout website in shairepoint 2007

Vragen/antwoorden betreffende het maken van je eigen website.

shogun
Lid geworden op: 01 dec 2009, 11:51

15 nov 2016, 20:30

Goede avond,

Ik ben mijn bestaande website(http://users.telenet.be/PetanqueClubGenk/index.html)opnieuw hermaken in het bijzonder de css indeling.
Nu is het probleem dat de testpagina niet overeen stemt met de ontwerppagina, en hoe kan men dat oplossen.
hier de afbeelding en css

#container {
border: 1px solid #FF0000;
width: 1000px;
height: 100%;
right: auto;
left: auto;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
}
.MenuLeft {
border: 1px solid #FFFFFF;
width: 150px;
height: 450px;
display: block;
float: left;
margin-left: 15px;
margin-bottom: 10px;
margin-top: 10px;
}
.MiddenContent {
border: 1px solid #FFFFFF;
margin-top: 10px;
margin-bottom: 10px;
width: 470px;
height: 450px;
display: block;
float: left;
margin-left: 30px;
}
.Bezoeker {
text-align: left;
font-family: Verdana;
color: #FFFFFF;
font-size: 14px;
border: 1px solid #FFFFFF;
width: 285px;
height: 250px;
display: block;
float: right;
margin-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
}
.Contact {
border: 1px solid #FFFFFF;
width: 285px;
height: 185px;
top: 5px;
bottom: 10px;
float: right;
margin-right: 15px;
}
.Mededeling {
font-family: Verdana;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-align: center;
border: 1px solid #FFFFFF;
width: 970px;
height: 100%;
display: block;
clear: both;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
}
.Footer {
font-family: verdana;
font-size: 12px;
font-weight: normal;
border: 1px solid #FFFFFF;
text-align: left;
width: 1000px;
height: 25px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;


}
.NavigatieBar {
height: 420px;
padding-top: 10px;
width: 120px;
}
.NavigatieBar li a {
background-position: left;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
background-image: url('Homebestand/bleu-normaal.jpg');
background-repeat: no-repeat;
width: 110px;
height: 30px;
text-align: right;
display: block;
padding-top: 10px;
padding-right: 50px;
}
.NavigatieBar li {
list-style-type: none;
}
.NavigatieBalk a:hover {
background-image: url('Homebestand/bottum-dblue-hover.jpg');
background-repeat: no-repeat;
}

Afbeelding ontwerp pagina

Afbeelding Testpagina sharepoint 2007

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

15 nov 2016, 21:28

Beste shogun,

Bedoel je het verspringen van het menu en de ruimte tussen de 2 vakken?

Het kan zijn dat je een andere browser gebruikt dan IE.
SharePoint 2007 is reeds vrij oud.

Staat de nieuwe html code op de server van Telenet of is dat nog de oude code die op de Telenet server staat?

Geef anders je nieuwe html code ook eens door (desnoods in privé bericht).

mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

shogun
Lid geworden op: 01 dec 2009, 11:51

15 nov 2016, 23:36

Coderunner,

Inderdaad het gaat om het menu dat moet in het midden van het linkse vak zitten

deze afbeelding doet zich voor in de vier browsers

ie11, edge crome en firefox

de html code heb ik in privebericht verstuurd

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

16 nov 2016, 14:33

Beste shogun,

Met deze code zal de layout in SharePoint 2007 niet kloppen maar wel in de browers IE, Edge, FF, Chrome, Opera en Safari.

Code: Selecteer alles

 #container { 
 border: 1px solid #FF0000; 
 width: 1000px; 
 height: 100%; 
 right: auto; 
 left: auto; 
 margin-left: auto; 
 margin-right: auto; 
 margin-top: 35px; 
 } 
 .MenuLeft { 
 border: 1px solid #FFFFFF; 
 width: 150px; 
 height: 450px; 
 display: block; 
 float: left; 
 margin-left: 15px; 
 margin-bottom: 10px; 
 margin-top: 10px; 
 } 
 .MiddenContent { 
 border: 1px solid #FFFFFF; 
 margin-top: 10px; 
 margin-bottom: 10px;
 width: 499px; 
 height: 450px; 
 display: block; 
 float: left; 
 margin-left: 30px; 
 } 
 .Bezoeker { 
 text-align: left; 
 font-family: Verdana; 
 color: #FFFFFF; 
 font-size: 14px; 
 border: 1px solid #FFFFFF; 
 width: 285px; 
 height: 252px; 
 display: block; 
 float: right; 
 margin-right: 15px; 
 margin-top: 10px; 
 margin-bottom: 0px; 
 } 
 .Contact { 
 border: 1px solid #FFFFFF; 
 width: 285px; 
 height: 196px; 
 top: 5px; 
 bottom: 10px; 
 float: right; 
 margin-right: 15px; 
 } 
 .Mededeling { 
 font-family: Verdana; 
 font-size: 14px; 
 font-weight: normal; 
 color: #FFFFFF; 
 text-align: center; 
 border: 1px solid #FFFFFF; 
 width: 970px; 
 height: 100%; 
 display: block; 
 clear: both; 
 margin-right: auto; 
 margin-left: auto; 
 margin-bottom: 10px; 
 } 
 .Footer { 
 font-family: verdana; 
 font-size: 12px; 
 font-weight: normal; 
 border: 1px solid #FFFFFF; 
 text-align: left; 
 width: 1000px; 
 height: 25px; 
 margin-left: auto; 
 margin-right: auto; 
 margin-top: 5px; 


 } 
 .NavigatieBar { 
 height: 420px; 
 padding-top: 10px; 
 width: 120px; 
 } 
 .NavigatieBar li a { 
 background-position: left; 
 font-family: Arial, Helvetica, sans-serif; 
 text-decoration: none; 
 color: #FFFFFF; 
 font-size: 14px; 
 font-weight: bold; 
 background-image: url('Homebestand/bleu-normaal.jpg'); 
 background-repeat: no-repeat; 
 width: 110px; 
 height: 30px; 
 text-align: right;
 display: block; 
 margin-left: -28px;
 padding-top: 10px; 
 padding-right: 50px; 
 } 
 .NavigatieBar li { 
 list-style-type: none; 
 } 
 .NavigatieBalk a:hover { 
 background-image: url('Homebestand/bottum-dblue-hover.jpg'); 
 background-repeat: no-repeat; 
 } 
Laat je mij iets weten ...

Succes

mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

shogun
Lid geworden op: 01 dec 2009, 11:51

16 nov 2016, 19:36

hallo coderunner,

met de wijzingen in het css bestand is het geluk

de knoppen staan in midden van de linkse kader

Alleen wil de
navigatiebar li a: hover nog niet werken (veranderd niet van kleur)

maar alvast BEDANKT

mvg
shogun

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

16 nov 2016, 20:17

shogun schreef:...Alleen wil de
navigatiebar li a: hover nog niet werken (veranderd niet van kleur)
Hallo shogun,

Daar heb ik niet naar gekeken, was ook geen vraag in je begin post :wink:

Maar de reden waarom dit niet werkt is omdat je de class anders genoemd hebt. Nu staat er in je CSS (helemaal onderaan)
.NavigatieBalk a:hover {
background-image: url('Homebestand/bottum-dblue-hover.jpg');
background-repeat: no-repeat;
}
en dit moet zijn
.NavigatieBar a:hover {
background-image: url('Homebestand/bottum-dblue-hover.jpg');
background-repeat: no-repeat;
}
mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

18 nov 2016, 15:42

Beste shogun,

Zijn je problemen hiermee nu opgelost?
Laat me eens iets weten?

mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

shogun
Lid geworden op: 01 dec 2009, 11:51

22 nov 2016, 15:18

Hallo Coderunner,

Het probleem met het menu (hover)is opgelost
zoals U schreef moest het navigatiebar zijn i.p.v navigatiebalk
en was het punt(.) vergeten voor de .navigatiebar in css

mvg
shogun

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

22 nov 2016, 15:25

Beste shogun,

Nu weten we tenminste dat je vragen opgelost zijn :wink:

Bedankt voor de update.

mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.