I'm creating an image grid. it works fine outside contentwrap but when in contenwrap all the images flow outside the contentwrap. whats wrong with my code? I'm facing one more problem is image caption. I'm unable to add caption to images.
#contentwrap {
width: 850px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #ebebeb;
margin: 5px;
}
ul#grid {
list-style: none;
margin: 0 0 0;
width: 550px;
}
#grid li {
float: left;
margin: 0 0 10px 5px;
}
.portfolio {
padding: 0px;
margin-left: 0; margin-right: 0; margin-top:0;
width: 513px;
font-family: arial, serif;
text-align: center;
}
#grid li a:hover img {
opacity:0.3; filter:alpha(opacity=30);
}
#grid li img {
background-color: white;
padding: 7px; margin: 0;
border: 1px dotted #58595b;
width: 120px;
height: 98px;
}
#grid li a {
display: block;
}
HTML:
<div id="contentwrap">
<div id="content">
<div class="portfolio">
<ul id="grid">
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>
</div>
</div>
</div>
Here is working
JsFiddle
simple add
height:auto;
overflow:auto;
to class = MyBox
Related
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'm creating a page that looks like this:
Here is the code
body { min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#headlogo{
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;}
#header {
padding: 0;
background-color: #1565C0;
}
#header .section {
margin: 0 auto;
padding: 0;
width: 900px;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
background: url(./images/headernav.gif) no-repeat top right;
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color:#DEDEDE;
}
#body .section {
margin: 0 auto;
min-width: 800px;
width: 800px;
overflow: hidden;
background-color:#FFFFFF;
padding: 60px 100px 50px 100px;
min-height: 50vh
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
}
#footer .section {
margin: 0 auto ;
padding: 20px;
width: 800px;
overflow: hidden;
};
<div id="header">
<div class="section">
<img src="./images/headerlogo.png" width="340" height="110" alt="" title="">
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
The CSS is available here:
http://jsfiddle.net/85L448ds/
But I don't know how to make the page more responsive to sizing inconsistency. I want the page to default to 800 pixels wide, except where there is wide content or the browser window is too small (it should have a gray background outside this area). Whereas the height should be such that the height should not be less than the browser height.
In other words, I'd like it to work something like:
Width = 800
If Width > Window_Width then
Width = Window_Width
If Content_Width > Width then
Width = Content_Width
Whereas height should be the greater of: Content_Height and Windows_Height.
Note: Content_Width/Height cannot be predicted because I have a forum where the table structure is sometimes oversize to accomodate large images.
I've tried setting the CSS min-width property to 800, but that makes the default width 100%.
I thought height would be easy, just need to set the body to 100% height or 100vh, but that seems to have no effect...
I believe CSS Media Queries will resolve your problem.
Of course it is possibly just one of the solutions, but it is purely CSS and really easy to manage.
For more information about media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Using media queries happens like in this following example, where your #headLogo is set to change its properties once the viewport width is less or equal to 768px:
#media (max-width: 768px)
{
#headLogo {
text-align: center;
max-width: 300px;
}
}
Run snippet in full page and then play with window size after reduce the size of window your menu will hide and one button you can see. now show menu on button click.
If you run snippet so at first time you can see button because your
window size is < 768px if you want see menu then see result in full page
for responsive site use width in % not in px.
and you can also use bootstrap for that.
body {
min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.smallButton{
display:none
}
#headlogo {
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;
}
#header {
padding: 0;
background-color: #1565C0;
width:100%;
height: 90px;
}
#header .section {
margin: 0 auto;
padding: 0;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color: #DEDEDE;
width:100%
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
width:100%;
}
#footer .section {
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
#media (max-width: 768px)
{
#header .section ul {
display:none
}
.smallButton{
display:block;
position: absolute;
right: 0;
top: 32px;
}
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 500px;
height: 700px;
position: relative;
}
}
#media (min-width: 768px){
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 800px;
height: 700px;
position: relative;
}
}
<div id="header">
<div class="section">
<a href="index.html" id="headlogo">
</a>
<button class="smallButton">---</button>
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
updated fiddle
You don't actually need media queries for that
html,
body {
width: 100%;
height: 100%;
}
will make body occupy all available space in window. It will shrink and expand with window re-size.
I'm working on a new responsive design and I'm having an issue with my menu that I cannot figure out. Basically I want the background of the menu item to turn white when you hover over it and the text to turn blue. Right now, the text turns blue but the background will not turn white.
HTML Code:
<div class="header">
<div class="header_content">
<div class="logo">
<img src="images/new_logo.png" class="hdr_logo">
</div>
<div class="main_menu">
<ul>
<li>ABOUT US</li>
<li>OPERATIONS BRANCH</li>
<li>LOGISTICS BRANCH</li>
<li style="border-right:0;">COMMUNITY</li>
</ul>
</div>
</div>
</div>
CSS:
.header {
background: url('images/header2.png') repeat-x top left;
width: 100%;
height: 150px;
color: #FFF;
margin: 0;
padding: 0;
}
.header_content {
width: 960px;
margin: 0 auto;
height: 150px;
padding: 0;
}
.logo {
float:left;
width:120px;
}
.main_menu {
float:left;
height: 30px;
margin-top: 120px;
line-height: 30px;
padding: 0;
width: 830px;
}
.main_menu ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
overflow: hidden;
height: 30px;
}
.main_menu li {
float: left;
border-right: 1px solid #FFF;
text-align: center;
padding: 0;
margin: 0;
padding-left: 2%;
padding-right: 2%;
overflow: hidden;
height: 30px;
cursor: pointer;
}
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: rgb(33,47,57);
}
EDIT: Problem Resolved
The floated li was not a block element so you could not change it's background color. As soon as I added display:block; to the li it resolved this issue.
Seems to work fine for me: http://jsfiddle.net/s3JT9/
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: red;
}
I changed the color to red to illustrate.
I need a simple image gallery so I decided to build it entirly on CSS, and tried to find something appropriate in the net.I found something very close to what I want, here are the applied CSS styles:
<html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 500px;
color: #000000;
font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
}
a
{
color: #000000;
}
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
position: relative;
width: 120px;
height: 100px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
width: 110;
height: 90;
}
.gallery span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(images/tape.png) no-repeat;
}
.gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto}
</style>
</head>
<body>
<ul class="gallery">
<li><span></span><img src="image/8.jpg" alt="image" /></li>
<li><span></span><img src="image/9.jpg" alt="image" /></li>
<li><span></span><img src="image/4.jpg" alt="image" /></li>
<li><span></span><img src="image/7.jpg" alt="image" /></li>
<li><span></span><img src="image/5.jpg" alt="image" /></li>
<li><span></span><img src="image/6.jpg" alt="image" /></li>
<li><span></span><img src="image/3.jpg" alt="image" /></li>
<li><span></span><img src="image/1.jpg" alt="image" /></li>
<li><span></span><img src="image/2.jpg" alt="image" /></li>
</ul>
</body>
</html>
In fact I don't even know why i need .gallery span{} (maybe some tips here) But the main problem is this:
Pic1:
This is how my gallery looks and I want it to look just like that, but when i a:hover and enlarge the image here's what happen
Pic2:
and to make it clear one more picture
Pic3:
What I need, and want to accomplish is all enlarged images to appear like this:
Pic4:
but obviously in front of the thumbnails.Any help please.
Thanks
Leron
Add position: relative; to your body style, remove position: relative; from .gallery li, and add position: absolute; top: 0; left: 0; to .gallery a:hover img.
Your final CSS being:
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 500px;
color: #000000;
font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
position: relative;
}
a
{
color: #000000;
}
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
width: 120px;
height: 100px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
width: 110;
height: 90;
}
.gallery span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(images/tape.png) no-repeat;
}
.gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto; position: absolute; top: 0; left: 0;}
</style>
You need to use the z-index property:
.gallery a:hover img {
....
z-index: 10;
}
#Menu
{
position: relative;
width: 90%;
margin: 0 auto;
height; 50px;
min-height: 50px;
padding: 5px;
}
And children blocks:
#MenuItem
{
position: relative;
float: left;
margin: 0 auto;
margin-top: 2px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
width: 142px;
height: 37px;
}
And html:
<div id="Menu">
<div id="MenuItem"><span>Home</span></div>
<div id="MenuItem"><span>Home</span></div>
<div id="MenuItem"><span>Home</span></div>
</div>
How to make MenuItem divs to be centrated horizontally in parent div?
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
and here is the css
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
The following code should do it
#Menu
{
position: relative;
width: 90%;
margin: 0 auto;
height; 50px;
min-height: 50px;
padding: 5px;
text-align: center; /* added this rule */
}
#MenuItem
{
position: relative;
display: inline-block; /* changed from float:left */
margin: 0 auto;
margin-top: 2px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
width: 142px;
height: 37px;
}
Also, I would recommend you'd use
<ul id="Menu">
<li>...</li>
<li>...</li>
</ul>
instead of the nested divs.