CSS overlapping zorgt voor extra scrollbar

Egel007 · 2 mei 2010

Hallo,

Wist niet helemaal hoe ik deze topic moest noemen, maargoed.
Ik ben bezig met mijn site, maar telkens wanneer ik iets bijvoorbeeld wil positioneren met margin, wordt het vorige object overlapt en krijg ik een stomme scrollbar erbij. Overflow:hidden werkt niet, en als ik alles doe met float, staat alles op een andere resolutie schots en scheef.
Even voor het idee. Zo ziet het er dus uit:

Dit is mijn HTML-code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet_index2.css" />
<title>Untitled Document</title>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="achtergrondHead"></div>
    <div id="container">
<!-- LOGO -->
<div id="logo">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','915','height','135','src','images/logoandmenu','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','images/logoandmenu' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="915" height="135">
<param name="movie" value="images/logoandmenu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/logoandmenu.swf" width="915" height="135" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
<!-- //LOGO -->
    </div>
</body>

</html>

Dit is mijn CSS-code:

Code:

@charset "utf-8";
/* CSS Document */

html, body{
   background-color:#070707;
   overflow-x:hidden;
}

#achtergrondHead{
   background-image:url(../images/achtergrondHeader.png);
   width:2000px;
   height:170px;
   z-index:0;
}

#container{
   width:915px;
   margin:0 auto 0 auto;
}

   #logo{
      background-position:absolute;
      margin-top:-140px;
      z-index:1;
   }

Z-index heb ik ook al geprobeerd, maar dat hielp ook niet.
Iemand enig idee hoe ik dit fatsoenlijk gepositioneerd krijg?
Bij voorbaat dank.

Edit: De afbeelding valt hier wat groot uit, dus zoom één keertje uit. Dan zie je aan de rechtse kant de scrollbalk waar ik het over heb.

5i5 · 2 mei 2010

Overflow: hidden; (haal de -x weg in je actuele bestand) zorgt toch gewoon dat de scrollbar weggaat? Dan is je probleem toch opgelost of ben ik nou gek?

Egel007 · 2 mei 2010

Nee.
Dit is niet heel mijn site al, dus wanneer ik overflow:hidden in vul, krijg je dus uiteindelijk de onderste helft van de site niet te zien.
Het gaat om die tweede scrollbalk zegmaar, die verschijnt.
Dan heb je de browser's scrollbalk en daarnaast (links) verschijnt een scrollbalk van de website, maar die moet dus weg.

city guy · 2 mei 2010

Hi,
de overflow-x doet alleen de width van het element. voor de hoogte heb je overflow-y ook nodig.

However,

een overflow in de body werkt niet altijd lekker.

Probeer in de body-tag eens op te nemen: style="overflow:hidden;width=jouw width;height=jouw height"

Tussen de afsluitende /body en /html regels een scriptregel opnemen:
<script>document.body.style.overflow = "hidden";</script>
Dat fixed kennelijk Firefox.

Maar: inheritance kan hier ook een probleem opleveren. Zelf zou ik dan gekozen hebben voor een overflow regel in het element zelf (of een class-aanduiding).

Wil je het echt in de hand houden kies dan bij het testen ook voor position:absolute;

Tot zover my contribution

5i5 · 2 mei 2010

Hmm als je dan de code van de div eronder zou kunnen sturen zou dat mooi wezen. Ik weet namelijk niet wat je allemaal van plan bent.

Wat een simpele oplossing zou zijn is natuurlijk een margin-top of margin-bottom toevoegen.

city guy · 2 mei 2010

5i5 zei:
Hmm als je dan de code van de div eronder zou kunnen sturen zou dat mooi wezen. Ik weet namelijk niet wat je allemaal van plan bent.
Wat een simpele oplossing zou zijn is natuurlijk een margin-top of margin-bottom toevoegen.

een advies wat ik ooit heb gekregen is om aan het begin van de CSS het volgende op te nemen:

* {
margin: 0px;
padding: 0px;
border: 0px;
}

't helpt als uitgangspositie

Egel007 · 2 mei 2010

Als ik bij het body-element overflow:hidden; invul, gaat de scrollbalk inderdaad weg, maar het object wat er zegmaar 'onder' zit, wordt zegmaar overlapt. Wanneer ik dus het menu+logo nog een aantal pixels omhoog zet, gaat in dat geval de scrollbalk rechts weg, maar nu wordt de achtergrond daarvan opeens een stuk kleiner (wordt een stuk van 'afgehakt', zegmaar).

Ik moet gewoon objecten over elkaar kunnen plaatsen op een gemakkelijke manier. Dat is me bij mijn vorige site gewoon gelukt op dezelfde manier als nu, maar nu lijkt het wel gewoon moeilijk te doen, of zo?

city guy · 2 mei 2010

.. wat ik dan tot slot van deze zondag kan zeggen is;

leg de vorige lay-out 'ns naast wat je nu maakt. Misschien iets heel ***ligs wat je over het hoofd ziet

de z-order zal dan nu weer nuttig worden

zorg dat de elementen waarvan de afmeting bekend is ook die afmeting vermeld krijgen in de css.

publiceer de code die nu bestaat nog een keer met de aanpassingen

Ik doe morgenavond weer mee.

5i5 · 2 mei 2010

Haalt de background-position: absolute; weghalen ook niets uit? En gebruikte je bij je vorige website ook flash? Flash wil namelijk nog wel eens moeilijk doen waardoor z-index niet goed werken.

Egel007 · 3 mei 2010

Heb alles al geprobeerd, maar niets helpt. Ik heb bij mijn weten alles precies hetzelfde als bij mijn vorige layout, alleen heb ik bij deze layout de achtergrond in stukken gesplitst (een header-achtergrond en een content-achtergrond), omdat anders de achtergrond problemen geeft bij het uitzoomen.
Maargoed, dit is mijn huidige HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet_index2.css" />
<title>Untitled Document</title>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="achtergrondHead">
	<div id="container">	
<!-- LOGO -->
<div id="logo">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','915','height','135','src','images/logoandmenu','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','images/logoandmenu' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="915" height="135">
<param name="movie" value="images/logoandmenu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/logoandmenu.swf" width="915" height="135" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
	</div>
</div>

</body>

</html>

En dit is mijn CSS:

Code:

@charset "utf-8";
/* CSS Document */

html{
	background-color:#070707;
	overflow-x:hidden;
}

#achtergrondHead{
	background-image:url(../images/achtergrondHeader.png);
	background-attachment:scroll;
	width:2000px;
	height:170px;
}

#container{
	width:1024px;
	margin:0 auto 0 auto;
}

	#logo{
		width:915px;
		height:135px;
		margin-top:50px;

Bij voorbaat dank

5i5 · 3 mei 2010

Deze website is volgens mij voor een groot deel anders als de eerste. (Weet het niet zeker aangezien ik de plaatjes en .swf bestanden niet heb, dus ik werk met kleuren.) Dus ik vind het er eigenlijk niet echt duidelijker op worden.

Maar wat ik zie wat je misschien niet wilt is in #logo gebruik je margin-top:50px;, dat zorgt ook dat #container en #achtergrondHead een margin-top krijgen. Misschien kun je beter padding-top:50px; gebruiken. Zoals eerder gezegd denk ik ook dat je margin: 0px; aan body toe wil voegen.

city guy · 3 mei 2010

Hi Egel007
ik heb je code even overgenomen op http://helpmij.hvn.nu

Wat zie ik nu niet wat ik wel zou moeten zien en wat heb ik daarvoor nog aan andere bestanden nodig?

CSS overlapping zorgt voor extra scrollbar

Egel007

Gebruiker

5i5

Gebruiker

Egel007

Gebruiker

city guy

Gebruiker

5i5

Gebruiker

city guy

Gebruiker

Egel007

Gebruiker

city guy

Gebruiker

5i5

Gebruiker

Egel007

Gebruiker

5i5

Gebruiker

city guy

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy