Hello i am a beginner in css and i want to recreate this:
this is my current start,i don`t know how to put the ' " '
#rectangle{
width: 100%;
height: 230px;
background-color:darkcyan;
display: block;
margin: 0px;
}
#rectangle p{
padding-top: 85px;
padding-left: 60px;
padding-right: ;
font-family: roboto_bold;
text-transform: uppercase;
margin: 0 auto;
display: block;
font-size: 38px;
color: aliceblue
}
`
Try to use a :before, something like this should give you an approximative result
#rectangle p:before {
content: '"';
position: absolute;
color: yellow;
font-size: 2em;
transform: translateY(-100%);
}
As a beginner the inclusion of other libraries or pseudo elements may be tricky. Here's a rather straightforward start.
.blue-box {
background: #2edfd2;
padding: 10px 40px;
width: 300px;
}
.lquote {
color: #ace941;
font-size: 60px;
height: 20px;
}
.underline {
background-color: #ace941;
height: 4px;
width: 20px;
}
.fine-print {
margin: 4px 0 0;
font-size: .6em;
}
<div class="blue-box">
<div class="lquote">“</div>
<p>Knowing I was adopted may have made me feel more independent, but I have never felt abandoned. My parents made me feel special.
<div class="underline"></div>
<p class="fine-print">Steve Jobs, 2009</p>
</div>
There can be many ways of doing this, one of which is that you can use icons.
Like I personally use fontawesome.
You can get many icons of different sizes just use them with an online css file.
http://fontawesome.io/icon/quote-left/
This is the link to the quotes that you want to insert
I created a prototype for you.
https://codepen.io/djmayank/pen/opYeyo
#rectangle{
width: 100%;
height: 230px;
background-color:darkcyan;
display: block;
margin: 0px;
}
#rectangle p{
padding-top: 5px;
padding-left: 60px;
padding-right: ;
font-family: roboto_bold;
text-transform: uppercase;
margin: 0 auto;
display: block;
font-size: 38px;
color: aliceblue
}
.fa {
color:#abe941;
margin-top:3%;
margin-left:10%;
}
<div id="rectangle">
<i class="fa fa-quote-left fa-2x" aria-hidden="true"></i>
<p>Loreim ispum Loreim ispumLoreim ispum Loreim </p>
</div>
<script src="https://use.fontawesome.com/8d594f9226.js"></script>
Related
The position of the portfolio page is well positioned but I think I don't use correctly propriety margin-left, I think that I have to use another propriety?
Then, my second problem is that my languages page is too far from my portfolio page, I would like to fix to 50 px. But I cannot do because I am stuck with my first problem.
Thank you for help.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="page-left">Languages</div>
</div>
</header>
</body>
You should create a new selector for your code for the second question:
View the result in full screen for actual margin-left working.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
border:1px solid black;
}
.Languages{
display: inline-block;
margin-left: 30px;
border:1px solid red;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="Languages">Languages</div>
</div>
</header>
</body>
Just add margin-left: 430px; to the header-block div
You can use "flex" it's help you
In different screen sizes It will help arrange the right proportions
Try.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
display: flex;
}
.page-first{
display: inline-block;
margin-left: 430px;
}
.page-second{
margin-left: 50px;
}
<body>
<header>
<div class="header-block">
<div class="page-first">Portfolio</div>
<div class="page-second">Languages</div>
</div>
</header>
</body>
Example.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am going crazy. I have read dozens of blog articles and different stackoverflow postings but I am unable to vertically center a FontAwesome icon which is placed as content inside a css before pseudo element of a link element.
This is my CSS Code:
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: inline-block;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 35px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
}
And thats the HTML code:
<a class="button back">back to<br/>whatever</a>
Here you can find a fiddle which shows my problem: https://jsfiddle.net/r1vysfaf/1
UPDATE:
I want to avoid using javascript to solve the styling issue. Furthermore the text of the link is dynamic and therefore it is not a solution to use "constant magic" spacings for paddings/margin/top.
Use display: table for parent and table-cell for child and alter your css as following:
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: table;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 10px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
line-height: 1em;
display: table-cell;
vertical-align: middle;
padding: 0 10px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="button back">back to<br/>whatever</a>
UPDATE
Added the forward button, plus position values in ems so an increase or decrease of font sizes or element will not offset the icon.
Instead of absolute , use relative on the pseudo-element.
FIDDLE
SNIPPET
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: inline-block;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 35px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
position: relative;
top: .625em;
bottom: 0;
right: 1.25em;
}
a.button.forward:after {
font-family: FontAwesome;
content: "\f101";
font-size: 1em;
position: relative;
top: -.5em;
left: 1.25em;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<a class="button back">Back to<br/>whatever</a>
<a class="button back" style='font-size: 1.5em'>Font-size is<br/>increased by 50%</a>
<a class="button forward">Next to<br/>whatever</a>
<a class="button forward" style='font-size: .5em'>Font-size is<br/>decreased by 50%</a>
I am trying to achieve similiar effect to this:
The header and its subheader are both vertically aligned to the image.
I've written following code:
http://jsfiddle.net/u4zxn4eb/
It works but is it the best way to achieve this?
<div class="wrapper">
<h1>
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
<div class="vertical_align">
Your company's name
<p>Description</p>
</div>
</h1>
</div>
CSS:
body {
background: lightgrey;
}
.wrapper {
background: grey;
width: 100%;
}
h1 {
font-size: 18px;
margin: 0;
position: relative;
top: 35px;
}
.vertical_align {
display: inline-block;
vertical-align: middle;
}
img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
p {
margin: 0;
}
EDIT
As #chrisbedoya suggested I shouldn't put div inside h1 tag.
Deleted.
Instead of using h1 tag to position the whole, it's better to apply these rules separately:
.vertical_align a,
.vertical_align p {
position: relative;
top: 40px;
}
Well, define "best". If your method is standards compliant and works in all browsers then use it. If you're interested, here's how I'd do it:
<style>
#header {
height: 100px;
margin: 0px;
padding: 0px;
width: 500px;
}
#rectangle {
background-color: #f0f0f0;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 500px;
z-index: 1;
}
#square {
background-color: #ff0000;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 20px;
top: 20px;
width: 80px;
z-index: 2;
}
#text {
/* background-color: #00ff00; */
margin: 0px;
padding: 0px;
position: absolute;
left: 120px;
top: 41px;
width: 360px;
z-index: 2;
}
h1 {
font-family: Arial;
font-size: 20px;
line-height: 20px;
margin: 0px;
padding: 0px;
}
p {
font-family: Arial;
font-size: 12px;
line-height: 12px;
margin: 5px 0px 0px 0px;
padding: 0px;
}
</style>
<div id="header">
<div id="rectangle"></div>
<div id="square"></div>
<div id="text">
<h1>Company Name</h1>
<p>Company Tagline</p>
</div>
</div>
Well, this question is way too subjective and better suited for CodeReview. But I thought I'd give you my input.
First, let's clean up the HTML. Get some HTML5 in there as well.
<div class="wrapper">
<header>
<a href="#" class="logo-link">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
</a>
<div class="vertical_align">
<h1>Your company's name</h1>
<h2>Description</h2>
</div>
</header>
</div>
Then make the CSS nice and tidy. We don't need much:
.logo-link {
display: inline-block;
position: relative;
top: 24px;
margin: 0 24px;
}
.logo-link img {
display: block;
}
.vertical_align {
display: inline-block;
vertical-align: top;
}
Here's an example.
I would use a position: relative property to align the image slightly below the header like you have in your image there.
I've seen some posts about this issue, but nothing's working for me right now. I have a div inside of which are many spans. The spans are running off the page. Can anyone help me please wrap the spans to keep them on the page?
HTML:
<div id="creditsbar">
<span class="title">Writing</span> <span class="name">Bob, Mary</span>
<span class="smallsquare">■</span>
<span class="title">Editing</span>
<span class="name">Mary, Bob</span>
<span class="smallsquare">■</span>
<span class="title">Design</span>
<span class="name">Bob</span>
<span class="smallsquare">■</span>
<span class="title">Development</span>
<span class="name">Mary</span>
<span class="smallsquare">■</span>
</div>
CSS:
#creditsbar {
width: 100%;
background color: lightgray;
color: #333;
font-family: "Muli", Helvetica, Arial;
padding-left: 20%;
max-height: 10%;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
padding-bottom: 10px;
max-width: 100%;
vertical-align: top;
}
#creditsbar span {
word-wrap: normal;
display: inline-block;
}
#creditsbar .title {
text-transform: uppercase;
font-size: 80%;
font-weight: 600;
padding-right: 5px;
}
#creditsbar .name {
}
#creditsbar .smallsquare {
padding: 0 10px;
}
It's because of padding-left: 20%; inside
#creditsbar {
width: 100%;
color: #333;
font-family: "Muli", Helvetica, Arial;
padding-left: 20%;
}
remove that line and it will work fine
else use box-sizing: border-box; as suggested by #Andy
HTML:
<div id="main" class="rounded-corners">
<div id="benefits">
<img src="/benefits-heading.png" style="padding: 30px;" />
<div id="corporateside">
<h1>Corporate Benefits</h1>
<p>blah</p>
</div>
<div style="clear: both;"></div>
<div id="employeeside">
<h1>Employee Benefits</h1>
<p>blah</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
CSS:
#corporateside { width: 420px; height: 100%; position: absolute; left: 0; padding: 20px; height: 100%; display: block; }
#corporateside h1 { font-size: 24px; font-weight: 500; }
#corporateside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#corporateside p { padding: 0px; margin-top: -10px; }
#employeeside { width: 420px; position: absolute; right: 0; padding: 20px; height: 100%; display: block; }
#employeeside h1 { font-size: 24px; font-weight: 500; }
#employeeside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#employeeside p { padding: 0px; margin-top: -10px; }
#benefits { position: relative; height: auto; }
#main { width: 940px; height: auto; background-color: #ffffff; margin: 0 auto; padding: 0; background: #ffffff; border: 2px solid #ffc40d; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }
I have fixed this issue by removing the position: absolute; from each div. Also I removed the <div style="clear: both;"></div> between the two divs. Thanks for your help!
It's because your divs are set with position: absolute;. This removes the div from the document flow and so the containing element behaves as if the divs are not present for its layout.
I'm not sure exactly what you're going for, but if you want to adjust the position of the two divs, try position relative or examine their margins and padding. A CSS reset can be very helpful as a general tool for making consistent layouts, especially across browsers.
Here's a jsfiddle of my suggestion, showing the divs side by side and the container behaving as desired.
http://jsfiddle.net/wCnLZ/