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/
Related
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>
I was doing some CSS, and my divs keep piling up underneath each other. I tried using position on them but it didn't work. My work is below. The picture I have in it will not be available to you as it is from my computer, but I hope you can get the idea of what my issue is(The sitelingo and Capture12 are the ones piling up):
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
padding-left: 470px;
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
padding-left: 232px;
padding-top: 24px;
}
#barone {
position: fixed;
float: left;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#bartwo {
postition: fixed;
float: right;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#login {
padding-left: 400px;
position: absolute;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="images/Capture12.png" /> </div>
</div>
</body>
</html>
A couple of issues:
You set a position:fixed to #barone. This will position the element relative to the actual screen.
You have elements positioned absolute, when the screen resizes, it will overlap with other elements
A padding left is set on your logo, this makes it out of viewpoint
Maybe you may want something as depicted below
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
/* padding-left: 470px;*/
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
/*padding-left: 232px;*/
padding-top: 24px;
}
#bar_container {
background-color: #0A4076;
}
#barone {
/* position: fixed;*/
height: 70px;
background-color: #0A4076;
display: inline-block;
}
#bartwo {
postition: fixed;
float: right;
height: 70px;
background-color: #0A4076;
}
#bartwo *{
display:inline-block;
}
#login {
position:relative;
/*padding-left: 400px;
position: absolute; */
vertical-align: middle;
top:0;
}
#login img{
width:100px;
height:100%;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="bar_container">
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgKSOJmOr8tNodELaCLPrI1T2XE7iwrpuxPDGuFeoJwlJC4AVKZw" /> </div>
</div>
</div>
</body>
</html>
You can visit the site I am working on here.
You can see what I am going for. I want the bottom right box to mimic the top right box in its positioning, but for some reason it refuses to fill the rest its parent div and opts to stack vertically. Even without content the background stops about half way through the box. I have it set to float left (something that shouldn't be necessary as div children should take their parent's width automatically), so I'm guessing there is something actually there but I cannot tell what. I have tried to clear and such but no luck there either. Is there a way to get that bottom right div to actually fill the parent div?
Here is my HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div>
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
And my CSS
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
display: inline-block;
}
.subtitles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
Thanks for any help or advice!
If you change your structure a little, it might help you. Instead of trying to float to divs side by side, you could just join them together kinda like I did with the HTML and css below. I added comments where I changed stuff in the css.
HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p>
<span class="subtitles">Lunch</span>
<span class="hours">Mon-Fri 11-4</span>
</p>
<p>
<span class="subtitles">Dinner</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
<p>
<span class="subtitles">Bar</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
</div>
</div><!--end hours-->
CSS:
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
/***** Removed Display:inline-block *****/
}
.subtitles {
float:left; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
float:right; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
#hours p {clear:both;} /**** Added ****/
All you need to do is to decrease the inner-div size that fits to your #hours div and assign a class to each of the inner div and float them left and right.
Example
<div id="hours">
<div class="left">
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div class="right">
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
CSS:
#hours .left
{
float: left;
}
#hours .right
{
float: right;
}
It will help for sure. Also start using browser`s consoles. They ease your life.
I take it your trying to make the Hours take up the entire box?
If so, add this code to it:
height: 100%;
width: 100%;
padding: 0px;
Use followig. Those which are commented in here, need to remove form your code.
div.container {
/*height: 460px;*/
/*padding: 10px*/
padding: 10px 10px 0px; /* bottom padding 0px */
}
div#hours div {
/*inline-block*/
}
Now add following after ending tag of #hours.
<div style="clear:both;"></div>
To make #hours div look nice, use following.
<div id="hours">
<h3 class="titles">Hours</h3>
<dl>
<dt>Lunch</dt>
<dd>Mon-Fri 11-4</dd>
<dt>Dinner</dt>
<dd>Mon-Sat 4-12</dd>
<dt>Bar</dt>
<dd>Mon-Sat 4-12</dd>
</dl>
</div><!--end hours-->
CSS Styles -
#hours dl,
#hours dt,
#hours dd {
margin: 0;
padding: 0;
}
#hours dl {
width: 100%;
float: left;
clear: both;
}
#hours dl dt {
float: left;
clear: left;
width: 45%;
}
#hours dl dd {
float: left;
}
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/
Earlier I asked a question about horizontal positioning of div containers, now I've got follow up and related questions:
(1) As you can see in the HTML code below, I've got a "column_bottom" container (for links) placed to the left of a "content_bottom" container (for the page's main content).
As I type more content into the "content_bottom" container so that its height exceeds that of the left "column_bottom" container, the entire "content_bottom" container shifts to BELOW the "column_bottom" container. What can I do so that the left "column_bottom" container's height dynamically match the height of the right "content_bottom" container (and they stay horizontally next to each other)?
(2) As you can see in the CSS style sheet below, I tried to manually set the widths of the "column_top" and "column_bottom" to match in em units by trial and error. Would there be any issues with this method across different browsers on different systems? What can I do to ensure that "column_top" and "column_bottom" widths always match?
Thanks for your help.
Here's the HTML:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>this is the site's title</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">site<br>
</div>
<div class="content_top"> title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1<br>
</a></li>
<li><a href="#">link 2<br>
</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">main content here<br>
</div>
</div>
</body>
</html>
Here is the CSS:
body {
margin: 0;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
text-align: center;
color: #cccccc;
background-color: black;
font-size: 1em;
}
.wrapper {
margin: auto;
min-width: 60em;
max-width: 60em;
font-family: Arial,Helvetica,sans-serif;
width: 60em;
color: #cccccc;
}
.column_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid black;
width: 3.2em;
min-width: 3.2em;
float: left;
padding-top: 2em;
text-align: right;
color: #333333;
max-height: 1em;
background-color: #f4f4f4;
font-size: 3em;
min-height: 1em;
max-width: 3.2em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.content_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid #f4f4f4;
padding-top: 2em;
font-size: 3em;
min-height: 1em;
text-align: left;
max-height: 1em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.column_bottom {
width: 9.28em;
text-align: right;
padding-top: 3em;
color: #333333;
border-bottom-width: 0;
background-color: #f4f4f4;
border-right-width: 0;
padding-right: 0.3em;
float: left;
border-left-width: 0;
min-width: 9.28em;
max-width: 9.28em;
}
.content_bottom {
padding: 3em 5em 5em;
border-collapse: separate;
text-align: left;
float: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
text-decoration: none;
color: #333333;
list-style-type: none;
font-weight: inherit;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}
Add a wrapper for .content_bottom with this css:
.content_bottom_wrapper {
width: 100%;
margin-left: -9.58em;
float: right;
}
And add this to content-bottom:
margin-left: 9.58em;
9.58em = width of .column_bottom + padding-right on .column_bottom
http://jsfiddle.net/p93fM/
Here:
Live Demo
I added this to .content_bottom in CSS
width:640px;
You can adjust the margins as you wish.