Trying to make navigation with Previous and Next button.
Want the Previous and Next to be on both ends of the screen. They need to be responsive and float closer to each other with the size of the screen. However, the previous and next buttons can't be one over the other.
My current CSS and HTML is as follows:
HTML
<div id="navigation_wrapper">
<div>previousnext</div></div>
Connected CSS
div#navigation_wrapper {
width: 100%;
padding: 5px 0px 30px 0px;
background-color: orange;
opacity:0.8;
}
You should float the elements like so
CSS
div#navigation_wrapper {
width: 100%;
background-color: orange;
opacity:0.8;
}
#prev-button {
float:left;
}
#next-button {
float:right;
}
HTML
<div id="navigation_wrapper">
<a id="prev-button" href="previous.html">previous</a>
<a id="next-button" href="next.html">next</a>
</div>
Float the buttons left / right accordingly and to avoid them colliding set min-width on the body tag
quick demo
body{
min-width:120px
}
div#navigation_wrapper {
width: 100%;
padding: 5px 0px;
background-color: orange;
opacity:0.8;
overflow:hidden;
}
a[href*="previous.html"]{
float: left;
}
a[href*="next.html"]{
float: right;
}
Related
I am working on a simple website and whenever I resize the window, my buttons on my top bar keep sliding down below the first line. I have no idea how to fix it. I have tried many solutions such as:
body {
width:100%;
height:100%;
}
But nothing works. Can someone tell me how to either make my page adjust to peoples window size or make it static so when it adjusts it just cuts off parts of it?
Here is my code:
<html>
<head>
<style>
#button_container {
width:100%;
height: 100%;
}
body {
width:100%;
height:100%;
position: absolute;
}
#title {
width:100%;
height: 10%;
font-family: ecuyerDAX;
font-size: 55px;
margin-top:-60px;
margin-left: 28%;
color:white;
}
button {
text-transform: uppercase;
font-family: optimus-princeps;
outline: none;
border-radius: 3px;
margin-top:1%;
color:white;
background: gray;
border:1px solid black;
height:50%;
margin-left: 1%;
margin-right: 1%;
background: -webkit-linear-gradient(gray, black);
background: linear-gradient(gray,black);
}
#bThree {
margin-right:55%;
}
#topBar {
border: 2px solid black;
border-radius: 5px;
height: 12%;
width:100%;
background:-webkit-linear-gradient(#20AB53, #0B6F15);
background: linear-gradient(#20AB53, #0B6F15);
}
</style>
</head>
<body>
<div id="topBar">
<div id="button_container">
<button id="bOne">Home</button>
<button id="bTwo">About</button>
<button id="bThree">Contact</button>
<button id="bFour">Log In</button>
<button id="bFive">Sign Up</button>
</div>
</div>
</body>
</html>
Try using fixed values in px or em instead of percentages for the width properties. They will be non-responsive and will not change width when the screen width changes.
To stop it from getting too small you would set a min-width of the container. This would make the content get cut off if the space gets smaller.
min-width: 1000px;
If you want to make it responsive it will be trickier, either through using media queries or flexbox would be easier.
Your buttons are fixed width in px therefore as the width gets less the buttons take more and more space up until they eventually do not fit and need to wrap.
If your buttons were a percentage width they would not wrap, though it would not be a good solution.
I think doing a float:right for the right hand two would stop them wrapping so early (and float:left for the left hand three). Though they would still wrap once the left hand and right hand ones meet each other.
Give a #bThree margin-right isn't good idea. You can replace it with #bFour, #bFive { float: right; }
It is possible to specify all the margin properties in one property: margin: top right bottom left. As your example you can change it to: margin: 1% 1% 0 1% or margin: 1% 1% 0. Googling "Shorthand property" for more explanation.
body {
width:100%;
height:100%;
position: absolute;
margin: 0;
}
#topBar {
border: 2px solid black;
border-radius: 5px;
background: -webkit-linear-gradient(#20AB53, #0B6F15);
background: linear-gradient(#20AB53, #0B6F15);
}
button {
text-transform: uppercase;
font-family: optimus-princeps;
outline: none;
border-radius: 3px;
margin: 1%;
color:white;
background: gray;
border:1px solid black;
line-height: 25px;
background: -webkit-linear-gradient(gray, black);
background: linear-gradient(gray,black);
}
#bFour, #bFive {
float: right;
}
<div id="topBar">
<div id="button_container">
<button id="bOne">Home</button>
<button id="bTwo">About</button>
<button id="bThree">Contact</button>
<button id="bFour">Log In</button>
<button id="bFive">Sign Up</button>
</div>
</div>
I have 2 divs, one should be on left side and the other on right side but in same line.
Behind I want to have parent div (#author-box) with grey background that will have height depending on the right div text height, so when you change devices if author-txt goes below author-img the gray background should be behind both of the divs.
I tried float left but then the gray background is really small and doesn't follow author-txt and author-img height.
Also I tried display:inline, but then text starts from the lower part of the image.
<div id="author-box">
<div class="author-img"><img src="img.jpg" width="150px" height="149px" /></div>
<div class="author-txt"><strong>About the author</strong><br/>author text<br/><strong>Connect with me:</strong> FaceBook | LinedIn | Twitter</div>
</div>
#author-box {
background-color: #ECECEC;
margin-bottom: 10px;
font-size: 15px;
padding: 10px;
}
.author-img{}
.author-img img{
border-radius: 100px;
}
.author-txt{}
It's very simple: (there are many other ways too)
.author-img {
display:inline-block;
}
.author-txt {
display:inline-block;
vertical-align: top;
}
Demo: http://jsfiddle.net/sem3qyyo/
If you want to use floating, you will need to "clear" the container:
#author-box:after { /* just one method of clearing, there are others too */
display:table;
clear: both;
content:" ";
}
.author-img {
float:left;
}
.author-txt {
float:left;
}
Demo: http://jsfiddle.net/sem3qyyo/1/
Or use floating and overflow: auto; on the container if your design allows it:
#author-box:after {
overflow: auto; /* add this */
background-color: #ECECEC;
margin-bottom: 10px;
font-size: 15px;
padding: 10px;
}
.author-img {
float:left;
}
.author-txt {
float:left;
}
Demo: http://jsfiddle.net/sem3qyyo/2/
And this can go on!
So I have some text which sits, next (right floated) to an image within the footer area of my document. When I re-size my browser to a min-width:768px.
I'm trying to get the text, and image to both be centrally aligned and with the image to be positioned above the text, but I can't seem to do it. All that happens is, the image shrinks to a dot and neither re-align.
Here is an example to what I'm trying to achieve, and my existing code:
HTML :
<div id="wrapper">
<footer id="page_footer">
<p>Thanks for visiting</p>
<a href="#" target="_blank"><img alt=
"nffc_logo" src="images/logo.png"></a>
</footer>
</div><!-- wrapper -->
CSS :
#page_footer {
width: 100%;
height: auto;
position: absolute;
bottom:0; /*sticky footer*/
left: 0;
background: #282828;
color: white;
}
#page_footer img {
max-width: 3%;
height:auto;
margin: 5px;
float:right;
}
#page_footer p {
float:right;
margin-right: 10px;
margin-left: 1px;
}
and then an empty media query :
#media screen and (min-width:768px) { }
I've added an additional container for a link and paragraph, .right-div and made it float: right; so you don't need to float it's children ( p and a ). They only need to be displayed as inline blocks, and have width or max-width for better positioning.
Please notice that i've applied styles to a, not to img
So here is the DEMO
changing the order of your markup to (showing image first and <p> after it), solves the problem in simplest form:
<div id="wrapper">
<footer id="page_footer">
<a href="#" target="_blank">
<img alt="nffc_logo" src="http://www.jonathanjeter.com/images/Square_200x200.png" />
</a>
<p>Thanks for visiting</p>
</footer>
</div>
<!-- wrapper -->
...here is a solution demo
CSS
#media screen and (max-width:768px) {
#page_footer {
width: 100%;
height: auto;
position: absolute;
bottom:0;
/*sticky footer*/
left: 0;
background: #282828;
color: white;
text-align:center;
}
#page_footer img {
max-width: 3%;
}
#page_footer p {
margin:0 auto;
}
}
#media screen and (min-width:768px) {
#page_footer {
width: 100%;
height: auto;
position: absolute;
bottom:0;
/*sticky footer*/
left: 0;
background: #282828;
color: white;
text-align:center;
}
#page_footer img {
max-width: 3%;
vertical-align:middle
}
#page_footer p {
display:inline-block;
}
}
what and how ?? to align <p> next to image use display:inline-block; method for alignment.
to align one above the other, simple margin would do.
I am trying to do a hide / reveal using javascript and css and my divs are stacking rather than lining up side by side. i have set a width and floats... i cant figure out what's going on. any help is greatly appreciated.
#container {
width: 760px;
margin: 20px auto;
padding: 30px;
background-color: #000;
border-width: 0px;
color: #fff;
}
#1a {
width: 300px;
float: left;
margin:10px
background-color: #000;
}
#1b {
width: 400px;
margin: 10px;
background-color: #000;
}
and the html:
<div id="container">
<div id="1b" class="hidden">
Module Details:
My First Page
</div>
<div id="1a">
01
</div>
i've been messing with it a lot, and now the second div is in the middle of the first... so here is a link if that's helpful too:
http://www.amandasmithsf.com/m14_SMITH_demo/test.html
Update
Inspecting your CSS in Firebug, I noticed that it wasn't being applied, then I saw why -- HTML IDs should not start with a number (or at least, not if you want them to work the CSS # selector; it turns out that in HTML5 they decided to start allowing IDs beginning with numbers, but you'll have to use a different strategy to select them with CSS: http://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/).
Starting the IDs with letters instead of numbers made it work:
<style>
.hidden {display:none}
#container {
width: 760px;
margin: 20px auto;
padding: 30px;
background-color: #000;
border-width: 0px;
color: #fff;
}
#b1 {
float: left;
width: 300px;
margin:10px;
background-color: #000;
}
#a1 {
float:left;
width: 10px;
margin: 10px;
background-color: #000;
}
</style>
<script>
function unhide(id) {
document.getElementById(id).style.display = 'block';
}
</script>
<div id="container">
<div id="b1" class="hidden">
Module Details:
My First Page
</div>
<div id="a1">
01
</div>
</div>
Original Answer
I think you just need to add float: left; to #1b.
Or, if for some reason you really only wanted to assign float: left; to one of them, it would need to be #1b - the floated element needs to come before the non-floated element next to which you want it to display.
div alignment one left next two top bottom last one right
it is nt coming like that when I'm doing
see this image
I would like to align the image like that with div tag, unfortunately when i aligned its not coming up like that,
how do i leyout all the images inside one div tag>?
here is my html code
<div class="site_contents">
<div class="header">
<div class="big_logo"></div>
<div class="work_nav"></div>
<div class="testimonial"></div>
<div class="cliants"></div>
<div class="testimonial"></div>
<div class="contact"></div>
</div>
</div
here is my css code
.site_contents {
height:auto;
width: 900px;
background-color: #666;
margin:0 auto;
}
.header {
background-color: #3CF;
height: 262px;
width:100%;
clear:both;
position:relative;
border:2px solid #000;
}
.header div
{
float: left;
}
.big_logo{
background-color: #06C;
height: 262px;
width: 459px;
background: url(images/sitetemplate_header.gif) 0 -21px;
}
.work_nav {
background-color: #F00;
height: 159px;
width: 170px;
}
.testimonial {
background-color: #3F9;
height: 104px;
width: 170px;
}
.cliants {
background-color: #09C;
height: 262px;
width: 171px;
}
.contact {
background-color: #30C;
height: 262px;
width: 101px;
}
could any one help me please
This is almost what you want. http://jsfiddle.net/
You need to be careful about a number of things.
work_nav and testimonial need to be in a separate div which I have included (container2)
The total width needs to be adjusted. I have changed it as well. You can play with it to make it according to what you need.
I have included borders as well to recognize each box. You should remove those borders and the width taken by the borders must be subtracted from the total current width. That means adjust the current width again.