Kan inhoud footer niet centreren?!

Status
Niet open voor verdere reacties.
T

TVA VAT

Nieuwe gebruiker
Lid geworden
26 sep 2009
Berichten
4
Beste,

Ik moet voor mijn school een portfolio tegen maandag afwerken.
Hij is bijna af en heb er vrij lang aan gewerkt (ken HTML en dreamweaver nog maar één week!).
Nu krijg ik mijn tekst niet mooi gecentreert in mijn footer (noemt bij mij Bottom).
Heb al veel geprobeerd maar kom er niet uit, Help?!
Ik heb een widescreen scherm en daar zet hij mijn inhoud van mijn footer heel hard naar rechts.
Hij centreert dus niet goed.

HTML:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<!-- TemplateBeginEditable name="doctitle" -->
	<title>Untitled Document</title>
	<!-- TemplateEndEditable -->
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="../_FILES/base.css" rel="stylesheet" type="text/css">
	<!-- TemplateBeginEditable name="head" -->
	<!-- TemplateEndEditable -->
</head>

<body class="body">
    <div class="Top" id="Top">   
        <img src="../_FILES/Artesis_Transparant.png" hspace="15" vspace="25" align="left"> Portfolio &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ―&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Toon Van Assche <br>
        <br>
        <table width="1206" border="0,5" height="auto">
    	   <tr> 
                <th class="Links" scope="col"> <a href="../Index.html"> | Home |</a></th>
                <th class="Links" scope="col"> <a href="../EA/Index.html"> | Elektronica |</a></th>
                <th class="Links" scope="col"> <a href="../ICT/Index.html">| ICT | </a></th>
                <th class="Links" scope="col"> <a href="../MB/Index.html">| Mens &amp; Bedrijf | </a></th>
                <th class="Links" scope="col"> <a href="../Project/Index.html">| Project |</a></th>
                <th class="Links" scope="col"> <a href="../BP/Index.html">| Project + Bachelorproef |</a></th>
          </tr>
        </table>
    </div>
    
    <div class="Left" id="Left">
        <!-- TemplateBeginEditable name="Left" -->
        Left 
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <!-- TemplateEndEditable -->
  	</div>
    
<div class="Content" id="Content"> 
    <!-- TemplateBeginEditable name="Inhoud" -->
        Inhoud<br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- TemplateEndEditable -->

 	<div class="Bottom" > 
	<a class="Links" href="http://www.artesis.be/" target="_blank"> | Artesis Antwerpen |</a>  &nbsp; &nbsp;― &nbsp; &nbsp; <!-- #BeginDate format:It1 -->26-09-2009<!-- #EndDate --> &nbsp; &nbsp; ― &nbsp; 			
    &nbsp; <a class="Links" href="mailto:toon.vanassche@student.artesis.be"> | Mail |  </a> </align>   
   	</div>
</div> 

</body>
</html>

CSS:
Code: 
html, body {
		margin:0;
		padding:0;
		height:100%;
		}

.body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color:#FFF;
	font-size: 26px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000000;
	}
		
.Top {
	position: absolute;
	top:11px;
	width: 99%;
	right: 10px;
	height: 103px;
	left: 10px;
	border-style: none;
	background-image: url(Header.jpg);
	color: #000000;
	font-size: 26px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align: center;
	font-weight: bold;
	}

.Content {
	position:absolute;
	top:122px;
	width: 84%;
	height: 100%;
	left: 271px;
	right: 10px;
	border-style: none;
	background-image: url(ContentHome.jpg);
	background-repeat:no-repeat;
	background-color:#FFF
	color: #2A9FFF;
	font-size: 18px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 12px 12px 12px 12px;
	}

.Left{
	position: absolute;
	top: 122px;
	width: 242px;
	height: 100%;
	left: 10px;
	border-style: none;
	background-image: url(Left.jpg);
	color: #424242;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-align: left;
	font-weight: bold;
	padding: 0px 5px 5px 5px;
	}
	
.Bottom {
	border-style: none;
	bottom:0;
	padding:0;
	margin:0;
	position:fixed;
	width:100%;
	height: 25px;
	clear: both;
	text-align: center;
	background-image: url(Bottom.jpg);
	background-repeat:no-repeat;
	background-color:#FFF
	font-size: 16px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000000;
}
	
.Links {
	color: #000000;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	}

a:link {
	color: #000000;
	text-decoration: none;
	}
a:visited {
	color: #000000;
	text-decoration: none;
	}
a:hover {
	color: #797979;
	text-decoration: none;
	}
a:active {
	color: #000000;
	text-decoration: none;
	}

In bijlage screenshot van mijn browser + Template.

Dank bij voorbaat,

Toon

P.S. Ik zou het Maandag 28/9 ochtend moeten inleveren
 

Bijlagen

  • center.jpg
    center.jpg
    45,6 KB · Weergaven: 34
  • Templates.rar
    1,5 KB · Weergaven: 14
Laatst bewerkt:
ik zie geen footer, de tekst staat in de div content die rechts staat


<div class="Content" id="Content">
 
De tekst van de footer staat in <div class="Bottom" >.
De screenshot in bijlage zal wat verduidelijken.

Alvast bedankt voor het antwoord,

Toon
 
Deze div:

</div>
</div>

</body>

hier

zetten
<!-- TemplateEndEditable -->
hier
<div class="Bottom" >

Overigens werk je met absolute,
normaal is een liquid design = beeldvullend.
Je zou alles in een container moeten zetten om alles te vangen.

Overigens is het gebruik van Hoofdletters af te raden,
class="Bottom

:cool:
 
Geliquideerd!

Hoi Toon,
Uit je vette rode lijn op je afbeelding begrijp ik dat de footer toch gecentreerd moet staan ten opzichte van de content, en niet t.o.v. de hele paginabreedte.
Maar ik heb je pagina even
gemaakt. Zie broncode. Deze werkt op monitors v/a 800x600px. :) *)
Je zal nog even moeten frutselen met de positionering van de achtergrond-afbeeldingen, want die had ik er hier niet bij.

Wat uitleg staat in het bijbehorende stylesheet. Verdere uitleg kan altijd nog na het inleveren! ;)

Succes!
CSShunter

*) Ook op 640x480px (voor zover die monitors niet zijn omgebouwd tot aquarium), dan is het enige dat mis gaat het logo, dat onder de titel-tekst komt te staan. Verder voegt de pagina zich volgens plan.
Maar op echt smalbeeld (mobieltjes e.d.) laat ie zich wel weer goed zien, volgens de Small Screen Rendering van de Webdeveloper Toolbar en volgens de Klein scherm-weergave van Opera.

PS:
Via Bureaublad > rechtermuisklik > Eigenschappen > Instellingen kan je altijd kijken hoe een pagina er op een lagere resolutie dan je beeldscherm uit ziet.
 
Laatst bewerkt:
Hartelijk bedankt voor de vele antwoorden,
Met de uitleg van peter vazed en Frenske123 heb ik wat geprobeerd maar is het niet helemaal gelukt.

Csshunter, super hard bedankt!
Ik heb alle afbeeldingen erin gevoegd en eveneens de positie van alles een beetje veranderd.

Ik heb wel nog een klein probleem met grote gevolgen.....
Ik had mijn footer 'fixed' gezet opdat hij beneden zou blijven staan.
In de css die jij gemaakt heb kan ik die niet meer fixed zetten.
Wanneer ik nu weinig tekst heb dan staat mijn footer niet onderaan de pagina.

Zou iemand mij met dit probleem willen verderhelpen aub?

Dank bij voorbaat,

Toon
 
Ja, die fixed footer zag ik op het laatst ook, maar om problemen bij te lange tekst te verhinderen, had ik 'm er uit geslingerd. En door het vervullen van de voorwaarde van een liquid design was de tijd op om daar ook nog iets bruikbaars op te verzinnen. ;)

Omdat de fixed positie los staat van de #content, moet er namelijk onafhankelijk van de #content opnieuw de margin van de linkerkolom van af, en moet de overblijvende ruimte gecentreerd worden, en dat vergt wat kunstgreepjes.
Met kunstgreepjes is hier:
Getest in Firefox 3 en Firefox 3.5, Internet Explorer 7 en 8, Opera en Safari: alles o.k. :)

Ga je morgenochtend halen?! :rolleyes:
CSShunter

PS: En doe je een linkje als ie klaar is?
ken HTML en dreamweaver nog maar één week
Klik om te vergroten...
Kwam de opdracht pas een week tevoren, of was je zelf een beetje aan de late kant? Je verwacht nogal wat, als je verwacht dat iemand zonder voorkennis binnen een week een website in elkaar kan timmeren die méér is dan een platte tekst! :D
 
Duizend maal bedankt csshunter,

Ik heb deze opdracht een week geleden gekregen en ben er elke avond heel hard aan bezig geweest.
Vele slapeloze nachten zijn er geweest.
Ik heb uiteindelijk alles op tijd afgekregen, ik had mijn pagina's al gemaakt voor ik deze vraag stelde.
Juist de footer werkte niet.
Ik moest dus enkel mijn template nog aanpassen en alles updaten.
Ik vind de uitleg die je er hebt bijgeplaast zeer handig!
Echt super hard bedankt, dit vergeet ik nooit!
Mijn resultaat zal nu verruit het beste zijn, hoop ik dan toch.

Volgende week moet ik mijn portfolio verdedigen en uitleggen hoe ik het heb gedaan.
Jou uitleg erbij leek me logisch en ik denk dat ik alles snap.
Heb natuurlijk nog niet de tijd gehad om alles goed te bekijken qua .css.
Als ik nog vragen heb achteraf kan ik dan nog bij jou terecht?

Nogmaals, dikke merci, :thumb:

Toon
 
Ik heb uiteindelijk alles op tijd afgekregen
Klik om te vergroten...
Mooi! :)
Als ik nog vragen heb achteraf kan ik dan nog bij jou terecht?
Klik om te vergroten...
Maar natuurlijk, want:
CSShunter: Verdere uitleg kan altijd nog na het inleveren! ;)
Klik om te vergroten...
Om je snelkook-cursus css af te maken, heb ik nog wat aanvullende verklaringen gemaakt, die niet in het stylesheet staan. Daar staat alleen het hoognodige aan "specialiteiten" in, nu ook wat "gewone css eigenschappen", die natuurlijk helemaal niet zo gewoon zijn voor iemand die er pas sinds een weekje inswingt! ;)
Ik hoor het wel!
CSShunter
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan