I want my screen to have this box-shadow property so there's a box with all the content inside of the screen. I also want to place an image as the landing section and the image will pulsate then fade into the rest of the web page. I cannot get the image to center in the box I have created.
Not sure how to do this
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin: 0;
background: #eee;
height: auto;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
main {
max-width: 900px;
margin: auto;
box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.2);
}
#landing {
background: white;
}
i {
background: rgb(0, 0, 0);
border-radius: 20px;
font-size: 25px;
position: relative;
margin-right: 10px;
border-radius: 50%;
display: inline-block;
padding: 10px;
}
img {
display: block;
}
<body>
<main>
<!--Landing Page-->
<div id="landing">
<div id="landing-image">
<i><img src="/img/diamond"></i>
</div>
</div>
<!--Navigation Page-->
<section id="navigation">
</section>
<!--Developer Page-->
<section id="developer">
</section>
<!--Projects Page-->
<section id="projects">
</section>
<!--Contact Page-->
<section id="contact">
</section>
</main>
</body>
I want the diamond and the circle around it to be smaller and in the middle of the box on the screen.
Add this CSS to align the image and the circle to the center.
#landing-image {
text-align: center;
}
For reducing size you can use height, width CSS properties for the box and the image.
Related
https://ibb.co/tL337vV
Look closely at the top right corner of the page you will see there is an empty space that I can't get rid of.
this only appears on actual phones and tablets not on desktop even if squeeze the browser.
<div class="banner">
<div class="banner-content">
<div class="banner-text">
<h1 class="welcoming"></h1>
</div>
</div>
</div>
*{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
html, body {
margin: 0;
}
body {
background-color: rgb(255, 253, 250);
}
/*header*/
.banner {
background-color: rgb(153, 217, 234);
max-height: 200px;
}
.banner-content {
padding: 20px;
align-items: center;
}
.banner-text {
flex-grow: 1;
line-height: 1.4;
}
.welcoming {
color: aliceblue;
text-align: center;
font-weight: bold;
font-size: 120px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
text-transform: uppercase;
}
also you can see that the search bar isn't aligned properly, any suggestions?
<div class="wrapper">
<div class="search-input">
<a href="" target="_blank" hidden></a>
<input type="text" class="search-box" placeholder="Pick a topic, person, something">
<div class="autocom-box">
<!-- here list are inserted from javascript -->
</div>
<div class="icon"><i class="fas fa-search"></i></div>
</div>
</div>
.wrapper{
max-width: 810px;
margin: 150px auto;
}
.wrapper .search-input {
text-align: center;
margin: 15px;
}
.wrapper .search-input{
background: #fff;
width: 100%;
border-radius: 5px;
position: relative;
box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
font-family: 'Poppins', sans-serif;
}
Looks like something is causing an overflow on the page. One trick that I often use in such situation is going into dev tools and adding this style rule:
* {
background-color: rgba(2,2,240, 0.1) !important;
}
It lets you see every elements position and check which one is causing an overflow
Remove width: 100%; from your .wrapper .search-input class
Edit: I'm assuming you wanted to target your input field when applying the width: 100%;, so you could add this to your CSS:
.wrapper .search-box {
width: 100%;
}
I do not understand why the rightcontent and leftcontent divs do not stay in the centerbody div when the number of "< p>"s is increased.
I have attached a picture of what happens.
The dots should stay inside the white space. And the white space should auto resize according to the length of the content. Shouldnt it?
<html>
<style media="screen" type="text/css">
body {
background-color: #efefef;
}
h1 {
color: white;
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
p {
font-family: verdana;
font-size: 20px;
}
#centerbody { /*this is the style of the main body white box */
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px 5px 5px 5px;
padding: 20px;
margin: 100px 50px 100px 50px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20px;
}
#rightContent {
float:right;
width: 50%;
margin-bottom: 20px;
}
#leftContent {
float:left;
width: 50%;
margin-bottom: 20px;
}
</style>
<body>
<div id="centerbody">
<div id="rightContent">
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</div>
<div id="leftContent">
right side stuff
</div>
</div>
</body>
</html>
You can do a few things:
Float #centerbody left or right.
Set #centerbody to display:inline-block
Use the "clear" trick, by having an empty DIV after your floating DIVs that has "clear:both"
To explain: a floating element's height is not added to its container. Floating elements DO listen to the height of other floating elements. So by setting your parent container to float, or inline-block, you're letting it take into account its child elements' heights.
The clear trick is an old move if the other two options aren't viable for the rest of your project, as it injects a normal block element into the container, working as a signal for the container on where the "end " of the container should be.
Your content is coming out of the div's that are being floated.
You probably don't know what the float has an impact on it's parent.
You should definitely read the following article All About Floats
Note: It's one of the most important concepts in CSS(another one is positioning) so I recommend you to read the mentioned article.
If you want a quick answer then do this:
{parent-div}:before, {parent-div}:after{
clear: both;
content: "";
display: block; //or inline-block
}
What clear and content do is explained well in the mentioned article.
As an alternative, you can set your parent container as a flex box and give your parent an explicit width
body {
background-color: #efefef;
}
h1 {
color: white;
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
p {
font-family: verdana;
font-size: 20px;
}
#centerbody { /*this is the style of the main body white box */
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px 5px 5px 5px;
padding: 20px;
width: 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 100px 50px 100px 50px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20px;
}
#rightContent {
width: 50%;
margin-bottom: 20px;
}
#leftContent {
width: 50%;
margin-bottom: 20px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<body>
<div id="centerbody">
<div id="leftContent">
<p>
hello
</p>
</div>
<div id="rightContent">
right side stuff
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</div>
</div>
</body>
Please Check the Edit history to get a clear idea
maybe this is what you are looking for
body {
background-color: #efefef;
}
h1 {
color: white;
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
p {
font-family: verdana;
font-size: 20px;
}
#centerbody { /*this is the style of the main body white box */
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px 5px 5px 5px;
padding: 20px;
margin: 100px 50px 100px 50px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20px;
}
#rightContent {
float:right;
text-align: center;
width: 50%;
margin-bottom: 20px;
}
#leftContent {
line-height: 300px;
vertical-align: middle;
float:left;
width: 50%;
margin-bottom: 20px;
}
#empty{
clear:both;
}
<div id="centerbody">
<div id="leftContent">
right side stuff
</div>
<div id="rightContent">
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</div>
<div id="empty"></div>
</div>
I am Trying to create this One page containing different divs with 100% width.
But, when I insert a 'h2' at top of div, itcreates gap between two div's.
assigning top margin removes this gap, but I want the 'h2' at top only.
here's JSFiddle
HTML:
html,
body {
height: 100% !important;
width: 100% !important;
margin: 0px;
padding: 0px;
}
.mainDiv {
height: 500% !important;
width: 100% !important;
}
.page {
height: 20% !important;
width: 100% !important;
text-align: center;
}
#headerDiv {
height: 15%;
position: fixed;
background-color: #7f4c76;
width: 100%;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
}
#div1 {
padding-top: 5%;
background-color: #334960;
}
#div2 {
background-color: #f17c72;
}
#div3 {
background-color: #32ac97;
}
#div4 {
background-color: black;
}
#div5 {
background-color: yellow;
}
h1 {
color: #E6E6E6;
margin-left: 50px;
font-family: "MS Sans Serif", Geneva, sans-serif;
font-size: 300%;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
}
h2 {
color: #E6E6E6;
font-weight: normal;
font-family: 'Signika', sans-serif;
font-size: 300%;
}
<div class="mainDiv">
<div id="headerDiv">
<h1>CSS3 Demo </h1>
</div>
<div id="div1" class="page">
<h2>Text Effects Demo</h2>
</div>
<div id="div2" class="page">
<h2>Transition Demo</h2>
</div>
<div id="div3" class="page">
<h2>Animation Demo</h2>
</div>
<div id="div4" class="page">
<h2>Multiple Columns</h2>
</div>
<div id="div5" class="page">
<h2>Multiple Columns</h2>
</div>
</div>
Please Help.
Edit screenshot added:
Add this to your h2
h2 {
margin:0;
}
You issue is that your div has a default margin, of which can be overwritten using this styling
If I understood you correctly, you want the <h1>from the headerDivto have margin-top:0px; if this is what you want then the fix is quite simple:
#headerDiv h1 {
margin-top:0px;
}
Or if you want it to be only the direct descendants from the headerDiv you could do the following:
#headerDiv > h1 {
margin-top:0px;
}
Here you can find the fiddle updated: http://jsfiddle.net/s0p8ogdb/3/
After seeing the screenshot recently added you can fix this simply by making the page class display:inline-block, here's an updated fiddle: http://jsfiddle.net/s0p8ogdb/4/
Try this :
h2 {
color: #E6E6E6;
font-weight: normal;
font-family: 'Signika', sans-serif;
font-size: 300%;
margin-top:0;
}
#div1 h2 {
padding-top: 1em
}
This is probably a silly question but I can't seem to figure out how to auto center my section
live demo: http://iam.colum.edu/students/jordan.max/algorerhythm/index.html#
I have tried to add
margin: 0 auto;
to my div#content, with no luck.
The only way I was able to get it be centered was manually entering in
margin-left: xxpx
but I want it to be centered based on what content is in it. Any thoughts? Thanks in advance.
Rest of CSS
body
{
background: #C1CDC1;
}
h1
{
}
h2
{
margin-top: -40px;
margin-left: 120px;
}
h1.mainT
{
width: 590px;
font-family: 'Montserrat', sans-serif;
margin-left: 10px;
font-size: 2.5em;
}
h2.subT
{
width: 130px;
font-family: 'Open Sans Condensed', sans-serif;
}
h3
{
display: inline-block;
font-family: 'Open Sans Condensed', sans-serif;
}
footer
{
color: #FCFCFC;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: .85em;
}
section#nav
{
width: auto;
margin-left: 550px;
margin-top: -80px;
padding: 5px;
word-spacing: 80px;
}
div#navContainer
{
height: 100px;
background: #FCFCFC; /* grey99*/
box-shadow: 2px 3px 5px #333;
}
div#content
{
height: 100px;
width: auto;
background: #FCFCFC; /* grey99*/
box-shadow: 2px 3px 5px #333;
display: inline-block;
}
section#contentContainer
{
float: none;
padding-top: 20px;
margin: 0 auto;
}
HTML
<script>
$(document).ready(function () {
$('section#contentContainer').hide();
var $as = $('a.contentDown').click(function () {
//show back button, move it from left +300
$('section').show();
}); //closes click for contentDown
}); //closes ready
</script>
</head>
<body>
<div id="navContainer">
<h1 class="mainT"> Al Gore Rhythm Labs </h1>
<h2 class="subT"> Chicago, IL </h2>
<section id="nav">
<h3> Assignments </h3>
<h3> Writings </h3>
<h3> Presentations </h3>
</section>
</div>
<section id="contentContainer">
<div id="content">
<p> hello motto
</p>
</div>
</section>
</body>
<footer>
<p> Jordan Max 2014</p>
</footer>
</html>
Maybe this is the solution (don't forget to remove style="display: none;" for your section#contentContainer)
Result:
Add text-align center; to your section#contentContainer
section#contentContainer
{
float: none;
padding-top: 20px;
margin: 0 auto;
text-align: center;
}
Good Luck!!
Add 'align="center"' to your section element.
As follows:
<section id="contentContainer" align="center">
This is not the preferred way but if you want to do it only in CSS, you would need to do 'text-align: center' on the element to center align it's internal 'inline-block' element.
CSS: text-align: center
I'm trying to put two text blocks over an image, one in the top left and the another in the bottom right. The text in the top left it's ok, but I can't put the text in the bottom right.
Here is the html code:
<section class="feed">
<div class="section">
<img src="">
<p class="text1"><span>Text 1</span></p>
<p class="text2"><span>Text 2</span></p>
</div>
<div class="section">
<img src="">
<p class="text1"><span>Text 3</span></p>
<p class="text2"><span>Text 4</span></p>
</div>
</section>
And now the CSS:
.section {
position: relative;
width: 65%;
margin: 3.375em 0 0 5%;
}
img {
width: 100%;
}
.text1 {
position: absolute;
top: 7.5%;
width: 100%;
}
.text1 span {
color: white;
font: 1.5em Helvetica, Sans-Serif;
font-weight: 300;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 0.625em;
}
.text2 {
/* don't know how to put this one in the bottom right */
}
.text2 span {
color: white;
font: 1em Helvetica, Sans-Serif;
font-weight: 300;
background: rgb(241, 91, 87);
/* fallback color */
background: rgba(241, 91, 87, 0.7);
padding: 0.625em;
}
Thanks.
You could just position it absolute, but starting from the bottom right, in stead of the top left you did with the first text block. Something like this:
.text2 {
position: absolute;
bottom: 0;
right: 0;
}
To see the code in action: http://jsfiddle.net/KzFDx/
here is one ez way to do this.
<div style="background= your image here no repeat, width height.....">
<p style="position, size,.... ></P>
<p style="position, size...."></P>
</div>