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;
}
Related
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>
I was hoping for some help with a problem involving some divs.
I am doing a Udemy course to recreate the BBC website and I've got to a point where I have some divs with content but there is a gap between them.
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial;}
#topbar {
width: 1050px;
margin: 0 auto;
height: 40px;}
#bbclogo {
margin-top: 8px;
float:left;
margin-right: 10px;
}
.topbar-section {
float:left;
border-left: 1px solid #CCCCCC;
height: 100%;
}
#signinimage {
margin: 10px 15px;
height: 20px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 14px;
position: relative;
top: 12px;
padding-right: 65px;
}
#signin-div {
float:left;
}
#wiggly-line {
height: 40px;
float: left;
}
#bello-image {
height: 26px;
margin: 7px 15px 7px 12px;
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 14px;
padding: 13px 13px 0 13px;
height: 27px;
}
#more-arrow {
height: 4px;
margin-left: 25px;
}
#searchbox {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 15px;
padding: 5px;
margin: 8px 0 8px 8px;
float: left;
}
#magnifying-glass {
margin-top: 8px;
height: 27px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 60px;
}
#menu-bar {
width: 1050px;
margin: 0 auto;
}
h1 {
margin: 0;
padding: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
float: left;
}
#local-news {
float: right;
border: 1px solid #BB4545;
width: 175px;
margin: 15px 10px;
padding: 5px 5px 4px 5px;
}
#local-news a {
color: white;
text-decoration: none;
font-size: 20px;
position: relative;
top: -2px;
}
#local-news:hover {
text-decoration: underline;
}
#local-news img {
height: 20px;
padding-left: 10px;
}
#menu-bar-container-2 {
width: 100%;
background-color: #A91717;
display: block;
}
#menu-bar-2 {
width: 1050px;
margin: 0 auto;
height: 35px;
display: block;
}
#menu-bar-2 a {
color: white;
text-decoration: none;
padding: 0 16px;
border-right: 1px solid #BB4545;
font-size: 12px;
position: relative;
top: 9px;
float: left;
}
<div id="topbar">
<!--white top bar-->
<img id="bbclogo" src="Images\bbclogo.png"/>
<!--left border div with classes-->
<div id="signin-div" class="topbar-section"></div>
<!--Signin image-->
<div id="signin-div">
<img id="signinimage" src="Images\signinimage.png"/>
<span id="signin-text">Sign in</span>
</div>
<!--Bell div-->
<div id="bell-div">
<img id="wiggly-line" src="Images/pointed_line.png"/>
<img id="bello-image" src="Images/bell.png"/>
</div>
<!--Menubar links-->
<div class="topbar-section topbar-menu">News</div>
<div class="topbar-section topbar-menu">Sport</div>
<div class="topbar-section topbar-menu">Weather</div>
<div class="topbar-section topbar-menu">iPlayer</div>
<div class="topbar-section topbar-menu">TV</div>
<div class="topbar-section topbar-menu">Radio</div>
<div class="topbar-section topbar-menu">More
<img id="more-arrow" src="Images/arrow.png"/>
</div>
<!--Search bar-->
<div class="topbar-section">
<input id="searchbox" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="Images/glass.png"/>
</div>
</div>
<!--To clear previous floats-->
<div class="clear"></div>
<!--Menu bar-->
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
<div id="local-news">
Find local news
<img src="Images/pointer.png">
</div>
</div>
</div>
<!--Menu bar 2-->
<div id="menu-bar-container-2">
<div id="menu-bar-2">
Home
UK
World
Business
Politics
Tech
Science
Health
Education
Entertainent & Arts
Video & Audio
More
</div>
</div>
I've tried playing around with various things (changing display, floating, trying to clear previous divs...) but I can't seem to figure out the problem. I was hoping for some advice about what I am doing wrong.
I read somewhere that whitespace between divs can sometimes be an issue. Could this be the problem?
(strangely, when I created the code snippet above, the gap was not showing in the results window but when I try it in Chrome, IE or Firefox, the problem occurs)
Many thanks in advance
thanks for the advice on my problem.
As mentioned in my last comment, it was the height of the div which was creating the gap (it wasn't tall enough). I think this was due to another element's padding pushing the lower div down, so when I increased the height it brought everything into alignment.
I'm still learning a lot about web development and I am grateful for the responses. I'm sure I'll be learning a lot more along the way. Many thanks!
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>
It's taken me a ridiculous amount of work to get this menu bar looking clean, which is a problem in and of itself. However, I think it's finally coming together. The problem I'm having now is three-fold.
Two questions:
When this is viewed full screen, the menu bar looks great, but as you close in the screen the "run" button drops to the bottom. What is causing this?
How come if I keep closing the window, the middle .toggle list is stacking on top of the "CodePlayer" logo? What do I need to do to make it so that when the window shrinks, the divs get to the point where they'd begin to overlap and stop?
Why is there a tiny bit of gap between the border-right and bottom-border in the middle section of my menu? I've tried 0px padding and it isn't working.
http://jsfiddle.net/ow5zq9fL/
/*-----------UNIVERSAL------------*/
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
/*-----------MENU BAR------------*/
#menuBar {
height: 40px;
background-color: gray;
max-width: 100%;
}
/*------LOGO, TOGGLES, BUTTON-----*/
#logo,
#buttonDiv,
#toggles {
vertical-align: middle;
display: inline-block;
width: 33%;
height: 18px;
}
/*-----------LOGO------------*/
#logo {
font-weight: bold;
font-size: 1em;
font-family: helvetica;
vertical-align: middle;
position: relative;
top: 12px;
left: 12px;
/* background-color: blue;
*/
}
/*-----------TOGGLES------------*/
.toggles {
text-align: center;
border: 1px solid black;
height: 20px;
position: relative;
top: -9px;
width: 300px;
left: 20px;
}
.toggles li {
list-style: none;
display: inline-block;
border-right: 1px solid black;
}
/*----------TOGGLES LIST----------*/
#resultList {
border-right: none;
}
/*-------------BUTTON------------*/
#buttonDiv {
text-align: right;
position: relative;
top: 8px;
right: 12px;
vertical-align: middle;
}
/*-----------BUTTON------------*/
#htmlList {
padding-right: 20px;
margin-left: -20px;
}
#cssList {
padding: 0 25px;
}
#jsList {
padding: 0 25px;
}
#resultList {
padding: 0 20px;
}
</style>
<div id="wrapper">
<div id="menuBar">
<div id="logo">CodePlayer</div>
<div id="toggles">
<ul class="toggles">
<li id="htmlList">HTML</li>
<li id="cssList">CSS</li>
<li id="jsList">JS</li>
<li id="resultList">Result</li>
</ul>
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
</div>
Try this. I added a wrapper and applied everything from #buttonDiv to .wrapper. Then I altered it so that it was centered.
New Code:
.wrapper {
text-align: right;
position: relative;
bottom: 12px;
right: 12px;
vertical-align: middle;
}
and
<div class="wrapper">
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
Add float left
#logo, #buttonDiv, #toggles {
...
float: left;
}
http://jsfiddle.net/ow5zq9fL/4/
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 !!!