Consider the following fiddle,
https://jsfiddle.net/r5ttk64r/2/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="../css/tabs.css">
</head>
<body>
<div id="page-left">
<h1>Hello World 1</h1>
</div>
<div id="page-right">
<h1>Hello World 2</h1>
<div id="tabsdiv">
<div id="description" class="tab active"><span>DESCRIPTION</span></div>
<div id="specification" class="tab"><span>SPECIFICATION</span></div>
<div id="prodfamily" class="tab"><span>PRODUCT FAMILY</span></div>
<div id="reviews" class="tab"><span>REVIEWS & ARTICLES</span></div>
<div id="showrooms" class="tab"><span>SHOWROOMS</span></div>
</div>
<div id="tabcontentsdiv">
<section id="specificationcontent" class="tabcontent active">
<div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
<div style="display:block;" class="innerspecscolumn-left">
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">LED</p>
</div>
</div>
<div id="content-right" class="specscolumn">
<div class="innerspecscolumn-left">
<p class="specname">CERTIFICATION</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">ETL</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: black;
/*background: #eee;*/
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
#page-left {
width: 35%;
float: left;
padding:40px;
}
#page-right {
width: 65%;
float: left;
padding:40px;
}
section {
display: none;
padding: 45px 10px 20px 10px;
border: 1px solid lightgray;
margin-top: -30px;
/*overflow: hidden;*/
}
#tabsdiv {
background: lightgray;
margin-right:10px;
margin-left: 10px;
height: 66px;
}
.tab {
width: 20%;
float:left;
text-align: center;
background:lightgray;
border-width: 1px 1px 1px 0;
border-color: grey;
border-style: solid;
line-height: 66px;
}
.tab:first-of-type {
border-left: 1px solid grey;
}
.tab:hover {
cursor: pointer;
}
.tab.active {
/*color: #555;*/
/*border: 1px solid #ddd;*/
/*border-top: 2px solid orange;*/
/*border-bottom: 1px solid #fff;*/
background:#99df5e;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
display: inline-block;
margin: 0;
padding: 25px 25px;
font-weight: 600;
text-align: center;
/*color: #bbb;*/
/*border: 1px solid transparent;*/
background: lightgray;
width:19.9%;
}
.tabcontent.active
{
display: block;
}
.specscolumn {
width: 50%;
float:left;
}
#content-left {
padding-right: 10px;
}
#content-right {
padding-left: 10px;
}
.innerspecscolumn-left {
width: 50%;
float:left;
}
.innerspecscolumn-right {
width: 50%;
float:right;
text-align: right;
}
.specname {
font-weight: bold;
}
#media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
I've been trying to make the border expand along with the height of the blue box.
Making the divs display: block did not work.
Making the section as Overflow: hidden does make the border extend BUT pulls the border down. I need that margin-top:-30px in place so the border looks like it's coming out of the tabs and not starting right under it.
Any ideas?
I don't know if i get it right. A possible solution is to use the clearfix technique. If you want some element to "hold" the inner elements that "float" inside, use this snippet:
.clearfix::after {
display: block;
content: "";
clear: both;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: black;
/*background: #eee;*/
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
#page-left {
width: 35%;
float: left;
padding:40px;
}
#page-right {
width: 65%;
float: left;
padding:40px;
}
section {
display: none;
padding: 45px 10px 20px 10px;
border: 1px solid lightgray;
margin-top: -30px;
/*overflow: hidden;*/
}
#tabsdiv {
background: lightgray;
margin-right:10px;
margin-left: 10px;
height: 66px;
}
.tab {
width: 20%;
float:left;
text-align: center;
background:lightgray;
border-width: 1px 1px 1px 0;
border-color: grey;
border-style: solid;
line-height: 66px;
}
.tab:first-of-type {
border-left: 1px solid grey;
}
.tab:hover {
cursor: pointer;
}
.tab.active {
/*color: #555;*/
/*border: 1px solid #ddd;*/
/*border-top: 2px solid orange;*/
/*border-bottom: 1px solid #fff;*/
background:#99df5e;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
display: inline-block;
margin: 0;
padding: 25px 25px;
font-weight: 600;
text-align: center;
/*color: #bbb;*/
/*border: 1px solid transparent;*/
background: lightgray;
width:19.9%;
}
.tabcontent.active
{
display: block;
}
.specscolumn {
width: 50%;
float:left;
}
#content-left {
padding-right: 10px;
}
#content-right {
padding-left: 10px;
}
.innerspecscolumn-left {
width: 50%;
float:left;
}
.innerspecscolumn-right {
width: 50%;
float:right;
text-align: right;
}
.specname {
font-weight: bold;
}
#media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<div id="page-left">
<h1>Hello World 1</h1>
</div>
<div id="page-right">
<h1>Hello World 2</h1>
<div id="tabsdiv">
<div id="description" class="tab active"><span>DESCRIPTION</span></div>
<div id="specification" class="tab"><span>SPECIFICATION</span></div>
<div id="prodfamily" class="tab"><span>PRODUCT FAMILY</span></div>
<div id="reviews" class="tab"><span>REVIEWS & ARTICLES</span></div>
<div id="showrooms" class="tab"><span>SHOWROOMS</span></div>
</div>
<div id="tabcontentsdiv">
<section id="specificationcontent" class="tabcontent active clearfix">
<div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
<div style="display:block;" class="innerspecscolumn-left">
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">LED</p>
</div>
</div>
<div id="content-right" class="specscolumn">
<div class="innerspecscolumn-left">
<p class="specname">CERTIFICATION</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">ETL</p>
</div>
</div>
</section>
</div>
</div>
So in your case, just add the class clearfix to specificationcontent.
Related
I'm trying to draw the black border around Test1 - Test4 to also span around Test5. At the moment, Test5 falls outside. Does anyone know how to draw it to include Test5?
.description {
border: 1px solid;
}
.descriptionTop {
display: inline-block;
}
.ao {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.pr {
text-align: right;
float: right;
}
.pm {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="ao">Test2</span>
</div>
<div class="pr">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="pm">Test5</div>
</div>
</div>
Add overflow: auto; to the container to include floated elements:
.description {
border: 1px solid;
overflow: auto;
}
.descriptionTop {
display: inline-block;
}
.altOffer {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.prices {
text-align: right;
float: right;
}
.promotion {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="altOffer">Test2</span>
</div>
<div class="prices">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="promotion">Test5</div>
</div>
</div>
This is because .prices has float. Explanation of the problem
add the following to your css (the css of famous clearfix class) -
.description:after {
content: "";
display: table;
clear: both;
}
.description {
border: 1px solid;
}
.description:after {
content: "";
display: table;
clear: both;
}
.descriptionTop {
display: inline-block;
}
.ao {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.pr {
text-align: right;
float: right;
}
.pm {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="ao">Test2</span>
</div>
<div class="pr">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="pm">Test5</div>
</div>
</div>
I'm working on a project, I have the layout how my client wants it. I'm rekatively new to responsive layouts. In mobile devices with width 321px Im struggling to get right column to expand over the full width of the screen/device.
I understand this is likely a duplicate question, below is a fiddle but if anyone can take a look and either offer some adive or point me to previous answers I'd be grateful.
#media only screen
and (max-width : 320px) {
.container {
width: 321px ! important;
}
#columnright {
display: block ! important;
float: non ! important;
width: 100% ! important;
clear: right;
margin-left; 10%;
}
}
body {
background-image: url(images/khBG.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
margin: 0;
padding: 0;
font-family: "Century Gothic", Verdana, sans-serif;
color: black;
border: 1px solid black;
}
#banner {
padding-right: 5%;
opacity: 0.7234;
background-color: #ffffff;
border-bottom: 1px solid black;
}
#banner ul {
float: right;
font-size: 0.70em
}
#banner ul li {
display: block;
float: left
}
#columnleft {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
float: left;
width: 15%;
margin-left: 0%;
padding-top: 1%;
}
#columnright {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
padding-top: 2%;
width: 50%;
float: right;
overflow: hidden;
margin-right: 30%;
}
#columnright ul {
overflow: hidden;
}
#footer {
clear: both;
background-color: #ffffff;
filter: alpha(opacity=60);
opacity: 0.7234;
padding-bottom: 1em;
padding-left: 200px;
font-size: .60em;
}
#pic-gallery {
margin-left:17.5%;
width: 400px;
height: 400px;
border: 1px solid black;
align-items: center;
display:flex;
}
#pic-ver {
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
}
#pic-hor {
padding-top: 100px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
}
#myGallery {
position: relative;
width: 320px;
/* Set your image width */
height: 267px;
/* Set your image height */
}
#myGallery img {
display: none;
position: absolute;
top: 0;
left: 0;
}
#myGallery img.active {
display: block;
}
.titlegrp {
}
.title {
float: right;
margin-right: 17.5%;
margin-top: 7.5%;
}
.subtitle {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: 1.05em;
}
.h1 {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: .9em;
}
.imgleft {
float: left;
margin-right: 5px;
}
.imgright {
float: right;
margin-right: 60px;
}
.contentpara {
padding-left: 15px;
}
.sidelinks {
font-family: "Century Gothic", Verdana, sans-serif;
}
.sidelinks a:link {
text-decoration: none;
color: black;
}
.sidelinks a:hover {
text-decoration: none;
font-family: "Segoe Script", Segoe, sans-serif;
}
.sidelinks a:visited {
text-decoration: none;
color: blue;
}
.tablecont {
padding-left: 15px;
}
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div.img:hover {
border: 1px solid #777;
}
div.img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.image-wrapper {
margin: auto;
align-items: center;
justify-content: center;
}
.gal-butt {
font-size: 2.5em;
margin: auto;
}
<!doctype html>
<html lang="en">
<header>
<meta charset="utf-8">
<title>Katie's House - West Hull Based Childminder</title>
<link rel="ICON" href="images/KH_logo.ico" type="image/ico" />
<meta name="description" content="">
<meta name="author" content="Brian Johnson">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="KHjscript.js"></script>
<link rel="stylesheet" href="kHIndex.css">
</header>
<body>
<div class="container">
<div id="banner">
<ul class="none">
<li class="nav"> <a href="https://www.facebook.com/KatieSummersChildminder/" target="_blank">
<img border="0" alt="Contact us on Facebook" src="images/fBook_Icon_Black.gif" width="30" height="30"></a></li>
<li class="nav"> <a href="mailto:katiesummers789#gmail.com">
<img border="0" alt="Contact via Email" src="images/email_Icon_Black.gif" width="30" height="30"></a></li>
<li class="field"><input type="text" title="Search" text="Search" /></li>
</ul>
<div class="titlegrp">
<img class="title" src="images/kH_title.png" alt="Katies House Title">
<img src="images/KH_logo.jpg" alt="Katies House Logo">
</div>
<div style="clear: both;"></div>
</div>
<div id="columnleft">
<div class="subtitle"><p><u>Site Navigation</u></p></div>
<div class="sidelinks">
Home
<br>
About
<br>
Sample Day
<br>
Gallery
<br>
Testimonials
<br>
Enquiries
<br>
</div>
</div>
<div id="columnright">
<div class="subtitle"><u>Katie's House Services</u></div>
<div class="imgleft"><img border="1" alt="Katie and Mindees" src="images/katie_intro_page.jpg"></a>
</div>
<p>What Katie's house can offer you</p>
<ul>
<li>Early years child care 0-5 years</li>
<li>Funded places for eligible 2,3 and 4 year olds at 15 hours per week free</li>
<li>Long term and short term care</li>
<li>Full time and part time places</li>
<li>Professional and affordable</li>
</ul>
<hr>
<p>My Qualifications</p>
<p>I attend training regularly and have qualifications in:</p>
<ul>
<li>Paediatric First Aid</li>
<li>Child Protection</li>
<li>Special Educational Needs</li>
<li>Food Hygiene</li>
<li>Health and Safety</li>
<li>Equal Opportunities</li>
<li>Home based Childcare</li>
<li>Working with two year olds</li>
<li>schemas</li>
<li>NVQ3 Children's care, Learning and Development</li>
<li>Open University - Understanding Autism</li>
</ul>
<br>
<p>Click below for a little information on Childminding</p>
Pacey's Info on Registered Childminders
<div style="clear: both;"></div>
<br>
</div>
<div id="footer">
<p>Brian Johnson
<br>© Copyright 2016. All Rights Reserved</p>
</div>
</div>
</body>
</html>
https://jsfiddle.net/aw3eb1oa/
You were really close - just need to put your media query at the bottom of the CSS so it can override the other styles. Then add a width:100%; and margin-left: 0;
#columnleft, #columnright {
float: none;
width: 100%;
}
#columnright {
display: block ! important;
clear: right;
margin-left: 0;
}
Updated: Fiddle
You need to over-ride your earlier CSS like this:
#media only screen and (max-width : 320px) {
.container {
width: auto;
}
#columnleft,#columnright {
float: none;
width: 100%;
}
}
So, I know the media query is working, because the other selector I have styled is working fine. But, the "div.A > #greet" selector is not working at all. I put a red color in there so I could tell for sure when it is working, but the text remains the same color, and it hasn't moved. What I really need to do with the text is center it. I have tried everything I can think of or find. Please help :)
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color: white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
#media screen and (max-width: 570px) {
div.A > #logo {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
height: 30%;
width: 50%;
}
div.A > #greet {
float: none;
text-align: center;
color: #BB1F25;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com /css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
</div>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>
In your HTML there's a stray </div> end tag before #greet element (as I mentioned in my comment) which failing your selector, moreover use div.A > #greet > h1, div.A > #greet > h2.
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color:white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
#media screen and (max-width: 570px) {
div.A > #logo {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
height: 30%;
width: 50%;
}
div.A > #greet > h1, div.A > #greet > h2 {
float: none;
text-align: center;
color: #BB1F25;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com /css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>
Hope, that's solved your problem!
For some odd reason, bottom-border works when I set the property to the "li" element, not for the defined "class" name (li-navclass). This presents a problem because I don't want the bottom border to be applied to the footer-links.
What I've tried:
-expanding the menu height
-bottom border, top-border
-different ways to write the property
Would greatly appreciate help on this. Thanks in advance!
.container {
position: absolute;
background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: auto;
height: 655px;
width: 900px;
}
.titlehdr {
margin: 0px;
padding: 0px;
display: inline-block;
width: 897px;
height: 110px;
}
.title-div {
display: inline-block;
position: relative;
height: 100%;
width: 90px;
margin: 0px;
padding: 0px;
}
.title {
position: relative;
top: 40px;
margin: 0px;
padding: 0px;
font-size: 70px;
color: white;
font-family: Mesquite Std;
letter-spacing: 1.2px;
}
.barandgrill-div {
display: inline-block;
vertical-align: bottom;
}
.barandgrill-text {
margin: 0px;
padding: 0px;
font-family: Arial;
font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
padding-left: 0px;
margin-left: 0px;
font-size: 15px;
}
.nav-container {
text-align: center;
display: block;
top: 100px;
margin: 0px;
padding: 0px;
width: 900px;
height: 40px;
background-color: #901423;
border-style: solid;
border-width: 1px;
border-color: #111111;
}
.menu {
display: inline-block;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
overflow: hidden;
font-color: #000000;
}
.li-navclass {
border-bottom: 1px solid #000;
}
li {
display: inline-block;
position: relative;
padding: 0 1em;
font-size: 150%;
}
.nav-text {
color: #ffffff;
font-weight: bold;
opacity: .3;
}
.nav-container ul a {
text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
display: block;
width: 900px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #111111;
opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
text-decoration: none;
list-style-type: none;
display: block;
position: relative;
text-align: center;
font-size: 12px;
}
.ftr-button {
position: relative;
top: -5px;
list-style: none;
text-decoration: none;
color: rgb(147, 104, 55);
}
.ftr-links {
text-decoration: none;
list-style-type: none;
}
.vert-line {
height: 13px;
border-right: 1px solid #909090;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sticky Navigation Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--Title-->
<div class="titlehdr">
<div class="title-div">
<p class="title">Donatelo's</p>
</div>
<div class="barandgrill-div">
<p class="barandgrill-text">Mediterranean Bar and Grill</p>
</div>
</div>
<!--Navigation Menu-->
<div class="nav-container">
<ul class="menu">
<li class="li-navclass">Story</li>
<li class="li-navclass">Menu</li>
<li class="li-navclass">Gallery</li>
<li class="li-navclass">Catering</li>
<li class="li-navclass">Contact</li>
</ul>
</div>
<!--Grey Box-->
<div class="content">
<div id="sidebar">
<div id="scroller">
</div>
</div>
</div>
<!--footer-->
<div class="foot">
<ul class="ftr-links">
<li class="vert-line">Story</li>
<li class="vert-line">Menu</li>
<li class="vert-line">Gallery</li>
<li class="vert-line">Catering</li>
<li class="vert-line">Contact</li>
</ul>
<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$( this ).css( "opacity", ".8" );
});
$(".nav-text").mouseout(function() {
$(this).css( "opacity", ".2");
});
$(".ftr-button").mouseover(function() {
$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
$(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
$(this).css("opacity", ".8");
});
});
</script>
</html>
Add style to :after
.li-navclass:after {
border-bottom: 1px solid #000;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
}
I have 2 boxes that should show up next to eachother. I want one to have a vertical fixed position.
So when I scroll up or down the box stays at the same height.
But I don't want it to be horizontal fixed, because I want the 2 boxes together always in the center. Even when you make your browser bigger or smaller. For this I use the margin: 20px auto;
Is there any way how I can keep the margin and get 2 boxes where 1 of them has a vertical fixed position.
Just like this website when making a post. There is a the main page with the question and a sidebox with similar question that always stays on the screeen.
My code so far:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/favicon.ico">
<style>
html,
body {
background-color: #026642;
}
#container {
width: 800px;
margin: 20px auto;
position: relative;
}
#sidebox {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
width: 180px;
position: absolute;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position: absolute;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebox">
Sidebox
</div>
<div id="indexcontainer">
<div id="header">
<img src="images/emte.jpg" alt="logo" width="200" height="100">
</a>
</div>
<div id='content'>
Main text box
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
How it needs to work:
use this CSS...
body {
background-color: #026642;
}
#container {
width: 100%;
}
#container #indexcontainer{
margin-left:23%;
width:30%;
}
#container #indexcontainer #header #sidebox {
background-color: white;
color:red;
padding: 5px;
margin-left:31%;
border-radius: 5px;
width: 20%;
position: fixed;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position:relative;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
for further look at this jsfiddle link http://jsfiddle.net/NJMK6/4/
Hope this help you... thanks
<html>
<head>
<script type="text/css">
#sidebox{
margin:left;
position:fixed;
}
</script>
</head>
<body>
<div id="sidebox">
Sidebox
</div>
<p>
other data to display......
</p>
</body>
Hope this will helps
also you can see this JsFiddle link http://jsfiddle.net/Dn3UH/
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 40%;
position: relative;
margin: 0 auto;
}
#container {
width: 100%;
margin: 20px auto;
position: relative;
}