Sorry if this is already in the lexicon, but I couldn't find it. I have what I think is a pretty simple three column header, where I can't get the right column to align with the left two columns. It shows up below the left columns even though there is plenty of space. I have three divs that make up each column, and I am guessing the problem is in there somehow.
Here is the css I am using:
body {
background-color: #ffaa00;
}
#container {
width: 1268px;
height: 900px;
background-color: #fff;
margin: 0 auto;
}
/* header styles */
#main {
height: 110px;
width: 715px;
margin: 0 auto;
background-color: #ccc;
border-radius: 6px;
}
#frame {
height: 100px;
width: 705px;
background-color: #336699;
position: relative;
top: 5px;
left: 5px;
border-radius: 6px;
}
#content {
height: 90px;
width: 695px;
background-color: #ffc;
position: relative;
top: 5px;
left: 5px;
border-radius: 5px;
text-align: center;
vertical-align: ;
}
/* left header */
#left {
float: left;
height: 110px;
width: 268px;
margin: 0 auto;
background-color: #ccc;
border-radius: 6px;
}
#left-frame {
height: 100px;
width: 258px;
background-color: #336699;
position: relative;
top: 5px;
left: 5px;
border-radius: 6px;
}
#left-content {
height: 90px;
width: 248px;
background-color: #ffc;
position: relative;
top: 5px;
left: 5px;
border-radius: 5px;
text-align: center;
}
/* right header */
#right {
display:inline-block;
float: right;
height: 110px;
width: 268px;
background-color: #ccc;
border-radius: 6px;
}
#right-frame {
display:inline-block;
height: 100px;
width: 258px;
background-color: #336699;
position: relative;
top: 5px;
left: 5px;
border-radius: 6px;
}
#right-content {
display:inline-block;
height: 90px;
width: 248px;
background-color: #ffc;
position: relative;
top: 5px;
left: 5px;
border-radius: 5px;
}
h1 {
display: inline-block;
margin-top: 15px;
font-size: 3em;
font-family: lucida grande;
color: #336699;
}
And the html:
<body>
<div id="container">
<div id="left">
<div id="left-frame">
<div id="left-content">
<img src="images/keyboard.jpeg" style="width:248px; height:90px; border-radius:5px;"
alt="this is a picture">
</div>
</div>
</div>
<div id="main">
<div id="frame">
<div id="content">
<h1>HERE IS A HEADING!</h1>
</div>
</div>
</div>
<div id="right">
<div id="right-frame">
<div id="right-content">
</div>
</div>
</div>
</div>
Any insight is appreciated.
What you really need to do is just float the three elements left and if you want spacing between then set the left/right margins on #main. This solution keeps all items in the document flow properly.
#main {
height: 110px;
width: 715px;
margin: 0 8px; /* changed 'auto' to '8' to even up padding */
background-color: #ccc;
border-radius: 6px;
float: left; /* added float */
}
#left {
float: left;
height: 110px;
width: 268px;
margin: 0; /* removed 'auto' because it isn't necessary when floated */
background-color: #ccc;
border-radius: 6px;
}
#right {
display:inline-block;
float: right; /* no need to adjust this */
height: 110px;
width: 268px;
background-color: #ccc;
border-radius: 6px;
}
JSFiddle Demo
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 am trying to create half borders between DIV elements contained within a DIV element with the help of CSS using ::after. Unfortunately , this only ever renders the border on the outside of the encompassing DIV element. I would appreciate the help.
Here is my code:
HTML:
<div class="menu">
<div class="subDiv1">Foo</div>
<div class="subDiv2">Bar</div>
<div class="subDiv3">Baz</div>
</div>
CSS:
.menu {
position: relative;
display: inline-block;
float: left;
padding: 0 10px;
margin-left:auto;
margin-right:auto;
width: 75%;
height: 150px;
position: relative;
margin-top: 2%;
border-width: 1px;
border-style: thin solid;
border-color: #008040;
overflow: hidden;
box-shadow: 0 0 10px 1px #7e8083;
}
.subDiv1 {
width: 33%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
.subDiv1::after {
content:"";
background: black;
position: absolute;
bottom: 25%;
right: 0;
height: 50%;
width: 1px;
}
.subDiv2 {
width: 33%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
.subDiv2::after {
content:"";
background: black;
position: absolute;
bottom: 25%;
right: 0;
height: 50%;
width: 1px;
}
.subDiv3 {
width: 33%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
https://jsfiddle.net/2yGQD/1727/
Add position:relative to your subdivs
.subDiv1 {
position:relative;
width: 20%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
just practicing with css dropdown. In the following code, the .container div (blue colored one) contains the child dropdown div .dropdown (green colored one, I have disabled this color to avoid confusion). The container div is perfectly horizontally aligned to its above div .content-small (red colored one). Since I want the position and margins of all the div's to be mantained whenever I scale down the browser window, I used left: 41.66%; in percentage so that the container div should stay aligned to its top red div.
The container div stays aligned, but whenever the window is scaled down to lowest size, the container div shifts slightly to the right. PLEASE see the attached screenshot. Why is that?
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(255,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top: 10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{
visibility: visible;
height: 100px;
max-width: 100px;
background-color: rgba(204,102,255,1);
position: absolute;
left: 41.66%;
}
.dropdown {
/* [disabled]background-color: rgba(0,255,0,1); */
/* [disabled]border: 3px solid rgba(255,0,0,1); */
width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 3px;
}
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container">
<div class="dropdown"></div>
</div>
</div>
</div>
That's because you're saying left: 41.66%;, which is not an accurate way to center. Instead, use this:
CSS
.container {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(255,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top: 10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{
visibility: visible;
height: 100px;
max-width: 100px;
background-color: rgba(204,102,255,1);
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.dropdown {
/* [disabled]background-color: rgba(0,255,0,1); */
/* [disabled]border: 3px solid rgba(255,0,0,1); */
width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 3px;
}
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container">
<div class="dropdown"></div>
</div>
</div>
</div>
JSFiddle
<html>
<style>
.leftColumn {
width: 49.2%;
float: left;
padding: 0;
font-size: 15px;
}
.rightColumn {
width: 48.9%;
float: right;
padding: 0;
font-size: 15px;
}
.horiHR {
width: 100%;
background: #e1e1e1;
padding: 0;
border: solid;
border-width: 2px;
border-color: #e1e1e1;
border-radius: 10px;
}
.centerHR {
margin-left: auto;
margin-right: auto;
width: .1%;
height: 100%;
background: #e1e1e1;
padding: 0;
border: solid;
border-width: 2px;
border-color: #e1e1e1;
border-radius: 10px;
margin-top: 0;
margin-bottom: 0;
}
.superContainer {
height: 330px;
margin-top:200px;
margin-top: 0px;
width: 100%;
}
/*The superContainer is in the headway block, which is another container. this means that the margin of the superContainer actually makes the block taller; it doesn't push the block further down. This must be done in headway*/
.superContainer:hover {
background: #007fff;
}
.topContainer {
width: 100%;
height: 30%;
margin-top: -45px;
text-align: center;
font-size: 24px;
font-family: Arial;
line-height: 33px;
}
.midContainer {
width: 100%;
height: 55%;
margin-top: 0;
margin-bottom: 0;
background: transparent;
}
.bottomContainer {
width: 100%;
height: 10%;
margin-top: 60px;
margin-bottom: -10px;
}
.leftPar {
text-align: center;
font-size: 22px;
line-height: 35px;
background: transparent;
}
.leftBottom {
padding-bottom: 10px;
margin-top: -15px;
width: 20%;
float: left;
margin-left: 18.5%;
}
.midBottom {
padding-bottom: 10px;
margin-top: -15px;
width: 20%;
margin-left: 8.75%;
float: left;
}
.rightBottom {
padding-bottom: 10px;
margin-top: -15px;
margin-left: 7.25%;
width: 20%;
float: left;
}
</style>
<div class="superContainer">
<div class="topContainer">
WE MAKE IT EASY
</div>
<div class="midContainer">
<hr class="horiHR"></hr>
<div class="leftColumn">
<p class="leftPar">
We have detailed lessons, quick review guides, and quizzes for over 15 courses
</p>
</div>
<div class="rightColumn">
PICTURE
</div>
<hr class="centerHR"></hr>
<!--I don't know why, but you have to put the float left first, then the float right, and then the center thing-->
<hr class="horiHR"></hr>
</div>
<div class="bottomContainer">
<div class="leftBottom1">
A</div>
<div class="midBottom">
B</div>
<div class="rightBottom">
C</div>
</div>
</div>
</html>
The Above is my code, but for some reason, I cannot get it to format properly. the bottom letters A, B, and C don't split the bottom container, and the content in the top container doesn't even show. Anyone have any idea what's wrong with my code?
You have small mistakes in your code:
1- .topcontainer as a negative margin, so the text it's outside the screen margin-top: -45px;
2- <div class="leftBottom1"> should be without the "1", just "leftBottom"
It works good here after those small corrections: jsfiddle.net/GXJJW/
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 */