[VERZAMELTOPIC] Hulp bij webdesign

bobvanduin · 13 Jun 2007 00:15

Hallo beste mensen,

Ik heb wederom een vraag over het bouwen van een website:

Ik heb mijn site gebouwd met Dreamweaver, voor een schermresolutie van 1024x768. Alles wel en prima zover...als ik mijn site (http://www.iniceland.nl) bekijk op een ander formaat scherm dan klopt dat uiteraard niet meer. Omdat ik soms rechts uitlijn, soms midden en soms links wordt alles dus uit elkaar getrokken en dat ziet er dus niet uit.

Wat ik graag zou willen is dat als je de site bekijkt met een grotere resolutie dan 1024x768, dat de hele site in het midden van het scherm word weergegeven, maar wel op de manier zoals ik heb bedoeld heb, niet uitelkaar getrokken...

Wat ik geprobeerd heb is een DIV layer aangemaakt met align Center, maar dan zet hij dus alles wat in die laag komt in het midden, ook de tekst/foto uitlijning dus...

Is de vraag een beetje duidelijk zo

Bob

Soron · 16 Jun 2007 20:23

CodeCOLON Alles selecteren

<div align="center">blabla</div>

Heb jij je div zo een uitlijning gegeven? Dan kan het inderdaad kloppen dat alles wat in die div staat in het midden van die div word uitgelijnd.

Als je wilt dat je je div in het midden blijf staan van het scherm moet je via een style de div een vast breedte geven en marges op auto zetten. Dan zou de code wezen:

CodeCOLON Alles selecteren

<div style="width: 1000px; margin: auto">Je inhoud hier
</div>

Ik ga er dan wel van uit dat je deze div om de rest van je site heb staan. Dus dat dit een soort van container is waar je je layout in zet. Probeer dit eens zou ik zeggen.

MarkGrob · 19 Jun 2007 11:16

Zo doe ik het ook....

maar dan nog wel even een mooi zwart randje erom:

CodeCOLON Alles selecteren

<div style="width: 1000px; margin: auto; border: 1px solid #000">Je inhoud hier
</div>

Wil je de achtergrond van de site, dus in die div, veranderen, dan kan je background-color gebruiken.
Zet je in de <body> tag een bgcolor, dan verander je daarmee de kleur van de ruimte "achter" de site.

Soron · 19 Jun 2007 11:19

Nog mooier is als je je styles in een extern CSS bestand zet. Dan hoef je niet alle pagina's bij langs om die div te wijzigen.

Maar das een detail.

MarkGrob · 19 Jun 2007 11:38

Ik dacht, jij zei...

Dus....

blabla.html:

CodeCOLON Alles selecteren

<html>
<head>
 <title>De title van je site</title>
 <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
 <body>

  <div id="maindiv">

   Bla bla, Hier is de site

  </div>

 </body>
</html>

styles.css:

CodeCOLON Alles selecteren

body {
 text-align: center;
 background-color: #ddd; 
} 

#maindiv { 
 text-align: left;
 background-color: #fff;
 width: 1000px; 
 height: 100%;
 margin: auto; 
 border: 1px solid #000; 
}

oegemeister · 19 Jun 2007 11:43

en dan natuurlijk ook nog even de marges van de body op nul zetten

CodeCOLON Alles selecteren

body {
          margin: 0,0,0,0;
}

m. vr. gr.
Sjoerd

Soron · 19 Jun 2007 11:45

jup... maar waarom zou je een zwart randje om je div willen?

Tenzij dat natuurlijk je ontwerp is, maar dat is het niet het geval bij de TS

@ Sjoerd: Dan kan je net zo goed zeggen: margin: 0px;

MarkGrob · 19 Jun 2007 11:48

da's een tik van mezelf.... houd van randjes... zwart, wit, grijs....

oegemeister · 19 Jun 2007 14:49

Soron schreefCOLONjup... maar waarom zou je een zwart randje om je div willen?

Tenzij dat natuurlijk je ontwerp is, maar dat is het niet het geval bij de TS

@ Sjoerd: Dan kan je net zo goed zeggen: margin: 0px;

klopt inderdaad.... dat zijn voor mij standaard dingen in een style-sheet... die kopieer ik dus altijd.... daar denk ik dus ook niet bij na

gr Sjoerd

bobvanduin · 19 Jun 2007 17:33

Dank jullie voor alle antwoorden, ik ga het vanavond direct bekijken en proberen, ik ben nu helaas op werk!

Bob

bobvanduin · 19 Jun 2007 23:11

Blijft toch nog een vraag over...de site wordt nu links geplaatst, is het ook mogelijk om heb in het midden te hebben? Ik heb het geprobeerd met Align centre en ook heb ik bij "margin" auto verandert in Centre, maar dat werkt ook niet...zoals jullie zien ben ik niet de beste webdesigner

Bob

oegemeister · 20 Jun 2007 07:17

het margin: auto; verhaal zou toch echt moeten werken.... kun je eens een stukje code plaatsen?

m. vr. gr.
Sjoerd

Soron · 20 Jun 2007 09:50

Als je in de div zet "align="center" " dan zal dat inderdaad niet werken. Wat dat doet is de inhoud in het betreffende blokelement in het midden er van zetten, niet het blokelement zelf ten opzichte van zijn parent.

Margin: auto; zou inderdaad moeten werken. ik zou ook even dat stukje code plaatsen om ons duidelijk maken wat je zoal doet

.

bobvanduin · 21 Jun 2007 00:32

Nou, ik heb (dacht ik,) gewoon jullie code gekopieert...uiteraard kan dat fout zijn gegaan maar hier komt 1 pagina van mij:

CodeCOLON Alles selecteren

<html>
<head>
<div style="width: 1024px;  margin: centre"><title>In Iceland: Welkom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {
	font-size: 18px;
	font-style: italic;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.style5 {font-size: 10px}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Banner_iniceland_met_schaduw_en_knoppen.psd) -->
<table id="Table_01" width="1024" height="140" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="13">
			<div id="Layer1" style="position:absolute; width:1024px; height:103px; z-index:1"><img src="image/banner_tekst_Welkom_op_in_iceland.gif" alt="Dit is de Website van Frida Stefansdottir, Matthías Maarten van Duin en Bob van Duin." width="1024" height="110"></div>
			<img src="image/banner_met_slices/images_banner/Banner_iniceland_met_schadu.jpg" width="1024" height="110" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="image/banner_met_slices/images_banner/Banner_iniceland_met_sch-02.jpg" width="201" height="30" alt=""></td>
		<td>
			<a href="index.htm"
				onmouseover="window.status='Home';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="image/banner_met_slices/images_banner/Banner_iniceland_slice_home.jpg" width="97" height="30" border="0" alt="Home"></a></td>
		<td>
			<img src="image/banner_met_slices/images_banner/Banner_iniceland_met_sch-04.jpg" width="1" height="30" alt=""></td>
		<td>
			<a href="index_over_ons.htm"
				onmouseover="window.status='Over ons';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="image/banner_met_slices/images_banner/Banner_iniceland_slice_over.jpg" width="98" height="30" border="0" alt="Over ons"></a></td>
		<td>
			<img src="image/banner_met_slices/images_banner/Banner_iniceland_met_sch-06.jpg" width="1" height="30" alt=""></td>
		<td>
			<a href="index_pallsbaer.htm"
				onmouseover="window.status='Pállsbær';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="image/banner_met_slices/images_banner/Banner_iniceland_slice_pall.jpg" width="98" height="30" border="0" alt="Pállsbær"></a></td>
		<td>
			<img src="image/banner_met_slices/images_banner/Banner_iniceland_met_sch-08.jpg" width="1" height="30" alt=""></td>
		<td>
			<a href="index_avonturen.htm"
				onmouseover="window.status='Avonturen';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="image/banner_met_slices/images_banner/Banner_iniceland_slice_avon.jpg" width="98" height="30" border="0" alt="Avonturen"></a></td>
		<td>
			<img src="image/banner_met_slices/images_banner/Banner_iniceland_met_sch-10.jpg" width="1" height="30" alt=""></td>
		<td>
			<a href="index_fotos.htm"
				onmouseover="window.status='Foto\'s';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="image/banner_met_slices/images_banner/Banner_iniceland_slice_foto.jpg" width="98" height="30" border="0" alt="Foto's"></a></td>
		<td>
			<img src="image/banner_met_slices/images_banner/Banner_iniceland_met_sch-12.jpg" width="1" height="30" alt=""></td>
		<td>
			<a href="index_nieuwtjes.htm"
				onmouseover="window.status='Nieuwtjes';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="image/banner_met_slices/images_banner/Banner_iniceland_slice_nieu.jpg" width="99" height="30" border="0" alt="Nieuwtjes"></a></td>
		<td>
			<img src="image/banner_met_slices/images_banner/Banner_iniceland_met_sch-14.jpg" width="230" height="30" alt=""></td>
	</tr>
</table>
<blockquote>
  <p align="center" class="style1">Welkom op &ldquo;In Iceland&rdquo; </p>
  <blockquote>
    <p class="style2">Voor ons zitten er alweer twee jaar op hier in IJsland. Wat is de tijd toch ontzettend snel gegaan. Gelukkig kunnen wij het blijde nieuws verkondigen dat wij Nederland gaan bezoeken van 24 april tot 1 mei. En dat precies twee jaar later, is dat goede timing of niet!</p>
    <p class="style2">Niet zo lang geleden zijn wij voor het eerst met Matti naar het zwembad gegaan. Hij vond het ontzettend leuk zo'n groot bad. Wij hebben er nu foto's van geplaats. Hopelijk kunnen wij er ook een filmpje van plaatsen of een link ernaar toe. Het leukste vond hij het spetteren, het spelen met een reuze bad eend en het zwembandje van oma was ook een groot succes.</p>
    <p class="style2">Kisi wordt met de dag ouder en humeuriger. Terwijl ik Dimma aan het uitlaten was omdat wij met z'n allen naar Reykjavik zouden gaan is  hij ons gevolgd. Bob zou ons onderweg ophalen met de auto om naar Reykjavik te gaan.<br>
    Opeens hoorde ik MAUWWW, MAUWWW en daar was de oude vriend. Bob heeft hem op schoot genomen en in de auto terug naar huis gebracht terwijl ik Dimma verder uitliet en wachtte tot Bob mij weer zou halen om naar Reyk te gaan. </p>
    <p class="style2">Dimma is de laatste paar weken ontzettend lief en rustig. Uiteraard heeft ze nog steeds haar enthousiasme en vrolijkheid wat sommige mensen kan afschrikken, maar in huis en in de auto is ze erg rustig en leuk. Het is heel lang geleden sinds zij iets gesloopt heeft. </p>
    <p class="style2"> Bob is op dit ogenblik op zoek naar een leuke uitdaging,  werk technisch gezien en ik heb het ontzettend druk op werk. Het inwerken van een nieuwe kracht duurt gewoon altijd even en er zijn er ook twee van het team thuis in Zweden voor een vakantie. Ondanks de drukte is het ontzettend gezellig. </p>
    <p class="style2">Tot in april! </p>
    <p class="style2">Bob en Frida</p>
  </blockquote>
  <p align="center" class="style2"><img src="image/Dimma/Dimma_150X150.jpg" width="150" height="150" border="1" align="middle"><img src="image/slideshow-matthias-150x150.gif" width="150" height="150" hspace="5" border="1" align="middle"><img src="image/Kisi/Kisi.jpg" width="150" height="150" border="1" align="middle"></p>
  <p align="center" class="style2"><span class="style2"><span class="style5">Laatst geupdate op: 17 juni 2007 </span>
    <!-- End ImageReady Slices -->
    </span>  </p>
</blockquote>
<div align="right"><blockquote><blockquote><blockquote><blockquote>&nbsp;</blockquote>
      </blockquote>
    </blockquote>
  </blockquote>
</div>
</body>
</html>

Soron · 21 Jun 2007 15:50

Hmmmm, als het nog nuttig is, dan kijk ik er morgen even na, wanneer ik er effe tijd voor heb.

bobvanduin · 21 Jun 2007 22:21

Soron schreefCOLONHmmmm, als het nog nuttig is, dan kijk ik er morgen even na, wanneer ik er effe tijd voor heb.

Zou ik erg fijn vinden!

Bob

Domein te koop, voor meer info: sales@eosdigitaal.nl

[VERZAMELTOPIC] Hulp bij webdesign