This is my css code
.my-works {
margin-top:0;
width: 100%;
background-color: orange;
}
.my-works h3 {
text-align:center;
}
here's my html code
<section class="my-works">
<h3> MY WORKS </h3>
<article>
<h4>My Blog</h4>
<img src="blog.png">
</article>
<article>
<h4>A Tambay Inspired Flappy Bird - Yotni Bird</h4>
<img src="flappybird.png">
</article>
</section>
This is the result of the site
I already change the css margin to 0 but still it has space between the two.
You need to set the h3 to have margin-top:0
.my-works h3 {
margin-top:0;
}
Not the container
Related
I'm having a hard time figuring out how to put my image right beside my paragraph. The goal is to set an image beside my text, not super close but on the same line. How can I do this in css? Below is my About.js and About.css. My paragraph is wrapped in a div called about-page. I tried taking my img tag outside that div but it causes an error. It's suppose to look like this sketch below.
import React from 'react'
import '../CSS/About.css'
import clock from '../clock.jpg'
const About = () => {
return (
<div className="about-page">
<h6 className="about-this-app-header">About This Application</h6>
<p className="description">
Do You Have A Habit of Forgetting Stuff? Don't Worry!!!
<br />
Here's <b>Reminder Me</b> to The Rescue.
</p>
<p className="description">
<b>Reminder Me</b> is a reminder management application
<br />
that lets you send reminders through text message.
<br />
It lets you set a time/duration and a message for your
<br />
reminder. And makes sure that it's sending out right on
<br />
time, not letting you or your friends miss out on the
<br />
important things in life.
</p>
<h6 className="tech-stack-header">Tech Stack</h6>
<h6 className="tech-stack">Front-End: <p className="tech">React, Materialize UI, Font Awesome</p></h6>
<h6 className="tech-stack">
Back-End: <p className="tech">Express.js, Firebase, Node.js, Twilio API</p>
</h6>
<h6 className="link-to">
Link to:
<a
href="https://github.com/jspades93?tab=repositories"
target="_blank"
rel="noopener noreferrer"
className="waves-effect waves-light btn-flat"
>
<i className="fa fa-github" style={{ fontSize: "36px" }}></i>
</a>
</h6>
<div className="clock-image"><img src={clock} alt="clock" /></div>
</div>
);
};
export default About
h6 {
font-weight: bold;
color: #056674;
}
.btn-flat {
color: black;
}
.about-this-app-header {
margin-top: 100px;
margin-left: 170px;
}
.description {
margin-top: 20px;
margin-left: 90px;
}
.tech-stack-header{
margin-top: 25px;
margin-left: 210px;
}
.tech-stack {
margin-left: 90px;
}
.link-to {
margin-left: 35px;
margin-top: 20px;
}
img {
width: 390px;
height: 250px;
float: right;
}
.tech {
display: inline;
vertical-align: top;
color: black;
font-weight: normal;
}
I wouldn't advice using CSS floats, you can use flex box but this way of work adds more divs to the DOM only to set the locations as needed.
I'd recommend using CSS grid, less DOM nodes required, less messy CSS. You can read all about it here. You have a more details expiation here or here.
Basically you would want to set a grid for the container and set the header, the left and right parts.
Something like so
.about-page {
display: grid;
grid-template-areas:
'header header'
'description image';
grid-gap: 10px;
}
.clock-image { grid-area: image; }
.header { grid-area: header; }
.about { grid-area: description; }
You should use floats like this example:
use float: left; for your text and use float: right; for your image.
.left {
float:left;
}
.right {
float:right;
}
figure img {
margin:10px;
width: 50%;
}
figcaption {
font-family:sans-serif;
font-weight:bold;
font-size:16px;
padding:10px;
}
.clear {
clear:both;
}
.centered {
margin: auto; /* margin:auto centers the figure element */
width: 50%;
background:#ccc;
text-align:center; /* text-align centers the text and image only - you need margin:auto to center the entire figure */
}
<figure> <img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT" class="left">
<figcaption> This is the caption for a left-floated photo. This element's width is has not been set and it will run the full width of the page. This is the caption for a left-floated photo. This element's width is has not been set and it will run the full width
of the page. </figcaption>
</figure>
<div class="clear"></div>
<figure> <img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT" class="right">
<figcaption> This is the caption for a right-floated photo. This div in between figures with the clear:both property clears the float from the div above it, so the next div can have a different or no float. </figcaption>
</figure>
<div class="clear"></div>
<figure class="centered"><img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT">
<figcaption class="centered-text"> Tip: margin:auto ONLY works if the width property is set, and not set to 100%, so the margins can push the less-than-full-width element into the middle. </figcaption>
</figure>
</div>
I want to set all the 'p' tags to 'justify' and just the header section to 'center'.
One more thing to note here is that I selected paragraphs with type selector (specificity: 1) and the header with id selector (specificity: 100).
Moreover #header selection comes after p selection. If it is true that text-align property is inheritable, I guess 'center' style is supposed to get higher importance over 'justify' for the 'p' tag in header. But it isn't working that way.
I even checked out similar questions on stackoverflow and used text-align: initial over #header p. That didn't work either.
p {
text-align: justify;
}
#header {
text-align: center;
}
<div id="header">
<h1>Article Name</h1>
<p>Author Name</p>
</div>
<p>
... more paragraphs
</p>
#header, #header >p {
text-align: center !important;
}
p {
text-align: justify;
}
<div id="header">
<h1>Article Name</h1>
<p>Author Name</p>
</div>
<p>
... more paragraphs
</p>
You can create classes that you can reuse :
.justify{
text-align: justify;
}
.center{
text-align: center;
}
<div class="center">
<h1>Article Name</h1>
<p class="center">Author Name</p>
</div>
<p class="justify">
... more paragraphs
</p>
I'm in the process of creating a website, and am trying to align text beside an image. It sounds easy, but for some reason, I just can't seem to get it.
Here is an image of how I'm trying to get the images and text to appear:
So far I've tried the following HTML:
<div class="example">
<div class="eg1">
<img src="eg1.gif" />
<h2>Example 1</h2>
<p>This is an example</p>
</div>
<div class="eg2">
<img src="eg2.gif" />
<h2>Example 2</h2>
<p>This is another example</p>
</div>
</div>
and CSS:
.example {
display: inline-block;
}
.eg1, .eg2 > img {
float: left;
}
.eg1, .eg2 > h2 {
float: left;
}
.eg1, .eg2 > p {
float: left;
}
At the moment is appears all messed up. They appear underneath each other, and the text appears on the wrong side of the image.
What is the best way to achieve this?
may be like this?
<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>
<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>
http://jsfiddle.net/g57bB/7/
I recently set up navigation on a site like that. The key is in setting the image as the background and offsetting it with the center left no-repeat Though it was in a ul and a li format, I used the CSS in this format:
CSS
li a {
font-size:20px;
color:#f6f9db;
padding-left:75px;
background:url(icon-up.png) center left no-repeat;
text-decoration:none;
line-height:30px;
text-shadow: -2px 2px 1px #551508;
}
li a:hover {
color:#551508;
display:inline-block;
padding-left:75px;
background:url(icon.png) center left no-repeat;
text-shadow: -1px 1px 0px #f6f9db;
}
Can anyone guide me, How can I create a 'almost' square background in CSS?
I want to get the brown background and have text on it with the error bullets and how to create the dotted yellow on the top right in CSS?
My working progress is here:
HTML:
<body>
<div id="contentContainer">
<div id="setBackground">
<div id="header"> <span class="style1">This is LOGO </span>
<hr />
<div id="body_block">
<p class="intro">Introduction</p>
<h1> Back </h1>
Click Here
<h2> Next </h2>
Click Here
<p>More about Web Design:</p>
<p>• Bla bla bla... .</p>
<p>Contact:</p>
<p>• Bla bla bla...</p>
<div id="footer">
<!--hr class="footer"/-->
<p>© Copyright 2013
sample.com |
More Site
</p>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
#charset"UTF-8";
/* CSS Document */
hr {
clear:both;
border: 0;
height:12px;
width:100%;
background-color: #993300;
}
.intro {
color: #1e2a74;
font-size:16px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
#footer {
background-color:#6994AF;
clear: both;
color: #FFFFFF;
font-size: 0.8em;
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
}
#footer p {
border-top: 1px solid #83CDE1;
margin: 0;
padding: 15px 0;
text-align: left;
}
#footer a {
text-align:right;
}
.style1 {
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
the border radius CSS attribute can help you obtain rounded corners - specifically something like this should do the trick for the pink element containing everything else.
div {
/* border-radius: Top-Left , Top-Right, Bottom-Right, Bottom-Left */
border-radius: 20px 5px 20px 5px;
}
i would personally break this up into a few divs, a header and body. put the background yellow dots with color on the top div and apply border radius to the top pieces.
then place the content other divs within the body and apply those border styles for each case.
this however is just one way to do it I am sure there are plenty of other wayas.
more info about CSS Rounded borders here
Try this out.
border-bottom-right-radius:20px;
Border radius is what you want to look at: http://www.w3schools.com/cssref/css3_pr_border-radius.asp
In your case, it would go something like this:
border-radius: 100px 0 100px 0; /*top-left top-right bottom-right bottom-left */
http://jsfiddle.net/spKMM/
Here's the jsFiddle
Your design is really poor. You don't have to nest all divs inside one another. I changed your html a bit(just rearranged your divs and added two new divs leftDiv and rightDiv)
HTML:
<body>
<div id="contentContainer">
<div id="setBackground">
<div id="header"> <span class="style1">This is LOGO </span>
<hr />
</div>
<div id="body_block">
<p class="intro">Introduction</p>
<h1> Back </h1>
Click Here
<h2> Next </h2>
Click Here
</div>
<div id="leftDiv">
<p>More about Web Design:</p>
<p>• Bla bla bla... .</p>
</div>
<div id="rightDiv">
<p>Contact:</p>
<p>• Bla bla bla...</p>
</div>
<div id="footer">
<!--hr class="footer"/-->
<p>
© Copyright 2013
sample.com |
More Site
</p>
</div>
</div>
</div>
</body>
Add these rules to your CSS:
#leftDiv{
clear:both;
width:200px;
background:brown;
float:left;
border-top-left-radius:25px;
}
#rightDiv{
margin-left:20px;
border-bottom-right-radius:25px;
background:brown;
float:left;
}
Try border-radius properties
Example 1
Div{border-radius:10px;}
Example 2
Div{border-radius:10px 15px;}
For better information visit:-
CSS-TRICKS
What about this? You can create a "pseudo" "hr" tag with a div :P
//IN HTML
<div id="CUSTOM_HR_WITH_TEXT">SAMPLE TEXT // Custom "hr" tag with text.</div>
//AND IN CSS
#CUSTOM_HR_WITH_TEXT {
border-radius: 10px 10px 10px 10px;
border: 0;
height: auto;
width: auto;
background-color: #993300;
color: #fff;
text-align: center;
}
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)