embluk

I am trying to style a search box inside a header using CSS. Here is a picture of my problem to help try and make things clearer: When the search box is visible: So my main problem is when the search box is faded in using JQuery it is taken out of document flow because I am using position: absolute; on .topSearchBarResultWrapper to get the search box where I want it on the header. I have tried using position: relative; which does bring the element .topSearchBarResultWrapper back into flow but does not display the search results below the header. Thus, when I use position relative I did try and use top: 80px; to bring the search box wrapper down and then use margin-top: -100px; to get rid of the extra white space above, but then when you add search results to the wrapper the top: 80px; is invalid and does not work anymore because the size of .topSearchBarResultWrapper has changed. I have also made a JsFiddle to help as well: https://jsfiddle.net/jjzp07ey/ Here is my HTML code that I am using: <header> <!-- HTML 5 header --> <ul class="navigationBarButtons"> <li> <a class="topSearchBarButton defaultBlueButton navLoginButton"><img src="images/icons/searchIcon.png"></a> <div class="topSearchBarResultWrapper"> <input type="text" class="topSearchBarInput" name="topSearchBox" placeholder="Search for someone..."> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> </div> </li> <li> <a class="defaultBlueButton" href="profileranks.php">Profile Ranks</a> </li> <li> <a class="defaultBlueButton" href="howitworks.php">How it Works</a> </li> </ul> </header> And here is the CSS code that I am using: .topSearchBarInput { height: 32px; width: 300px; vertical-align: middle; border: none; border-radius: 4px; display: inline-block; margin-bottom: 4px; } .topSearchBarButton img { height: 24px; width: 24px; display: inline-block; margin: 0 auto; vertical-align: middle; } .topSearchBarResultWrapper { display: inline-block; height: auto; background-color: #dad9d5; border-radius: 4px; padding-bottom: 5px; position: absolute; } .topSearchBarResult { background-color: red; width: 300px; height: auto; } header { background-color: black; } header ul { height: auto; padding: 15px 0px; margin: 0px; } header li { display: inline; } .defaultBlueButton /* Default Button Style */ { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); /* Used to support many different browsers */ background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5px; font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; border: 0px; } .defaultBlueButton:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); /* Used to support many different browsers */ background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; border: 0px; cursor: pointer; }

haha no worries, I thought someone might have shed some light but...

I am currently working on a website which uses a banner image on a profile. However if a user uploads an image the position of the banner may not be correct and they may want to change it to display the correct position of the image they want. So I have been following this guide: http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/ I have used this guide and it works without error when I am on desktop screen sizes like 20" and above... However when ever I try to change the image position on mobile it doesnt scale correctly and the image thumb nail is not cropped correctly. But it works when the website is on a desktop because the image banner is full size... There is a demo on the website with the guide if you want to check it out and see what I am on about. I tried to see changing the crop width and height to match the mobile size but that means when it resizes back to a desktop the image is only scaled for a mobile then The problem is to do with: $default_cover_width = 918; $default_cover_height = 276; As the screen size changes the default cover size changes as well... I was wondering if anyone could point me in the right direction so that I could get this working on a mobile device as well. Thanks.

Ok thank you for taking a look, but is there any tutorial or website you could direct me in so I could learn more about what I have to do?

Here we go: https://jsfiddle.net/myhox4gh/3/ I took the buttons out of the position: relative; and position: absolute; state.

Anyone?

I have the following layout: Which as you can see the "Learn More" buttons are all in line but with the CSS I am using they lose there text align center and don't align to each section. I am using the following CSS: Parent Div: #homeServicesWrapper { text-align: center; margin-top: 20px; position: relative; } Child class (Learn More Buttons): display: inline-block; position: absolute; bottom: 0px; My aim is to get all of the learn more buttons at the same level all inline with each other as when I take the above CSS off they result in being at different heights and are not inline with each other. I was trying to push them down to the bottom of the #homeServicesWrapper div. Here is my HTML layout if that helps to see it: <div id="homeServicesWrapper"> <div class="serviceInfoWrapper"> <div class="serviceImageWrapper"> <img src="images/contract.png"> </div> <p class="biggerP"><b>MOT Servicing</b></p> <p>We are an approved MOT testing station. All cars over 3 years old require a valid MOT certificate by law. We have the latest equipment and training to ensure your vehicle is tested properly. </p> <a class="defaultButton" href="#">Learn More</a> </div> <div class="serviceInfoWrapper pushLeft60"> <div class="serviceImageWrapper"> <img src="images/motIcon.png"> </div> <p class="biggerP"><b>Diagnostics & Repair</b></p> <p>We can carry out all types of repairs some of which include brakes, auto-eletrical cam belts, clutches, head gaskets, turbos, water pumps, radiators, air conditioning. The list is endless...</p> <a class="defaultButton" href="#">Learn More</a> </div> <div class="serviceInfoWrapper pushLeft60"> <div class="serviceImageWrapper"> <img src="images/settings.png"> </div> <p class="biggerP"><b>Specialist Services</b></p> <p>We have up-to-date repair and service information enabling us to save you money and have your car repaired correctly and safely.</p> <a class="defaultButton" href="#">Learn More</a> </div> </div>

All round they are not terrible, they have good layout but it is just the logo on the first one needs to flow better. Also did you make these yourself or use a framework or template? The design is good and most of the pages flow together. Also the logo on the second website is hard to read, it looks a little squashed. Good effort though! Keep going!

Yes! Thank you so much, it works! So does this work by basically saying look for the next element...?

Hey, sorry to bother you again, your answer worked for me but I now have a different issue. Wondering if you could help me. I have a HTML list like so: <li id="link-1" class="linkSectionStyle"> <div class="linkDropDownButton"> <img class="centerLinkButton" src="images/icons/smallDownArrow2.png"> </div> <div class="sectionDropDown"> <input name="1" type="text"> </div> </li> The div with the class "linkDropDownButton" when clicked should then slide down the div with the class "sectionDropDown" and this is the Jquery code I am using: $(".linkDropDownButton").on("click" ,function() { $(this).find(".sectionDropDown").slideToggle(); }); The above code will not work because the "sectionDropDown" div is not inside the "linkDropDown" div. I tried using .parent or looking into how to select outer elements but I could not get it to work. Could you point me in the right direction or do I need to take a different approach to this problem? Also here is an example image of what the html looks like, the blue button in the top left when clicked should slide down sectionDropDown div. Before being clicked: After being clicked:

Arrh I was making a mistake. Instead of putting the sortable on inner div I was putting the sortable class on the wrapper that I had. So every time I clicked it was the wrapper, that's why all of them were sliding down. Thanks for your help!

Here is part of the HTML: <ul class="sortable" id="sortableSectionOne"> <li id="link-1" class="linkSectionStyle"> Test1 <div class="sectionDropDown"> </div> </li> <li id="link-2" class="linkSectionStyle"> Test2 <div class="sectionDropDown"> </div> </li> I tried this before and I got the same result.

Basically I have multiple classes called "sortable" and when they are clicked the div inside is suppose to slide out and in using slideToggle, this div has a class of "sectionDropDown" and this works. However every "sectionDropDown" div will then slide up and down each time any div with the class of "sortable". Here is my Jquery code: $(".sortable").click(function(e) { $(".sectionDropDown").slideToggle(); }); How can I only slide the sectionDropDown where the sortable div was clicked and not slide all of the sectionDropDown divs?

As like on YouTube, when the screen resizes the channel art image is resized but it selects part of the image, keeping it centered still. Could anyone point me in the right direction in order to get the same effect? I have only be able to put an image inside a div and then use CSS to crop the div, and set overflow to hidden, but this does not keep the image centered like it does on the channel art on peoples YouTube channels.

Fixed