Jump to content
Sign in to follow this  
gigman7

Getting CSS to automatically adjust to content

Recommended Posts

I have a menu bar at the top of my page that is set to 800px. I need it to adjust to the amount of content that is in it. I know I have done this before but for the life of me i can't get it to work. If I set width:auto, it goes to the width of the page. I want it to fit just to the margin of the outer text within it. What could I be doing wrong?
 

Share this post


Link to post
Share on other sites

Have you got the source code for the html and css? A lot easier to debug. Off the cuff 800px is exactly that, not really responsive. Might be worth looking into max-width, but without the source it's hard to tell if that what you need.

Share this post


Link to post
Share on other sites

#menu {

    list-style:none;

    width:925px;

    margin:0px auto;

    height:24px;

    padding:0px 8px 0px 16px;

    z-index:999;

    border-radius: 3px;

}

Share this post


Link to post
Share on other sites

tha's the relevant  css but what about the source code? have you tried the free version of codepen? easy to show stuff and for us to fork it...

Share this post


Link to post
Share on other sites

Yes, it's very difficult to decipher what you actually want here it sounds like you maybe want to do some inline-blocking or something but have up to a max-width: 800px;

Share this post


Link to post
Share on other sites

again, post a fiddle, codepen, link to a test page or even the whole code html+css.

Share this post


Link to post
Share on other sites
On 4/6/2018 at 12:32 PM, glenwheeler said:

Yes, it's very difficult to decipher what you actually want here it sounds like you maybe want to do some inline-blocking or something but have up to a max-width: 800px;

If there is only enough text to be 200px wide, it sets itself to 200px plus some padding. If I add another link, it will automatically adjust to the width it needs to accommodate the additional width from the new text.

Share this post


Link to post
Share on other sites
On 4/6/2018 at 1:36 PM, davep said:

again, post a fiddle, codepen, link to a test page or even the whole code html+css.

I have no clue what you are talking about.

Share this post


Link to post
Share on other sites
3 hours ago, gigman7 said:

I have no clue what you are talking about.

Iit's difficult to see wtihout all the code all the html that makes the page and the css that makes the stylehseet. often we use something like https://codepen.io/

and give a link to stuff there so it's easier for people to see the whole thing. otherwise do you have web hosting where you could upload this?

if not can you post ALL the html and ALL the css here and then we can help you. otherwise we're working in the dark :)

Share this post


Link to post
Share on other sites
7 hours ago, davep said:

Iit's difficult to see wtihout all the code all the html that makes the page and the css that makes the stylehseet. often we use something like https://codepen.io/

and give a link to stuff there so it's easier for people to see the whole thing. otherwise do you have web hosting where you could upload this?

if not can you post ALL the html and ALL the css here and then we can help you. otherwise we're working in the dark :)

I can give a link to where I have uploaded it. It's not the domain I'm using but the domain I am testing it on.

Share this post


Link to post
Share on other sites

well first you need to drop the tables layout this hasn't been a good idea for about the last 15 years! :)

your site also isn't respsonive - yes the  main text area reflows to the same width as the  phone but the navigation is  unusable without  pinch and zoom and lots of scrolling.  your header images are also pngs instead ofjpegs and are 1.7 mb each - ouch. size them to the maximum size they need to be and save them as jpegs. 

I think your basic colour scheme suits the theme though the  side navigation has poor contrast and too many effects going on.

I would suggest starting over either hand coding something based on responsive theme - though i'm guessing you're not really wanting to do that: the web has come quite a way since we built fixes width and table-based sites :)

another option would be to find a basic Wordpress template and feed your content into that - it's going to be a lot easier to add pages and have them appear in the navigation and most of Wordpress' basic functionality should be enough with a couple of plugins if required to provide you with a solid basis for your content without having to worry about how to make things fluid and responsive.

I would also suggest your heading text as something more like "A special place - the best place to stay in the Smokies" rather than the keyword stuffing bonanza you have going on at the moment :) 

reduce the line length - too long for comfortable reading  - i.e. the width of the text (not the amount). your pictures are good - maybe a you got a real estate friend to help or maybe you took them, but they are well done.

or hire a good designer/developer if you have the money to invest in your business
 

Edited by davep

Share this post


Link to post
Share on other sites

^^^What he said.

That layout is never going to work on smaller devices. The menu on the left is far too long and won't be visible on a cellphone. And tables ain't no good at all.

Do as Dave suggests and go get a ready made theme on a CMS (like wordpress) and add your content. You will find it far easier to build and manage the site.

There is still a place for hand coded sites but it takes a lot of skill to create one. It's not something you can knock up using Dreamweaver.

Well done for giving it a go but you are making life very difficult for yourself doing it this way.

Share this post


Link to post
Share on other sites

I'm trying to work out the tables. That's why I'm not working on the top nav and make it responsive. I already have plans on making the side nav shorter by only having categories instead of all of the specifics.

Share this post


Link to post
Share on other sites

Why are you even doing this? Go get a theme you like the look of an add your content. It will make your life so much simpler.

Bin the sidebar. It's not needed on every page. Add a link to 'local news and attractions' or a 'what's on' page and put all the links there. You will then have lots of room on the homepage for a bunch of BIG images that sell the apartment.

Also reconsider the slideshow, people on touchscreens swipe so adding full sized images as a vertical gallery create a better UX.

And think about what you want the site to achieve. Is it to sell the holiday lets or to promote the local area? If you want people to book then you need to have the booking form on every page.

Web design is a lot more than making a website. More work is often needed on the planning than writing the actual code.

Share this post


Link to post
Share on other sites

I think fisicx means just put large images on the page without a need for a slideshow (i think when he  said swipe he  might have  meant scroll?) but i'm not sure :)

if the letting of the  condo is the main point then i would have a header image of the condo in situ - nice outside shot set against  the mountains so and then the images of the condo  further down/separate page. the balcony shot with the view in it is the kind of things so people can think "wow imagine sitting there in that nice place with that amazing view"

your call to action needs to be a nice clear button that takes you to the  booking page or the form on every page as advised - a small link at the bottom of the page is easily missed:)

on the what's on page (as suggested) i would group activities into a two or three categories to make it easier - e.g. activities (putting, biking, horses), place to visit (museums and other attractions) etc.

Share this post


Link to post
Share on other sites

Don't. People using tablets and phone scroll not swipe. Just put the images on the page and let people scroll down.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,982
    • Most Online
      4,970

    Newest Member
    froebeli
    Joined
  • Forum Statistics

    • Total Topics
      65,698
    • Total Posts
      452,924
×