Im trying to make a layout that uses the whole screen so I have not set fixed widths on the layout. I'm using percentages.
im working on this http://www.abdhulzaman.co.uk/work/rima
as you can see at the top i have a logo and a header on the top left of the header and also a navigation thats position absolute to the right. now when i minimize the screen.. the nav and the logo header will overlap which is really annoying.
anything to do with position absolute/relative? This may seem very simple.. would appreciate then help! thnx :)
its something similer to http://jsfiddle.net/YFCWm/
Is the size of your navigation dynamic? If not, you could just set a min-width for your header (although it'd be better to set it in a container that wraps your entire site).
If you're just beginning with css and layouts, it can be a good idea to use a grid based framework like twitter bootstrap or blueprint css.
http://twitter.github.com/bootstrap/
http://blueprintcss.org/
Using one of those will make your layout problem trivial.
A quick fix to your problem would be to give the nav element a margin on the left side
margin: 0 0 0 230px;
That will prevent the nav from 'going' further left than 230px from the left edge of the header element.
Related
https://www.bootply.com/101100#
I have found this and Im using the code for the floating side bar on my website. However, I want to move the sidebar a bit more left. I cant seem to find the CSS for it or maybe i was looking in all wrong. I would appreciate your help. I've tried changing some codes using dev tools(inspect button on browser)
And also, is there a way to make this behave properly on mobile?
Thanks!
The sidebar is structured as the contents of a column in that example. It's aligned to the left edge of the first column, which is aligned with the left side of the row, and ultimately the left side of the container. This is standard Bootstrap structure. You might consider using container-fluid to expand the entire layout of your page closer to the edges of the viewport.
To retain the existing page width, you could pull the sidebar over with negative margin:
.sidebar-nav-fixed {
margin-left: -30px;
}
This shifts the sidebar from its normal layout in the grid.
You could also set it with respect to the viewport:
.sidebar-nav-fixed {
left: 20px;
}
These approaches may have undesirable side effects for smaller screens or mobile layout, however. It's better to use a standard layout grid pattern.
I have been designed a web site which top menu has fixed position
every thing is Okay, the site is not responsive. but in mobile the top menu stick to left,but it must be at center.
please help me, what can I do??
the website : http://www.infinitypub.com/
Remove both width and max-width from the body element. I suspect you're trying to center the page, but you're doing it in an incorrect way.
I have this idea in my head but I have no idea how to realize it.
Basically what I want is:
A div that floats to the left and sticks to the left side of the screen (does move along when scrolling). This div will be the navigation div.
And then a content div that is centered. Besides that there has to be a footer and a header (header is fixed size) and footer is sticky to the bottom.
Any idea how to do this? I really can't figure it out.
PS. Its ok if there is "space" between the two divs.
It was pretty simple - As far as I understand what you need ;)
Take a look on the fiddle
http://jsfiddle.net/tm8t9/
position:fixed;
Is what you need to have the things "sticky"
And for the future take a look on CSS even basic tutorials. Maybe try this
http://learnlayout.com/no-layout.html
Have nice day.
i am having trouble writing code for my top-nav
http://jsbin.com/evIhAkir/5/edit?html,css,output
i am trying to make social icons on my website horizontal in my nav bar but got stuck.
which is the best way to horizontal those icons.
http://jsbin.com/evIhAkir/6 i had been fixed your issue but please first improve your knowledge in html specially
difference between width in % and px
margin and padding
float:left and right and clear both..
hope you got the answer
Basically, I'm trying to make my first website, ever, and I'm having trouble already.
I'm making the navigation bar and it's all looking good, but as soon as I put my browser into windowed mode, the navigation bar extends beyond what it was, so I have to scroll sideways to reach the end of it.
P.S.
I'm new to stackoverflow, still trying to figure it out.
So I might do something I'm not supposed to, just let me know and I'll try to fix it.
Edit 1:
I'm using Google Chrome.
Here is the JSFiddle with full code:
http://goo.gl/Z5wvTn
If you look at the header and footer, you should be able to see that the main section and navigation bar is actually wider than them.
The navigation bar and main section are within a div, while the other elements arent.
This effect is on a much larger scale without JSFiddle.
You want to create something like this: JSFiddle
If yes, then use % or emin place of pixels
Place the header and footer in the wrapper div and then decrease or adjust the width of the .wrapper div in your css.
jsFiddle
Based on what #Aayushi Jain and #Shivam said use wrapper with percentage. That way, your wrapper will respond according to the window screen.
Look up responsive design if you want to know more about it.
My version would be to add width:100% on your wrapper instead of defining fixed width.
Also, practice on using ems and % like #Aayushi Jain said.
.wrapper {
width: 100%;
}