Solved

Fluid with logo over another image

Posted on 2012-12-20
6
175 Views
Last Modified: 2013-01-29
I'll be placing an image where the header currently is here and wanted the logo to still be positioned absolutely over it where it is now to the left, but to reduce with height:auto at fluid widths.

How would be the best way to do it? Do I need to give the image container a % width?  The middle banner is fluid, but for some reason I can't get the logo to reduce fluidly..

If someone could maybe check in an inspector? Any help appreciated.
0
Comment
Question by:UName10
  • 4
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
You might want to start by validating the code and correcting the errors.  Several of the errors are serious including a duplicate id declaration and an unclosed tag.

Cd&
0
 

Author Comment

by:UName10
Comment Utility
Sorry for the late reply and thanks for the comment.

Could you point me to them?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Go to http://validator.w3.org/ to validate the HTML, then run the CSS through the validator at http://jigsaw.w3.org/css-validator/

Once the error are corrected, the problems will become manageable, or may be gone.  With correct code we will be able to apply whatever properties we need to correct anything that is still wrong.

Cd&
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:UName10
Comment Utility
Hi there,

Sorry for the delay; managed to fix it and yeah there were quite a few - I save the test template instead which was messy code, thanks for pointing it out.

I've actually changed it now so it's redundant, but thank you for taking the time to have a look, much appreciated.
0
 

Accepted Solution

by:
UName10 earned 0 total points
Comment Utility
Oh but the way to do it just make the logo width a percentage based on the parent div as normal, and set the height to auto again.  I hasn't set the width which is why it didn't work.
0
 

Author Closing Comment

by:UName10
Comment Utility
It works.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Compare site how does it work 4 50
Syntax Error 6 28
HTML button disabled 11 36
Help cleaning out CSS 2 22
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 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

13 Experts available now in Live!

Get 1:1 Help Now