Highlighted

Images with dropdown menus are falling out of place

New Here ,
Jan 05, 2020

Copy link to clipboard

Copied

In Adobe Dreamweaver, I have a row of five images. When I add dropdown menus to the images, the last few images fall out of place. They fall down a bit lower than the first two images, and the spacing between them is much wider than the small space between the first two images that it's supposed to have.

 

Also, the images also abruptly cut off if I zoom in on my browser. It's not sticking out of the screen so I can't scroll over to see the rest of it. The image literally cuts off before the end of the screen, and I can see the white background of the website again.

 

Why is this happening and how can I fix it? Thanks in advance.

 

UPDATE: Here is the code...

 

<ul> <div style="float:left" class="navigationbuttons1"> <li class="dropdown"> <a href="index.html"> <img src="pictures/home-page.jpg" class="picturesnavigation1" width="" height="" alt="" /> </a> </li> <li class="dropdown"> <a href="news.html"> <img src="pictures/news.jpg" class="picturesnavigation1" width="" height="" alt=""/> </a> </li> <li class="dropdown"> <a href="a.html"> <img src="pictures/a.jpg" class="picturesnavigation1" width="" height="" alt="" /> </a> <div class="dropdown-content"> <br> <a href="1.html">1 </a> <br> <a href="2.html">2 </a> <br> <a href="3.html">3 </a> <br> <a href="4.html">4 </a> <br> <a href="5.html">5 </a> <br> <a href="6.html">6 </a> <br> <a href="7.html">7 </a> <br> <a href="8.html">8 </a> <br> <a href="9.html">9 </a> <br> <a href="10.html">10 </a> <br> </div> </li> <li class="dropdown"> <a href="b.html"> <img src="pictures/b.jpg" class="picturesnavigation1" width="" height="" alt=""/> </a> <div class="dropdown-content"> <br> <a href=".html">Currently unavailable - please check again soon, we are working on it as we speak. </a> <br> </div> </li> <li class="dropdown"> <a href="c.html"> <img src="pictures/c.jpg" class="picturesnavigation2" width="" height="" alt=""/> </a> <div class="dropdown-content"> <br> <a href=".html">Currently unavailable - please check again soon, we are working on it as we speak. </a> <br> </div> </li> </div> </li> </ul>

TOPICS
Browser, Code, Interface

Views

318

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Images with dropdown menus are falling out of place

New Here ,
Jan 05, 2020

Copy link to clipboard

Copied

In Adobe Dreamweaver, I have a row of five images. When I add dropdown menus to the images, the last few images fall out of place. They fall down a bit lower than the first two images, and the spacing between them is much wider than the small space between the first two images that it's supposed to have.

 

Also, the images also abruptly cut off if I zoom in on my browser. It's not sticking out of the screen so I can't scroll over to see the rest of it. The image literally cuts off before the end of the screen, and I can see the white background of the website again.

 

Why is this happening and how can I fix it? Thanks in advance.

 

UPDATE: Here is the code...

 

<ul> <div style="float:left" class="navigationbuttons1"> <li class="dropdown"> <a href="index.html"> <img src="pictures/home-page.jpg" class="picturesnavigation1" width="" height="" alt="" /> </a> </li> <li class="dropdown"> <a href="news.html"> <img src="pictures/news.jpg" class="picturesnavigation1" width="" height="" alt=""/> </a> </li> <li class="dropdown"> <a href="a.html"> <img src="pictures/a.jpg" class="picturesnavigation1" width="" height="" alt="" /> </a> <div class="dropdown-content"> <br> <a href="1.html">1 </a> <br> <a href="2.html">2 </a> <br> <a href="3.html">3 </a> <br> <a href="4.html">4 </a> <br> <a href="5.html">5 </a> <br> <a href="6.html">6 </a> <br> <a href="7.html">7 </a> <br> <a href="8.html">8 </a> <br> <a href="9.html">9 </a> <br> <a href="10.html">10 </a> <br> </div> </li> <li class="dropdown"> <a href="b.html"> <img src="pictures/b.jpg" class="picturesnavigation1" width="" height="" alt=""/> </a> <div class="dropdown-content"> <br> <a href=".html">Currently unavailable - please check again soon, we are working on it as we speak. </a> <br> </div> </li> <li class="dropdown"> <a href="c.html"> <img src="pictures/c.jpg" class="picturesnavigation2" width="" height="" alt=""/> </a> <div class="dropdown-content"> <br> <a href=".html">Currently unavailable - please check again soon, we are working on it as we speak. </a> <br> </div> </li> </div> </li> </ul>

TOPICS
Browser, Code, Interface

Views

319

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 05, 2020 0
Adobe Community Professional ,
Jan 05, 2020

Copy link to clipboard

Copied

Please copy and paste the relevant code here so that we can see what you are talking about.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 0
Adobe Community Professional ,
Jan 05, 2020

Copy link to clipboard

Copied

Not much of a help for us to help you. This is what I get

 

junk.jpg

 

Edit: This may explain why the last two images take up more space than the others.

2nd Edit: The only element that may be a child of <ul> is <li>. In other words, your <div> inside the <ul> is illegal.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 0
Adobe Community Professional ,
Jan 06, 2020

Copy link to clipboard

Copied

We need to see your entire document.  Please upload it to a public web server  that you control and post the URL here.

 

It's unclear exactly what you want.  But Bootstrap Cards might solve your layout dilemma.

https://colorlib.com/wp/bootstrap-cards/

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2020 0