I have a problem, in fact I have a block named "e-mail" which descend, I will want to force the height, is it possible?
Do you have an idea of the process to follow?
I don't know if my pratice html/css is good also?
Thank you for your answer.
.logo5{
padding-top: 35px;
padding-left: 80px;
}
.title-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 22px;
margin-top: -32px;
padding-left: 100px;
position: absolute;
}
.text-contact-1{
padding-left: 80px;
}
.line-verticale{
margin-top: -60px;
margin-left: 250px;
border-left:1px solid #e0e0e0;
height:100px;
}
.logo6{
padding-top: 35px;
padding-left: 80px;
}
.title-contact-2{
font-family: 'Questrial', sans-serif;
font-size: 22px;
margin-top: -32px;
padding-left: 120px;
position: absolute;
}
.text-contact-2{
padding-left: 80px;
}
<div class="background-contact">
<img class="logo5" src="https://i.ibb.co/0YyTszS/title-icon1.png">
<div class="title-contact-1">Telephone</div>
<div class="text-contact-1">Just For VIP Member</div>
<div class="line-verticale" ></div>
<img class="logo6" src="https://i.ibb.co/026Fs1B/title-icon2.png">
<div class="title-contact-2">E-mail</div>
<div class="text-contact-2">admin#superbtc.biz</div>
<div class="line-verticale" ></div>
</div>
I think the email descends because of the image size. Have you tried setting image size? The telephone image and email is of different size. For example,
img {
max-width: 10px;
}
I had to restructure, but now you can adjust images and the content easily
.contact-info {
font-family: 'Questrial', sans-serif;
}
.contact-item {
border-right: 1px solid #e0e0e0;
padding: 20px;
max-width: 200px;
margin-bottom: 20px;
text-align: center;
}
.contact-item__logo {
vertical-align: middle;
}
.contact-item__title {
font-size: 22px;
vertical-align: middle;
}
.contact-item--email .contact-item__title {
padding-top: 10px
}
.contact-item__text {
margin-top: 10px;
}
<div class="contact-info background-contact">
<div class="contact-item contact-item--phone">
<div class="contact-item__header">
<img class="contact-item__logo" src="https://i.ibb.co/0YyTszS/title-icon1.png">
<span class="contact-item__title">Telephone</span>
</div>
<div class="contact-item__text">Just For VIP Member</div>
</div>
<div class="contact-item contact-item--email">
<div class="contact-item__header">
<img class="contact-item__logo" src="https://i.ibb.co/026Fs1B/title-icon2.png">
<span class="contact-item__title">E-mail</span>
</div>
<div class="contact-item__text">admin#superbtc.biz</div>
</div>
</div>
Related
I would like to place a vertical line between each image, I have tried several things but without success.
Here is an idea of the final result. There is a vertical gray line between the two images.
How to create the vertical line?
.background-contact{
background-color: white;
width: 100%;
height: 190px;
position: absolute;
}
.logo5{
padding-top: -70px;
padding-left: 38px;
}
.title-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 22px;
margin-top: -32px;
padding-left: 20px;
position: relative;
text-transform: uppercase;
font-weight: bold;
}
.text-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 14px;
top: 22%;
left: -12%;
position: relative;
transform: translateX(-50%);
}
.logo6{
padding-top: 35px;
left: -80%;
}
<div class="background-contact">
<img class="logo5" src="https://i.ibb.co/0YyTszS/title-icon1.png" >
<span class="title-contact-1">Telephone</span>
<span class="text-contact-1">Just For VIP Member</span>
<img class="logo6" src="https://i.ibb.co/026Fs1B/title-icon2.png" >
<span class="title-contact-1">E-mail Us</span>
<span class="text-contact-1">admin#superbtc.biz</span>
</div>
I didn't do the pixel perfect but something like this:
.background-contact{
background-color: white;
width: 100%;
position: absolute;
display: flex;
}
.background-contact__block {
padding-bottom: 20px;
}
.background-contact__block + .background-contact__block {
margin-left: 50px;
padding-left: 20px;
border-left: 1px solid #ccc;
}
.title-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 22px;
vertical-align: middle;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
}
.text-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 14px;
display: block;
}
.logo{
display: inline-block;
vertical-align: middle;
}
.background-contact__name {
padding-bottom: 30px;
}
<div class="background-contact">
<div class="background-contact__block">
<div class="background-contact__name">
<img class="logo" src="https://i.ibb.co/0YyTszS/title-icon1.png" >
<span class="title-contact-1">Telephone</span>
</div>
<span class="text-contact-1">Just For VIP Member</span>
</div>
<div class="background-contact__block">
<div class="background-contact__name">
<img class="logo" src="https://i.ibb.co/026Fs1B/title-icon2.png" >
<span class="title-contact-1">E-mail Us</span>
</div>
<span class="text-contact-1">admin#superbtc.biz</span>
</div>
</div>
to create a border you can use
border: (width) (style) (color);
This will make a border all around the element, to select one side you can use
border-left:
border-right:
border-top:
border-bottom:
But here your css is very strange, I recommend you to use the less as possible absolute positioning.
Here a better way do write that :
.contact-item {
width: 200px;
display: inline-block;
}
.contact-item img,
.contact-item h1 {
display: inline-block;
}
.border-left {
border-left: 2px solid #ddd;
padding-left: 1rem;
}
<div id="background-contact">
<div class="contact-item">
<img src="https://i.ibb.co/0YyTszS/title-icon1.png">
<h1>Telephone</h1>
<p>text<p>
</div>
<div class="contact-item border-left">
<img src="https://i.ibb.co/026Fs1B/title-icon2.png">
<h1>Email Us</h1>
<p>text</p>
</div>
</div>
you can also use :
element::last-child {
border-left: .. .. ..;
}
I want to make a banner which has an image with transparent background on the right and some text and button on the left side.
I have made a two column layout one containing the text and other containing the image displayed horizontally on large screen and stacked reversely on smaller screen.next I want to add some background color to both the columns so that they look like one entity. However I want the image to overflow the background color on top so that it
looks some thing like this
But My current design looks like this:
Here is my code:
.row {
background-color: #fff;
padding-top: 20px;
padding-bottom: 10px;
}
.textstyle h1 {
font-size: 25px;
font-weight: 700;
color: #484848;
line-height: 30px;
}
.textstyle p {
font-size: 18px;
font-weight: 200;
color: #484848;
}
.imgbox {
width: 100%;
height: 400px;
}
.captionbox {
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
.backcolor {
background-color: #ccc;
width: 100%;
height: 400px;
}
.mybutton {
cursor: pointer;
background: #00A699 !important;
color: #fff;
border-radius: 20px;
width: 200px;
padding: 10px;
font-size: 16px;
}
#media (max-width: 1000px) {
.captionbox {
padding-top: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="backcolor">
<div class="col-md-7 col-md-push-5">
<div class=""><img src="http://i.imgur.com/GguXEnF.png" class="imgbox"></div>
</div>
<div class="col-md-5 col-md-pull-7">
<div class="textstyle captionbox">
<h1>Hosting Opens Up a world of opportunity</h1>
<p>Earn Money Sharing Your Extra Space with Travellers.</p>
See What You Can Earn
</div>
</div>
</div>
</div>
</div>
I tried using padding and margin on top but did not work, please suggest a solution.
Use position to make it upper and increase image height.
.imgbox{
width: 100%;
height: 430px;
position: absolute;
top: -30px;
}
.row{
background-color: #fff;
padding-top: 20px;
padding-bottom: 10px;
}
.textstyle h1{
font-size: 25px;
font-weight: 700;
color:#484848;
line-height: 30px;
}
.textstyle p{
font-size:18px;
font-weight:200;
color:#484848;
}
.imgbox{
width: 100%;
height: 430px;
position: absolute;
top: -30px;
}
.captionbox{
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
.backcolor{
background-color: #ccc;
width: 100%;
height: 400px;
}
.mybutton{
cursor: pointer;
background: #00A699 !important;
color: #fff;
border-radius: 20px;
width:200px;
padding:10px;
font-size: 16px;
}
#media (max-width: 1000px){
.captionbox{
padding-top: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="backcolor">
<div class="col-md-7 col-xs-7 col-md-push-5 col-xs-push-5"><div class=""><img src="http://i.imgur.com/GguXEnF.png" class="imgbox"></div></div>
<div class="col-md-5 col-xs-5 col-md-pull-7 col-xs-pull-7">
<div class="textstyle captionbox">
<h1>Hosting Opens Up a world of opportunity</h1>
<p>Earn Money Sharing Your Extra Space with Travellers.</p>
See What You Can Earn
</div>
</div>
</div>
</div>
</div>
HTML
<body>
<div class="header">
<div class="header-logo"><u>MMH</u></div>
<div class="header-inner">Miami Max Hydro</div>
<nav class="header-nav">
About
Contact
</nav>
</div>
<div class="homepage">
<div class="content">
<div class="images">
<div class="column">
<div class="profile-large">
<div class="column1">
<div class="profile-overlay">
<div class="column1">
<img src=data:image/jpeg;base64,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 />
<div class="column2">
<p>Cell2</p>
</div>
<div class="column3">
<p>Cell3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
body {
background-image: url(http://weknowyourdreamz.com/images/sea/sea-08.jpg);
background-size: cover;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
back
}
.header {
text-align: center;
padding: 10px;
background: #D2F0C6;
overflow: auto;
position: fixed;
top: 1px;
right: 1px;
left: 1px;
border: 6px solid #80bc80;
}
.header-inner {
Margin-top: 10px;
}
.images {
padding: 20px;
}
.header-inner a {
text-decoration: none;
color: #000000;
font-size: 24px;
font-weight: bold;
line-height: 20px;
}
.header-logo {
font-size: 32px;
Font-weight: bold;
line-height: 28px;
}
.header-logo a {
text-decoration: none;
color: #000000;
}
.header-nav a {
text-decoration: none;
color: #295f6f;
margin-right: 5px;
margin-left: 5px;
line-height: 25px;
font-weight: bold;
}
.header-nav {
margin-right: 5px;
margin-left: 5px;
}
..images {
padding: 20px 0;
}
.column {
width: 33%;
height: 33%;
font-weight: bold;
line-height: 30;
float: left;
text-align: center;
}
.profile-overlay {
float: left;
border: 6px solid #80bc80;
width: 255px;
height: 245px;
}
My Issue:
Basically, No matter what I do to get a border around my image, I get
Basically the top border extends behind the header.
I've tried margin-top with no success, it just keeps the picture in the same spot relative to the border while pushing the top of the border down.
line-height won't work either. Even line-height 1 will instantly make the picture match the top border but go away from the bottom and hide under the header.
I do have an idea in mind, doing line-height 1 then doing some command to move the whole border/picture down relative to the body, but I don't know any code that does that.
JSFiddle.
Remove border: 6px solid #80bc80; for .profile-overlay and add it to .column1 img.
.column1 img {
border: 6px solid #80bc80;
}
I just finished doing HTML/CSS with Codecademy. One of the "projects" there is to make your own resume. I took the HTML/CSS from that project, and I'm tweaking it to make the resume look better. I'm currently trying to put one div - the part of the resume where text about my career objective will go - under another div, the header. It is, however, not working. The div for the "objective" is currently behind the div for the header. How on earth do I get that second div for the objective to go underneath the first div?
I read something about how I should float the header div to the left and then put clear:both; in the div for the objective, but that's not working.
HTML
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div id="objective"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
</div>
CSS
div {
border-radius: 5px;
}
#header {
z-index:1;
position: fixed;
width: 98%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
float:left;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}
For example:
<div class="div1">KSD;JSFAJ;SSD;</div>
<div class="div2">KSD;JSFAJ;SSdfaD;</div>
Css with float:
.div1 {
float: none;
}
.div2 {
float: none;
}
Css with display:
.div1 {
display: inline;
}
.div2 {
display: inline;
}
Here is the updated HTML :
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div style="height:50px;width:98%;">
</div>
<div id="objective">Objective goes here</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
</div>
This will show the objective div underneath header div.
Also this is a link for your reference.
Here is update CSS, This show the responsive your html
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
border-radius: 5px;
}
#header {
width: 98%;
margin: 0 auto;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}
Don't ever forget to add this code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
So that you won't have empty space on your div
DEMO
I think its easier using bootstrap, here is the link http://getbootstrap.com/css/
What bootstrap does is that it creates containers that wrap the content of your site. It divides the site in rows. To do that you need and . With this bootstrap you can divide your rows in 12 cells.
Here is an example of how I divided my portfolio in 3 columns of 4 spaces
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<h3 class="text-body"><u>Block vs Inline</u>
</h3>
<p class="p-text"><span>Block Elements</span> are those who take the complete line and full width of the page creating a "box".<br>
<span>Inline Elements</span> are those who doesn´t affect the layout, just the element inside the tag.
</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Selectors</u></h3>
<p class="p-text"><span>Class selectors</span> are used to target elements with specific attributes<br>On the other hand, <span>id selectors</span> are just for unique elements.</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Responsive Layout</u></h3>
<p class="p-text"><span>Responsive Layout</span> is the combination of html and css design to make the website look good in terms of enlargement, shrink and width in any screen (<em>computers, laptops, netbooks, tablets, phones</em>). </p>
</div>
</div>
I created a page having a banner. The banned contains the title of the page at the left and a box having text and two buttons inside at the right.
The page is completely responsive except the banner because i am not sure how to use top and left while keeping things responsive.
HTML
<div class="banner_container">
<img src="img/banner_1.png">
</div>
<div class="col-md-12">
<div class="col-md-7">
<div class="banner-title"><strong>WAKE UP IN BALI</strong></div>
</div>
<div class="col-md-3 trip_inclusions">
<div class="inclusions_price">
<div class="total_nights">
<div class="number_of_nights">12 </div> NIGHTS
</div>
<div class="price_grid_wrapper">
<div class="starting_from">STARTING FROM </div>
<div class="tour_price">
<div class="dollar_price_wrapper">
<div class="dollar_logo">$</div>
<div class="price_text">1250</div>
</div>
<div class="price_tax_text">TAXES INCL/PERS</div>
</div>
</div>
</div>
<div class="inclusions_details">
<div class="package_includes_title">PACKAGE INCLUDES</div>
<div class="includes_content">
<p>+ INTERNATIONAL FLIGHTS</p>
<p>+ WELCOME & TRANSFERS</p>
<p>+ HOTEL(12 NIGHTS)</p>
<p>+ BREAKFASTS</p>
<p>+ EXCURISIONS</p>
</div>
</div>
<div class="package_buttons">
<div class="share_package">SHARE PACKAGE +</div>
<div class="all_packages"> < ALL PACKAGES </div>
</div>
</div>
</div>
CSS:
.banner_container img{
width: 100%;
}
.banner-title{
font-size: 160%;
color: white;
text-shadow: 0 1px gray, 1px 0 gray, -1px 0 gray;
margin: 48px 25px;
display: block;
position: absolute;
top: 0;
}
.trip_inclusions{
padding: 2px;
top: 1em;
position: absolute;
left: 20em;
}
.inclusions_price {
background-color: #00467e;
overflow: auto;
padding: 3px;
color: white;
margin: 0 auto;
display: inline-block;
width: 80%;
}
.total_nights {
width: 24%;
text-align: center;
border-right: 1px solid #fff;
float: left;
margin-right: 10px;
font-size: 0.95em;
}
.number_of_nights{
font-size: 3.8em;
margin-bottom: -13px;
margin-top: -10px;
}
.price_grid_wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
.starting_from {
width: 8%;
float: left;
margin-right: 4em;
font-size: .95em;
margin-top: 2px;
}
.tour_price {
float: left;
width: 40%;
}
.dollar_price_wrapper{
display: block;
margin: 0 auto;
}
.dollar_logo{
float: left;
font-size:1.5em;
}
.price_text{
float: left;
font-size: 3em;
margin-top: -10px;
}
.price_tax_text{
text-align: center;
margin-bottom: 3px;
font-size: .9em;
}
.inclusions_details{
background-color: #fff;
overflow: auto;
margin-top: -5px;
width: 80%;
}
.package_includes_title{
color: #399fff;
font-size: 20px;
margin-left: 10px;
margin-top: 11px;
}
.includes_content{
color: black;
font-size: 16px;
margin-left: 15px;
line-height: 16px;
margin-top: 6px;
}
.package_buttons{
margin:0 auto;
display: block;
}
.share_package{
background-color: #399fff;
padding: 10px;
color: white;
font-size:1em;
float: left;
width:40%;
text-align: center;
}
.all_packages{
background-color: #ffffff;
padding: 10px;
width:40%;
color: #00467e;
font-size:1em;
float: left;
text-align: center;
}
.share_package a{
color: white;
}
.share_package a:hover{
color: white;
}
Please have a look at the JsFiddle. Its not responsive at all also you will see the right container is big, ignore that i`ll fix it but i want text at left and container at right and image at the back and keep it responsive.
Note: I could have used backgroundurl() but i didnt as i am planning to replace the background image with a slider so i need it in a separate
Thanks !!!