http://i.stack.imgur.com/mDS5o.png
I basically would like to add empty space either side of that nav bar so it follows all the way to the end of the screen. If it was possible being able to do so it would fit any screen size would be great! I've been coding for two days now learning from codeacademy so i dont have the full knowledge of how to do little things like this.
Your help is much appreciated.
(the empty space either side of the nav bar should match the nav bars props, i.e opacity, size)
Also I would much rather if someone could explain to me how its done as I have noticed alot of the questions asked here are answered with the exact code required and a copy + paste is all that's needed.
this is what im working with
http://cssmenumaker.com/builder/459273
To clarify what pconline's code is doing, if you create a div at 100%, then separate divs for the nav, you can expand the outer div to 100% for full width, then style and align the nav separately.
i hope this example can help you
<div class="container">
<div class="nav">
<label>foo1</label><label>foo2</label><label>foo3</label>
</div>
<div>
CSS
.container{width:300px;height:50px; background-color:blue}
.nav{width:120px; height:50px; background-color:green; margin:0 auto;}
.nav label{line-height:50px;}
http://jsfiddle.net/r3D4b/
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 am building this website for a friend of mine. She asked if i could make a slider of the header pics. I have tryd making it full width but it looks different in firefox and chrome and i dont know why.
the url is xx
The problem is that in firefox it has a margin/padding left of a lot, instead of 0. Tried adding !important, but no difference. In chrome it is nearly full width, but still not totally. I think im looking over something obvious :( help is highly appreciated.
The first problem is that you created a row as a container of the slider only. The row adds margin-left: -25px and margin-right: -25px. If you wanna use such a structure, you should put a col-xs-12 (if you're using Bootstrap 4 use col-12) inside row.
After that, you will see a fullwidth slider.
As a consequence your structure will be like that:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
...
slider structure
...
</div>
</div>
</div>
This should fix your problem in Firefox too.
I am not sure if you defined the width of the parent element carousel-example correct. You can extend your bootstrap.css for .carousel with the full width:
.carousel {
width:100%;
position:relative;
}
BR
webbolle
I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
so i need to create some space above the nav of my site to move my navigation downwards but using margin-top just makes a white lap above the header background, i need the space to be in the background to move the nav downwards.
Here is my current code:
HTML: http://pastebin.com/8Z1xuzUC
CSS: http://pastebin.com/h3FFnQ3Y
Sorry if this sounds kind of convoluted but i can't really explain it any better.
Separate your #header and #div in your css and add padding-top to #nav.
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