I'm about to become insane with this css thing. I don't know the language very well..and can't make what I need to do.
I have this html
<div id="content">
<div id="video-content">
<div id="source">
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</div>
and I have to achieve this:
so far my css code:
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content {
background: dimgrey;
width: 97%;
height: 90%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#video-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
z-index: 20;
}
#segment-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
}
I am not interested in doing this resposive so far
To get a clean grid you'll have to change your html-structure a little bit.
<div id="content">
<div id="video-content">
<div class="row">
<div class="col-1-2">
<div id="source"></div>
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div class="col-1-2">
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-1-1">
<div id="segment-content">
</div>
</div>
</div>
</div>
Here's an example I made of how to achieve something similar to your screenshot:
Codepen example
You want to switch out the height-properties or remove them completly and let the content fill in dynamically. I used them in this example since we have no content, so that the divs become visible.
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
height:auto;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content{width:100%;
height:auto;
background: dimgrey;}
#video-content{width:80%;
height:370px;
margin:0 auto;}
#source{width:45%;
float:left;
height:auto;
}
#preview{width:45%;
float:left;
height:auto;
margin-left:10%;
}
#s-video{width:100%;
height:300px;
background-color:black;}
#p-video{width:100%;
height:300px;
background-color:black;}
#source-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#preview-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#segment-content:after {
content: "";
display: table;
clear: both;}
#segment-content{width:80%;
margin: 20px auto;
height:300px;
background:blue;}
this will work,although not the pretty way of writing css
I think you'd be much better off going with a pre-built framework if that's an option. Something like purecss.io or bootstrap. But this should also work for what you want.
https://jsfiddle.net/w5qfvezg/
.video-display {
background-color: black;
min-height: 200px;
}
.video-description {
background-color: red;
min-height: 50px;
}
body {
padding: 5%;
padding-left: 10%;
padding-right: 10%;
background-color: #999;
}
.video-item {
width: 49%;
float: left;
margin-bottom: 20px;
}
.video-spacer {
width: 2%;
float: left;
min-height: 200px;
}
#segment-content {
background-color: blue;
min-height: 200px;
}
<body>
<div id='video-content'>
<div class='video-item' id='source'>
<div class='video-display' id="s-video">
</div>
<div class='video-description' id="source-controls">
</div>
</div>
<div class='video-spacer'>
</div>
<div class='video-item' id='preview'>
<div class='video-display' id='p-video'>
</div>
<div class='video-description' id="preview-controls">
</div>
</div>
</div>
<div style='clear:both'>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</body>
Related
hi will be available in the shape of circle. I got the code for responsive circle with text but the problem is this hat i am not able to inline two circles in one line . I tried float:left; as well as display:inline-block; but both doesn't work for me. Display:inline-block; inline the circles but the text inside it overlaps.
THIS is my HTML:
/*------NAV--BAR--*/
* .fa-navicon{padding:8px; font-size:7vw ;}
.nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
.nav-bar input{ border:; outline:none; margin-left:10px;
width:70%;
}
.nav-bar input::placeholder{color:grey; margin-left:10px;}
/*--copied-code---*/
.circle {
position: relative;
display: block;
margin: 2em 0;
background-color: transparent;
color: #222;
text-align: center;
}
.circle:after {
display: block;
padding-bottom: 30%;
width: 30%;
height: 0;
border-radius: 50%;
background-color: #ddd;
content: "";
}
.circle__inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30%;
height: %;
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
#media (min-width: 480px) {
.circle__content {
font-size: 2em;
}
}
#media (min-width: 768px) {
.circle__content {
font-size: 4em;
}
}
}
<div class="nav-bar">
<input type="search" placeholder="Search...">
<i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
<div class="option-wrapper">
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Global</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Friends</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Classroom</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Games</div>
</div>
</div>
</div>
</div>
</div>
I want two or three circles on every line depending upon the user screen size.
Sorry if i did something wrong. This is my first quest. in stackoverflow.Thnks in advance.
Check this, adjust the browser size to view the responsiveness. You can also change the circle dimensions and font size depending upon your media-size.
If you need the full site to be responsive, I suggest to implement it with the popular CSS framework "Bootstrap", its pretty easy - Bootstrap-Grid-HowItworks
.fa-navicon{padding:8px; font-size:7vw ;}
.nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
.nav-bar input{ border:; outline:none; margin-left:10px;
width:70%;
}
.nav-bar input::placeholder{color:grey; margin-left:10px;}
.circle-wrapper {
float: left;
margin: 10px;
}
.circle {
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #f2f2f2;
border-spacing: 10px;
}
#media (min-width: 480px) {
.circle{
height: 150px;
width: 150px;
font-size: 30px;
}
}
#media (min-width: 768px) {
.circle {
height: 150px;
width: 150px;
font-size: 30px;
}
}
<div class="nav-bar">
<input type="search" placeholder="Search...">
<i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
<div class="option-wrapper">
<div class="circle-wrapper">
<div class="circle">Global</div>
</div>
<div class="circle-wrapper">
<div class="circle">Friends</div>
</div>
<div class="circle-wrapper">
<div class="circle">Classroom</div>
</div>
<div class="circle-wrapper">
<div class="circle">Games</div>
</div>
<div class="circle-wrapper">
<div class="circle">School</div>
</div>
<div class="circle-wrapper">
<div class="circle">College</div>
</div>
</div>
</div>
I don't really know how to put it in words but I do have pictures which will quite give you an idea of my problem. Seems like float is giving me the problem/
This is what I am trying to accomplish:
This is my problem:
Here's the code:
body {
background: #C52C2C;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
What I would like to do is change the height of the portfolio section but when I change the height, nothing changes. If I remove the boxes then I can change the height. How would I fix this?
Thank you if you well understood this.
That is because of impropper value of the display property for View More element. You should set it to be:
view_more{ display: block; } // Please replace **view_more** with the correct value to select the element
Also do that for the downward arrow.
Do you mean something like this?
https://jsfiddle.net/xsjjo654/1/
Code Sample:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
h1.title {
text-align: center;
color: white;
font-size: 40pt;
margin: 5px auto;
}
#portfolio {
overflow: auto;
clear: both;
min-height: 400px;
width: 100%;
background-color: #c62828;
text-align: center;
}
#portfolio > .wrapper {
display: table;
width: 100%;
}
#portfolio > .wrapper > section {
display: table-cell;
vertical-align: middle;
}
section.side-left {
text-align: right;
}
section.side-right {
text-align: left;
}
section.side-center {
width: 930px;
}
.images {
display: inline-block;
}
.images .box {
width: 300px;
height: 300px;
background-color: white;
display: inline-block;
float: left;
margin: 1px;
}
.button {
cursor: pointer;
background: transparent;
outline: 0;
border: none;
}
.button.round, .button.round-alt {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 30px;
}
.button.round {
background-color: white;
color: #c62828;
}
.button.round-alt {
border: 2px solid white;
color: white;
margin: 30px;
}
.button.square {
border: 2px solid white;
color: white;
font-size: 14pt;
padding: 12px 30px;
margin: 40px auto;
}
/* (c) 2016 David#Refoua.me, www.Refoua.me */
</style>
</head>
<body>
<div id="portfolio">
<h1 class="title">
Portfolio
</h1>
<div class="wrapper">
<section class="side-left">
<button class="button round prev">
←
</button>
</section>
<section class="side-center">
<div class="images">
<!-- Top Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<!-- Bottom Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
<section class="side-right">
<button class="button round prev">
→
</button>
</section>
</div>
<button class="button square more">
View More...
</button>
<br>
<button class="button round-alt down">
↓
</button>
</div>
</body>
Try Bootstrap. It let's you play around with some cool grid functionality AND it's RESPONSIVE!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<style>
.inner {
height:350px;
background-color:white;
margin-top:5px;
margin-left:-25px;}
body {background-color:red;}
</style>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/js/bootstrap.min.js"> </script>
Output: http://s28.postimg.org/9y69346tp/test.png You can add more rows later if you're going to refresh your pictures from database automatically.
Hope that helps! Cheers!
if you give a width to images and margin:auto it should center much easier :)
body {
background: #C52C2C;
}
.images {
width:912px;
margin:auto;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
use this: clearfix
The problem here is that your container doesn't take the height of the inner boxes in consideration, so if you add the clearfix to it that will do the trick
I am trying to create a list that will show messages. The image below is what I wish to achive. Check the codepen for how it looks as of now!:
As you can see apart of the ui jumps up as it it utilizing float. I can't set a fixed height on the avatar red area as the message area can vary in height (basically the whole message can vary in size). I've gotten it to work by removing the float on the text-container however I'm not able to lineup the green arrow then. Any ideas?
Hree is codepen code for yous to fiddle with!
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="center">
<ol id="holder" class="scroll" style="background:pink;">
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
</div>
<div class="text-arrow">
</div>
</li>
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
</div>
<div class="text-arrow">
</div>
</li>
</ol>
</div>
</body>
</html>
css:
/* Styles go here */
div.center
{
max-width: 1200px;
width: 1000px;
min-width:800px;
display: block;
margin-left: auto;
margin-right: auto;
}
ol {
list-style-type: none;
padding: 0em;
margin: 0em;
}
li {
display: inline;
margin: 0em;
padding: 0em;
left: 0em;
}
message {
background: red;
width: 100%;
height: auto;
}
div.thumb-fav-container {
margin-top: 20px;
float:left;
padding:10px;
width:70px;
background: lime;
}
div.thumb-fav-row {
height:20px;
margin-left:5px;
margin-bottom:5px;
background: silver;
}
div.thumb {
float:left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-size: contain;
}
div.fav {
float: left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png');
background-size: contain;
}
div.thumb-fav-num {
float: left;
margin-left:10px;
text-align: center;
background: pink;
}
div.text-container {
float:left;
margin-left:10px;
margin-top: 10px;
width:700px;
padding:20px;
background: silver;
}
div.text-arrow {
margin-top:20px;
float:left;
width: 0;
height: 0;
border-bottom: 30px solid transparent;
border-left: 30px solid lime;
border-top: 30px solid transparent;
}
div.message-avatar-container {
float:right;
padding:10px;
margin-top: 20px;
width:100px;
height:70px;
background: red;
}
div.message-avatar {
float:left;
width:50px;
height:50px;
background-image:url('http://findicons.com/files/icons/1072/face_avatars/300/a04.png');
background-size: contain;
}
Little mistake in your CSS:
Instead of:
message {
background: red;
width: 100%;
height: auto;
}
You should have:
.message {
clear:both;
float:left;
height: auto;
}
This yields the expected output (demo):
I have two html files: index and portfolio. They use the same stylesheet. In index two divs extend to the full width of the container. However in portfolio the div only extends as long as the <h6>. I cannot figure out what is going on and how this could possibly be happening.
.container {
padding-top: 35px;
padding-left:18px;
padding-right:18px;
display:inline-block;
font-size: 0px;
overflow: hidden;
}
.spacer {
height: 2px;
}
h6 {
position:relative;
font-family:"code_boldregular";
font-size:18px;
margin: 0px;
top: 17.5px;
text-align:center;
}
#link1 {
position:relative;
height: 52.5px;
background-color: #545454;
width: 100%;
}
#link2 {
height: 52.5px;
background-color: #545454;
width: 100%;
}
<div class="container">
<div class="spacer"></div>
<div id="navlinks2">
<div id="link1" class="smalllinks"><a id="homeLNK" href="index.html"><h6>Home</h6></a>
</div>
<div class="spacer"></div>
<div id="link2" class="smalllinks"><h6>Portfolio</h6>
</div>
</div>
<div class="spacer"></div>
</div>
Here is my HTML Code:
<body>
<img id="logo" src="logo.png">
<br>
<!-- Start: Page Buttons -->
<div align="center" id="buttonBar">
<div class="menuButton" >
Home
</div>
<div class="menuButton" >
Author
</div>
<div class="menuButton" >
Literature
</div>
<div class="menuButton" >
Projects
</div>
<div class="menuButton" >
Pictures
</div>
<div class="menuButton" >
How To...
</div>
<div class="menuButton" >
Updater
</div>
<div class="menuButton" >
Copyright
</div>
</div>
<!-- End: Page Buttons -->
<h2>Welcome</h2>
</body>
And here is my CSS:
#buttonBar{
position: fixed;
width: 100%;
z-index=1;
padding-top: 65px;
}
.menuButton{
height: 50px;
width: 125px;
background-color: lightblue;
display:inline-block;
text-align: center;
line-height: 50px;
margin-left: 5px;
border-radius: 10px;
}
.menuButtonText{
font-size: 25px;
text-align: center;
line-height: 50px;
color: black;
text-decoration: none;
}
#logo{
padding-top: 15px;
padding-left: 15px;
}
The h2 I have in my HTML, will for some reason go under the logo(img) but is staying above the div's. How do I get my H2, and for anything else I put, under the Div's?
I have created you a fiddle to solve your problem: http://jsfiddle.net/vwqk411e/2
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
<div id="container">
<h2>Hello</h2>
</div>
CSS
#container {
margin-top: 100px;
}
nav {
width: 100%;
position:fixed;
border-bottom: 1px solid grey;
top: 0;
left: 0;
background-color:#fff;
}
ul {
width: auto;
}
li {
display:inline-block;
float:left;
padding: 10px;
margin: 3px;
border: 1px solid red;
}
Change the beginning markup to this:
<div align="center" id="buttonBar">
<div style="text-align: left; padding:0 0 15px 15px; vetical-align: top;"><img id="logo" src="logo.png"><br></div>
<div class="menuButton" >
Home
</div>
Modify your css to this:
#buttonBar{
position: fixed;
width: 100%;
top: 0;
left; 0;
background: #fff;
}
You can pull the inline styling I made into the css, and adjust the padding for the image to your specification.