CSS - Floating two elements side by side
This conversation is similar to what I am trying to achieve. I have a % based layout and have an issue either the menu will get mixed in with the content or the content will fall below the menu when the page is shrunk or viewed on a mobile phone. I've spent several hours on this and cant figure out what I am doing incorrectly.
Problem child: https://www.tendercare-inc.com/new/
Update:
My biggest thing was getting something that worked well with Word Press as it uses very awkward controls and element names. I tried starting with _Underscores but it doesn't seem to have helped as much as I thought it would.
The basic problem is that you are specifying percentage based layouts for some elements like menu-sidebar and main-content but you're not consistent. The menu has a min-width of 200px. What do you want to happen when 200px is greater than 15%? Inside the menu you also have elements specified with exact pixel widths — the various cssmenu maker elements.
The site is very simple — basically a header, footer, side menu, and body. Yet you have two style sheets - one with over 800 lines — and a structure with site-content containing content-area containing site-main containing content-container. It's no wonder it's causing you grief. My advice would be to start over with a simple css framework (like bootstrap mentioned by #jaun above. Keep the structure of the html as simple as possible and avoid copy-paste design with things like menus. Also rather than trying things a seeing what's wrong, describe the behavior you want at various screen sizes and make it happen.
You should use bootstrap (getbootstrap.com) you can use col-md-6 clases to do that. Also mobile phone and tablet ajustment is supported
Related
I lifted the code to create a horizontal card for my band's website which can be seen here:
http://www.jukeboxjunkies.rocks/Song
I really like the look - but when the cards are viewed on a mobile device, the rows stack and I don't like it as much.
The version I like
vs:
the version I don't like (shows like this on smaller devices)
So, 2 things...
How do I prevent the rows from stacking?
I need to add a link on the far right that will just say "Request" - This will show up based on a setting in my database (basically if I turn on requests for the gig) - I am not worried about the styling, I can do that later (although I just will want it centered top to bottom of the card). But I need help with bootstrap code to show or not show.
I can put the HTML code in here - but it can be seen on the site - let me know if I need to post it here and I will.
#1
On the card, change d-sm-flex to d-flex. d-sm-flex is not getting triggered on breakpoints below 576px, which happens to be most Portrait oriented mobile devices. Also, you don't want flex-wrap set, at least for mobile, since you seem to want the content side to stay to the right and not stacked beneath
#2
It looks like you already have it below the card within the card-footer, which automatically uses text-align right across all breakpoints. Is this not what you want? From a UI standpoint, user behavior is more inclined to right-aligned buttons hence why the hamburger is on the right side.
For tablet+, IMO having the request link below is also acceptable. But you do have a lot of horizontal real-estate to use so you could get away with the following adjustment:
.card.flex-sm-column.flex-md-row
.card-footer.align-self-md-center
I would also recommend that if you make any CSS selector adjustments, don't make them directly on the .card selector. Add another CSS class to these specific cards, like <div class="card card--song" />, so that you don't override the global .card styling provided by bootstrap and instead override it at a component level (.card--song).
I am trying to make my nav bar sit parallel with my logo but I'm having difficulty doing this.
First of all, when I enter the code for the image, the image afterwards doesn't display at the top of the page.
Instead, it sits about 40px below the page. I have tried using floats, but have had no luck.
I have created a negative value of -20px for the logo to sit further at the top of the page but would like to know if that is normal practice in CSS
I have tried looking at youtube videos but the code they share doesn't seem to work on my project. I'm just wondering whether the image may be a bit too big for the header
I would definitely recommend using Flexbox. It takes the hard work of setting floats and setting things in a manual way out of your way. Here is a cheat sheet and a little background into using Flexbox. It's also responsive too.
The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helps.
if want to easily make a navbar you can go to the website listed below and you can pick which one of the navbars you want then alter or change it based on what you like it has all styles of navbar with logo without a logo or even the style you want.
link to navbar code:
https://www.w3schools.com/css/css_navbar.asp
PrinceXML is really great and powerful but I’m offended by the way it manages header/footer.
I am trying to have 3 columns with different background colours to run on the full page height. Not a problem until you add a footer to include the page’s number.
In order to show the footer you need to add a bottom margin to the #page, but doing so cut the columns. I tried to use an absolute position without any luck.
Is there anyone who has some experience with complex layouts and page numbering with PrinceXML ?
As a DocRaptor developer, we run into these kinds of problems all the time. Prince headers and footers live INSIDE the page margins. This provides a lot of useful power, but sometimes complicates things, as you've noted.
Without seeing your exact HTML, I'd suggest the following:
Continue experimenting with a zero page margin and absolute positioning and a negative position/margin on the element inside the footer. I think this would work. It might work better if you used a header element. Prince gets weird and buggy on the edges when you do this kind of tricky stuff.
Alternatively, if your column widths are the same for every page/document, try faking the column background colors by using a background-image on #page.
Am designing a site and am quite new to it. So my question may be naive. There are two pages index.html and aboutUs.html.
For this eg, i have removed most of the invalid contents with regards to my question. My question is related to how can we dynamically change or handle the length of the page based on the content. In my case, index.html does not have too much text, so the UI looks fine, however aboutUS.html has too much content, and the content overlaps with the footer. How do I handle such scenarios? For reference, I have added some images below, the first image has no overlap, but the second one has. You can find the source code over at GitHub (https://github.com/vnmshenoy/global)
Images
Your problematic classes seem to be imageDiv and overlap.
Both these have defined heights.
When the content inside the element is larger than this height, it is visible, but is actually spilling outside that position, and so appears on top of the next element. If you set a border on these elements, you will see what I mean.
You could always use the overflow:scroll style here and scrollbars will appear when this happens, but you'd be better making your design a bit more fluid with regard to heights, especially if you plan to make it responsive.
I was trying to customize a theme for a CMS(ocPortal/vanilla) where I wanted the sidebar to be fixed along with the header. Making it fixed it not a tough job, but the problem is that the end user can add widgets to the sidebar which can run out of screen height. And then the fixed attribute would become useless.
Is there a solution to this problem as I have not been able to come around with anything.
There are multiple solutions to this problem, seeing you have not given an example, I will assume these widgets can be added and removed dynamically (meaning at anytime after page load). Assuming this, I have two possible solutions that you can try.
Solution 1 :
Try making each widget inside a tabbed/spoiler type container, so they become small when the end user does not need them at that point in time
Solution 2 :
As Rick Calder mentioned, you can also use the CSS rule overflow-y: scroll; so when the contents of your sidebar becomes larger than the height, a scroll-bar appears allowing the user to scroll through your widgets.
You may also combine these solutions together, to enable a LOT of widgets, dependent on what your personal preference is.
I hope this helps!
NOTE :
A simple search for html javascript spoilers will give you MANY examples of spoilers.