Ruimte tussen twee areas

Iineke · 30 mrt 2013

Het lukt me niet om de open ruimte tussen de footer area van mijn in aanbouw zijnde nieuwe website (http://test2.inekekuiper.nl/) en het deel daarboven weg te krijgen. Heeft iemand een idee hoe ik dat voor elkaar kan krijgen?
Zie het css-bestand hieronder:

HTML:

@charset "UTF-8";
/* --- CSS Document by Codify Design Studio - codifydesign.com --- */

body {
	margin: 0px;
	color: #0e2946;
	font-size: 14px;
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #545454;
	background-image: url(images/content_bkgd2.jpg);
	background-repeat: repeat;
}

h1 {
	color: #FFF; /* tekst naam in logo */
	font-size: 26px;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
}
h2 { 
	color: #0e2946;
	font-size: 20px;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
}
h3 { 
	color: #FFF; /* tekst onder naam in logo */
	font-size: 18px;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
}

h4 {
	font-size: 16px;
	color: #F00;
}
					
h5 {
	font-size: 14px;
	color: #F63;
}



a:   {
	color: #FFF; /* bepaalt de kleur voor de links in het logo */
}

a  {
	color: #111; /* bepaalt de kleur voor de links in de tekst */
}

a:hover    {
	color: #00F;
}


.container {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(images/content_bkgd_tile.jpg);
	background-repeat: repeat-y;
}


/* BANNER AREA */
.bannerArea {
	width: 980px;
	height: 145px;
	background-color: #173e69;
	background-image: url(images/logoIK-basis.jpg);
	background-repeat: no-repeat;
	
}

.bannernav {
	padding-top: 10px;
	padding-right: 40px;
	float: right;
	color: white;
	font-size: 12px;
	font-weight:bold;
	font-family: Tahoma, Geneva, sans-serif;
}

.bannernav a {
	color: white;
	text-decoration: none;
}
.bannernav a: {
	color: white;
}
.bannernav a:hover {
	color: #ECBB7B;
}

.container .bannerArea .toplogo {
	font-family: Tahoma, Geneva, sans-serif;
	color: #fff;
	font-weight: bolder;
	font-size: 50px;
	margin-left: 104px;
	padding-top: 0px;	
}


.toplogo {
	margin-left: 210px;

}

.toplogo2 {
	margin-left: 210px;
	padding-top: 0px;

}


.content {
	padding-top: 20px;
	padding-bottom: 20px;
	background-image: url(images/content_bkgd.jpg);
	background-repeat: repeat;
}




/* LEFT NAVIGATION */

.leftnavigation {
	width: 192px;
	margin: 70px 0 0 0;
	padding: 0 0 0 8px;
	float: left;
	list-style: none;
	position: absolute;
}

.leftnavigation li {
	width: 100%; /* voor Internet Explorer */
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}

.leftnavigation ul {
	margin: -1px 0 0 0; /* omhoog met hoogte border-top lijntje */
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	left: -9999px; /* normaal buiten zicht */
	background: #E7E8FF;
	border: solid #999999;
	border-width: 1px 1px 0 1px;
}

.leftnavigation li:hover ul {
	left: 190px; /* bij hover op z'n plaats */
	}

.leftnavigation a {
	margin-left: 0px;
	width: 156px;
	padding-left: 15px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	color: #163d68;
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	background-image: url(images/nav_normal.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	border-bottom: 1px solid #999999;
	display: block;
}

.leftnavigation a:{
	color: #0c223b;
}
.leftnavigation a:hover{
	color: #ffffff;
	background-image: url(images/nav_down.jpg);
}

/* CONTENT AREA */

.contentleft {
	width: 699px;
	padding-left: 250px;
	padding-right: 20px;
	float: inherit;
	min-height: 400px;

}

.contentright {
	padding-top: 55px;
	float: left;
	width: 210px;
}

.imageright {
	margin-top: 10px;
	margin-left: 10px;
	float: right;	
}
.imageleft {
	margin-right: 10px;
	float: left;
}

/* SPREUKEN AREA */
.spreukenArea {
	width: 980px;
	height: 80px;
	background-color: #cfcfcf;
	background-image: url(images/content_bkgd.jpg);
	background-repeat: repeat;
}

.spreuken {
	border-top: solid;
	border-color: #737a90;
	border-width: 2px;
	margin-left: 240px;
	margin-right: 30px;
	padding-top: 18px;
	color: #0e2946;
	font-size: 12px;
	font-style: oblique;
	font-weight: bold;
	font-family: Tahoma, Geneva, sans-serif;
	text-align: center;
}

/* FOOTER AREA */
.footerArea {
	width: 980px;
	height: 48px;
	background-color: #cfcfcf;
	background-image: url(images/footer2_bkgd.jpg);
	background-repeat: no-repeat;
	
}

.copyright {
	margin-left: 240px;
	margin-right: 30px;
	margin-top: px;
	padding-top: px;
	color: #666666;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-family: Tahoma, Geneva, sans-serif;
	text-align: right;

}

taeser · 31 mrt 2013

In je css de class content staat nu op margin top 1 em
als je deze verwijderd dan sluit hij aan bij de content.

Wat wel vreemd is dat je het copyright nu in het content hebt staan terwijl dat eigenlijk thuis hoort in de footer
De css zoals die hier gepost is, die is ook niet meer dezelfde zoals hij op dit moment is.

En als ik zo vrij mag zijn : het is nu wel een beetje een rommeltje, de css en html.

groetjes leon

Iineke · 31 mrt 2013

Ehm...

Ik pretendeer ook niet goed hierin te zijn.
Ik wil alleen mijn eigen website zo hebben dat ik hem snap, en nu ziet hij eruit zoals ik wil.
Ik heb een standaard template van Dreamweaver gebruikt en alles vervolgens aangepast.
Het kan wellicht wat geordender, maar als ik dan iets doe en er gebeurt iets dat ik niet wil, dan verander ik het weer terug, omdat ik het dan niet meer snap, en ik telkens tijdens kwijt ben met zoeken.
Mijn motto is: als het niet werkt zoals het moet, en moet het maar zoals het werkt. ;-)
Ik neem aan dat je bedoelde dat er dingen in de html staan die in de css moeten?

Dank je wel voor de tip, ik heb even zitten zoeken, maar ik vind geen margin met 1em, niet in die ik hier boven heb geplaatst, niet in die ik nu heb.
Ik had inderdaad nog wat andere dingetjes gewijzigd in het ccs-bestand, het ziet er nu als volgt uit:

Code:

@charset "UTF-8";
/* --- CSS Document by Codify Design Studio - codifydesign.com --- */

body {
	margin: 0px;
	color: #0e2946;
	font-size: 14px;
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #545454;
	background-image: url(images/content_bkgd2.jpg);
	background-repeat: repeat;
}

h1 {
	color: #FFF; /* tekst naam in logo */
	font-size: 26px;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
}
h2 { 
	color: #0e2946;
	font-size: 20px;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
}
h3 { 
	color: #FFF; /* tekst onder naam in logo */
	font-size: 18px;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
}

h4 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
	font-size: 18px;
	color: #0e2946;
}
					
h5 {
	font-size: 16px;
	color: #0e2946;
}



a:   {
	color: #FFF; /* bepaalt de kleur voor de links in het logo */
}

a  {
	color: #0e2946; /* bepaalt de kleur voor de links in de tekst */
}

a:hover    {
	color: #00F;
}


.container {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(images/content_bkgd_tile.jpg);
	background-repeat: repeat-y;
}


/* BANNER AREA */
.bannerArea {
	width: 980px;
	height: 145px;
	background-color: #173e69;
	background-image: url(images/logoIK-basis.jpg);
	background-repeat: no-repeat;
	
}

.bannernav {
	padding-top: 10px;
	padding-right: 40px;
	float: right;
	color: white;
	font-size: 12px;
	font-weight:bold;
	font-family: Verdana, Geneva, sans-serif;
}

.bannernav a {
	color: white;
	text-decoration: none;
}
.bannernav a: {
	color: white;
}
.bannernav a:hover {
	color: #39F;
}

.container .bannerArea .toplogo {
	font-family: Tahoma, Geneva, sans-serif;
	color: #fff;
	font-weight: bolder;
	font-size: 50px;
	margin-left: 104px;
	padding-top: 0px;	
}


.toplogo {
	margin-left: 210px;

}

.toplogo2 {
	margin-left: 210px;
	padding-top: 0px;

}


.content {
	padding-top: 40px;
	padding-bottom: 20px;
	background-image: url(images/content_bkgd.jpg);
	background-repeat: repeat;
}




/* LEFT NAVIGATION */

.leftnavigation {
	width: 192px;
	margin: 40px 0 0 0;
	padding: 0 0 0 8px;
	float: left;
	list-style: none;
	position: absolute;
}

.leftnavigation li {
	width: 100%; /* voor Internet Explorer */
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}

.leftnavigation ul {
	margin: -1px 0 0 0; /* omhoog met hoogte border-top lijntje */
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	left: -9999px; /* normaal buiten zicht */
	background: #E7E8FF;
	border: solid #999999;
	border-width: 1px 1px 0 1px;
}

.leftnavigation li:hover ul {
	left: 190px; /* bij hover op z'n plaats */
	}

.leftnavigation a {
	margin-left: 0px;
	width: 162px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding-left: 10px;
	padding-right: 5px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	color: #163d68;
	font-size: 11px;
	font-weight: bolder;
	text-decoration: none;
	background-image: url(images/nav_normal.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	border-bottom: 1px solid #999999;
	display: block;
}

.leftnavigation a:{
	color: #0c223b;
}
.leftnavigation a:hover{
	color: #ffffff;
	background-image: url(images/nav_down.jpg);

}

/* CONTENT AREA */

.contentleft {
	width: 699px;
	padding-left: 250px;
	padding-right: 20px;
	float: inherit;
	min-height: 400px;
	font-family: Verdana, Geneva, sans-serif;

}

.contentright {
	padding-top: 55px;
	float: left;
	width: 210px;
}

/* SPREUKEN AREA */
.spreukenArea {
	width: 980px;
	height: 80px;
	background-color: #cfcfcf;
	background-image: url(images/content_bkgd.jpg);
	background-repeat: repeat;
}

.spreuken {
	border-top: solid;
	border-color: #737a90;
	border-width: 2px;
	margin-left: 240px;
	margin-right: 30px;
	padding-top: 18px;
	color: #0e2946;
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
	vertical-align: middle;
}

/* FOOTER AREA */
.footerArea {
	width: 980px;
	height: 48px;
	background-color: #cfcfcf;
	background-image: url(images/footer2_bkgd.jpg);
	background-repeat: no-repeat;
	
}

.copyright {
	margin-left: 240px;
	margin-right: 30px;
	margin-top: px;
	padding-top: px;
	color: #666666;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-family: Tahoma, Geneva, sans-serif;
	text-align: right;

}

taeser · 31 mrt 2013

Ik bedoel margin-top. Hij staat er echt.

Code:

.content {
	padding: 10px;
	margin-left: 1em; /* afstand tussen linker zijkant scherm en content-kader */
	margin-right: 1em;
	margin-top: 1em;
	width: inherit; /* breedte tekstveld */
	float: left;
	background-color: #fff;
	font-size: 14px;

groetjes leon

Oke, zie nu dat hij er uit is, misschien nog niet geupload.

Iineke · 31 mrt 2013

ehm... zowel in de code in mijn eerste bericht als in de code in mijn vorige bericht zie ik het niet staan, en ook niet in mijn css bestand.
Maakt me wel benieuwd hoe het dan kan dat jij het wel ziet.
En ik heb de pagina al vele malen vernieuwd, dus daar kan het niet aan liggen.

Dus als het niet aan die margin-top ligt, waar kan het dan nog meer aan liggen?

taeser · 31 mrt 2013

Omdat de broncode in je twoColLiqLtHdr.css bestand zichtbaar is.
Op dit moment staat er in de class .content nog precies hetzelfde als in mijn eerste post.
Haal je die margin- top van 1 em weg , dan is dat blauwe tussenstukje weg.

groetjes leon

Iineke · 1 apr 2013

Er zit helemaal geen twoColLiqLtHdr.css bestand in inekekuiper.nl
alleen een stylesheet.css

En ik zal wel gek zijn, maar zelfs als ik in de broncode van de internetpagina kijk en van daaruit in de stylesheet, staat alleen bij .copyright een margin-top van 0px (ik heb de 0 net toegevoegd, er stond alleen px) en ook nergens een 1em.

Kijk je wel op de juiste pagina?

Naarling · 1 apr 2013

Het probleem zit hem in de margin-top van de paragraaf in je footerArea. Die drukt de rest van de elementen waar het in zit mee naar beneden. Een oplossing is om dit aan je CSS toe te voegen.

Code:

.footerArea p{margin-top:0;}

Iineke · 1 apr 2013

Ah, perfect, dat werkt!

Dank je wel!

taeser · 1 apr 2013

Iineke zei:
Kijk je wel op de juiste pagina?

Heb de link hierboven gevolgd, wat blijkbaar niet de bedoeling was. Sorry.

groetjes leon

Iineke · 1 apr 2013

Oeps... mijn fout.
Ik had de pagina inmiddels gepubliceerd op de plek waar die moest komen, omdat de site die er al stond bepaald niet optimaal was.

Nogmaals dank!

Ruimte tussen twee areas

Iineke

Gebruiker

taeser

Gebruiker

Iineke

Gebruiker

taeser

Gebruiker

Iineke

Gebruiker

taeser

Gebruiker

Iineke

Gebruiker

Naarling

Terugkerende gebruiker

Iineke

Gebruiker

taeser

Gebruiker

Iineke

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy