I'm working on a webpage to get cover photos from eBooks next to each other. Under each photo there are two buttons. see picture.
I used one div as a container, then I used <li> because I will have a lot more books. This page is on a fluid website.
<div id="ebooks_container">
<li>
<div id="ebook_single"><img src="cover1.jpg">
<div id="download_btn">
DOWNLOAD
</div>
<div id="review_btn"><a class="inline" href="#data2">REVIEW</a>
</div>
</div>
</li>
I can't get the buttons under the image and when I copy this code and paste it under this the next eBook single div shows up under the first.
I want them next to each other.
Hope someone can help me. I know a little bit of CSS3 but I'm an amateur :)
This is what I am trying to do:
It looks like you are just starting out. I would try to find an online video resource to help you learn like lynda or treehouse. (am i allowed to plug these website names? I am not sponsored by either).
I have a rough layout of what you are looking for. This might help.
UPDATE: The reason this code is effecting your current code is because these styles are being applied to ALL of your 'UL', 'LI' tags. You need to make this 'UL' unique by adding a class to it. I update the code to show you want I mean.
HTML
<ul class="book_covers clearfix">
<li>
<div>Image Panel</div>
<a class="btn1" href="#">Button1</a>
<a class="btn2" href="#">Button2</a>
</li>
<li>
<div>Image Panel</div>
<a class="btn1" href="#">Button 1</a>
<a class="btn2" href="#">Button2</a>
</li>
</ul>
CSS
*{
box-sizing: border-box;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.book_covers {
list-style-type: none;
width: 100%;
height: 500px;
background: #333;
padding: 0px;
margin: 0px;
}
.book_covers li {
width: 50%;
height: 100%;
background: yellow;
display:inline-block;
float:left;
border: 2px solid #000;
}
.book_covers li div{
width: 90%;
height: 70%;
padding:0px;
margin: 5%;
background: blue;
border:2px solid #000;
}
.book_covers li .btn1,
ul li .btn2{
width: 42.5%;
height: 22.5%;
padding: 0;
float: left;
border:2px solid #000;
text-decoration: none;
color: #fff;
text-align: center;
}
.book_covers li .btn1{
margin:0 2.5% 5% 5%;
background: orange;
}
.book_covers li .btn2{
margin:0 5% 5% 2.5%;
background: pink;
}
Here is the updated fiddle!
Your code might look something like:
HTML
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/javascript'>
#import main.css;
</style>
</head>
<body>
<div id='cnt1'>
<img id='img1' src='cover1.jpg' />
<a href='eBooks_ENG/eBook1.epub' class='btns' id='dwn'>DOWNLOAD</a>
<a href='#data2' class='btns' id='rev'>REVIEW</a>
</div>
<div name='data2' id='data2'>Your data here</div>
</body>
</html>
main.css may look something like:
#cnt1{
height:320px; width:300px; position:relative;
}
#img1{
display:block; height:300px; width:300px;
}
.btns{
display:block; height:20px; width:150px; text-align:center; float:left;
}
not tested but should work
<style>
ul{
list-style-type: none;
}
ul li{
border:5px solid #ccc;
background:#ccc;
width:260px;
height:400px;
margin-right:4px;
float:left;
}
li div{
width: 100%;
height:90%;
background:#dedede;
}
li span{
display: inline-block;
width: 40%;
height: 5%;
background:#fff;
padding:8px;
border:5px solid #ccc;
float:left;
}
</style>
<ul>
<li>
<div>image</div>
<span>Download</span>
<span>Review</span>
</li>
<li>
<div>image</div>
<span>Download</span>
<span>Review</span>
</li>
</ul>
#magnetwd
Thanks for looking into my problem.
I uploaded a duplicate site, this is the page [link] (http://hoddenbagh.nl/test_bibleopen/subjects_eBooks.html)
The NAV bar is not good anymore.
And the shadow Gif under the photo neither.
Probably that all has to do with the new CSS.
To compare, this is the original site. NAV bar and photo shadow are good. [link] (http://hoddenbagh.nl/bibleopen/index.html)
P.S. I didn't do much on styling yet and the buttons are still basic.
Related
I have a nav bar with a few images as the navigation buttons and when I zoom to 110% on chrome (only) the right image falls out of the nav bar. It is for a school project.
Here is the HTML for the nav bar as well as the CSS.
CSS
nav {
width: 960px;
height: 54px;
background-color: #191a19;
margin: auto;
}
.menu_button {
border: 2px solid #19242e;
}
.menu_button:hover {
background-color:#000;
opacity:0.5;
}
html
jsfiddle
<style>
nav {
width: 960px;
height: 54px;
background-color: #191a19;
margin: auto;
overflow:hidden;
}
.menu_button {
border: 2px solid #19242e;
}
.menu_button:hover {
background-color:#000;
opacity:0.5;
}
nav a{
display:block
width:233;
float:left;
height:50;
}
nav img{
width:233;
height:50;
}
</style>
<nav>
<a href="index.html">
<img class="menu_button" src="images/home_button.jpg" alt="home button">
</a>
<a href="overview.html">
<img class="menu_button" src="images/overview_button.jpg" alt="overview button">
</a>
<a href="tools.html">
<img class="menu_button" src="images/tools_button.jpg" alt="tools button">
</a>
<a href="tutorials.html">
<img class="menu_button" src="images/tutorials_button.jpg" alt="tutorials button">
</a>
</nav>
try this one dude, please vote for my answer so that i can help you again in the future. thanks
You should change either the width of your nav css element to a higher number (965px) or lower your .menu_button class' border to 1px;
Hope it helps.
I am new to CSS but loving it so far. But, I've hit a road block with my code. I'm almost there but need some proper guidance.
I have provided my website where I'm attempting to place my logo to the left side of my nav. I want the site content CENTERED with a width of 960px and 0px from the top (against the top of the browser). I am using the CSS display: inline with li selectors to try to achieve my goal.
I'm trying to also get the inline nav to be right up against the logo. I'm also trying to mimic the logo's top 4px border with the CSS a:hover selector on the nav. I want this to be at the margin-top: 0px in the browser.
Here's the link to my almost correct logo/nav layout:
http://multimediaxchange.com/vls/index.php?page=home
Here's my CSS CODE:
.topbar {
width:960px;
height:87px;
text-align:center;
}
.topbar-inner {
width:960px;
margin:0 auto 0 auto;
text-align:center;
}
.logo {
margin-top:0px;
display:inline;
}
img {
float:left;
border: 0;
padding: 0;
margin: 0;
}
.menu {
display:inline;
margin-top:0px;
}
.menu > ul > li {
display:inline-block;
position:relative;
border-top:4px solid #FFF;
margin-right:0px;
padding-top:40px;
min-width:80px;
}
.menu > li {
display:inline-block;
list-style:none;
margin-top:50px;
}
.menu li a {
color: #000;
display: block;
text-decoration:none;
}
.menu li:hover {
border-top-color: #039;
}
.menu li:hover a {
color:#039;
}
body {
font-family:Arial, Helvetica, sans-serif;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.content {
height:500px;
padding:0px 20px 20px 20px;
text-align:left;
font-size:12px;
}
.footer {
border-top:1px solid #DFDFDF;
width:960px;
margin: 0 auto;
font-size:11px;
text-align:center;
}
Here's the HTML Code:
<?php
// Load Setup document:
include('_config/setup.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" type="text/css" href="_css/styles.css">
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="logo"><img src="/vls/_images/mylogo.png" height="87" width="287"/></div>
<!-- logo -->
<div class="menu"><?php include('_template/nav_main.php'); ?></div>
<!-- menu -->
</div>
<!-- topbar-inner -->
</div>
<!-- topbar -->
<div class="bdy_hdr"><?php get_page_name($dbc, $pg); ?></div>
<div class="content"><?php get_page_body($dbc, $pg); ?></div>
<div class="footer"><?php include('_template/footer.php'); ?></div>
</body>
</html>
Thanks!
everything is right but you need to add this property margin:0 auto; not to the topbar-inner class but to the topbar class, and this like like this. so change present
.topbar {
width:960px;
height:87px;
text-align:center;
}
to
.topbar {
width:960px;
height:87px;
text-align:center;
margin:0 auto;
}
The secrets are in the .topbar class. Remove the text-align:center, and instead add a margin:0 auto. Should look like this:
.topbar {
width:960px;
height:87px;
margin:0 auto;
}
The text-align:center prevents the <ul> from being centered in the remaining space after the image floats, so the top border looks seamless.
The margin:0 auto centers the whole kaboodle.
Add this line:
.menu ul {
margin:0;
}
and it will be on the top of the browser. My comments about a lot of extra junk still apply though :)
EDIT
Here's your page, with the "minimalist" markup and styling I'm talking about. There's one or two minor tricks a beginner may not know, but you should easily understand pretty much everything.
Just slice out all the crap extra divs, basically, and you can chase down problems quicker, target elements easier, have a lighter page (in bytes, that is) and generally add a bit of elegance to your solutions.
This rebuild does everything the original did, in half the space.
HTML:
<body>
<div class="topbar">
<img src="logo.png" height="87" width="287"/>
<ul class='menu'>
<!-- Not great practice to stagger </li> like this,
but a good way to avoid rogue padding. -->
<li>Home
</li><li>Staffing
</li><li>Jobs
</li><li>Training
</li><li>GSA
</li><li>Why Us
</li><li>Clients
</li><li>Contact</li>
</ul>
</div>
...the rest of your page...
</body>
CSS:
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
}
.topbar {
width:960px;
height:87px;
margin:0 auto;
}
.topbar img {
float:left;
border: 0;
}
ul.menu {
margin:0 0 0 287px;
padding:0;
}
ul.menu li {
display:inline-block;
position:relative;
border-top:4px solid #FFF;
list-style:none;
padding-top:40px;
min-width:80px;
}
ul.menu li a {
color: #000;
display: block;
text-decoration:none;
}
ul.menu li:hover {
border-top-color: #039;
}
ul.menu li:hover a {
color:#039;
}
It is a good practice to put your divs inside a container, something like this:
<div id="container">
<div class="topbar">
<div class="topbar-inner">
<div class="logo">
<img src="/vls/_images/mylogo.png" height="87" width="287"/>
</div>
<div class="menu">
<?php include('_template/nav_main.php'); ?>
</div>
</div>
</div>
<div class="bdy_hdr">
<?php get_page_name($dbc, $pg); ?>
</div>
<div class="content">
<?php get_page_body($dbc, $pg); ?>
</div>
<div class="footer">
<?php include('_template/footer.php'); ?>
</div>
</div>
Then do just this in your CSS:
.topbar{
margin:0 auto;
}
I suggest you to give a width to .bdy_hdr, .content and .footer and then do the same with them, i.e:
.bdy_hdr,
.content,
.footer{
width:960px;
margin:0 auto;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
“text-decoration” and the “:after” pseudo-element
“text-decoration” and the “:after” pseudo-element, revisited
I am making a navigation links using <a> tags Following is the html
<div class="nav_container">
<a class="panel" href="demolink">menu1</a>
<a class="panel" href="demolink">menu2</a>
<a class="panel" href="demolink">menu3</a>
</div>
And applying the :after css property to put a pipeline for the divider
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
}
.panel:last-child:after{
content:"";
}
I want to put underline when the menu is selected for that I am applying a class called selected
.panel.selected {
text-decoratoion:underline;
}
But the problem is The pipline after menu "|" is also having the underline and I want to remove it. I even tried to change the css for .panle:after as follows,
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
text-decoration:none;
}
But still the underline is there.
Any suggestion,
Thank you.
Try this one:
.panel:after {
display:inline-block;
}
Or use the following:
.panel {
display: inline-block;
vertical-align: top;
position: relative;
color: black;
font-size: 14px;
font-weight: bold;
margin: 0 5px;
}
.panel:after {
content: '';
border-left: solid 2px red;
left: -10px;
top: 2px;
height: 10px;
position: absolute;
}
.panel:first-child:after {
display: none;
}
.panel:hover {
text-decoration: none;
}
<div class="nav_container">
<a class="panel" href="demolink">menu1</a>
<a class="panel" href="demolink">menu2</a>
<a class="panel" href="demolink">menu3</a>
</div>
you can use one another method also for your question :- demo
I have tried with minimized code :-
HTML
<div class="nav_container">
menu1
menu2
menu3
</div>
CSS
.nav_container a {
color:red;
display:inline-block;
}
.nav_container a + a{
color:red;
border-left:1px solid red;
padding-left:7px;
line-height:12px;
}
I don't exactly know what your .panel.selected {} part does. However you can make the link underlined when it is focused by using this.
.panel:focus {text-decoration:underline;}
And you can remove the underline from links and pipes(|) like this.
.panel:link {text-decoration:none;}
Add above two in to your page and check.
A simple menu for your requirement.
HTML:
<div class="menu">
<ul>
<li class="last-menu">menu1</li>
<li class="last-menu">menu2</li>
<li>menu3</li>
</ul>
</div>
CSS:
.menu{
width:100%;
}
.menu ul{
list-style:none;
}
.menu li{
float:left;
}
.last-menu{
border-right:1px solid #000;
}
Im having some trouble! Something really simple i believe. However its troubling me.
I am trying to achieve:
1) The navigation bar to be the width of the main image above it.
if anyone can solve this for me i would be truly greatful and it would be a huge help. Im very new to coding and this has been hard for me.
Ive done my fair share of looking for an answer but have failed so far.
here is a picture of the page http://i46.tinypic.com/w9a80i.jpg please excuse the white box covering the graphic that is simple for privacy etc
css:
/* Reset */
html, body {
padding:0;
margin:0;
}
a {
text-decoration: none;
}
ul, li {
list-style-type: none;
}
img.floatLeft {
float: left;
margin: 4px;
}
*
{
margin: 0;
padding: 0;
}
body {background-color:#F1F1F1; }
#outer { width: 900px; margin:auto;}
#wrapper { width: 900px; margin:0; background-color: #666; }
#list-nav { width: 700px; float: right;}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width: auto;
background:#999;
color:#eee;
float: left;
}
ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
width: 100px;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
#content-fullwidth { width:100%; }
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="outer">
<div id="wrapper">
<img src="css/Images/banner top.jpg" />
<div id="navbar">
<ul id="list-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
</div>
</div>
</div>
</div>
I'm not sure i understand well, but i think that's what you are looking for.
First, your nav was 700px large, also your image and container are 900px.
Make your #list-nav : width:100% as large as the container and the image
Then the li, which are 5 of them, must be 20% large of the ul(so they have the same width)
#list-nav li{display:inline-block;width:20%;float:left}
Here's your code with modification
Is that what you wanted to do ?
You can also do it with a display:table-cell trick.
remove the width definition of #list-nav: #list-nav{ /*width: 700px;*/ float: right;}
and add this
ul#list-nav li {
display:inline-block;
}
I'm making a vertical unordered block list (inside a div), in which I have a border under each li. But somehow the borders don't fit the whole width of the div. I guess the ul has to exactly fit in the div in order to do this, but I don't know how.
This is screen shot of the div and the ul in it:
And this is the CSS code I'm using:
.stats-list li{
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
.stats-list ul{
list-style-type:none;
}
I've never come across this problem before. Does anyone have any solution? Thanks.
UPDATE (HTML code):
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
Another update (CSS code of the parent div):
.checkin-stats-right{
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
By default, the UL element usually has a padding-left set to a certain amount of pixels. Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.stats-list li {
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
ul.stats-list {
list-style-type:none;
padding-left: 0;
}
.checkin-stats-right {
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
</style>
</head>
<body>
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
</body>
</html>
.stats-list ul {
padding-left: 0;
}
Also note that "ul.stats-list" in your HTML doesn't match ".stats-list ul"