Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Header image will not resize properly for any browsers


  • Please log in to reply
5 replies to this topic

#1 Dragonlady24

Dragonlady24

  • Members
  • 703 posts
  • OFFLINE
  •  
  • Gender:Female
  • Location:Fox Lake,WI
  • Local time:06:40 AM

Posted 19 March 2015 - 03:26 PM

Hello fellow developers. I have been working on a webpage in Dreamweaver for my web developer course. I am having an issue with the banner either being too short in Mozilla Firefox and Comodo Dragon browsers or looking like it stretches too far out in Internet Explorer.
I have tried re sizing the container itself and the image to no avail.

jodylcook.com/dw_final/index.html

Edited by Dragonlady24, 19 March 2015 - 03:27 PM.


BC AdBot (Login to Remove)

 


#2 Dragonlady24

Dragonlady24
  • Topic Starter

  • Members
  • 703 posts
  • OFFLINE
  •  
  • Gender:Female
  • Location:Fox Lake,WI
  • Local time:06:40 AM

Posted 19 March 2015 - 03:45 PM

Never mind. I got it figured out. If anyone has any pointers to give though I am willing to take whatever advice anyone is willing to give.

#3 Martel

Martel

    Drfixup Human Internet Solutions


  • Members
  • 1,467 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:North Carolina U.S.A.
  • Local time:07:40 AM

Posted 19 March 2015 - 05:39 PM

Hi Dragonlady24,

 

I was imagining it was a responsive issue

 

I have only used notepad for my webpages until recently I tried WordPress.

 

I remember that instead of using exact resizing use max percentages so that the image will cooperate.

 

I have never used Dreamweaver but understand that it is a spectacular program

 

I would be interested to know how you resolved it.



#4 Dragonlady24

Dragonlady24
  • Topic Starter

  • Members
  • 703 posts
  • OFFLINE
  •  
  • Gender:Female
  • Location:Fox Lake,WI
  • Local time:06:40 AM

Posted 19 March 2015 - 09:09 PM

I resized the header container to the max width of 950 pixels and then centered the image. The image itself was only 950 pixels wide to begin with and i tried making it 970 pixel image, but it as already maxed. If you type the link into the browser you can view the site. This is just a project I am working on for school and i is a work in progress as of yet.

#5 Guest_hollowface_*

Guest_hollowface_*

  • Guests
  • OFFLINE
  •  

Posted 22 March 2015 - 03:07 PM

Glad to hear you've resolved your issue. I checked out your source, and you're much better at web design than I (not that I'm untalented). Your site is coming along quite nicely.

 


This is just a project I am working on for school and i is a work in progress as of yet.


If anyone has any pointers to give though I am willing to take whatever advice anyone is willing to give.


No pointers, but a couple of comments.

You've nicely setup the primary yellow div so that it is centered regardless of page width, but your other elements aren't. Your primary div (the yellow one) appears to have a non-functional
min-width value of 769px, a max-width of 1232px, and width of 88.5%. In addition you've got % values for padding. The result is a div that is always centered, and decreases in size to fit the screen. Your other elements then have set values, which is making them off-centered, and causing wonkyness when the page is viewed at lower resolutions. For example "pagenav" (the upper green box) has 80px left and right margins and a width of 950px. This means that when the browser windows is less than 950px a horizontal scrollbar will appear because "pagenav" (the upper greenbox) will not shrink. The primary div does which creates wonkyness. Here's a screenshot of what I mean ( https://copy.com/7VlzBBK4vUgHdohy ). To view the picture, click on the file, then click the fullscreen button. It may take a few seconds to load. I cannot offer exact fixes for this, because I'm not so great at reading other people's code. However I would think that if you made the elements centered by changing their margins, and then gave a functional min-width to your primary yellow div it would fix these 2 things.

Secondly, I noticed that when you hover over the links it results in a large space between the rest of the text. Here's a screenshot of what I mean ( https://copy.com/2XZc3IqEt0WpFN8L ).To view the picture, click on the file, then click the fullscreen button. It may take a few seconds to load.I'm not sure what is causing this as your "a:hover" code seems fine, but the issue only seems to occur for hover, not anything else so there must be some weird or conflicting code tucked away in there somewhere.
 

#6 Dragonlady24

Dragonlady24
  • Topic Starter

  • Members
  • 703 posts
  • OFFLINE
  •  
  • Gender:Female
  • Location:Fox Lake,WI

Posted 22 March 2015 - 03:27 PM

I am new to web design and am currently working on the links portion as well as the resizing portion of the main div.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users