I have something to ask about html css
I have layout that I want to achieve like picture 1 below
But, if it zoomed in several percentage, it becomes like picture 2 below
what I want is, it stable like picture 1 in any zoom
Here is the code
body {
background-color: #430600;
width: 1280px;
margin: 0 auto;
align-content: center;
padding: 0;
}
header {
position: fixed;
width: 100%;
z-index: 15;
}
main {
float: left;
margin-top: 120px;
}
h1 {
color: white;
text-align: center;
font-style: italic;
z-index: 10;
}
h2 {
color: white;
text-align: center;
}
#section-banner {
}
#section-banner h2 {
position: absolute;
text-align: center;
top: 300px;
left: 0;
width: 100%;
transform: translateY(-50%);
color: white;
font-size: 5em;
font-style: italic;
z-index: 1;
}
#section-aboutus-1 {
color: white;
margin-top: 50px;
text-align: center;
}
#aboutus-1 {
float:left;
}
#aboutus-table {
float:left;
}
#aboutus-image-1 {
float:left;
width: 50%;
}
#aboutus-detail-1 {
float: right;
width: 45%;
text-align: center;
font-size: 1.4em;
margin: 50px 20px 50px 20px;
display: inline-block;
}
#aboutus-detail-2 {
float:left;
width: 45%;
text-align: center;
font-size: 1.4em;
margin: 75px 20px 50px 20px;
display: inline-block;
}
#aboutus-image-2 {
float:right;
width: 49%;
}
#aboutus-detail-3 {
margin: 50px 150px 50px 150px;
float:left;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='index.css?ver=1.0' media='all' />
</head>
<body>
<section id="section-aboutus-1">
<div id="aboutus-image-1">
<img src="https://i.stack.imgur.com/jDg7r.jpg" alt="" />
</div>
<div id="aboutus-detail-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
<br><br>
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
<br><br>
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
<br><br>
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.
</div>
<div id="aboutus-detail-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
<br><br>
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
<br><br>
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
<br><br>
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.
</div>
<div id="aboutus-image-2">
<img class="image" src="https://i.stack.imgur.com/6EScx.jpg" alt="" />
</div>
<div id="aboutus-detail-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
<br><br>
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
<br><br>
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
<br><br>
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.
</div>
</section>
</body>
</html>
Any help appreciated
First, you should improve this HTML code, separating block.
You should put #aboutus-detail-1 and #aboutus-image-1 in a separeted div and in CSS you say:
float: left;
width: 100%;
for those two new divs.
The same for the others #aboutus
would you be interested in using a responsive framework like bootstrap?
https://jsfiddle.net/audetcameron/ggdz2Lnj/ just a quick example
<body style="background:#430600; color:#ffffff">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div id="aboutus-image-1">
<img src="https://i.stack.imgur.com/jDg7r.jpg" alt="" class="img-responsive"/>
</div>
</div>
<div class="col-xs-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio.
Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat.
Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci.
In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.</p>
</div>
<div class="col-xs-6">
<div id="aboutus-image-2">
<img class="image" src="https://i.stack.imgur.com/6EScx.jpg" alt="" class="img-responsive"/>
</div>
</div>
</div>
</div>
</body>
Related
The following code results in the scrollbar not being clickable and/or draggable, and this happens arbitrarily in Chrome only.
Is there anything obvious in the code that's causing this?
- If so, how should be fixed?
- If not, how do I continue to troubleshoot it?
I tried working the Chrome debugger but clicking on the sidebar does not reveal anything useful.
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image:url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat:repeat-x;
}
header {
display:flex;
flex-wrap: wrap;
justify-content:space-between;
align-items:center;
margin-bottom:23px;
}
#logo {
margin-left:15px;
}
#forum-link {
max-width:110px;
margin-right:35px;
}
#forum-link a{
color:white;
text-decoration:none;
font-weight:bold;
font-size:x-large;
}
footer
{
text-align:center;
font-size:small;
}
#media only screen and (orientation: portrait) {
html{
margin: 0;
height: 100%;
}
body{
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header{
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin:initial;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link {
margin: initial;
max-width:initial;
background:#323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link a{
font-weight:bold;
font-size:.9em;
}
#forum-link a:hover{
text-decoration:underline;
}
#content{
flex: 1;
margin: 0px 20px 0px 20px;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85 1x, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
<div id="content">
<h1>Lorem Ipsum</h1>
<h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
<h3>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquam mi. Nam in dictum nulla. Donec sit amet mollis nunc. Aliquam a elit quis felis finibus accumsan. Vivamus vel pellentesque mauris. Integer et commodo lectus. Donec fermentum urna ac lorem euismod fermentum. Aliquam porttitor, lacus id consectetur auctor, velit est mollis risus, iaculis aliquet massa massa in velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et semper orci, sed rhoncus purus. Cras rhoncus accumsan libero nec sagittis. Proin ac ipsum suscipit tortor tincidunt malesuada et at sapien. Morbi mollis ultricies lacus ut blandit.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque sagittis mi. Proin commodo tempor sem at euismod. Nam vel porta mauris. Nunc rutrum libero vitae dui tincidunt, eget condimentum mi semper. Cras gravida nunc vel pulvinar tempor. Nunc rhoncus rutrum justo, vel facilisis ex fringilla in. Sed posuere ex non eros ultrices varius.
<p>
Fusce vestibulum quis arcu ac dapibus. Maecenas felis ante, auctor sed congue ut, convallis a arcu. Nunc vel maximus quam. Nam mauris purus, commodo et leo vel, volutpat sollicitudin libero. Mauris porta lectus nibh, et suscipit ipsum condimentum elementum. Sed sem lectus, aliquet id condimentum id, maximus eget felis. Sed ornare augue libero, eget hendrerit sem porttitor vitae. Ut porttitor vehicula dapibus. Suspendisse at accumsan orci.
<p>
In ante eros, condimentum id elit quis, sagittis bibendum arcu. Phasellus in metus quam. Sed gravida condimentum mi sit amet molestie. Ut blandit tempus libero ut porta. Sed blandit sem eget mi rutrum, at lacinia risus efficitur. Duis rhoncus porta lacus, scelerisque scelerisque tellus sodales quis. Nunc maximus ex et placerat commodo. Curabitur quis bibendum tortor. Sed condimentum vel urna laoreet mollis. Quisque molestie orci sed sodales porttitor.
<p>
Morbi ipsum erat, varius eu eros id, porta vestibulum nulla. In mattis dolor nisi, ut luctus dolor cursus a. Phasellus tempor diam enim, a accumsan justo dignissim sit amet. Vestibulum congue, arcu non accumsan rutrum, tortor augue sodales lacus, eu fermentum leo odio eu nibh. Cras non urna non leo imperdiet varius. Vestibulum eget magna metus. Curabitur eu tempor magna.
</div>
<footer>
<div id="copyright">© Copyright text</div>
</footer>
</body>
</html>
* {
box-sizing:border-box;
margin: 0;
padding: 0;
}
section {
width: 100%;
margin: auto;
display: flex;
background: gray;
}
aside,main {
flex: 1 0 50%;
}
aside{
flex: 0 0 50%;
justify-content: center;
background: #eee;
}
main {
position: relative;
color: white;
}
.container-text{
position: fixed;
margin-left: 12.5%;
margin-right: 12.5%;
margin-top: 24%;
width: 25%;
}
<section>
<aside class="aside">
<div class="container-text">
<header class="hello">Hello</header>
<div class="container-nav">
<p class="how">How</p>
<p class="are">are</p>
<p class="you">you</p>
</div>
</div>
</aside>
<main class="main">
<div class="container-content">
<h1>First heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Second heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Third heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Fourth heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
</div>
</main>
</section>
I have a layout with an aside that takes up half the screen. The content inside the aside will stay fixed for a period of time. That's being stored in the container-text container. I would like everything in this container to stay fixed, however I would like the "hello" header text both horizontally and vertically centered. The "how" "are" "you" should be be at the bottom of the screen, centered with space between (they will be navigation). I managed to center a fixed container, but could not position the navigation. It is responsive left/right, but not top/bottom (I would like nav to stay at bottom and "Hello" to stay centered).
Is this what you are looking to achieve?
* {
box-sizing:border-box;
margin: 0;
padding: 0;
}
section {
width: 100%;
margin: auto;
display: flex;
background: gray;
}
aside,main {
flex: 1 0 50%;
}
aside{
flex: 0 0 50%;
justify-content: center;
background: #eee;
display:flex;
justify-content:center;
align-items:stretch;
}
main {
position: relative;
color: white;
}
.container-text{
position: fixed;
height: 100vh;
display:flex;
}
.container-text-inner {
height:50%;
position:relative;
top:50%;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
.container-nav {
display:flex;
flex-wrap: no-wrap;
margin-bottom:15px;
}
.container-nav p {
margin-right:15px;
}
<section>
<aside class="aside">
<div class="container-text">
<div class="container-text-inner">
<header class="hello">Hello</header>
<div class="container-nav">
<p class="how">How</p>
<p class="are">are</p>
<p class="you">you</p>
</div>
</div>
</div>
</aside>
<main class="main">
<div class="container-content">
<h1>First heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Second heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Third heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Fourth heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
</div>
</main>
</section>
I'm trying to float:right; image next to paragraph <p>, which are nested together in <div> container. The problem is that the parent <div> resize its height with the size of the text in the paragraph, that's good, but floated right image overflows the div, and same <div> didn't resize itself according to the image height.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*
overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container
*/
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<!--
<main>
<section>
-->
<img class="autoportrait" src="autoportrait.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>
I tried to use overflow: hidden; , but that works only for a single "post". When I try to put a second one, the same problem appears and length of the images that flows out of the 'content container' doubles.
I'm newbie in HTML/CSS and the code I write it's for my own knowledge. So I'll be grateful if we figure out something.
Greetings from Varna, Bulgaria!
Make the div to clear it's children using :after pseudo class.
.container{
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
border:1px solid red;
}
.content{
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container) */
}
.autoportrait{
width: 20%;
height: 20%;
/*max-width:205px;
max-height:265px;
margin-bottom: 25px;*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear:both;
}
.container:after {
visibility: hidden;
display:table;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class="content">
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
</p>
<!--</section>
</main>-->
</div>
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt.
Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem.
Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra.
Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui.
Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat.
Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula.
Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--</section>
</main>-->
</div>
</div>
Simplest solution is to use overflow: hidden; on .content .container.
I know you said you attempted it previously and even had it commented out in .content .container but it's working for me. Perhaps the issue was where/how you placed the second article in your markup.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
overflow: hidden;
border: 1px solid #ccc;
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
</div>
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>
I followed a tutorial online to make this neat little tabbed div content display but I seem to be having an issue when setting the opacity on the background. By doing this it reveals the hidden content. I've tried playing around and setting opacity at differnt layers but I havent had any luck. Here's an example that you can see. Let me know what you guys think
HTML
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab1</label>
<div class="content" id="scrollbar">
<div id="tabcontenttitle"><h1 class="h1titles">title 1</div>
<div id="scrollbar" style="overflow: auto; height: 185px; width: 100%; padding-right: 19px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula eu ante nec ultrices. Ut fermentum orci sed quam blandit, ut volutpat nunc pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa purus, pellentesque vel tincidunt vitae, adipiscing et dui. Donec imperdiet vestibulum posuere. Sed sed ipsum eget tortor interdum lobortis porta eu nisi. Duis vel purus viverra, congue odio eu, ornare nibh. <br /><br />Vestibulum a congue nisi. Morbi eget magna felis. Donec est nibh, mattis nec faucibus sit amet, dictum at sem. Nulla cursus euismod nunc, scelerisque viverra ligula tempus ac.</p><br />
<p>Nulla facilisi. In nec suscipit quam. In hac habitasse platea dictumst. Phasellus placerat eu augue nec iaculis. Praesent sapien massa, varius nec dolor ac, pulvinar faucibus ipsum. In hac habitasse platea dictumst. Curabitur rhoncus varius leo vel pharetra.</p><br />
<p>Vivamus eget bibendum nulla, vel suscipit arcu. In iaculis, lorem sit amet porta bibendum, mauris purus auctor lorem, in accumsan ipsum massa vel purus. Donec neque justo, posuere sed velit condimentum, tempor elementum arcu. Phasellus rhoncus porta odio et tincidunt. Aliquam facilisis non nisl id molestie. Cras commodo sem ut elementum ultricies. Aliquam gravida, arcu eget vestibulum gravida, leo metus tempor quam, eleifend mollis sapien dui sed justo. </p><br />
<p>Nunc eget odio ac magna facilisis bibendum. Proin eu posuere justo, eu adipiscing arcu. Vivamus et urna accumsan, ultrices diam sed, eleifend odio. Donec consequat lorem nec ipsum scelerisque fermentum.</p></div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab2</label>
<div class="content">
<div id="tabcontenttitle"><h1 class="h1titles">title 2</div>
<div id="scrollbar" style="overflow: auto; height: 185px; width: 100%; padding-right: 19px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula eu ante nec ultrices. Ut fermentum orci sed quam blandit, ut volutpat nunc pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />Nulla massa purus, pellentesque vel tincidunt vitae, adipiscing et dui. Donec imperdiet vestibulum posuere. Sed sed ipsum eget tortor interdum lobortis porta eu nisi. Duis vel purus viverra, congue odio eu, ornare nibh. Vestibulum a congue nisi. Morbi eget magna felis. Donec est nibh, mattis nec faucibus sit amet, dictum at sem. Nulla cursus euismod nunc, scelerisque viverra ligula tempus ac.</p><br />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula eu ante nec ultrices. Ut fermentum orci sed quam blandit, ut volutpat nunc pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />Nulla massa purus, pellentesque vel tincidunt vitae, adipiscing et dui. Donec imperdiet vestibulum posuere. Sed sed ipsum eget tortor interdum lobortis porta eu nisi. Duis vel purus viverra, congue odio eu, ornare nibh. Vestibulum a congue nisi. Morbi eget magna felis. Donec est nibh, mattis nec faucibus sit amet, dictum at sem. Nulla cursus euismod nunc, scelerisque viverra ligula tempus ac.</p><br />
</div>
</div>
</div>
CSS
#scrollbar::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #000;
}
#scrollbar::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#scrollbar::-webkit-scrollbar-thumb
{
background-color: #cd2429;
}
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin-left: 0px;
margin-top: 10px;
}
.tab {
float: left;
}
.tab label {
top: -1px;
font-family: font1;
font-size: 20px;
background: #000;
color: #fff;
padding: 7px;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
right: 0;
bottom: 0;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
width: 460px; height: 230px;-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-topleft: 0;
border-radius: 5px;
border-top-left-radius: 0;color: #fff; background-color: rgba(0,0,0,.6);
line-height: 20px; overflow: hidden; font-family: Tahoma, Geneva, sans-serif; font-size: 12px;
}
[type=radio]:checked ~ label {
background: #cd2429;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
#tabcontenttitle {style="display: block; clear: both; position: relative; padding-bottom: 10px;}
.tabcontenttext {style="overflow: auto; height: 15px; width: 100%; padding-right: 19px;}
In CSS section .content replace background-color: rgba(0,0,0,.6); with background-color: #282828;
The background transparency set to 0.6 reveals the content lying under the displayed layer.
New answer
In section .content replace color: #fff; with color: transparent;.
In section [type=radio]:checked ~ label ~ .content add color: #fff;; after the same section add the following code:
.content * {
visibility: hidden;
}
[type=radio]:checked ~ label ~ .content * {
visibility: visible;
}
This code makes the text color of the underlying layer transparent ( = invisible! ) and hides all the elements inside it.
you can use from background-color: rgba(0,0,0,.5);
This is how my site looks so far (Note: I'm kinda trying to teach myself how to do the HTML for this site right now. I'll worry about the design later. I know thats now how one should go about designing a site. But whatever)
http://imgur.com/10ZC7
For the header, is this HTML correct/efficient? If not, what is the correct/efficient way to achieve this effect for the header? The header is all one image.
Thanks for any help in advance!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CogRobot Studios</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
<!--[if IE]>
<link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheets/cogrobot.css" />
</head>
<body>
<div id="wrap" class="container">
<div id="bigheader"> </div>
<div id="header" class="rounded-corners column span-24 last"></div>
<div id="content" class="column span-15 colborder">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
</div>
<div id="sidebar" class="column span-7 last">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi.
</p>
</div>
<div class="rounded-cornersbottom" id="footer">
© 2005, Lorem ipsum dolor sit amet.
<br />
All trademarks and registered trademarks appearing on
this site are the property of their respective owners.
</div>
</div>
</body>
</html>
CSS
#wrap{
position: relative;
top: 150px;
}
body {
background: background: url("../images/header.png");
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
p, ul, li, h1, h2, h3, h4 {
margin: 0;
}
h3 {
margin: 0 0 20px 0;
padding: 0 0 5px 0;
font-weight: bold;
border-bottom: 1px solid #ccc;
}
#bigheader{
background: url("../images/gearheader2.png") no-repeat;
min-height: 347px;
min-width: 1062px;
top: -115px;
right: 0px;
position: absolute;
width: 100%;
z-index: -99;
margin: 0 auto;
}
#header {
width: 950px;
height: 177px;
}
#content{
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
width: 590px;
}
#sidebar {
float: right;
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
}
#footer {
background-color: #838383;
color: #c8c8c8;
text-align: center;
font-size: 90%;
clear: left;
}
h1 {
font-size: 120%;
color: #954b4b;
}
h2 {
font-size: 110%;
}
.slogan {
color: #954b4b;
}
.beanheading {
text-align: center;
line-height: 1.8em;
}
a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
.rounded-corners {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius: 20px;
}
.rounded-cornersbottom {
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-khtml-border-radius: 20px;
}
Hi i have made the some changes in your HTML due to some errors so now its working fine.
And about the header part i have made few changes as mentioned below :-
#bigheader (i have applied here small circles images rather than your heavy large header image placed in header with positing).
#header (i have made the header completely css based use of border-radius & background color.)
You can see your updated HTML here :-
http://jsfiddle.net/KXGfj/23/
Hey you have used one of the css frameworks,. anyways yes i don't know if this is correct of an efficient way but i usually encapsulate the sub header div inside header div..
in your case something like.:
{(bigheader) {(header)}}