I have an html file(index.html) and a css file(style.css), there is the jsfiddle : http://jsfiddle.net/RZm5y/2/ .
index.html
<html>
<head>
<title>demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="nav">
<div class="logo">artistLog</div>
</div>
<div class="topbar">This is the top search/login bar</div>
<div class="content">
<div class="card">
<img class="cover" src="img/cover.png" />
</div>
<div class="card">Description</div>
</div>
</body>
</html>
style.css
html, body {
background: #343434;
margin:0px;
height: 100%;
overflow: hidden;
position: relative;
}
.nav {
background: #565656;
color: #b4b4b4;
margin-right:0px;
bottom: 0;
left: 0;
position: absolute;
top: 0;
border-right:7px solid #2b2b2b;
width: 86px;
}
.nav .logo {
background:#353535;
height:60px;
cursor:pointer;
border-bottom:1px solid #353535;
}
.topbar {
background: #1d1d1d;
border-bottom: 1px solid #8d8d8d;
height: 60px;
left: 86px;
position: absolute;
right: 0;
top: 0;
}
.content {
bottom: 0;
left: 120px;
overflow: auto;
position: absolute;
right: 0;
top: 62px;
padding: 50px 25px 25px 20px;
}
.content .card {
background: #101010;
color:#a4a4a4;
width:250px;
height:320px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-right:10px;
margin-bottom: 15px;
}
.content .card .cover {
max-width:250px;
max-height:140px;
background: transparent;
float:left;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
I want the cards inside the content to be showed one after another not one under another when the display is big enough to show minimum 2 cards one after another else show one under another.
You could achieve that simply by floating the cards to a side.
Example Here.
.content .card {
background: #101010;
color:#a4a4a4;
width:250px;
height:320px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-right:10px;
margin-bottom: 15px;
float: left; /* <-- Added declaration */
}
Since you have added overflow: auto; to the .content element, the float is already cleared. However you might want to consider this topic:
What does the CSS rule clear: both do?
Related
I need again help about create rounded caps on my element that have a gap.
I want to do something like this :
[rectange with gap and round cap][1]
[1]: https://i.stack.imgur.com/O781h.png
After some research and trying, I ended up doing this (e.g my code). I'm happy with it, but I'd like to create more aesthetic rounded caps like in my exemple. Can anyone help me, thank you in advance.
span {
font-size: 20px;
background: #fff;
position:absolute;
top: -20px;
right: 10px;
left: 10px;
padding:4px;
}
p{
border-radius: 25px;
width: 250px;
height: 150px;
border:10px solid #000;
background-color:white;
position:relative;
padding-top:15px;
}
<body class="container">
<!--///////////////////////////////// début header//////////////////////////// -->
<div id="box">
<p><span>Title will come here</span></p>
</div>
</body>
You can add some cricles to the ends of the lines. It may need slight adjusting.
span {
font-size: 20px;
background: #fff;
position: absolute;
top: -20px;
right: 10px;
left: 10px;
padding: 4px;
}
p {
border-radius: 25px;
width: 250px;
height: 150px;
border: 10px solid #000;
background-color: white;
position: relative;
padding-top: 15px;
}
p::after {
content: "";
position: absolute;
top: -9.3px;
left: 5px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
z-index: 1;
}
p::before {
content: "";
position: absolute;
top: -9.3px;
left: 235px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
z-index: 1;
}
<body class="container">
<!--///////////////////////////////// début header//////////////////////////// -->
<div id="box">
<span id="cap"></span>
<p><span>Title will come here</span></p>
</div>
</body>
I want to create a line with tick marks and a ball (like a scale).
However the tutorials for this suggest using absolute positioning, or float. That works partially, but when I change the screen size, the divs shift out of place.
.line {
width: 100%;
min-height: 5px;
background-color: black;
padding: 20px;
margin-top: 20%;
}
.point {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border: solid 21px #f00;
width: 50px;
height: 50px;
background-color: red;
float: right;
overflow: visible;
position: relative;
z-index: 1000;
padding: 20px;
margin-top: -15%;
}
<div class="line"></div>
<div class="point"></div>
Wrap it in a div and do use absolute positioning for the inner divs, also, don't use margin-top percentages (https://jsfiddle.net/xv259d4p/1/):
.line {
width:100%;
min-height:5px;
background-color:black;
padding:20px;
margin-top:60px;
position: absolute;
}
.point {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border:solid 21px #f00;
width:50px;
height:50px;
background-color:red;
float: right;
overflow: visible;
position: absolute;
z-index: 1000;
padding:20px;
right: 0;
margin-top: 20px;
}
.outer {
display: block;
width: 100%;
top: 0px;
left: 0px;
position: relative;
}
<div class="outer">
<div class="line"> </div>
<div class="point"></div>
</div>
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
The link below shows a simplified version of a website I'm working on and the problem I'm presented with.
I have several encapsulated box elements. There is the main container, and several divs within that container that will hold content, as that content expands, I need the container div to expand automatically. I can't seem to accomplish this unless I add a specific height in the CSS.
JSFiddle Example
HTML:
<body>
<div id="container">
<div id="block1">
<div id="one">one</div>
<div id="two">two<br />two<br /></div>
<div id="three">three<br />three<br />three<br /></div>
<div id="four">four<br />four<br />four<br />four<br /></div>
</div>
</div>
</body>
CSS:
#container {
width: 1050px;
margin: auto;
padding: 5px;
background-color: #ededf0;
background:
url("http://wguayan.comuv.com/brushed_metal_clear_apple.jpg") repeat;
}
#one, #two, #three, #four {
border-width: 1px;
border-color: black;
border-style: solid;
background-color: white;
border-radius:6px;
-moz-border-radius:6px;
/* Firefox 3.6 and earlier */
}
#one {
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#two {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 5px;
text-align: center;
box-shadow: 9px 9px 12px #888888;
}
#three {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#four {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#block1 {
width: 100%;
border-width: 1px;
border-color: black;
border-style: solid;
}
Just apply overflow: hidden to #block1
here is my how i want the website design to be :
so i am in the initial step, my query is how do i place the slider div upon the header div and i want it to be in the centre. my code what i have used is :
<div id="header">
<div class="slider">
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
body {
margin:0px;
padding:0px;
background:#fff;
}
#header
{
background:#859685;
height:300px;
}
.slider
{
margin-left:auto;
margin-right:auto;
margin-top:50px;
position:absolute;
z-index:1;
width:980px;
height:200px;
border: 4px #666 solid;
}
.content
{
margin-left: auto;
margin-right: auto;
margin-bottom:10px;
margin-top:10px;
width:980px;
height:400px;
background:#fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.footer
{
margin-top:10px;
margin-bottom:10px;
padding: 0;
height:300px;
background:#98AFC7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background:#111312;
}
here is my fiddle jsfiddle.net/hdmep/
Thanx in advance!
Change your slider class to something like this:
.slider
{
margin-left:auto;
margin-right:auto;
left:0;
right:0;
margin-top:250px;
position:absolute;
width:980px;
height:200px;
border: 4px #666 solid;
}
Check out this Working Fiddle
I changed the sizes a little bit (so it'll look nice in the Fiddle)
this is all about absolute positioning.
also if you're just going to use background for color, use background-color instead of background
and, notice the short way of using margin for all sides at once.
CSS:
#header
{
background-color: #859685;
height: 100px;
position: relative; /*the slider is now relative to the header*/
}
.slider
{
position:absolute;
width: 80%; /*80% of header*/
height: 50%; /* 50% of header*/
border: 4px #666 solid;
top: 70%;
left: 10%;
}
.content
{
margin: 10px auto;
height: 100px;
background-color: azure;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.footer
{
margin: 10px 0;
height: 100px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #111312;
}
try this:
DEMO
update slider class:
.slider {
margin-left: auto;
margin-right: auto;
bottom: -150px;
position: relative;
z-index: 1;
width: 980px;
height: 200px;
border: 4px #666 solid;
}