Solved

css help

Posted on 2014-07-29
5
126 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
  • 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now