I have a div, with the style shown below, and I would like a nice border around it.
The border-radius works, but the border-style and border-width does not show. I can't see why this is happening.
<html>
<head>
<style>
div.request{
background-color: #CDCDCD;
margin-left:auto;
margin-right:auto;
display:block;
width:700px;
height:2000px;
text-align:center;
box-shadow: 10px 10px 15px #000000
border-style: outset;
border-width:5px;
border-color: #FFFFFF;
border-radius:25px;
padding:10px;
}
</style>
</head>
<body>
<div class='request'>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
</p>
</div>
You missed a ; near box-shadow: 10px 10px 15px #000000. Every CSS-Rule -expect the last one- must have the closing semicolon. To prevent errors you should always add the ;.
http://jsfiddle.net/Rnx7m/
/** This is always working */
div.request{
margin: 25px;
padding:10px /* missing semicolon ignored by browsers */
}
/** This is an error */
div.request{
margin: 25px /* Breaking */
padding:10px;
}
the closing ; is missing at the end of the following line: box-shadow: 10px 10px 15px #000000
Related
I'm just now trying to learn the flexbox layout as it seems like it could simplify many things.
I'm trying to get 2 columns side by side with 1 60% width and the other 30% width.
Even though I specify the width in the flex-basis property they stay the same size, evenly spaced on the page.
http://codepen.io/anon/pen/VLrWZY
HTML:
<article class="fullCol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<section class="flexWrap">
<article class="halfCol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article class="halfCol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<!-- Put top and bottom drop shadow on navbar -->
</section>
</section>
CSS:
article, section, nav, aside {
display: block;
}
#wrapper {
}
.flexWrap {
display: flex;
-webkit-flex-flow: row || wrap;
flex-flow: row || wrap;
-webkit-justify-content: center;
justify-content: center;
}
.fullCol {
width: 100%;
border-bottom: 1px solid black;
margin: 0px 0px 15px 0px;
padding: 10px;
box-shadow: 0 4px 2px -2px gray;
}
.halfCol {
box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
width: 45%;
border: 1px solid black;
margin: 0px 5px 0px 5px;
padding: 10px;
}
.mainCol {
box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
border: 1px solid black;
margin: 0px 5px 0px 5px;
padding: 10px;
-webkit-flex-basis: auto | 60%; /* Safari */
flex-basis: auto | 60%;
}
.sideCol {
box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
width: 30%;
border: 1px solid black;
margin: 0px 5px 0px 5px;
padding: 10px;
-webkit-flex-basis: auto | 30%; /* Safari */
flex-basis: auto | 30%;
}
you need to use -webkit-flex: initial; and flex: initial; on the flex child you are trying to define a width on.
I am trying to get the content that is highlighted in red in the screenshot below to go where the green lines are, however I cannot get it to work. I have tried clear:both; and clear:left; which both haven't worked. Both of them position it where it is in the screenshot:
Here is my code for the box and that part of the page:
.contentcontainer{
width:100%;
background:#FFF;
border-bottom: medium solid #d13f4a;
margin-top:20px;
height:110px;
}
.cctitle{
margin-top:20px;
margin-left:20px;
font-family: 'Montserrat', sans-serif;
font-size:15px;
font-weight: 400;
float: left;
}
.cctext{
width: 535px;
max-height: 35px;
margin-left:20px;
font-family: 'Montserrat', sans-serif;
font-size:13px;
font-weight: 400;
overflow:hidden;
clear:left;
float: left;
}
.ccthumb{
float: left;
background: #000;
width: 195px;
height: 110px;
}
<div class="contentcontainer">
<div class="ccthumb">
</div>
<div class="cctitle">Title Goes Here</div>
<div class="cctext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
Try removing floats:
.cctitle, .cctext { float: none; }
The issue is with the clear: left in .cctext. It is wrapping around all your floats. From looking at this, it looks like you might not need as many.
Remove your styles to .cctext and .cctitle and put there just (of course, leave there font-size, etc. - I made the code simple as possible).
.cctitle, .cctext {margin: 0 0 0 210px;}
http://jsfiddle.net/qukpcq8f/2/
The main task is to remove float, clear and overflow.
Your div is being pushed down because it is too wide. Remove width:
.contentcontainer{
width:100%;
background:#FFF;
border-bottom: medium solid #d13f4a;
margin-top:20px;
height:110px;
}
.cctitle{
margin-top:20px;
margin-left:20px;
font-family: 'Montserrat', sans-serif;
font-size:15px;
font-weight: 400;
}
.cctext{
max-height: 35px;
margin-left:20px;
font-family: 'Montserrat', sans-serif;
font-size:13px;
font-weight: 400;
overflow:hidden;
}
.ccthumb{
float: left;
background: #000;
width: 195px;
height: 110px;
}
<div class="contentcontainer">
<div class="ccthumb">
</div>
<div class="cctitle">Title Goes Here</div>
<div class="cctext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
You can put a wrapper around your title and text and use float: left; on it
fiddle
http://jsfiddle.net/Hastig/4e9socmv/5/
Make sure you stretch the view pane so its wide enough so as the content div isn't pushed below due to too narrow a width.
another fiddle where you just have to float the thumb
http://jsfiddle.net/Hastig/4e9socmv/4/
I need help making my background-image have an opacity but not the content thats inside the div? How do I do this and what's wrong with my code? I've tried opacty:numbers and this.
My current code:
#bread_ui {
background: url(../images/bread_ui.png);
margin: 18px auto 15px auto;
width: 1000px;
height: 50px;
border: 3px dotted #999;
border-radius: 10px;
-webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,.3));
}
.ui p {
font-family: Arial;
font-weight: bold;
font-size: 13px;
color: #000;
font-variant: small-caps;
}
.ui a {
text-decoration: underline;
color: #000;
}
My html:
<div id="bread_ui" style="padding-top:25px;">
<div class="ui" style="text-align:right; margin-right:15px"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
My result: http://prntscr.com/2z70bh
As you can see, the paragraph has a linear gradient to, how do I make it so it only applies to the background-image?
You can actually just put background in front of the linear gradient
background: -webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,.3));
Documentation:
http://www.w3schools.com/css/css3_gradients.asp
Here's the Jfiddle:
http://jsfiddle.net/mCv25/
I've two (or more) DIVs inside a list item and I'm not able to make the last one to fit the remaining height of its container.
This is the code:
CSS
div{margin: 5px;}
ul{
height: 300px;/*it's calculated via js*/
width: 250px;/*it's calculated via js*/
padding: 0;/*don't change it*/
margin: 0;/*don't change it*/
background-color: #F5EBD6;
border: 4px solid orange;
}
li{
list-style-type: none;
background-color: #E0E5F5;
border: 2px solid blue;
}
.item-title{
background-color: #EDF5E0;
border: 2px solid green;
}
.item-description{
background-color: #FDF1FB;
border: 2px solid fuchsia;
}
.item-description>div{
background-color:rgba(252,255,170,0.3);
}
HTML
<ul>
<li>
<div class="item-title">Title</div>
<div class="item-description">
<div style="margin: 0px; padding: 0px; border: 0px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</li>
Here's the Fiddle.
I'd like that the .item-description div (fuchsia bordered div in the Fiddle) will stay inside listItem (the orange bordered element).
The div inside the description, the actual text container, should not be modified in its height.
Here's the Fiddle that shows how it should look like.
On the right the result I'd like to reach
I'd like to solve the problem using css/css3, not js and without changing the HTML, if possible.
Can you help me?
Change the UL css like below,
ul {
background-color: #F5EBD6;
border: 4px solid orange;
float: left;
margin: 0;
min-height: 300px;
padding: 0;
width: 250px;
}
it will works.
Adding
overflow-y:scroll;
to .item-description
might put all the content inside the div.AM not sure this is what you are expecting
http://jsfiddle.net/Pdaj8/2/
I want to position a div in the middle of the page. The solution I found on the internet assumes that the div will be of static size. I need the div to be in the middle, if the content is the right size, but if it is over the size of the div, it should become bigger, and eventually allow scrolling without changing the width.
PS: I don't need support for IE, just XULRunner (Firefox) and Webkit based browsers.
Edit: The whole page must be scrollable, not just the content div. And I need to preserve all the line breaks.
Here you go:
<style>
.container{
border: 1px solid Red;
width: 300px;
height: 500px;
display:table-cell;
vertical-align:middle;
}
.content{
border: 1px solid Blue;
width: 100px;
height:auto;
min-height: 100px;
max-height:200px;
margin-left:auto;
margin-right:auto;
overflow:auto;
}
</style>
<div class="container">
<div class="content">
add content here
</div>
</div>
How it looks like:
Test it.
If you don't need IE support use vertical-align property:
make the body displays as table
an outer div as table-cell and set it's vertical-align as 'middle'
like:
<style type="text/css" media="screen">
html{
height: 100%;
}
body {
width: 100%;
height: 100%;
display: table;
margin: 0;
}
#div_1 {
display: table-cell;
text-align: center;
vertical-align: middle;
line-height: 100%;
}
#div_2 {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: auto;
}
</style>
<body>
<div id="div_1">
<div id="div_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
EDIT: A more cross-browser implementation you would make the body like that:
<body>
<table>
<tr><td>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</td></tr>
</table>
</body>
once display: table doesn't works well with IE7 and early (looks like should work on ie8, but I still couldn't make it)