I have css for displaying an image content on the left and a sidebar on the right. The image can vary in side and orientation (landscape, portrait), therefore I want the details sidebar on the right side of the image to be relatively positioned to the image.
Here is the screenshort:
The css code is as follows:
* {
margin: 0;
padding: 0;
}
a {
/* text-decoration: underline; */
text-decoration: none;
color: #6B2E42;
}
a:hover {
text-decoration: none;
}
body {
background: #C9CFCD url(images/img01.gif);
font-size: 11pt;
color: #323232;
line-height: 1.75em;
}
body,input {
font-family: Arial, sans-serif;
}
#content {
/* HOLDS THE IMAGE */
background: #FFFFFF;
/* width: 595px; */
color: #6E6E6E;
padding: 10px 10px 0 35px;
float: left;
border-bottom: solid 2px #BBC1BF;
}
#page {
margin: 20px 0 20px 0;
position: relative;
width: 980px;
padding: 0;
}
#page ul {
list-style: none;
}
#page ul li {
padding: 2px 0 2px 0;
border-top: solid 1px #D9D9D9;
}
#sidebar {
background: #FFFFFF;
margin: 0 0 0 685px;
color: #6E6E6E;
padding: 10px 10px 10px 20px;
width: 225px;
border-bottom: solid 2px #BBC1BF;
}
#wrapper {
width: 980px;
margin: 35px auto 0 auto;
position: relative;
}
And here is the layout:
<body>
<div id="page">
<div id="content">
<p>
<img src="Mona_Lisa_by_Leonardo_da_Vinci.jpg">
</p>
<br class="clearfix" />
</div>
<div id="sidebar">
<h3>DETAILS</h3>
<div class="date-list">
<ul class="list date-list">
<li class="first"><span class="id">ID:</span> 1</li>
<li class="last"><span class="ref">REFERENCE No.:</span> LSK001</li>
<li><span class="title">TITLE:</span> Monalisa</li>
<li><span class="obj">OBJECT TYPE:</span> Painting</li>
<li class="last"><span class="mat">MATERIAL USED:</span> Canvas,oil...</li>
<li class="last"><span class="tech">TECHNIC:</span> brush stroking...</li>
<li class="last"><span class="width">WIDTH:</span> 1 meter</li>
<li class="last"><span class="height">HEIGHT:</span> 3 meters</li>
<li class="last"><span class="artist">ARTIST:</span> Da Vi nci</li>
<li class="last"><span class="source">SOURCE:</span> ....</li>
</ul>
</div>
<h3>DESCRIPTION</h3>
<p>
Urna dis suscipit lorem sed luctus. Elementum suspendisse tempus fermentum ornare libero phasellus nibh conseuqat dolore.
</p>
</div>
<br class="clearfix" />
</div>
</body>
Please, see attached screenshort for the layout in the browser.
joseph
So if picture is small - sidebar on the right, if large, sidebar under the image?
#page{
width: 600px;
margin: 0 auto;
background-color: #efefef;
overflow:hidden;
}
#content,
#sidebar{
float:left;
}
#sidebar{
margin: 10px;
padding:10px;
background-color: tan;
}
.clear{
clear: both;
}
http://jsfiddle.net/sy9xM/1/ - you can change img width to check the result. Does it works for you?
Related
how can I add a space between those 2 images and dont allow the text to break on the center of the page? It's for a college project and I've never programmed before.
i actually dont know whats going on on this template i have to edit.. i just need to add a photo of a person in the image circle (which i know how to) and a text of their review, but the images keep going off position and text breaks in the middle..
/*
Horizons by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
#import url("font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900");
/* Basic */
}
body {
background: #222833;
}
body,
input,
select,
textarea {
color: #555555;
font-family: 'Raleway', sans-serif;
font-size: 13pt;
font-weight: 300;
line-height: 1.75em;
}
a {
color: #3ac984;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
strong,
b {
font-weight: 700;
}
em,
i {
font-style: italic;
}
p,
ul,
ol,
dl,
table,
blockquote {
margin: 0 0 2em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-weight: 700;
line-height: 1.75em;
margin-bottom: 1em;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
text-decoration: none;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
hr {
border-top: solid 1px #888888;
border: 0;
margin-bottom: 1.5em;
}
blockquote {
border-left: solid 0.5em #888888;
font-style: italic;
padding: 1em 0 1em 2em;
}
section.special,
article.special {
text-align: center;
}
header.major {
padding-bottom: 4em;
}
header h2 {
margin: 0;
padding: 0;
font-size: 3em;
font-weight: 600;
}
header .byline {
font-size: 1.6em;
}
footer> :last-child {
margin-bottom: 0;
}
footer.major {
padding-top: 3em;
}
/* Form */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
background: none;
border: solid 1px #888888;
color: inherit;
display: block;
outline: 0;
padding: 0.75em;
text-decoration: none;
width: 100%;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #3ac984;
}
input[type="text"],
input[type="password"],
input[type="email"] {
line-height: 1em;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.5;
position: relative;
top: 3px;
}
:-moz-placeholder {
color: inherit;
opacity: 0.5;
}
::-moz-placeholder {
color: inherit;
opacity: 0.5;
}
:-ms-input-placeholder {
color: inherit;
opacity: 0.5;
}
.formerize-placeholder {
color: rgba(85, 85, 85, 0.5) !important;
}
/* Image */
.image {
border: 0;
position: relative;
}
.image.fit {
display: block;
}
.image.fit img {
display: block;
width: 100%;
}
.image.feature {
display: block;
margin: 0 0 2em 0;
}
.image.feature img {
display: block;
width: 100%;
}
.image.feature2 {
display: block;
margin: 0 0 5em 0;
}
.image.feature2 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left margin 40px;
}
/* Icon */
.icon {
position: relative;
}
.icon:before {
content: "";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.icon>.label {
display: none;
}
/* Lists */
ol.default {
list-style: decimal;
padding-left: 1.25em;
}
ol.default li {
padding-left: 0.25em;
}
ul {
margin: 0;
padding: 0;
}
ul.default {
list-style: none;
}
ul.default li {
display: block;
padding: 0.60em 0;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
}
ul.default> :first-child {
padding-top: 0;
border-top: none;
}
ul.icons {
cursor: default;
}
ul.icons li {
display: inline-block;
line-height: 1em;
padding-left: 0.5em;
}
ul.icons li:first-child {
padding-left: 0;
}
ul.actions {
cursor: default;
}
ul.actions:last-child {
margin-bottom: 0;
}
ul.actions li {
display: inline-block;
padding: 0 0 0 1.5em;
}
ul.actions li:first-child {
padding: 0;
}
ul.actions.vertical li {
display: block;
padding: 1.5em 0 0 0;
}
ul.actions.vertical li:first-child {
padding: 0;
}
ul.contact li {
padding: 1.05em 0;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
}
ul.contact li>span {
display: inline-block;
}
ul.contact li .address,
ul.contact li .mail,
ul.contact li .phone {
float: left;
width: 100px;
font-weight: 600;
}
ul.contact> :first-child {
padding-top: 0;
border-top: none;
}
ul.style li {
clear: both;
display: block;
padding-top: 3em;
}
ul.style> :first-child {
padding-top: 0;
}
ul.style h3 {
display: block;
margin: 0;
padding-bottom: 0.50em;
font-size: 1.1em;
font-weight: 700;
color: #404040;
}
ul.style .fa {
float: left;
display: inline-block;
width: 80px;
height: 80px;
margin-right: 1em;
background: #3ac984;
line-height: 80px;
text-align: center;
border-radius: 10px;
font-size: 2em;
color: white;
}
ul.list {
list-style: none;
}
ul.list li {
display: block;
padding: 0.60em 0;
border-top: 1px solid;
border-color: red;
}
ul.list> :first-child {
padding-top: 0;
border-top: none;
}
/* Tables */
table {
width: 100%;
}
table.default {
width: 100%;
}
table.default tbody tr {
border-bottom: solid 1px #888888;
}
table.default td {
padding: 0.5em 1em 0.5em 1em;
}
table.default th {
font-weight: 700;
padding: 0.5em 1em 0.5em 1em;
text-align: left;
}
table.default thead {
background: #555555;
color: #fff;
}
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
background: #3ac984;
border-radius: 40px;
border: 0;
color: white;
cursor: pointer;
display: inline-block;
padding: 0.80em 2em;
text-align: center;
text-decoration: none;
font-size: 1.4em;
font-weight: 600;
min-width: 10em;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
background-color: #32b777;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
.button.fit {
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
.button.small {
font-size: 0.8em;
}
/* Wrapper */
.wrapper.style1 {
background: #fff;
}
.wrapper.style2 {
background: #ececec;
padding: 6em 0;
text-align: center;
}
.wrapper.style4 {
background: #ececec;
padding: 1em 0;
text-align: center;
}
.wrapper.style3 {
padding: 2em 0 3.5em 0;
background: #ececec;
}
.wrapper.style3 span {
display: inline-block;
padding-top: 0.80em;
font-size: 2em;
font-weight: 600;
}
.wrapper.style3 .button {
float: right;
}
/* Header */
#header {
background: #333333 url("../images/pic01.jpg") no-repeat;
background-size: cover;
color: #fff;
padding: 6em 0;
text-align: center;
background-position: 0% 65%;
position: relative;
}
#header:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(16, 32, 48, 0.25);
}
#header>* {
position: relative;
z-index: 1;
}
.homepage #header {
padding: 8em 0;
background-position: center;
}
#logo {
font-size: 2em;
}
#nav>ul {
margin: 0;
}
#nav>ul>li {
border-radius: 10px 10px 0 0;
display: inline-block;
margin-left: 0.5em;
padding: 0.5em 1.5em;
}
#nav>ul>li a {
color: #FFF;
text-decoration: none;
font-size: 1.2em;
}
#nav>ul>li:first-child {
margin-left: 0;
}
#nav>ul>li:hover a {
color: #fff;
}
#nav>ul>li.active {
background: #3ac984;
}
#nav>ul>li.active a {
color: white;
}
#nav>ul>li>ul {
display: none;
}
/* Dropotron */
.dropotron {
margin-top: -2px;
background: #3ac984;
border-radius: 10px;
color: white;
min-width: 12em;
padding: 1em 0;
}
.dropotron>li {
line-height: 2em;
padding: 0 1em;
}
.dropotron>li>a {
color: #FFF;
text-decoration: none;
}
.dropotron>li.active>a,
.dropotron>li:hover>a {
color: #FFF;
}
.dropotron.level-0 {
border-radius: 0 10px 10px 10px;
font-size: 1em;
}
/* Banner */
#banner {
text-align: center;
padding: 4em 0 0 0;
}
#banner .major h2 {
font-size: 3.5em;
}
#banner .major .byline {
display: block;
margin: 0em 2em;
line-height: 1.6em;
font-size: 1.5em;
}
#banner a {
color: inherit;
}
/* Main */
.no-sidebar #main .major,
.left-sidebar #main .major,
.right-sidebar #main .major {
text-align: left;
}
.homepage #main .major {
text-align: center;
}
#main {
padding: 6em 0;
}
#main .sidebar .major {
padding-bottom: 2em;
}
#main .sidebar .major h2 {
font-size: 1.8em;
}
#main .sidebar .default li {
border-color: #cdcdcd;
}
#main .sidebar .default a {
color: #464646;
}
#main .sidebar> :first-child {
margin-bottom: 3em;
}
/* Footer */
#footer {
padding: 4em 0;
color: #fff;
}
#footer .major h2 {
font-size: 2em;
color: #FFF;
}
#footer .major .byline {
font-size: 1.1em;
}
#footer .copyright {
margin-top: 3em;
padding-top: 3em;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
text-align: center;
color: inherit;
}
#footer a {
color: inherit;
}
#middle {
height: 600px;
width: 300px;
background: green;
}
<!DOCTYPE HTML>
<!--
Horizons by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Horizons by TEMPLATED</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1>Vista 702</h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Fotos</li>
<li>Depoimentos</li>
<li>Planos</li>
</nav>
<!-- Banner -->
<div id="banner">
<div class="container">
<section>
<header class="major">
<h2>Vista 702</h2>
<span class="byline">… a melhor vista de Juiz de Fora para se passar o feriado, réveillon e comemorações em geral.</span>
</header>
Sign Up
</section>
</div>
</div>
</div>
</div>
<!-- Featured -->
<div class="wrapper style2">
<section class="container">
<header class="major">
<a id="fotos"></a>
<h2>Fotos</h2>
<span class="byline">Sua visita começa aqui.</span>
</header>
<div class="row no-collapse-1">
<section class="4u">
<a class="image feature"><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="4u">
<a class="image feature"><img src="images/pic03.jpg" alt=""></a>
<p>Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis. Donec magna.</p>
</section>
<section class="4u">
<a class="image feature"><img src="images/pic04.jpg" alt=""></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
</div>
</section>
</div>
<div class="wrapper style2">
<section class="container">
<header class="major">
<a id="depoimentos"></a>
<h2>Depoimentos</h2>
<span class="byline">Os viajantes recomendam.</span>
</header>
<div class="row no-collapse-1">
<section class="">
<a class="image feature2"><img src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left"=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="">
<a class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
</div>
</section>
</div>
<!-- Main -->
<div id="main" class="wrapper style1">
<section class="container">
<header class="major">
<a id="planos"></a>
<h2>Uma janelas, diversas</h2>
<span class="byline">Um plano para todos os bolsos.</span>
</header>
<div class="row">
<!-- Content -->
<div class="6u">
<section>
<ul class="style">
<li>
<span class="fa fa-wrench"></span>
<h3>Integer ultrices</h3>
<span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
</li>
<li>
<span class="fa fa-cloud"></span>
<h3>Aliquam luctus</h3>
<span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
</li>
</ul>
</section>
</div>
<div class="6u">
<section>
<ul class="style">
<li>
<span class="fa fa-cogs"></span>
<h3>Integer ultrices</h3>
<span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
</li>
<li>
<span class="fa fa-leaf"></span>
<h3>Aliquam luctus</h3>
<span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<!-- Lists -->
<div class="row">
<div class="8u">
<section>
<header class="major">
<h2>Donec dictum metus</h2>
<span class="byline">Quisque semper augue mattis wisi maecenas ligula</span>
</header>
<div class="row">
<section class="6u">
<ul class="default">
<li>Pellentesque elit non gravida blandit.</li>
<li>Lorem ipsum dolor consectetuer elit.</li>
<li>Phasellus nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam pharetra.</li>
</ul>
</section>
<section class="6u">
<ul class="default">
<li>Pellentesque elit non gravida blandit.</li>
<li>Lorem ipsum dolor consectetuer elit.</li>
<li>Phasellus nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam pharetra.</li>
</ul>
</section>
</div>
</section>
</div>
<div class="4u">
<section>
<header class="major">
<h2>Donec dictum metus</h2>
<span class="byline">Mattis wisi maecenas ligula</span>
</header>
<ul class="contact">
<li>
<span class="address">Address</span>
<span>1234 Somewhere Road #4285 <br />Nashville, TN 00000</span>
</li>
<li>
<span class="mail">Mail</span>
<span>someone#untitled.tld</span>
</li>
<li>
<span class="phone">Phone</span>
<span>(000) 000-0000</span>
</li>
</ul>
</section>
</div>
</div>
<!-- Copyright -->
<div class="copyright">
Design: TEMPLATED Images: Unsplash (CC0)
</div>
</div>
</div>
<a id="middle"></a>
</body>
</html>
thanks
Just use white-space: nowrap on the text element to make the text stay on the same line regardless of the parents size.
And for the images, you need to either add margin or padding on the parent container.
i.e,
.4u p {
white-space: nowrap;
}
and
.4u{
padding: 0.23em;
}
or
.4u{
margin: 0.23em;
}
apparently the footer background went missing too
Edited:
This is the changes I made to your code
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex-item + .flex-item {
margin-top: 30px;
}
.image.feature2 {
display: block;
margin: 0 0 7em 0;
}
<div class="row no-collapse-1">
<div class="flex">
<section class="flex-item">
<a class="image feature2"><img
src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left" =""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="flex-item">
<a class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
This is my current code and the problem now is that image3, which is the 2nd box is not showing the correct height... The following is the updated code for my style.css:
body {
margin: 0;
padding: 0;
font-family: 'Arial', 'serif';
}
.nav {
background-color: #ffffff;
color: #000000;
list-style: none;
text-align: right;
padding: 20px 0 0 0;
}
.nav > li {
display: inline-block;
padding-right: 50px;
font-size: 12px;
}
.nav > li > a {
text-decoration: none;
color: #000000;
}
.nav > li > a:hover {
color: #c1c1c1;
}
.logo {
color: black;
float: left;
padding-left: 25px;
font-size: 12px;
font-weight: bold;
}
.logo > a {
text-decoration: none;
color:black;
}
.banner {
width: 100%;
display:block;
}
.banner > .banner-image {
width: 100%;
display: block;
height: 700;
}
.service1 {
width: 298px;
border: 1px solid #c1c1c1;
margin: 20px 10px;
padding: 0 5px;
float: left;
}
.service1 > p {
font-size: 14px;
color: #636363;
max-width: 200px;
text-align: justify;
}
.services {
width: 1500px;
margin:0 auto;
}
h1 {
font-size: 16px;
font-weight: bold;
background-color: #c1c1c1;
color: #ffffff;
padding: 10px 0;
margin: 0 -6px;
}
.image {
max-width: 135px;
margin: 15px 0 0 0;
}
.heading {
text-align:center;
font-size: 25px;
color: #000000;
margin:100px 0 50px 0;
font-weight: bold;
}
.service1 > image1 {
max-width: 120;
margin: 15px 0 0 0;
}
.service1 > image3 {
max-width: 120;
margin: 15px 0 15px 0;
}
.image:hover {
opacity: 0.2;
max-width: 200px;
margin-top:15px;
}
.image1:hover {
opacity: 0.2;
max-width: 200px;
margin-top:15px;
}
.message {
text-align: center;
font-size: 30px;
font-weight: bold;
}
.message ul {
text-align: center;
list-style-position: inside;
}
This is my index.html code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type ="text/css" href="style.css">
<title>Pianocourse101</title>
</head>
<body>
<ul class="nav">
<div class="logo">
Pianocourse101
</div>
<li><a href="http://localhost/pianocourse101/register.php">Register</li>
</a>
<li>Login</li>
<li>About Me</li>
<li>Contact Us</li>
<div class="banner">
<img class="banner-image" src="images/mervin.gif">
</div>
<br></br>
<br></br>
<div class="message">
<p> At Pianocourse101, you will learn the following</p>
<ul>
<li>Basic hand positions</li>
<li>Posture</li>
<li>Rhythm</li>
<li>Finger numbers</li>
<li>Letter names</li>
</ul>
</div>
<div class="heading">Services</div>
<div align="center" class="services">
<div class="service1">
<h1>Download Section: Primer Level</h1>
<img class="image1" src="images/treble.png">
<p>Access full contents for just <strong>$50!</strong> Learn the
basic hand positions, finger numbers and letter names!</p>
</div>
<div class="service1">
<h1>Download Section: Level 1</h1>
<img class="image3" src="images/bass.jpg">
<p>Access full contents for just <strong>$100!</strong> Learn some
advanced pieces, slurs and staccatos!</p>
</div>
<div class="service1">
<h1>Download Section: Level 2</h1>
<img class="image" src="images/crotchet.png">
<p>Access full contents for just <strong>$150!</strong> Progress and
play some more advanced pieces hands together!</p>
</div>
<div class="service1">
<h1>Download Section: Level 3</h1>
<img class="image2" src="images/bass.jpg">
<p>Access full contents for just <strong>200!</strong> Feeling more
confident and need a challenge? Level 3 will provide you with more
challenging pieces!</p>
</div>
</div>
<section>
</section>
<footer>
</footer>
</body>
</html>
I am not sure why I have to add more comments but I can't figure out why my second box is not lining up correctly...
/* CSS alignment is read as top, left, bottom, right*/
I need to create this type of shape, the green part is a button.
This design is for smartphone only and the rectangle must cover whole width of screen.
Maybe try this one. Hope it helps you.
Note: Just change the element of button if you are using anchor tag instead.
.placeholder-box {
position: relative;
display: block;
width: 300px;
min-height: 150px;
margin-top: 50px;
padding: 30px;
border: 1px solid #888;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
}
.placeholder-box p {
text-align: center;
margin: 0 0 15px;
}
.placeholder-box ul {
margin: 0;
}
/* Button */
button {
display: block;
border: solid white;
border-width: 0 10px;
border-radius: 0;
background: green;
color: white;
font-size: 18px;
margin: -60px auto 15px;
padding: 15px;
}
<div class="placeholder-box">
<button type="button"> Button Text Here </button>
<p>Nunc condimentum mauris elit</p>
<ul>
<li>Duis quis eros felis</li>
<li>Nulla facilisi</li>
</ul>
</div>
<div style="padding:100px;" align="center">
<a style=" background-color:#01B901;background-color: #01B901;padding: 50px;color: white;padding-top: 20px;padding-bottom: 20px;">hello btn</a>
</div>
is this what u wan?
I'm currently trying to add some simple padding to the bottom of my testimonial element, so that it doesn't end right after the text.
It seems that no matter what value I enter in padding or padding-bottom, the bottom padding expands a set amount. I'm wondering how to fix this so it displays padding that is specific to the value I set.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
How padding shorthand works....
default declaration of padding looks like this:
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
You can abbreviate that and apply padding to all sides equally:
padding: 10px;
You can abbreviate a little less and apply different values to top and bottom, and right and left.
This equates to padding: top/bottom right/left;
padding: 10px 20px;
You can use full abbreviations to apply different values to each of the 4 sides independently:
This equates to padding: top right bottom left; or:
padding: 10px 20px 5px 20px;
In your CSS you have no top or bottom padding applied to the testimonial class, you only have right/left padding applied:
.testimonial {
padding: 0 5%;
}
You basically have (pseudo code as example):
.testimonial {
padding: top=0 right=5% bottom=0 left=5%;
}
If you want a the same padding all the way around, remove the first 0 in the property:
.testimonial {
padding: 5%;
}
If you want a similar top/bottom padding, then merely adjust the padding property to add top/bottom values:
.testimonial {
padding: 10% 5%;
}
If you want different padding on the top and bottom, then adjust the padding property to add all the values:
.testimonial {
padding: 0 5% 10% 5%;
}
You don't have any bottom padding. Changing to padding: 10px 5% adds 10px padding to the top and bottom, 5% to the left and right.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 10px 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5% 5% 0;
background-color: rgba(50, 173, 140, 0.82);
}
Adding all of the values ( even if 0 ) solved the problem right away.
Also, I am aware that if only two values are given the 1st represents top and bottom.
You don't currently have padding on the bottom of the testimonial div.
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 1% 5%;
background-color: rgba(50, 173, 140, 0.82);
}
Change the padding to the above ... padding: 1% 5%; or to target specifically the bottom ... padding 0 5% 1%; ... do that and you should be good to go, unless I'm misunderstanding your question. Good luck!
Found that having the last set of text in .testimonial in a paragraph tag, it was inserting a line break. So simply took that away and now it seems to be working fine.
I have implemented a full, non scrolling background image with CSS. However, when the content itself overflows the page no scrollbars appear and the content cannot be seen. I have tried using various variations of "overflow: scroll" in a few of my divs but to no avail; scroll bars appear but they do not scroll, or do not scroll properly. I think there may be a structural problem with my divs but I'm not particularly experienced with CSS and couldn't find a thread similar to this on StackOverflow.
http://jsfiddle.net/YXp5p/
<body>
<div id="bg">
<img src="images/background.jpg">
</div>
<div id="wrapper">
<div id="header">
thread #6bUp0
</div>
<div id="sidebar">
<div id="content">
<div id="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat ante, placerat accumsan aliquam at, rhoncus eget nunc.
</div>
</div>
</div>
</div>
</body>
body{
margin: 0px;
color: #000;
font-family: helvetica, times;
font-size: 16px;
}
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
#wrapper {
position: fixed;
top:0%;
left:18%;
width: 59%;
height:200%;
padding: 0%;
}
#header {
background: url(images/header.gif) repeat-x;
border: 1px solid black;
width: 100%;
height:29px;
padding-left: 3%;
padding-right: 3%;
padding-top: 6px;
font-family: "Lucida Console", "Courier New", sans-serif;
text-align: center;
font-size: 20px;
font-weight: bold;
}
#sidebar {
background-color: #EEEEEE;
width: 100%;
height: 100%;
padding-left: 3%;
padding-right: 3%;
right: 3%;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
border-left: 1px solid #000;
border-right: 1px solid #000;
opacity: 1;
padding-top: 8px;
}
#post{
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
background-color: #FFF;
opacity: 1;
}
You are looking for background-attachment:fixed not position:fixed you can achieve what you want like this:
body{
background-image:url('images/background.jpg');
background-position:center top;
background-attachment:fixed;
margin: 0px;
color: #000;
font-family: helvetica, times;
font-size: 16px;
}
Oh, and remove the:
<div id="bg">
<img src="images/background.jpg">
</div>
part of your document.