Member Avatar for Geminyi

New to CSS, and am just learning usage of dreamweaver so sorry if my question seems basic, and yes i am guilty of using WYSIWYG software. Usually i fight until i figure it out, but this problem has got the best of me this time.

What happens is everything seems fine when maximized on my site, but when the window is resized smaller my whole little world goes to hell :(

Spaces form to the right of my screen when the horizontal Nav Bar is scrolled, and it seems as if i have tried everything, but am sure i missed something. Please be as basic ( Kinda step by stepish if you find the time to help). Thank you all in advance.
I will Place a link to my test site, and have everything stripped down on my page to the problem i am having.

<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:100%;
height:130px;
z-index:1;
left: 0px;
top: 0px;
background-color: #333333;
}
#apDiv2 {
position:absolute;
width:380px;
height:124px;
z-index:1;
}
#apDiv3 {
position:absolute;
width:150px;
height:100px;
z-index:2;
left: 400px;
top: 15px;
}
#apDiv4 {
position:absolute;
width:200px;
height:80px;
z-index:3;
left: 600px;
top: 30px;
}
.style3 {   font-size: 24px;
color: #FFFFFF;
font-style: italic;
}
#apDiv5 {
position:absolute;
width:100px;
height:100px;
z-index:4;
left: 810px;
top: 20px;
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>


<body>
<div id="apDiv1">
<div id="apDiv2"><img src="TCB DRK.jpg" width="380" height="124" /></div>
<div id="apDiv3">
<script type="text/javascript">


AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','150','height','100','src','Movie2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Movie2' ); //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="150" height="100">
<param name="movie" value="Movie2.swf" />
<param name="quality" value="high" />
<embed src="Movie2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="150" height="100"></embed>
</object>
</noscript></div>
<div id="apDiv4"><strong><span class="style3">Quality Worldwide Service!          </span></strong></div>
<div id="apDiv5">
<script type="text/javascript">


AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100','height','100','src','Globe','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Globe' ); //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="100" height="100">
<param name="movie" value="Globe.swf" />
<param name="quality" value="high" />
<embed src="Globe.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="100"></embed>
</object>
</noscript></div>
</div>
</body>
</html>
Edited by happygeek because: fixed formatting
  • 2 Contributors
  • 3 Replies
  • 115 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Fungus1487

Dani AI

Generated

The exported page shows the typical Dreamweaver "apDiv" layers: a set of positioned blocks that do not participate in the normal flow. What advised about avoiding positioned layers is on target, and ’s quick table fix is a pragmatic short-term solution. For a more robust, future-proof layout, move toward a flow-based container (centered max-width) and a flexible nav so elements can wrap or shrink instead of forcing the page wider than the viewport.

Make images/embeds and layout elements scale instead of using fixed pixel widths. A few practical snippets to apply now:

/* make replaced elements fluid */
img, object, embed, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* predictable box model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* simple centered container + flexible nav */
.header {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 10px;
}
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

To find the offending element that causes horizontal scroll, use the browser inspector and these techniques: temporarily add a bright outline to all elements, or run a small script that logs any element whose scrollWidth exceeds the viewport width. That will point you to the element that needs a max-width or fluid styling.

Avoid hiding the symptom with overflow-x: hidden unless you understand what content will be clipped. Tables can work as a quick fix (and did for ), but modern layouts built with flexbox or grid are easier to maintain and responsive. Useful references: box-sizing - MDN, Flexbox basics - MDN, Responsive images - MDN.

Recommended Answers

All 3 Replies

Member Avatar for Fungus1487

its is because the bar is positioned absolutely.

and when you set a width of 100% it is 100% of the viewable area so when your content is larger than your browser it exceeds 100%.


dont position it absolutley. this is bad.

perhaps use a table layout for the top ?

Member Avatar for Geminyi

Thank you fungus that was a blessing. Now a problem that was going to drive me to drink this weekend has now become a reason to celebrate instead!
The table solution worked wonderfully in my scenario.

Member Avatar for Fungus1487

no problem at all you can mark the post as solved if you like :D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.