layout website in shairepoint 2007 — Forum

shogun Startte dit onderwerp 15 nov 2016, 20:30 20 berichten

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 15 nov 2016, 21:28 Aubauke - Aentwaerepe 1.828 berichten

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 Startte dit onderwerp 15 nov 2016, 23:36 20 berichten

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 16 nov 2016, 14:33 Aubauke - Aentwaerepe 1.828 berichten

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 Startte dit onderwerp 16 nov 2016, 19:36 20 berichten

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 16 nov 2016, 20:17 Aubauke - Aentwaerepe 1.828 berichten

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

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 18 nov 2016, 15:42 Aubauke - Aentwaerepe 1.828 berichten

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 Startte dit onderwerp 22 nov 2016, 15:18 20 berichten

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 22 nov 2016, 15:25 Aubauke - Aentwaerepe 1.828 berichten

Beste shogun,

Nu weten we tenminste dat je vragen opgelost zijn

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.