Hulp nodig bij centreren van HTML en CSS script

Status
Niet open voor verdere reacties.
huib23

huib23

Gebruiker
Lid geworden
7 mrt 2009
Berichten
86
Hallo,

De weergave is bij alle browsers precies hetzelfde behalve bij IE
Kan iemand me helpen? Ik kom er niet uit om alle paginas te centreren.
Hierbij de 2 scripts

CSS:
HTML: 
/*
	FWTSlide by Adonis Ronquillo for Free Web Templates
	www.freewebtemplates.com / www.doni.us
	Images by Unprofound http://www.unprofound.com/
	Released under the Creative Commons Attribution 3.0 License.
*/

* {
	margin: 0;
	padding: 0;
}

a {
	color: #9EC64E;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

body {
	background: #000000 url(images/bg.jpg) repeat-x top left;
	color: #C2C2C2;
	font-size: 13pt;
	line-height: 1.75em;
}

body,input {
	font-family: Georgia, serif;
}

br.clear {
	clear: both;
}

form {
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4 {
	font-weight: normal;
	text-transform: uppercase;
}

h2 {
	font-size: 1.75em;
}

h2,h3,h4 {
	color: #FFF;
	font-family: "Patua One", serif;
	margin-bottom: 1em;
}

h3 {
	font-size: 1.25em;
}

h4 {
	font-size: 1.05em;
}

img.left {
	float: left;
	margin: 8px 20px 20px 0;
}

img.top {
	margin: 8px 0 20px 0;
}

label.login {
	display: block;
	margin: 0 0 6px 0;
}

p {
	margin-bottom: 1.5em;
}

ul {
	margin-bottom: 1.5em;
}

ul h4 {
	margin-bottom: 0.35em;
}

.form {
	margin: 0 0 32px 0;
}

.gallery ul.gallery_sidebar li, #footerContent ul.gallery_footer li {
	border: none  !important;
	display: block;
	float: left;
	margin: 0 10px 10px 0;
	padding: 0  !important;
}

.gallery ul.gallery_sidebar, #footerContent ul.gallery_footer {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inputBox, .inputTextArea {
	padding: 6px;
	width: 95%;
}

.inputButton {
	float: right;
	padding: 6px;
}

.blogpost h2 {
	margin: 0 0 10px 0;
}

.meta {
	float: right;
}

.comments, .readmore {
	background: #9ec64e;
	padding: 6px 12px;
}

.comments a, .readmore a {
	color: #000;
	text-decoration: none;
}

.widget {
	margin-bottom: 30px;
}

#main img {
	background: #333529;
	padding: 8px;
}

#banner {
	margin: 32px 0 32px 0;
	padding: 0;
	position: relative;
	width: 1180px;
}

#box1 {
	margin: 0 0 24px 0;
	overflow: hidden;
}

#box2 {
	margin: 0 0 24px 0;
	overflow: hidden;
}

#box3 {
	overflow: hidden;
}

#content {
	float: right;
	padding: 0;
	width: 718px;
}

#copyright {
	margin: 0 0 16px 0;
	padding: 56px 0 88px 0;
	text-align: center;
}

#copyright a {
	color: #C2C2C2;
}

#footer {
	color: #D3D3D3;
	margin: 32px 0 0 0;
	padding: 32px;
	position: relative;
	width: 1116px;
}

#footer a {
	color: #E4E4E4;
}

#footer h2, #footer h3, #footer h4 {
	color: #E4E4E4;
}

#footer ul {
	list-style: none;
}

#footer ul li {
	border-top: dashed 1px #4A494B;
	padding: 12px 0 12px 0;
}

#footer ul li.first {
	border-top: 0;
	padding-top: 0;
}

#footerContent {
	float: right;
	width: 368px;
}

#footerSidebar1 {
	float: left;
	width: 350px;
}

#footerSidebar2 {
	margin: 0 32px 0 374px;
	width: 350px;
}

#header {
	height: 106px;
	padding: 32px;
	position: relative;
	width: 1116px;
}

#logo {
	height: 106px;
	left: 32px;
	line-height: 106px;
	position: absolute;
	top: 32px;
}

#logo a {
	color: #FFF;
	text-decoration: none;
}

#logo a span {
	color: #9ec64e;
}

#logo h1 {
	font-family: "Patua One", serif;
	font-size: 2.5em;
}

#main {
	margin: 0 0 0 0;
	padding: 32px;
	position: relative;
	width: 1116px;
}

#main .sectionList {
	list-style: none;
	padding-left: 0;
}

#main .sectionList li {
	clear: both;
	padding: 20px 0 20px 0;
}

#main ul {
	list-style: none;
}

#main ul li {
	border-top: dashed 1px #4A494B;
	padding: 12px 0 12px 0;
}

#main ul li.first {
	border-top: 0;
	padding-top: 0;
}

#nav {
	font-family: "Patua One", serif;
	height: 47px;
	line-height: 47px;
	position: absolute;
	right: 32px;
	top: 61px;
}

#nav a {
	color: #E4E4E4;
	text-decoration: none;
	text-transform: uppercase;
}

#nav .active a {
	color: #9ec64e;
}

#nav ul {
	list-style: none;
	padding: 0 16px 0 16px;
}

#nav ul li {
	display: inline;
	padding: 0 8px 0 8px;
}

#outer {
	margin: 32px auto 0 auto;
	position: relative;
	width: 1180px;
}

#search input.button {
	background: #9EC64E;
	border: 0;
	color: #FFF;
	font-family: "Patua One", serif;
	margin-left: 1em;
	padding: 4px;
}

#search input.text {
	border: dashed 1px #4A494B;
	padding: 8px;
}

#sidebar1 {
	float: left;
	padding: 0;
	width: 350px;
}

/*****************************************************************************
/ SliderTron
*****************************************************************************/

	#slidertron
	{
		width: 1180px;
		height: 356px;
		position: relative;
	}

	#slidertron .navigation
	{
		position: absolute;
		display: block;
		z-index: 100;
		color: #ffffff;
		top: 315px;
		right: 210px;
		margin: 10px;
		padding: 10px;
		background-color: #303030;
		opacity: 0.75;
	}

	#slidertron .navigation a
	{
		color: #ffffff;
		text-decoration: none;
		outline: none;
	}

	#slidertron .viewer
	{
		width: 1180px;
		height: 375px;
	}

	#slidertron .viewer .reel .slide
	{
		position: relative;
		width: 780px;
		height: 375px;
			opacity: 0.25;
	}

	#slidertron .viewer .reel .slide-active
	{
		opacity: 1.00;
	}

	#slidertron .viewer .reel .slide span
	{
		position: absolute;
		display: block;
		width: 780px;
		opacity: 0.40;
		height: 30px;
		background-color: #000000;
		bottom: 39px;
		left: 0px;
	}

	#slidertron .indicator
	{
		bottom: -20px;
		right: 10px;
		position: absolute;
		text-align: center;
		margin: 0;
		padding: 0;
		font-size: 6px;
	}

	#slidertron .indicator ul
	{
		margin: 0;
		list-style: none;
		padding: 0;
	}

	#slidertron .indicator ul li
	{
		display: inline-block;
		background: #d0d0d0;
		color: #303030;
		width: 10px;
		height: 10px;
		margin: 0 10px 0 0;
		text-indent: -9999px;
		border-radius: 10px;
	}

	#slidertron .indicator ul li.active
	{
		background: #9ec64e;
		color: #d0d0d0;
	}

	#slidertron .captionLine1
	{
		font-size: 1.25em;
		font-weight: bold;
		text-align: center;
		position: absolute;
		bottom: 50px;
		right: 230px;
		color: #FFF;	
		text-shadow: 2px 2px 3px #000;
		font-family: "Patua One", serif;
		font-size: 1.75em;
	}

	#slidertron .captionLine2
	{
		position: absolute;
		bottom: 20px;
		right: 200px;
		font-size: 1em;
		font-family: "Patua One", serif;		
		width: 720px;	
		text-align: right;
		padding: 0 30px;
		color: #fff;
	}
	
/*****************************************************
  Poptrox
*****************************************************/

.poptrox_popup
{
	position: relative;
	padding: 1em 1em 3em 1em;
	background: #000000 url(images/bg.jpg) repeat-x top left;
}

.poptrox_popup .loader
{
	display: block;
	margin: 55px 0 0 0;
	text-indent: -9999em;
	background: url('loader.gif') top center no-repeat;
}

.poptrox_popup .caption
{
	position: absolute;
	bottom: 1em;
	left: 1em;
}

.poptrox_popup .closer
{
	position: absolute;
	bottom: 1em;
	right: 1em;
}

HTML:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
	FWTSlide by Adonis Ronquillo for Free Web Templates
	www.freewebtemplates.com / www.doni.us
	Images by Unprofound http://www.unprofound.com/
	Released under the Creative Commons Attribution 3.0 License.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<title>FWT Slide</title>
		<link href="http://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="fwt.css" />
		
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.slidertron-0.3.1.js"></script>
		<script type="text/javascript" src="js/jquery.poptrox-0.1.js"></script>
		
	    <style type="text/css">
<!--
.style1 {font-size: medium}
.style2 {font-size: large}
.style3 {font-size: small}
.style5 {font-size: 12px}
.style8 {color: #9ec64e}
-->
        </style>
</head>
	<body>
		<div id="outer">
			<div id="header">
				<div id="logo">
					<h1><img src="images/logo transparant.gif" alt="" width="408" height="133" /></h1>
			  </div>
				<div id="nav">
					<ul class="style5">
						<li class="first active">
							<a href="index.html">Welkom</a>						</li>
						<li>
							<a href="#" class="style8">drive in show's </a>						</li>
						<li>
							<a href="#">installaties</a>						</li>
						<li class="last">
							<a href="#">gastenboek</a></li>
					    <li><a href="#">multimedia </a> </li>
					    <li> <a href="#">contact</a></li>
			      </ul>
					<br class="clear" />
			  </div>
			</div>
			<div id="banner">

					<div id="slidertron">

						<div class="viewer">
							<div class="reel">
								<div class="slide">
									<img src="images/slideshow drive in show/3.jpg" alt="" width="780" height="356">
									<span></span>
									<a href="/1/" class="link">More ...</a>
									<span class="caption1"></span>
									<span class="caption2">''Alles is mogelijk'' </span>								</div>
								<div class="slide">
									<img src="images/slideshow drive in show/5.jpg" alt="" width="780" height="356">
									<span></span>
									<a href="/2/" class="link">More ...</a>
									<span class="caption1"></span>
									<span class="caption2">''Onvergeetbare tijden''</span>								</div>
								<div class="slide">
									<img src="images/slideshow drive in show/4.jpg" alt="" width="780" height="356">
									<span></span>
									<a href="/3/" class="link">More ...</a>
									<span class="caption1"></span>
									<span class="caption2">''Omdat het budget het toestaat'' </span>								</div>
								<div class="slide">
									<img src="images/slideshow drive in show/2.jpg" alt="" width="780" height="357">
									<span></span>
									<a href="/4/" class="link">More ...</a>
									<span class="caption1"></span>
									<span class="caption2">''Duidelijke afspraken, goed geregeld'' </span>								</div>
							</div>
						</div>
						<div class="indicator">
							<ul>
								<li class="active">1</li>
								<li>2</li>
								<li>3</li>
								<li>4</li>
							</ul>
							<br class="clear" />
						</div>
						<div class="captionLine1"></div>
						<div class="captionLine2"></div>
					</div>
					
					<script type="text/javascript">

						$('#slidertron').slidertron({
							viewerSelector:			'.viewer',
							reelSelector:			'.viewer .reel',
							slidesSelector:			'.viewer .reel .slide',
							indicatorSelector:		'.indicator ul li',
							//navPreviousSelector:	'.previous',
							//navNextSelector:		'.next',
							//navFirstSelector:		'.first',
							//navLastSelector:		'.last',
							//navStopAdvanceSelector:	'.stop',
							//navPlayAdvanceSelector:	'.play',
							advanceDelay:			3000,
							speed:					'slow',
							viewerOffset:			200,
							activeSlideClass:		'slide-active',
							slideLinkSelector:		'.link',
							captionLines:			2,
							captionLineSelector:	'.captionLine',
							slideCaptionSelector:	'.caption'
						});
						
					</script>
					<br class="clear" />
			
			</div>
			<div id="main">
				<div id="content">
					<div id="box1">
						<div class="blogpost primary_wide4">
							<h2 class="style2">Welkom ... </h2>
							<h3><span class="style3">gepost op  20.02.2012 door <a href="#">huib bonnema </a></span></h3>
							<p class="style5">Sound of Magic drive-in show staat garant voor professionaliteit, kwaliteit, show en gezelligheid en is al vele jaren een bekend gezicht als het draait om optredens als bruiloften, 70's en 80's, bedrijffeesten, Schoolfeesten, muziek verzorgingen etc.</p>
					        <p class="style5">Voor feesten als: bruiloften, bedrijfsfeesten, borrels, openingen, verjaardagen, jubilea, buurtfeesten etc.<br />
					          nemen wij de volledige verzorging van geluid en licht voor onze rekening. <br />
					          Wij zullen u en uw bezoekers verassen met de nieuwste technieken, geluid en licht effecten zo als u ze nog nooit mee gemaakt heeft. </p>
					        <p class="style5">De kwaliteit en professionaliteit die u mag verwachten van een goede drive-in show komt bij ons allereerst tot uitdrukking in de goede afspraken die wij vooraf maken met onze klanten omtrent muziek keuze, aanpassingen aan thema's, persoonlijke wensen etc., vervolgens in de kwaliteit van de installatie en, last but not least, de presentatie gedurende het feest zelf.</p>
					        <p class="style5">Om alvast de sfeer te proeven van de feesten die wij reeds hebben mogen verzorgen, nodigen wij jullie tevens uit een kijkje te nemen in ons foto-archief met daarin*vele foto's van een aantal optredens van ons.</p>
					        <p class="style5">Ook kunt u uw referentie en overige berichten achterlaten op onze website via het gastenboek.</p>
					        <p>&nbsp; </p>
						</div>
					</div>

					<img src="images/logo bar.jpg" width="715" height="49" class="style5" /><br class="clear" />
				</div>
				<div id="sidebar1">
				  <div class="widget">
						<h3 class="style1">laatste tweets<br />
                          <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
                          <script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 10,
  interval: 30000,
  width: 300,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'default'
  }
}).render().setUser('soundofmagic').start();
                          </script>
					</h3>
				  </div>
					
			  </div>
				<br class="clear" />
			</div>

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

Alvast bedankt

gr
 
Laatst bewerkt:
ik heb geen verstand van HTML5 maar misschien helpt dit:<center> om te openen </center> om te sluiten (tussen headtaggs plaatsen)
 
De tekst word gecentreerd, helaas niet de pagina. In ieder geval bedankt! Nog een idee wat het zou kunnen zijn?


gr
 
Ehm, de <center>-tag is al ruim 12 jaar achterhaald. ;) Niet gebruiken!
Van body {text-margin: center} heb ik nog nooit gehoord; wel van body {text-align: center;}, waarmee de <body> zelf echter niet gecentreerd wordt.

Maar ik geloof dat het probleem inmiddels opgelost is: met de correcte oplossing {margin: 0 auto} :)
in dit geval aangepast tot #outer {margin: 32px auto 0 auto;}, gecombineerd met een opgegeven breedte van de #outer (anders weten de browsers niet ten opzichte van wat die automatische margins links en rechts geplaatst moeten worden).

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Bedankt voor de super reacties, Ik heb de hele ochtend zitten kijken, veranderen, uploaden en weer zitten uitvogelen maar blijkbaar is mijn kennis niet genoeg. Misschien een brutale vraag maar zou iemand mijn css script willen aanpassen?

Alvast bedankt,

gr
 
Moet ik in dit stukje iets wijzigen?

#outer {
margin: 32px auto 0 auto;
position: relative;
width: 1180px;

gr
 
Nop, dat lijkt me wel goed (behalve dat de pagina breder is dan op een 1024*768px scherm past > dan moet je links-rechts scrollen).

Maar:
  1. Om welke (test)pagina gaat het ook alweer? Linkje?
  2. En wat is nu nog het probleem?

(Ik dacht dat het de soundofmagic.nl met de slidertron was van het andere topic; als ik die bekijk, centreert ie de pagina goed, ook in Internet Explorer 7. Is het een andere IE-versie, waarin het centreren niet goed gaat? Volgens Netrenderer geven IE8 en IE9 ook geen centreer-problemen.)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Op sommige laptops en computer (besturingssystemen van Windows XP tot Windows 7 mac os etc) heb ik geprobeerd mijn website te openen, Alleen op sommige laptops en computers word de site veel te groot weergegeven terwijl het beeld gewoon op 100% staat waardoor bezoekers dus naar rechts moeten scrollen.Mijn vraag nu nog is hoe het kan dat de pagina veel te groot word weergegeven (meestal in IE maar ook in Chrome), is hier wat aan te doen?

gr
 
Aha, dan denk ik dat ik 't weet.
De paginabreedte staat niet op 100% breedte van het beeldscherm, maar op (minimaal) 1180 pixels. Sommige pc's (operation system en browser maakt dan niets uit) hebben gewoon een beeldscherm (of beeldscherminstelling) met een kleinere horizontale hoeveelheid pixels. Dan kunnen die 1180px er nooit op, en komt er een L/R-scrollbalk.
  • Dit heeft dan met het centreren niets te maken: als er juist een breder beeldscherm is dan 1180px, wordt de site goed gecentreerd. Dus daar ligt het niet aan.

Wat er aan te doen?
Oef, ik heb even gekeken, en de 1180px van de #outer <div> is niet de enige waarin de breedte wordt vastgelegd. In de div's daarbinnen zitten ook breedtematen, die op die 1180px zijn afgestemd.

Oftewel: als je de site goed zou willen maken voor minimaal 1024*768px (dat lijkt me het uitgangspunt *), dan moet het hele paginamodel doorgenomen worden, en alles in de breedte naar verhouding worden teruggebracht. :rolleyes:


  • Dat kan ook consequenties hebben voor de gebruikte images: als bv. het logo net zo groot blijft, kan het menu ernaast in de problemen komen bij smaller maken.
  • Ook de diashow met de slidertron moet aangepast worden (en de div's die daarbinnen zitten); is wel mogelijk, zag ik.
  • En uiteraard de breedte van het content-gedeelte en de zijkolom links.
  • Ik zag in het voorbijgaan dat er her en der absolute posities en negatieve margins in het sjabloon zitten: daar moet dan ook naar gekeken worden.

Al met al: aanpassen van de breedte betekent algehele herziening van de css van het FWTSlide template...
Maar het kan wel!

Met vriendelijke groet,
CSShunter
_________
*) Ook een compleet "liquid design" behoort nog tot de mogelijkheden: dan worden (bijna) alle breedtematen niet in px maar in % opgegeven. In dat geval past de pagina zich automatisch aan aan de breedte van het scherm (voorbeeld).
Maar dan wordt het helemaal een klusje. ;)
 
Laatst bewerkt:
Oke, Hartelijk Bedankt voor het goeie mee denken, Ik ben alleen bang dat ik totaal niet over de kennis beschik, is dit een grote klus om aan te passen?

gr
 
Hoi Huib,
Tja, daar kom je alleen achter als je het gaat doen. :P

Ik gokte op 1 à 2 dagdelen voor iemand met redelijke kennis van css en javascript; afhankelijk van hoe het stylesheet en de div. scripts in elkaar zouden zitten. Vaak zitten er verborgen complicaties in verwerkt!
Maar het valt reuze mee, met Firebug ernaast kon ik binnen een uurtje deze fabrieken:


  • Stylesheet voor 1024*768px scherm en groter: bliksekaters.nl/tests/stylesheets/fwt-nw2.css

  • Met de aantekening dat niet alle ingrediënten van het stylesheet op je homepage gebruikt worden, en ik de gebruiksaanwijzing niet ken voor hoe de betreffende id's en classes in de html-structuur moeten passen. Bv. hoe en waar de "Poptrox"-toestand gerealiseerd wordt: geen flauw idee.
  • Ook de footer-indeling speelt zich af buiten mijn waarneming.
  • Maar de hoofdzaken lijken me nu aardig op de rails te staan.
  • En toch nog iets over het centreren tegengekomen: het background-img van de pagina stond nog niet gecentreerd; nu wel.

Bijbehorend moeten in de html ook een paar dingen worden aangepast:


  • Het logo mag maar 320px breed zijn om het menu ernaast te kunnen hebben. Ik heb 't nu via de html verkleind (dwz de browsers doen het), maar je kunt het img het beste tot deze ware grootte verkleinen in een tekenprogramma en dan toedienen: browsers kunnen niet zo goed images verschalen. Vaak wordt het verschralen.
  • "Feesten zoals het hoord" heb ik maar veranderd in "Feesten zoals het hoort", dat hoort beter in het NL. ;)
  • In de javascript settings op de pagina voor het slidertron moet de "viewerOffset" op 100 ipv 200 komen te staan. Dat bleek de donker-transparante zijkant links van de actuele dia te zijn; door de versmalling moet deze nu ook smaller worden, anders staat de dia teveel naar rechts > nu staat ie weer gecentreerd, met ook zo'n 100px aan halfdonker begin van de volgende dia aan de rechterkant.
  • De "logo bar.jpg" liep uit de nieuwe breedte van de #content. Alles binnen de #content mag nu maar max. 650px breed zijn. Dat is dan inclusief alle margins, paddings en borders!. Via de #main img{background: #333529;padding: 8px;} is het randje om het image heen de padding met L/R 8px; die 16px moet dus van de 650px af en het img mag dus max. 634px breed zijn. Weer opgelost in de html; en weer is het 't beste het img op deze maat te maken.

En de test:

Met vriendelijke groet,
CSShunter
_____________
O ja, naar aanleiding van de "logo bar.jpg": maak er een gewoonte van om géén spaties in mapnamen en bestandsnamen te zetten.
Er mogen nl. geen spaties in de html-code voor URL's staan, dan moet op de plaats van een spatie het %20-teken staan, d.w.z.
<img src="images/logo%20bar.jpg" ...>.
Dat maakt het erg onoverzichtelijk, en is bron van vergissingen.
Woorden loskoppelen kan je doen met een streepje - of onderstreepje _ ertussen:
<img src="images/logo-bar.jpg" ...>
 
Hartelijk dank voor het aanpassen hiervan, de problemen lijken nu grotendeels opgelost, ik heb online gezet met de verandering: www.soundofmagic.nl
Ben er helemaal blij! Super.

gr
 
Mooi! :thumb:
Om de bezoeker wat extra feedback te geven bij een hover over het menu, zou je in de css nog dit kunnen doen:
Code: 
#nav a:hover,
#nav a:focus {color:yellow}

Succes verder,
CSShunter
 
Oke, ga ik nu doen, bedankt voor de tip! Ik weet niet of ik onder deze topic een andere vraag mag stellen of dat ik daar een nieuwe voor moet openen.
Toch vraag ik het,

1. zoals jullie zien zit er een lijn om de afbeeldingen, die randen zou ik er graag niet om heen willen hebben, zodra ik een afbeelding plaats word dat automatisch gedaan, ik heb ''border'' al op 0 staan maar helaas geen resultaat (ook al dacht ik dat border alleen werkt als je de afbeeldingen gelinkt heb). Is dit aan te passen.

2. Links staat de kolom van ''laatste nieuws'' nu ik HTML gebruik moet ik iedere pagina steeds weer veranderen (12 in totaal) nu is dit enorm veel werk om telkens iedere dag te doen.
Bestaat er iets waar ik op iedere pagina een soort plugin plaats die gelinkt is naar een manier dat ik in 1 keer dit kan veranderen?

Alvast super bedankt, ben bij dat mensen me zo goed kunnen helpen.

gr
 
Hoi Huib,

Ad 1
Die border is geen border, maar een padding! Vandaar dat ie ook met {border:0} niet weg te krijgen is.
Om alle afbeeldingen in de #main container wordt nl. automatisch een "randje opvulling" gezet, zodat images niet pal tegen elkaar of tegen tekst aan kunnen komen te staan.
Dat gebeurt op regel 141 van het stylesheet fwt.css:
Code: 
#main img {
	background: #333529;
	padding: 8px;
}
Behalve de padding van 8px rondom zien we een background-color: die komt doorschijnen op de plaatsen waar het image niet zit, d.w.z. in het padding-gebied. Daarmee is het een schijn-border geworden!
Je kunt nu 2 dingen doen:
  • ofwel de hele css regel weghalen: dan is de padding weg.
  • ofwel de background-kleur weghalen, dan blijft de padding als afstand er in, maar is transparant geworden.
Ik denk dat de eerste optie het beste is: dan sluiten de posters in het Laatste Nieuws goed aan tegen de linkerkant van die kolom.
Het kan eventueel wel consequenties hebben voor images in het content-gedeelte, maar die zijn er nog niet; dat is dan (misschien) van later zorg, en kan zo nodig met margins ipv paddings opgelost worden.

=====
Ad 2
Ja, je kunt heel goed repeterende onderdelen op verschillende pagina's afvangen. Dat gaat met zg. "php-includes":
  • Een repeterend stuk code maak je tot htlm-fragment.
  • Op elke pagina roep je met 1 regeltje php-code dat fragment tevoorschijn (de server monteert het er naadloos in).
  • En bij een verandering van bv. het Laatste Nieuws hoef je alleen het fragment te veranderen en weer te uploaden: dan staat het acuut op alle pagina's die de bezoekers bekijken.
  • Er zijn 2 voorwaarden aan verbonden: de server moet php ondersteunen (in elk geval alle servers die niet gratis zijn doen dat zo ongeveer altijd), en de pagina's moeten de uitgang .php krijgen ipv .htm. Dan weet de server dat ie moet pre-processen (= de php-machine er op los laten, voordat de pagina naar de bezoeker wordt verzonden).

Is dat niet wonderbaar? Sound of Magic PHP! :)



Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan