I a situation I run into often, but my homebrew methods don't stack up to a good solution.
What I'd like to do is to have a menu beside a logo, while being responsive.
It looks like so
=======
logo =
==============Menu=======================
===============================================
The way my html looks is like so
<div id="logo">
<img src=""... />
</div>
<div id="menu">
<ul>...
</ul>
</div>
Now I want to position the menu at the bottom of the logo, but I have no idea how to do it. I can use margins, but than, once the responsiveness kicks in on mobile browsers and then the menu goes under the logo, there will be a large margin there too.
How would I deal with this?
Try to use responsive-design framework such as zurb-foundation it will offer you this requirement easily. Look at this example on its official documentation about Top Bar
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
I have a navbar that looks like this: (See EDIT)
The only HTML is:
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>News
</li>
<li>Games
</li>
<li>Cafe
</li>
</ul>
<!-- END navbar list -->
I want the it not to collapse vertically and stay in a vertical bar on all screen sizes.
Does anybody have any css snippet that can remove the responsiveness?
EDIT2: http://jsfiddle.net/9KMR6/5/ I tried copy pasting some of the styles from bootstrap's non repsonsive example but I have an issue where other elements such as the image in the fiddle overlaps the navbar so the links stop working... Does anbody know why/how to fix?
Using the Bootstrap Customizer, try setting #grid-float-breakpoint to a very low value such as 1px.
Sounds like there's a media query inside the CSS file that automatically collapses the menu beneath a certain screen width.
If you can find the CSS files that apply to your page, try posting them here.
Alright, default bootstrap, eh? Their documentation defines small screens as their default state; all the other media queries scale up.
They also have a section on disabling the responsive behavior. Unfortunately...
As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar. -getbootstrap.com/examples/non-responsive
I'm officially out of my depth here, sorry. Maybe you can figure something out from their documentation.
I'm having trouble trying to figure out how to get the navigation on a site aligned properly. What I'm trying to do is have the navigation start at the left side of the page and stop at about 100px from the right side of the main content container div. The navigation is going to be in it's own container with no parent containers (unless someone has a solution that requires otherwise). At the end of the navigation I am going to put an image. The end result will look something like this:
My main problem is figure out how to set the widths and still be flexible for different screen resolutions. How would I go about doing this?
If you are going to put an image at the end and you want responsiveness, then you may want to consider to wrapper it in parent container.
<div class="parent">
<div class="leftside">
<div class="topmenu"></div>
<div class="botmenu"></div>
</div>
<div class="right-side">
<img src="image.png" />
</div>
</div>
See if this fiddle helps
I am using Twitter bootstrap for my portfolio site. The fluid layout seems to work up to a certain point, but there are a few issues with the home page.
Once I go smaller than about 997px, the nav menu disappears entirely. It almost looks like it drops down below the header bar and is hidden, but I can't seem to get it to show. It should actually switch to the mobile menu and remain in the upper right corner.
Also once you get down to smaller screen sizes, the "About Me" and "Contact" sections of the index page overlap each other. I'm sure this has to do with my structure somehow, but cannot find the problem.
Any bootstrap experts know what might be causing these issues?
Here is a link to the test version of the site. http://theiamzone.com/kyle_hagler/portfolio-site
From the source code I view from the site,
I Found out that you lacked of jquery file.
<script src="//code.jquery.com/jquery-1.10.1.min.js">
Put it and see if the dropdown work.
And for the About Us and Contact Us part.
A method you can try is put container to wrap them all, read from here for more information.
http://twitter.github.io/bootstrap/scaffolding.html#layouts
From my point of view in about us section, try no to wrap the 2 span 6 column,
Use the following code instead.
<div class="row-fluid">
<div class="span12">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Same situation happen on the contact us section,
the css class aren't assigned for them to work.
I'm new to html/html5, but not to programming, and i'm trying to code my personal website. I've read many resources and tutorials on the basics but I'm looking for some tips on how to begin achieving the layout I want.
In my layout (here) I'm looking to have the left half of my page as a fixed navigation panel with an image highlighting the current page, then with each option the right side refreshes to a new independently scrolling page and the highlight image animates in the nav panel to the new option.
How should I begin to achieve something like this? I just need a push in the right direction to the type of elements/scripts/whatever I will need to implement.
Thank you!
Here is a simple example to help you start out:
jsFiddle
You'll notice the text on the right slides out of the screen when you scroll but the green box stays in the same position. This is done with a slight bit of CSS.
The navigation div on the left is styled with position: fixed;. This keeps the navigation div in one place at all times.
In contrast, the content div on the right is styled with position: absolute; with a left: 25% set. The widths of the navigation div and content div are set in percentages. This allows the content to take up the same relative screen space whether the window is larger or smaller. Your content will adapt to your viewers resolution.
Using an <iframe> will is one possible solution to altering the content in the right hand content div. Another would be to use ajax but that is getting a little more advanced as you now must understand client and server scripting in order to receive the full benefits from it.
iFrame
Ajax
If you're information is static and will not change often, you could considering making a single page web app with multiple templates that are appended to the content div.
jQuery
jQuery Templates Plugin
jQuery is really good as well for learning JavaScript and makes building dynamic client side applications a breeze.
They also have ajax support as well:
jQuery Ajax
Hope this helps.
Good luck and Happy Coding!
You have the menu housed within an element that is set to position: fixed;
Position fixed will make sure the menu doesn't move around on the page regardless of scrolling the rest.
Then with javascript you can add an event listener for "scroll" on the window (or just the div you want to watch for scrolling). When this fires, check the scrollY property to see what range it is in and maybe highlight certain items in your menu.
Hopefully this leads you down the right path. It's a broad question, so here's a broad answer!
I second the suggestion from #Jeromy French -- I think Bootstrap , Foundation and other responsive frameworks have a lot going for them.
Here's an example using Bootstrap: http://jsfiddle.net/panchroma/2dF6s/
In addition to being HTML5, you can get a layout which works on everything from smartphones to wide desktops. It's not the only way to get a mobile friendly website, but it's one of several good options.
I think that with so much moving towards smartphones and tablets now, the more you can learn about responsive and mobile websites, the better off you will be in the future.
I think all the responsive frameworks use a grid based system, here's what the HTML looks like with Bootstrap:
<div class="container">
<div class="row-fluid" align="center">
<div class="span12">
<h1>Header</h1>
</div><!-- close span12 -->
</div> <!-- close row -->
<div class="row">
<div class="span3" id="side-nav" data-spy="affix" data-offset-top="200">
<h5>Option 1</h5>
<h5>Option 2</h5>
<h5>Option 3</h5>
<h5>Option 4</h5>
</div> <!-- end span3 -->
<div class="span9">
<p>Main Content Here </p>
</div> <!-- end span9 -->
</div><!-- end row -->
</div><!-- end containter -->
Good luck!