Solved

css help

Posted on 2014-07-29
5
130 Views
Last Modified: 2014-09-01
Hi,

I have a dropdown for a search area that can be seen here:
http://dev.openwaterdesign.com/rooms/real-rooms/

click "search" in menu to reveal.

When you resize the browser down the search bar cuts off - any ideas how to fix?

Thanks
0
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40227082
The obvious solution would to make it 100% so it always covers your search form, as you have it now its a percentage of the screen width
0
 

Author Comment

by:coolispaul
ID: 40227095
sure but that covers the whole screen then which i dont want...

Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 40227124
Over 1366px browser width it is 100% so I don't see the problem with it being 100% on smaller screen widths.

As you have it now it's not possible to style it properly where you are using a percentage based margin for the container and set widths for the content - it will always push out of the container
0
 
LVL 11

Accepted Solution

by:
Murfur earned 500 total points
ID: 40227497
I took out the extra div class="dropdown-container" and applied the relevant styles to the parent which seemed to work, also removing unrequired styles from dropdown-search.
<div style="background:url('/rooms/admin/resources/banner-real-rooms.jpg') no-repeat center">
  <div style="max-width: 1366px; height: 250px; background-color: #5284c4; margin: 0 auto;padding-top: 75px;" class="dropdown-search">
  	<div class="container">
    	<form id="form1_search" action="/rooms/search.php" method="get">
    		<input type="search" id="form1_q" name="q" class="searchtext">
    		<input type="submit" value="Search">
			</form>
      <a class="close">Close</a>
    </div>
  
  </div>
  
  <span class="container">
<h1>
  Real Rooms
</h1>
</span>
</div>

Open in new window

0
 
LVL 11

Expert Comment

by:Murfur
ID: 40227498
Oh, have you fixed it? It seems to be fine now...

Also, forgot to say that I moved the search div inside the backgound image container so that it was relative
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
setting backkground on single page on wordpress 4 24
White space in figure / img 4 20
Session on Html 8 41
Regular Expression needed 4 17
This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question