I attempted the solution that another person listed, and it kind of equaled it out, but because the content section grows depending on what I put in it, it looks goofy with the side bar staying the smaller size.
I am open to ideas, but I would rather have the column move with the content, such as floating up and down, or... At least show the same size...
The following is what I have in CSS now:
#import url("layout.css");
body {
font-family:"Georgia", "Times New Roman", Times, serif;
font-size: 0.8em;
background-color: #764;
background-image: url("../images/background.gif");
background-repeat: repeat;
background-attachment: scroll;
}
#container {
width: 700px;
margin: 10px auto;
}
#masthead {
text-align: center;
width: 698px;
border: 1px solid #431;
background-color: #fff;
background-image:;
background-attachment: scroll;
}
#navigation {
position: absolute;
float: left;
width: 148px;
height: 100%;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #431;
background-color: #fff;
}
#content {
overflow: hidden;
float: right;
width: 518px;
margin:auto;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding: 10px;
border: 1px solid #431;
background-color: #fff;
}
#footer {
text-align: center;
clear: both;
width: 698px;
padding: 0px;
border: 1px solid #431;
background-color: #fff;
}
The webpage can be seen at http://www.crucifiedwithchrist.org.
Thanks,
John
define height
#navigation {
position: relative;
float: left;
width: 148px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #431;
background-color: #fff;
height: 730px;
}
Related
I'm currently working in a final assignment for a class. I need to create a basic webpage (actually, the main goal of the assignment is to learn to use the local storage) but i got stuck on a very early stage of the making (i'm pretty novice in this). I've been using fixed divs for the main structure of the webpage and now idk how to add more content. i tried inherent position but everything went wrong.
the code: https://codepen.io/ipanonima/pen/WNbNeJm
html of the body:
<body>
<div class="main">
<div class="main-bar">
<div class="main-bar-container">
<div class="main-bar--logo">
<img src="./public/logo.png">
</div>
<div class="main-bar--info-container">
<div class="main-bar--info-container--buttons">
<div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
<div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
<div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
</div>
<div class="main-bar--info-container--login">
<div class="main-bar--info-container--login--b"><p>login</p></div>
</div>
</div>
</div>
</div>
<div class="example-section">
<div class="example-section--pictures" id="ex1">
<div class="example-section--pictures-pic"><img src="./public/canada-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">canadá</div></div>
</div>
<div class="example-section--pictures" id="ex2">
<div class="example-section--pictures-pic"><img src="./public/mexico-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">méxico</div></div>
</div>
<div class="example-section--pictures" id="ex3">
<div class="example-section--pictures-pic"><img src="./public/eu-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">EE.UU.</div></div>
</div>
</div>
<div class="banner-sesion"></div>
</div>
</body>
and my css (which is getting really long)
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
input{
border: none;
border-bottom: 2px solid #74b5fa;
background-color: rgba(250, 167, 116, 0);
}
.box-session{
box-sizing: content-box;
position: relative;
background-image: linear-gradient(to top left,rgba(152, 116, 250,.1 ), rgba(250, 167, 116, 1));
width: 232px;
padding-left: 15px;
padding-right: 17px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 11%;
border-radius: 20px;
margin-left: calc(50% - 116px);
}
.session{
box-sizing: border-box;
position: relative;
width: 232px;
}
body{
background-color: #E2EBF8;
height: 100%;
width: 100%;
}
.relative{
position: relative;
height: 100%;
width: 100%;
}
.alto20{
height: 20%;
width: 100%;
}
.navBar{
position: fixed;
height: 100%;
width: 11%;
background-color: blue;
border-radius: 20px;
background-image: linear-gradient(#71AEFF, #4080FF);
}
.navBar--perfil{
position: relative;
float: left;
/* background-color: yellow; */
}
.navBar--photo{
position: relative;
margin-top: 25%;
/* background-color: blue; */
width: 100%;
height: 50%;
}
.navBar--photo img{
height: 30px;
width: 30px;
background-color: #FFFFFF;
border-radius: 5px;
margin-left: 40px;
}
.navBar--photo p{
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
padding-left: 26px;
margin-top: 4px;
}
.navBar--opciones{
float: left;
width: 100%;
height: 60%;
}
.navBar--botones{
position: relative;
float: left;
width: 100%;
height: calc(100%/5);
}
.navBar--blanco{
position: relative;
height: 65px;
width: 65px;
/* background-color: green; */
margin-top: 3.5%;
margin-left: calc(50% - 52px);
box-sizing: border-box;
padding-top: 8px;
}
.navBar--blanco img{
height: 30px;
width: 30px;
margin-left: 19px;
}
.navBar--blanco p{
width: 100%;
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
text-align: center;
}
.selected{
background-color: #FFFFFF;
border-radius: 20px;
color: #71AEFF;
}
.selected p{
color: #71AEFF;
}
.navBar--ayuda{
float: left;
/* background-color: green; */
}
.navBar--ayuda p{
position: relative;
background-color: #FFFFFF;
width: 70px;
height: 20px;
border-radius: 7%;
text-align: center;
color: #71AEFF;
font-weight: bold;
top: 75%;
left: 15%;
}
.main{
position: fixed;
height: 100%;
width: 55%;
background-color: #FFFFFF;
border-radius: 20px;
margin-left: 8%;
/* background-color: lightblue; */
}
.main--scroll{
position: absolute;
width: 90%;
/* background-color: pink; */
float: left;
overflow-y: scroll;
height: 95%;
overflow-y: auto;
overflow-x: hidden;
margin-top: 2.5%;
margin-left: 2.5%;
}
.lista ul{
float: left;
/* list-style-type: upper-roman; */
list-style-position: inside;
list-style-image: url('../public/man.png');
}
.tabla table{
border: 2px solid red;
border-collapse: separate;
}
.derecha{
position: fixed;
height: 100%;
width: 40%;
margin-left: 60%;
border-radius: 20px;
background-image: linear-gradient(#F3FAFC, #CCDBEF);
}
.ej{
background-color: greenyellow;
width: 100%;
height: 200px;
border: 1px solid black;
}
.noteblock{
width: 150px;
height: 150px;
background-color: #ff7190;
border-radius: 20px;
margin-left: 20px;
margin-top: 20px;
padding-top: 10px;
padding-left: 10px;
position: relative;
float: left;
}
.noteblock p{
color: white;
}
.noteblock h3{
color: white;
}
.boton{
margin-left: 20px;
margin-top: 20px;
position: relative;
}
thanks for all the patience
I think you may have misunderstood the fixed position. As it is, you can add more content perfectly well in your site: try setting .new { height: 2000px; background: orange;} and you'll see the orange wall does appear and the site scrolls. One thing that might be misleading you is because your header is also fixed, so any content you do add (an <h1> for example) is going to go under it.
In any case, because the banners are fixed, their position is relative to the screen, so they "go down" as you scroll, and they'll be in front of any content you add.
I don't understand what led you to set them fixed in the first place, but it's probably not a good idea. Try taking that out, give the ejemplo pictures a fixed height and let it scroll (try setting you header to sticky rather than fixed). When you're done with your homework, try researching CSS positions a bit more.
I tried to create a page footer for each page. The objectif is to center the footer and to place it at the bottom of the page. You can check my JSFiddle, or see the code directly as following.
HTML
<div id="page1" class="page">
<div class="footer">
<p>1</p>
</div>
</div>
CSS
div.page {
height: 300px;
width: 180px;
border: 1px solid #000;
margin: auto;
margin-bottom: 5px;
text-align: center;
}
div.footer {
background-color: #DDD;
width: 100%;
bottom: 0; /* doesn't work */
}
p {
width: 15px;
color: white;
background-color: red;
text-align: center;
margin: auto;
bottom: 0;
}
I saw to similar question about How to position div at the bottom of a page ?. However, when i applied its proposition, bottom + position setting, footers in each page are all merged together, placed at the bottom of the navigator's windows. Here's the related JSFiddle
Can somebody help ? Thanks a lot.
You are missing position: relative; applied to the class="page".
This way the element which has absolute position applied knows that needs to be bottom:0 relative to the parent element .page.
div.page {
height: 300px;
width: 180px;
border: 1px solid #000;
margin: auto;
margin-bottom: 5px;
text-align: center;
position:relative;
}
div.footer {
background-color: #DDD;
width: 100%;
bottom: 0; /* it works now */
position: absolute;
}
p {
width: 15px;
color: white;
background-color: red;
text-align: center;
margin: auto;
bottom: 0;
}
DEMO http://jsfiddle.net/9xzb9m48/3/
Try this:
div.page {
height: 300px;
width: 180px;
border: 1px solid #000;
margin: auto;
margin-bottom: 5px;
text-align: center;
position: relative;
}
div.footer {
background-color: #DDD;
width: 100%;
position: absolute;
bottom: 0;
}
p {
width: 15px;
color: white;
background-color: red;
text-align: center;
margin: auto;
bottom: 0;
}
First: I really tried to find an answer but non of them worked for me.
Here's my problem:
I have a base layout where I have a forward and a backward button in the footer.
Theses buttons must be quadratic. So I've decided to make them simple images (to avoid all the problems with trying to scaling divs propotionally).
Theses images have CSS:
.galleryFooterController {
position: relative;
height: 100%;
float: left;
margin-left: 5px;
background-color: #A0A0A0;
}
And are nested in a container with CSS:
#galleryFooterControlle {
position: absolute;
display: inline-block;
right: 15%;
background: white;
height: 100%;
padding-right: 5px;
width: auto;
}
But the container is not taking the correct width so that the images are not fitting inside and are rendered under each other. If I take out the height: 100% from the images, they fit next to each other in the container.
It would be great if you could help me finding a JS-free version to solve this problem!
Thanks!
Here is a FIDDLE that will give you a start.
I haven't made all of the divs line-up, but you can change the CSS to make it look prettier.
For your buttons, I just used div in a div with CSS-Tricks triangle - You can use .click on the outer div to run your function.
Here's the relevant CSS
.header {
width: 100%;
height: 50px;
background-color: #A0A0A0;
border: 4px solid white;
}
.container {
width: 90%;
height: 400px;
background-color: #A0A0A0;
border: 4px solid white;
float: left;
}
.rightbar {
width: 9%;
height: 460px;
border: 1px solid white;
float: right;
background-color: #A0A0A0;
}
.bottomholder {
width: 90%;
height: 50px;
border: 1px solid black;
}
.bottomleft {
height: 100%;
width: 562px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.bottombutton {
height: 100%;
width: 130px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.bottomright {
height: 100%;
width: 200px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.arrowleft {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid white;
background-color: #A0A0A0;
float: left;
margin-left: 10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid black;
margin-left: 8px;
margin-top: 5px;
}
.arrowright {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid white;
background-color: #A0A0A0;
float: left;
margin-left: 10px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid black;
margin-left: 15px;
margin-top: 5px;
}
Just i tried with liquid layout, removed the border 2px white and change the float property.
.header {
width: 98%;
height: 50px;
background-color: #A0A0A0;
margin:2px 2px;
}
.container{
width: 85%;
height: 400px;
background-color: #A0A0A0;
margin:2px 2px;
float: left;
}
.rightbar{
width: 12%;
height: 460px;
float: left;
background-color: #A0A0A0;
margin-top:2px;
margin-left: 2px;
padding-left: 3px;
}
Full Code http://jsfiddle.net/judearasu/5c5rq/
Thanks to everyone I figguered out how to solve the problem!
Because the images coudn't be rendered next to each other because its container would't pick the right width after scaling the images, i simply made the container width to the maximum available place which was in my project 85%. So now the images are fitting in!
Thanks again!
I have a design question.
I need to create a progress bar for a video player.
I have a div container (id videoManager) with all the div about the PLAY, the STOP, the progress bar, the VOLUME, other buttons, all one beside the other (floating left).
i would like the div of the progress bar (id playerSlider) resizes depending on the remained space. i wrote down this code, but if use "width: 100%;" for this div, it doesn't get the remained space, but the 100% of the container.
suggestions?
HTML:
<div id="videoManager">
<div id="playpauseCommand">Play</div>
<div id="stopCommand">Stop</div>
<div id="playerSlider">
<div id="objSlider"></div>
</div>
<div id="timeElement">10:12:12</div>
<div id="volumeSlider"></div>
<div id="displayCommand">Command</div>
</div>
CSS:
div#videoManager{
margin-top: 30px;
width: 980px;
height: 44px;
background: transparent url('bg.jpg') center center repeat-x;
position: relative;
color: #fff;
}
div#playpauseCommand, div#stopCommand{
width: 44px;
height: 44px;
float: left;
border-right: 2px solid #555;
}
div#playerSlider{
float:left;
height: 44px;
width: 100%;
padding: 15px 10px 0px 10px;
}
div#objectSlider{
float: left;
clear: left;
width: 100%;
}
div#timeElement{
float: left;
height: 44px;
width: 80px;
border-right: 2px solid #555;
}
div#volumeSlider{
float: left;
height: 44px;
width: 180px;
border-right: 2px solid #555;
}
div#displayCommand{
float: left;
height: 44px;
width: 70px;
border-right: 2px solid #555;
}
and this is a link to my site.
try this css code, not sure if this is exactly what you want though:
div#videoManager{
margin-top: 30px;
width: 980px;
height: 44px;
background: transparent url('bg.jpg') center center repeat-x;
position: relative;
color: #fff;
}
div#playpauseCommand, div#stopCommand{
width: 44px;
height: 44px;
float: left;
border-right: 2px solid #555;
}
div#playerSlider{
float:left;
height: 44px;
width: 53%;
padding: 15px 10px 0px 10px;
position:absolute;
left:178px;
}
div#objectSlider{
float: left;
clear: left;
width: 100%;
}
div#timeElement{
float: left;
height: 44px;
width: 80px;
border-right: 2px solid #555;
}
div#volumeSlider{
float: right;
height: 44px;
width: 180px;
border-right: 2px solid #555;
}
div#displayCommand{
float: right;
height: 34px;
width: 70px;
top:10px;
border-right: 2px solid #555;
position:relative;
}
I'm trying to let a div container with a black background substitute as the border style for a bar graph that has a border radius. Here's the HTML/CSS:
HTML:
<div class="graph-outer">
<div class="inner-left-cap"></div>
<div class="inner-left-bar">40%</div>
<div class="inner-right-bar">60%</div>
<div class="inner-right-cap"></div>
</div>
CSS:
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/115/
The issue in which I am having is that the corners don't look as if they have any black border style whatsoever. What can I do?
Use this version with overflow:hidden and a explicit border on your outer controller and no padding.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border:1px solid black;
border-radius: 10px;
overflow:hidden;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/116/
I've updated your CSS, I changed the caps to 3% each and made the bars smaller. The bar on the inside was going over the caps.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 3%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 37%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 3%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 57%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/119/
http://jsfiddle.net/2ZkDz/120/
border-radius: 10px;
padding: 2px;
That should do it! I just threw on a border-radius and bumped up the padding 1. There should be an easier way using the actual border property but im feeling lazy and this does it
a solution without the end-caps (that way the bar width matches the values)
demo jsfiddle
the graph-outer is 20px tall so the nested bars are 18px (20px - 2px (1px top/bottom padding)), set the border-radius on the bars to 9px each (half of the height so each corner is uniform and matches the parents curvature)
.inner-left-bar {
background: orange;
width: 40%;
height: 100%;
text-align: center;
float: left;
border-radius:9px 0 0 9px; /* add this */
}
.inner-right-bar {
background: red;
width: 60%;
height: 100%;
text-align: center;
float: left;
border-radius:0 9px 9px 0; /* and this */
}
/* and drop the end-caps */