i'm really not that good with html/css but i try my best to achieve the results i want. i'm creating an online resume for me adapting a source code i downloaded but i'm having some trouble making it the way i want.
this is how i was hoping it to look like: http://i.stack.imgur.com/ozuEs.jpg
this is how it looks right now: http://fernandocysneiros.com/contrate
i dont know what i'm doing wrong. can anyone please help me? i searched before asking but got no luck. i'll paste the css and the header html here.
css:
<style>
img {
max-width: 100%;
max-height: 100%;
}
.msg { padding: 10px; background: #222; position: relative; }
.msg h1 { color: #fff; }
.msg a { margin-left: 20px; background: #408814; color: white; padding: 4px 8px; text-decoration: none; }
.msg a:hover { background: #266400; }
/* //-- yui-grids style overrides -- */
body { font-family: Georgia; color: #444; }
#inner { padding: 10px 80px; margin: 80px auto; background: #f5f5f5; border: solid #666; border-width: 8px 0 2px 0; }
.yui-gf { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #ccc; }
/* //-- header, body, footer -- */
#hd { margin: 2.5em 0 3em 0; padding-bottom: 1.5em; border-bottom: 1px solid #ccc }
#hd h2 { text-transform: uppercase; letter-spacing: 2px; }
#bd, #ft { margin-bottom: 2em; }
/* //-- footer -- */
#ft { padding: 1em 0 5em 0; font-size: 92%; border-top: 1px solid #ccc; text-align: center; }
#ft p { margin-bottom: 0; text-align: center; }
/* //-- core typography and style -- */
#hd h1 { font-size: 260%; text-transform: uppercase; letter-spacing: 3px; }
h2 { font-size: 152% }
h3, h4 { font-size: 122%; }
h1, h2, h3, h4 { color: #333; }
p { font-size: 100%; line-height: 18px; padding-right: 3em; }
a { color: #990003 }
a:hover { text-decoration: none; }
strong { font-weight: bold; }
li { line-height: 24px; border-bottom: 1px solid #ccc; }
p.enlarge { font-size: 144%; padding-right: 6.5em; line-height: 24px; }
p.enlarge span { color: #000 }
.contact-info { margin-top: 7px; }
.first h2 { font-style: italic; }
.last { border-bottom: 0 }
/* //-- section styles -- */
a#pdf { display: block; float: left; background: #666; color: white; padding: 6px 50px 6px 12px; margin-bottom: 6px; text-decoration: none; }
a#pdf:hover { background: #222; }
.job { position: relative; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ccc; }
.job h4 { position: absolute; top: 0.35em; right: 0 }
.job p { margin: 0.75em 0 3em 0; }
.last { border: none; }
.skills-list { }
.skills-list ul { margin: 0; }
.skills-list li { margin: 3px 0; padding: 3px 0; }
.skills-list li span { font-size: 152%; display: block; margin-bottom: -2px; padding: 0 }
.talent { width: 32%; float: left }
.talent h2 { margin-bottom: 6px; }
#srt-ttab { margin-bottom: 100px; text-align: center; }
#srt-ttab img.last { margin-top: 20px }
.perfil {
display: block;
float: left;
height:130px;
overflow:visible;
margin-bottom: 2em;
padding-bottom: 2em;
border-bottom: 1px
}
/* --// override to force 1/8th width grids -- */
.yui-gf .yui-u{width:80.2%;}
.yui-gf div.first{width:12.3%;}
</style>
html:
<body>
<div id="doc2" class="yui-t7">
<div id="inner">
<div id="hd">
<div class="yui-u">
<div class="perfil" height="130px" vertical-align="center">
<h1>FERNANDO</h1>
<h1>CYSNEIROS</h1>
</div>
<div class="perfil" height="130px" vertical-align="center">
<img src="http://i.imgur.com/9qTYVst.jpg">
</div>
<div class="perfil">
<table>
<tr>
<td align="right"><font color="#cccccc"><i><b>telefone</b></i></font></td>
<td align="left">+55 (81) 8173-8769</td>
</tr>
<tr>
<td align="right"><font color="#cccccc"><i><b>e-mail</b></i></font></td>
<td align="left">me#fernandocysneiros.com</td>
</tr>
<tr>
<td align="right"><font color="#cccccc"><i><b>linkedin</b></i></font></td>
<td align="left">linkedin.com/in/fcysneiros</td>
</tr>
<tr>
<td align="right"><font color="#cccccc"><i><b>portfólio</b></i></font></td>
<td align="left">fernandocysneiros.com</td>
</tr>
</table>
</div><!--// .contact-info -->
</div><!--// .yui-gc -->
</div><!--// hd -->
Please add these styles at the bottom of your template's stylesheet:
.perfil:first-child {
width: 370px;
}
#hd h1 {
font-size: 450%;
}
.perfil:nth-child(2) {
margin: 0px 25px;
}
Related
I am trying to get the blue buttons to always stay lined up. Depending on the size of the screen and the text moving to multiple lines, it will cause the buttons to get out of alignment. Could I get help with how to get these to stay in line? http://marketing.geneia.com/himss2019/
Screenshot of buttons
#charset "utf-8";
/* CSS Document */
/* --------Resets-------- */
*{
margin:0;
padding:0;
border:0;
}
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}
body {
font-family: Averta-Regular, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 25px 0;
padding: 0;
font-family: Averta-Regular, sans-serif;
}
/* --------Styles-------- */
h1 {
font-size: 36px;
font-family: Averta-Extrabold, sans-serif;
font-weight: normal;
font-style: normal;
}
h2 {
font-size: 28px;
color: #125687;
font-family: Averta-Extrabold, sans-serif;
}
h2.smaller-blue {
font-size: 24px;
}
h3 {
font-size: 18px;
font-family: Averta-Semibold, sans-serif;
font-weight: normal;
line-height: 28px;
}
p, li {
color: #00354e;
font-size: 17px;
line-height: 30px;
}
ul {
list-style: none;
margin-bottom: 1.5rem;
}
li {
padding-left: 30px;
}
li:before {
content: "";
border-color: transparent #00aecb;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1.2em;
top: 1.1em;
position: relative;
}
a {
position: relative;
display: inline-block;
transition: .3s;
text-decoration: none;
color: #00aecb;
}
a::after {
position: absolute;
bottom: .3em;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: #00adca;
opacity: 0;
transition: .3s;
}
a:hover::after {
bottom: 0;
opacity: 1;
color: #00adca;
}
a:hover {
color: #00adca;
text-decoration: none;
cursor: pointer;
}
b, strong, .bold {
font-weight: 700;
}
hr {
margin: 20px 0;
width: 100%;
border-top: 1px solid #cacfde;
}
.uppercase {
text-transform: uppercase;
}
.container, .container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 25px;
padding-right: 25px;
max-width: 1366px;
}
.uppercase {
text-transform: uppercase;
}
.vert-middle {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.green {
color: #a3d869;
}
.teal {
color: #00aecb;
}
.drk-blue {
color: #125687;
}
section.background-grey {
background: #eeeff2;
padding: 60px 20px;
}
section.background-white {
background: #fff;
padding: 60px 20px;
}
.center {
margin: 0 auto;
text-align: center;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.btn {
background-color: #4CAF50; /* Green */
border: none;
border-radius: 4px;
color: white;
font-family: Averta-Semibold;
font-weight: normal;
padding: 18px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
a.btn:hover {
background-color: #42cfe6;
color: #fff;
}
a.btn::after {
display: none;
}
.btn-teal {
background-color: #00AECB;
}
a.btn.btn-teal:hover {
background-color: #42cfe6;
}
.btn-drkblue {
background-color: #0f5687;
}
a.btn.btn-drkblue:hover {
background-color: #0d3a5b;
}
a.anchor-link {
display: block;
}
a.anchor-link::after {
display: none;
}
a.link-image::after {
display: none;
}
/* --------Header/Top Nav-------- */
header {
background-color: #fff;
height: 100px;
width: 100%;
}
.logo {
padding: 15px 0;
}
nav {
padding: 40px 0;
float: right;
}
nav ul {
list-style-type: none;
text-align: right;
float: right;
margin: 0;
padding: 0;
}
nav li {
display: inline;
padding: 2px;
color: #005d91;
font-size: 16px;
}
nav li:before {
display: none;
}
nav a:hover {
color: #00aecb;
}
/* --------Hero-------- */
.hero {
position: relative;
padding: 125px 0 125px 0;
background: url(img/lp-hero-1.jpg) no-repeat;
background-size:cover;
background-position: center 20%;
color: #fff;
}
.hero.subscribe {
position: relative;
padding: 125px 0 125px 0;
background: url(img/lp-hero-2.jpg) no-repeat;
background-size:cover;
background-position: center 20%;
color: #fff;
}
.hero.sessions {
position: relative;
padding: 125px 0 125px 0;
background: url(img/lp-hero-3.jpg) no-repeat;
background-size:cover;
background-position: center 20%;
color: #fff;
}
.hero h1 {
font-size: 48px;
margin-top: 10px;
}
.mobile h1 {
color: #125687;
font-weight: 400;
font-size: 28px;
}
.mobile p {
font-size: 14px;
line-height: 24px;
}
.subtitle {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: .1em;
color: #fff;
background: #73ca14;
padding: 10px 15px;
display: inline-block;
}
.hero-text p {
color: #fff;
}
.hero-text h3 {
/*color: #a3d06a;*/
}
/* --------Main Content-------- */
.main-content--text {
padding-right: 40px;
width: 60%;
}
img.pdf-thumb {
width: 225px;
margin: -30px 0 0 0;
-ms-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
p.intro-text {
font-size: 22px;
line-height: 30px;
color: #125687;
}
.cta-callout {
background: rgba(255, 255, 255, 0.7); /* White background with 70% opacity */
padding: 25px;
margin: 0 0 20px 0;
}
.cta-callout p{
margin-bottom: 0;
}
p.subhead {
margin: 30px 0 5px 0;
color: #125687;
}
.col-lg-7.main-text {padding: 0 10px 0 50px;}
/* --------Form-------- */
form {
margin-top: 25px;
padding: 0 30px 30px;
}
input[type=text], select {
width: 100%;
padding: 8px;
margin: 0 0 10px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 15px;
}
input[type=submit] {
background-color: #00aecb;
color: white;
padding: 14px 40px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
input[type=submit]:hover {
background-color: #125687;
}
label {
color: #5e5f60;
margin-bottom: 0;
font-size: 14px;
font-weight: 700;
}
.download-form {
background: #fff;
padding: 0;
}
.download-form h3 {
color: #fff;
font-size: 20px;
font-weight: 500;
}
.form-header {
background: #125687;
padding: 30px 20px;
text-align: center;
}
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}
/* --------Value Prop Content-------- */
.valueprop {
padding: 10px 30px;
}
.valueprop:nth-child(n+2) {
border-left: 1px solid #ebebeb;
}
.valueprop p {
text-align: center;
font-size: 15px;
line-height: 25px;
}
.valueprop h3 {
color: #00aecb;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 1.5em;
}
.valueprop-content h2 {
margin-bottom: 50px;
}
section.background-white.valueprop-content {
padding: 60px 20px;
}
section.background-white.valueprop-content h3 {
color: #00aecb;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 1.5em;
font-family: Averta-Bold, sans-serif;
}
.verticalLine {
border-left: 1px solid red;
}
/* --------Events-------- */
section.events {
padding: 60px 0;
}
.thead-blue {
background-color: #00aecc;
color: #fff;
}
/* --------Footer-------- */
.container-fluid--footer {
margin-right: auto;
margin-left: auto;
padding-left: 25px;
padding-right: 25px;
max-width: 800px;
}
.page-footer {
background-color: #125687;
bottom: 0;
margin: 0;
padding: 60px 0;
}
.footer-info {
display: inline;
}
.footer-1 {
text-align: center;
}
.footer-2 {
text-align: center;
}
.footer-1 h3, .footer-2 h3,
.footer-1 p, .footer-2 p,
.footer-1 a, .footer-2 a {
color: #fff;
}
.footer-nav {
padding-top: 60px;
text-align: center;
margin: 0 auto;
}
.footer-nav ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.footer-nav li {
display: inline;
padding: 0;
font-size: 14px;
}
.footer-nav li:before {
display: none;
}
.footer-nav li:after {
content: "|";
color: #a7a298;
padding: 0 10px;
}
.footer-nav li:nth-last-child(1):after {
display: none;
}
.footer-nav a {
color: #fff;
}
.copyright {
font-size: 14px;
padding-top: 15px;
margin: 0;
color: #fff;
}
/* --------Font Awesome Styles-------- */
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-twitter-square:before {
content: "\f081";
}
.fa-rss-square:before {
content: "\f143";
}
.fa-linkedin-square:before {
content: "\f08c";
}
i.fa.fa-rss-square, i.fa.fa-linkedin-square, i.fa-twitter-square, i.fa-facebook-square {
font-size: 20px;
color: #00aecb;
}
.fa-facebook-square:before {
content: "\f082";
}
i.fa:hover {
color: #125687;
}
a.social-icon::after {
background-color: #fff !important;
content: none;
}
/* --------Media Queries-------- */
#media (max-width: 1024px){
input[type=submit] {padding: 14px 25px;}
h1 {font-size: 32px;}
.hero h1 {font-size: 38px;}
h2 {font-size: 25px;}
}
#media (min-width: 901px) {
section.main-content>div.container-fluid {
display: flex;
flex-direction: row-reverse;
}
}
#media (max-width: 991px){
img.img-responsive.text-img {padding: 0 0 20px 0;}
.col-lg-7.main-text {padding: 0 20px;}
}
#media (max-width: 900px){
input[type=submit] {padding: 14px 40px;}
section.background-grey {
padding: 40px 0 30px 0;
}
.main-content--text {
padding: 0;
width: 100%;
}
h1 {font-size: 30px;}
.subtitle {
font-size: 16px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #007caa;
opacity: 0.6;
}
.col-sm-6.hero-text {
flex: 80%;
max-width: 80%;
}
}
#media (max-width: 767px){
.valueprop:nth-child(n+2) {
border-left: none;
}
.hero, .hero.sessions, .hero.subscribe {
padding: 80px 0 70px 0;
}
img.pdf-thumb {
width: 200px;
margin: -20px 0 0 0;
}
}
#media (max-width: 580px){
.hero, .hero.sessions, .hero.subscribe {padding: 48px 0 38px 0}
nav li {
padding: 0 3px;
}
header {
height: inherit;
}
.col-sm-6.hero-text {
flex: 100%;
max-width: 100%;
}
header .container-fluid {
text-align: center;
}
nav {
padding: 10px 0 20px 0;
float: none;
}
nav ul {
float: none;
text-align: center;
}
.logo {
width: 65%;
padding: 15px 0 0;
}
.hero h1 {font-size: 26px;}
.hero h3 {font-size: 16px;}
h1 {font-size: 26px;}
.subtitle {
font-size: 14px;
}
.btn {
width: 100%;
}
h2 {font-size: 22px;}
section.background-grey, section.background-white, section.events {padding: 30px 0 20px 0;}
section.background-white.valueprop-content {padding: 40px 20px;}
input[type=submit] {padding: 14px 25px;}
form {padding: 0 20px 30px;}
.download-form h3 {font-size: 16px;}
img.pdf-thumb {
width: 150px;
margin: -10px 0 0 0;
}
}
#media (max-width: 460px){
img.pdf-thumb {
width: 150px;
margin: 10px 0 0 0;
}
}
#media (max-width: 360px){
.hero {
/*background: url(img/hero-1-xsm.jpg) no-repeat;
background-size: cover;*/
}
}
#media (max-width: 320px){
.container, .container-fluid {
padding-left: 20px;
padding-right: 20px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="background-white valueprop-content">
<div class="container-fluid">
<div class="center">
<div class="row">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/session-icon.png" alt="session icon" style="max-width: 100%; height: auto;" />
<h3>Explore sessions</h3>
<p>Tour Geneia’s educational sessions which include topics such as AI, machine learning and SDoH.</p>
<a class="btn btn-teal" href="explore-sessions.html" target="_blank">View sessions </a>
</div>
<hr class="d-block d-lg-none">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/meeting-icon.png" alt="meeting icon" style="max-width: 100%; height: auto;" />
<h3>Schedule a meeting</h3>
<p>Request a meeting with on-site experts to learn more about our offerings and views demos.</p>
<a class="btn btn-teal" href="mailto:geneia#geneia.com?subject=Schedule a meeting at HIMSS" target="_blank">Request a meeting</a></div>
<hr class="d-block d-lg-none">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/email-icon.png" alt="email icon" style="max-width: 100%; height: auto;" />
<h3>Connect with us</h3>
<p>Stay up-to-date on our activities, including HIMSS19</p>
<br class="d-none d-sm-block">
<a class="btn btn-teal" href="form.html" target="_blank">Sign up</a>
</div>
<hr class="d-block d-lg-none">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/find-icon.png" alt="find icon" style="max-width: 100%; height: auto;" />
<h3>Find us at HIMSS</h3>
<p>Explore our solutions and services at booth 541 in the exhibit hall.</p>
<br class="d-none d-sm-block">
<a class="btn btn-teal" href="https://himss19.mapyourshow.com/7_0/floorplan/index.cfm?hallID=S&selectedBooth=booth~541" target="_blank">Locate our booth</a>
</div>
</div>
</div>
</div>
</section>
Use Flexbox to evenly distribute the items in the div.
.col-lg-3 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
So initially the top half of my black menu blocks appeared over the top of the banner, but now the top half of them are cut off underneath of the banner like this:
Here is my styles.css file:
/* Base */
* {
margin: 0;
padding: 0;
}
body {
/*background-color: #F5F4F1;*/
background-image: url('./img/bg.jpg');
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
color: #353535;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#banner {
position: relative;
}
#banner__text-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
text-align: center;
}
#banner__title {
font-size: 5.8rem;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
h1,h2,h3,h4,h5,h6 {
margin: 30px 0;
/*font-weight: 200;*/
color: #8ca757;
}
h1 {
font-size: 35px;
}
h1 small {
font-size: 25px;
color: #666;
}
h2 + p {
margin-top: -20px;
}
h3 + p {
margin-top: -20px;
}
h2,h3,h4 {
font-size: 30px;
}
h4.error {
color: #faa722;
}
h5,h6 {
font-size: 20px;
}
p {
margin: 0 0 20px;
}
a:link, a:visited {
color: #8ca757;
}
a:hover {
color: #7a9347;
}
ul, ol {
margin: 0 0 10px 18px;
}
ul li, ol li {
margin: 0 0 15px;
}
hr {
border: none;
height: 18px;
width: 114px;
background-image: url('./img/hr.png') center center no-repeat;
margin: 20px auto;
}
small {
font-size: 12px;
}
blockquote {
background: white;
padding: 10px;
margin: 0 0 15px;
border-left: solid 4px #d1cbb8;
font-style: italic;
}
blockquote p {
margin: 5px 0 10px;
}
blockquote code {
font-style: normal;
}
code {
color: #006699;
font-weight: bold;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
sup {
font-size: 0.6em;
}
/* Layout */
.wrapper {
position: relative;
width: 620px;
margin: 40px auto;
padding: 40px;
background: white;
text-align: center;
}
.wrapper:before, .wrapper:after {
content: "";
position: absolute;
top: 5px;
left: -5px;
width: 100%;
height: 100%;
background: #97917e;
z-index: -1;
}
.wrapper:before {
top: 10px;
left: -10px;
background: #514933;
}
#logo {
width: 240px;
margin: 0 auto;
display: block;
}
.sandbox {
padding: 20px;
background: #f8f5f1;
text-align: left;
}
aside {
background: white;
border: dashed 2px #97917e;
padding: 10px 20px;
margin: 40px;
}
aside h3 {
font-size: 24px;
margin-top: 10px;
}
aside h6 {
margin: 15px 0 5px;
}
table {
width: 100%;
font-size: 13px;
background: white;
margin: 0 0 20px;
}
table td {
border-bottom: solid 1px #d1cbb8;
padding: 4px;
}
table th {
background: #8ca757;
color: white;
padding: 4px;
font-weight: normal;
font-size: 15px;
}
/* Global */
input {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
autton, input.button {
display: inline-block;
background: #ccc;
outline: solid 2px #ccc;
border: solid 2px white;
color: white;
padding: 10px 15px;
margin: 20px 0;
text-decoration: none;
font-family: inherit;
font-size: inherit;
font-weight: bold;
cursor: pointer;
}
.button:hover, input.button:hover {
background: #bbb;
outline-color: #bbb;
}
.button.prev {
float: left;
background: #514933;
outline-color: #514933;
}
.button.prev:hover {
background: #494331;
outline-color: #494331;
}
.button.next, input.button.next {
background: #8ca757;
outline: solid 2px #8ca757;
float: right;
}
.button.next:hover, input.button.next:hover {
background: #7c9745;
}
input.button.next {
display: block;
float: none;
width: 100%;
}
.block {
display: block;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.copyright-info h4, .copyright-info h5 {
margin: 0;
line-height: 18px;
font-size: 14px;
text-align: center;
}
.copyright-info h4 {
font-weight: bold;
}
.copyright-info {
margin: 20px 0 40px;
}
/* Final example website */
#final-example .wrapper {
width: 800px;
padding: 0;
}
#final-example .content {
padding: 20px 50px 50px;
text-align: left;
}
#final-example #nav {
margin: -27px 0 0;
}
#final-example #nav ul {
display: inline-block;
list-style: none;
text-align: left;
}
#final-example #nav ul li {
display: inline-block;
text-align: center;
margin: 0 10px;
}
#final-example #nav ul li a {
display: block;
background: #353535;
outline: solid 2px #353535;
border: solid 2px white;
color: white;
padding: 10px 15px;
text-decoration: none;
}
#final-example #nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
#final-example #philosophy {
text-align: center;
font-size: 18px;
line-height: 22px;
}
#final-example #footer {
font-size: 12px;
line-height: 15px;
margin: 60px 0 0 0;
}
#final-example #footer strong {
display: block;
margin: 0 0 20px;
}
#final-example .column {
display: block;
float: left;
}
#final-example .column.three {
width: 203px;
margin-right: 45px;
}
#final-example .column.last {
margin: 0;
}
#final-example small {
display: block;
text-align: center;
margin: 40px 0 0;
}
#final-example .member {
width: 203px;
float: left;
margin-right: 45px;
}
#final-example .member:last-child {
margin: 0;
}
#final-example .member img {
max-width: 100%;
}
#final-example .closed {
color: #d13916;
}
#final-example .open {
color: #67b512;
}
#menu-items ul {
list-style: none;
margin: 0;
padding: 20px 0;
text-align: center;
font-size: 18px;
}
#menu-items ul li a {
text-decoration: none;
font-weight: bold;
}
.price {
float: right;
font-size: 18px;
font-weight: bold;
color: #353535;
}
#contact {
width: 320px;
margin: 0 auto;
}
#contact-form label {
display: block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
border: solid 2px #353535;
outline: none;
font-size: 18px;
padding: 10px;
margin: 0 0 10px;
width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#contact-form textarea {
resize: vertical;
height: 120px;
}
#contact-form input[type="checkbox"] + label {
display: inline;
cursor: pointer;
}
When I try to do this:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
}
to this
#final-example #nav {
margin: -27px 0 0;
}
this happens:
and text-align:center; did not work. Any ideas?
Here is the index.php:
<!DOCTYPE html>
<html>
<head>
<title>MicroUrb</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<a href="/" title="Return to Home">
<img src="assets/img/banner0.jpg" alt="MicroUrb">
<div id="banner__text-content">
<h1 id="banner__title">MicroUrb</h1>
</div>
</a>
</div><!-- banner -->
<div id="nav">
<ul>
<li>Home</li>
<li>Team</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div><!-- nav -->
<div class="content">
<div id="footer" class="cf">
<div class="column three">
<strong>Phone</strong>
609.505.3395
</div><!-- column -->
<div class="column three">
<strong>Location</strong>
<!-- location to go here -->
</div><!-- column -->
<div class="column three last">
<strong>Hours</strong>
<em>Tuesday - Thursday</em><br>
1:00pm - 9:00pm<br><br>
<em>Friday and Saturday</em><br>
4:00pm - 11:00pm<br><br>
<em>Sunday - Monday</em>
Closed<br><br>
</div><!-- column -->
</div><!-- footer -->
<small>©2017 MicroUrb</small>
</div><!-- content -->
</div><!-- wrapper -->
<div class="copyright-info">
<?php includes('../assets/includes/copyright.php'); ?>
</div><!-- copyright-info -->
</body>
</html>
Put a z-index on the nav and set the position to relative
#final-example #nav {
margin: -27px 0 0;
z-index: 5;
position: relative;
}
I believe to get the navigation in front of the banner like you are trying to achieve you could utilise the z-index property.
Add a z-index of 1 to your #final-example #nav {} and a z-index of 0 to your #banner {} which will bring the navigation in front of the banner while keeping its absolute positioning in the centre.
The final outcome will be:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
z-index: 1;
}
#banner {
position: relative;
z-index: 0;
}
Let me know if you need any other help.
You can use z-index on the nav element to make it appear above the banner if you set the banner to a lower z-index compared to the nav element.
So for example:
#final-example #nav {
z-index:1;
position:relative;
margin:-27px auto 0;
}
That said, it would be useful if you would've posted your html part as well.
Edit:
Further investigation and with a temporary asset, the code seems to work fine with the code posted above as can be seen in this JSFiddle: https://jsfiddle.net/t2d70q3y/2/
Let me know if you require further assistance.
ok, i am having problems with the ndex page im re building ( due to flash drive getting corrupted. :(, i want the nav bar to sit flush with the slider which is below it... at the moement the nav bat is way too the left and it doesnt look very good :/ e.g--->
i will give you both my html and my css to refer to:
HTMLof nav and slider
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="">sports news
<ul>
<li>headlines</li>
<li>when an where</li>
<li>rewind</li>
<li>manager of the week </li>
</ul>
<li class="">music
<ul>
<li>whats new</li>
<li>the classic corner</li>
<li>hall of fame</li>
</ul>
</li>
<li class="news">on air
<ul>
<li>schedule</li>
<li>presenters</li>
<li>competitions</li>
<li>guests</li>
</ul>
</li>
<li class="contact">events</li>
<li class="contact">gallery</li>
<li class="contact">Contact</li>
</ul>
</div>
<div class="cleaner"></div>
<div id="middle">
<div id="slider">
<img src="images/slideshow/01.jpg" alt="slideshow 01" title="wow" />
<img src="images/slideshow/02.jpg" alt="slideshow 02" title="wow" />
<img src="images/slideshow/03.jpg" alt="slideshow 03" title="wow" />
<img src="images/slideshow/04.jpg" alt="slideshow 04" title="wow" />
<img src="images/slideshow/05.jpg" alt="slideshow 05" title="wow" />
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
color: #4d4638;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background: url(images/tooplate_body.jpg);
background-color: #c2b8a1;
background-repeat: repeat-x;
background-position: top
}
a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
.orange {
color: #FC0;
}
.green {
color: #CF6;
}
p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }
a.more {
clear: both;
display: block;
width: 87px;
height: 31px;
padding-right: 15px;
line-height: 30px;
text-align: center;
color: #000;
font-weight: bold;
background: url(images/btn.png);
}
a.more:hover {
text-decoration: none;
color: #960;
}
.float_l { float: left }
.float_r { float: right }
.margin { margin: 10px; }
.image_wrapper {
display: inline-block;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 4px;
margin-bottom: 5px;
}
.image_fl {
float: left;
margin: 3px 15px 0 0;
}
.image_fr {
float: right;
margin: 3px 0 0 15px;
}
.list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.list li {
color:#000;
margin: 0 0 5px 0;
padding: 0 0 0 25px;
background: url(images/list.png) no-repeat scroll 0 5px;
}
.list li a {
color: #000;
font-weight: normal;
}
.list li a:hover {
text-decoration: underline;
}
#header {
width: 960px;
padding: 10px 0;
margin: 0 auto;
}
#site_title {
float: left;
}
#site_title h1 {
margin: 30px 0 0 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 278px;
height: 50px;
color: #fff;
text-indent: -10000px;
background: url(images/logo.png) no-repeat;
}
/* menu */
#menu {
float: right;
width: 632px;
height: 48px;
margin-top: 40px;
background: url(images/menu.png)
}
#menu ul {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
#menu ul li {
float: left;
display: block;
padding: 0;
margin: 0;
display: inline;
text-align: center;
}
#menu ul li a {
display: block;
width: 116px;
padding: 9px 4px 9px 0;
margin: 0;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #000000;
text-shadow: 1px 1px 1px #cec8ba;
font-weight: normal;
outline: none;
border: none;
background: url(images/menu_divider.png) center right no-repeat
}
#menu ul li a:hover, #menu ul li .current {
color: #fff;
text-shadow: 1px 1px 1px #3d3728;
}
#menu ul .last {
background: none;
}
#search_box {
float: right;
margin: 12px 0 0 0;
width: 170px;
height: 27px;
background: url(images/search.png) no-repeat;
}
#search_box form {
clear: both;
width: 170px;
height: 26px;
padding: 0;
margin: 0;
}
#searchfield {
float: left;
display: block;
height: 16px;
width: 130px;
padding: 5px;
font-size: 12px;
color: #ccc;
line-height: 0;
background: none;
border: none;
}
#searchbutton {
float: right;
display: block;
height: 26px;
width: 30px;
padding: 0;
margin: 0;
cursor: pointer;
background: none;
border: none;
}
/* end of menu */
/* slider */
#middle {
clear: both;
width: 940px;
height: 307px;
padding: 10px 40px;
margin: 0 auto;
background: url(images/middle_home.png) no-repeat
}
#middle_subpage {
clear: both;
width: 820px;
height: 207px;
padding: 60px 100px;
margin: 0 auto;
font-family: Georgia, "Times New Roman", Times, serif;
background: url(images/middle_subpage.png) no-repeat;
}
#middle_subpage h2 {
font-size: 48px;
color: #000;
}
#middle_subpage p {
font-size: 18px;
color: #000;
line-height: 30px;
}
#middle_subpage a {
color: #507921;
font-weight: normal;
}
#slider {
float: right;
width: 940px;
height: 300px;
overflow: hidden;
}
/* end of slider */
#main {
clear: both;
width: 960px;
padding: 30px 0;
margin: 0 auto;
}
.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }
.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }
.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }
#cp_contact_form {
margin: 10px;
padding: 0;
width: 412px;
}
#cp_contact_form form {
margin: 0px;
padding: 0px;
}
#cp_contact_form form .input_field {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form label {
display: block;
width: 100px;
margin-right: 10px;
font-size: 14px;
}
#cp_contact_form form textarea {
width: 400px;
height: 160px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form .submit_btn {
margin: 5px 0px;
padding: 5px 14px;
text-decoration: none;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
}
#map {
margin: 10px;
}
#map img {
width: 300px;
height: 200px;
border: 1px solid #d9d3c5;
background: #b5ac98;
padding: 7px;
margin-bottom: 10px;
}
.news_box {
clear: both;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dashed #333;
}
.news_box h2 {
font-size: 20px;
margin-bottom: 0;
}
.news_box p.date {
color: #000;
}
.news_box img {
float: left;
padding: 4px;
border: 1px solid #000;
margin-right: 30px;
}
.news_box a.more {
clear:none;
float: right;
}
.sb_lp_box {
clear: both;
margin-bottom: 20px;
}
.sb_lp_box img {
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box {
clear: both;
margin-bottom: 30px;
}
.post_box h2 {
font-size: 20px;
margin-bottom: 10px;
}
.post_box p.post_meta {
margin-bottom: 0;
}
.post_box p span.cat a {
color: #507921;
font-weight: 400;
}
.post_box img {
width: 550px;
height: 160px;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box a.more {
float: left;
}
.lbe_box {
clear: both;
margin-bottom: 20px;
}
.lbe_box h3 {
font-size: 16px;
margin-bottom: 0;
}
.lbe_box h3 a {
color: #507921;
font-size: 16px;
font-weight: normal;
}
.lbe_box h3 a span {
font-size: 12px;
color: #507921;
}
.lbe_box p {
margin-bottom: 0;
}
.lbe_box p.date {
font-size: 10px;
font-weight: 700;
color: #507921;
}
#gallery {
margin: 0;
padding: 0;
}
#gallery ul {
margin: 0;
padding: 0;
}
#gallery ul li {
display: block;
float: left;
width: 281px;
margin: 0 30px 30px 0;
padding: 8px;
border: 1px solid #d0c9b8;
background: #b6ac97;
}
#gallery ul .third {
margin: 0 0 30px 0;
}
#gallery ul li a img {
border: 1px solid #ccc;
margin-bottom: 5px;
}
#footer_wrapper {
clear: both;
width: 100%;
background: #a19882;
border-top: 10px solid #d0c8b4;
}
#footer {
width: 960px;
margin: 0 auto;
padding: 15px 0;
text-align: center;
color: #000;
background: url(images/footer.jpg) top center no-repeat
}
color: #5fa008;
font-weight: normal;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
.nav ul{
position:relative;
z-index:9999;
}
}
Add this to your CSS:
.nav {
margin-right: auto;
margin-left: auto;
clear: both;
}
I made a fiddle for testing:
http://jsfiddle.net/8x1fkpoe/
hi i am having provlems with my drop down menu on my index page, the drop down items are hidden below my image slider which is directly below my nav bar, i would like to be able to see the drop down menu items, any help would be greatly appreciated
thank you very much;
here is my html for the nav bar:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="">sports news
<ul>
<li>headlines</li>
<li>when an where</li>
<li>rewind</li>
<li>manager of the week </li>
</ul>
</li>
<li class="about"><a class="active" href="#">music</a></li>
<li class="news">events
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">events</li>
<li class="contact">gallery</li>
<li class="contact">Contact</li>
</ul>
</div>
<div class="cleaner"></div>
and here is my css:
/*
jmc
*/
body {
margin: 0px;
padding: 0px;
color: #4d4638;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background: url(images/tooplate_body.jpg);
background-color: #c2b8a1;
background-repeat: repeat-x;
background-position: top
}
a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
.orange {
color: #FC0;
}
.green {
color: #CF6;
}
p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }
a.more {
clear: both;
display: block;
width: 87px;
height: 31px;
padding-right: 15px;
line-height: 30px;
text-align: center;
color: #000;
font-weight: bold;
background: url(images/tooplate_btn.png);
}
a.more:hover {
text-decoration: none;
color: #960;
}
.float_l { float: left }
.float_r { float: right }
.tooplate_margin { margin: 10px; }
.image_wrapper {
display: inline-block;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 4px;
margin-bottom: 5px;
}
.image_fl {
float: left;
margin: 3px 15px 0 0;
}
.image_fr {
float: right;
margin: 3px 0 0 15px;
}
.tooplate_list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.tooplate_list li {
color:#000;
margin: 0 0 5px 0;
padding: 0 0 0 25px;
background: url(images/tooplate_list.png) no-repeat scroll 0 5px;
}
.tooplate_list li a {
color: #000;
font-weight: normal;
}
.tooplate_list li a:hover {
text-decoration: underline;
}
#tooplate_header {
width: 960px;
padding: 10px 0;
margin: 0 auto;
}
#site_title {
float: left;
}
#site_title h1 {
margin: 30px 0 0 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 278px;
height: 50px;
color: #fff;
text-indent: -10000px;
background: url(images/tooplate_logo.png) no-repeat;
}
/* menu */
#tooplate_menu {
float: right;
width: 632px;
height: 48px;
margin-top: 40px;
background: url(images/tooplate_menu.png)
}
#tooplate_menu ul {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
#tooplate_menu ul li {
float: left;
display: block;
padding: 0;
margin: 0;
display: inline;
text-align: center;
}
#tooplate_menu ul li a {
display: block;
width: 116px;
padding: 9px 4px 9px 0;
margin: 0;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #000000;
text-shadow: 1px 1px 1px #cec8ba;
font-weight: normal;
outline: none;
border: none;
background: url(images/tooplate_menu_divider.png) center right no-repeat
}
#tooplate_menu ul li a:hover, #tooplate_menu ul li .current {
color: #fff;
text-shadow: 1px 1px 1px #3d3728;
}
#tooplate_menu ul .last {
background: none;
}
#search_box {
float: right;
margin: 12px 0 0 0;
width: 170px;
height: 27px;
background: url(images/tooplate_search.png) no-repeat;
}
#search_box form {
clear: both;
width: 170px;
height: 26px;
padding: 0;
margin: 0;
}
#searchfield {
float: left;
display: block;
height: 16px;
width: 130px;
padding: 5px;
font-size: 12px;
color: #ccc;
line-height: 0;
background: none;
border: none;
}
#searchbutton {
float: right;
display: block;
height: 26px;
width: 30px;
padding: 0;
margin: 0;
cursor: pointer;
background: none;
border: none;
}
/* end of menu */
/* slider */
#tooplate_middle {
clear: both;
width: 940px;
height: 307px;
padding: 10px 40px;
margin: 0 auto;
background: url(images/tooplate_middle_home.png) no-repeat
}
#tooplate_middle_subpage {
clear: both;
width: 820px;
height: 207px;
padding: 60px 100px;
margin: 0 auto;
font-family: Georgia, "Times New Roman", Times, serif;
background: url(images/tooplate_middle_subpage.png) no-repeat;
}
#tooplate_middle_subpage h2 {
font-size: 48px;
color: #000;
}
#tooplate_middle_subpage p {
font-size: 18px;
color: #000;
line-height: 30px;
}
#tooplate_middle_subpage a {
color: #507921;
font-weight: normal;
}
#slider {
float: right;
width: 940px;
height: 300px;
overflow: hidden;
}
/* end of slider */
#tooplate_main {
clear: both;
width: 960px;
padding: 30px 0;
margin: 0 auto;
}
.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }
.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }
.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }
#cp_contact_form {
margin: 10px;
padding: 0;
width: 412px;
}
#cp_contact_form form {
margin: 0px;
padding: 0px;
}
#cp_contact_form form .input_field {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form label {
display: block;
width: 100px;
margin-right: 10px;
font-size: 14px;
}
#cp_contact_form form textarea {
width: 400px;
height: 160px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form .submit_btn {
margin: 5px 0px;
padding: 5px 14px;
text-decoration: none;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
}
#map {
margin: 10px;
}
#map img {
width: 300px;
height: 200px;
border: 1px solid #d9d3c5;
background: #b5ac98;
padding: 7px;
margin-bottom: 10px;
}
.news_box {
clear: both;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dashed #333;
}
.news_box h2 {
font-size: 20px;
margin-bottom: 0;
}
.news_box p.date {
color: #000;
}
.news_box img {
float: left;
padding: 4px;
border: 1px solid #000;
margin-right: 30px;
}
.news_box a.more {
clear:none;
float: right;
}
.sb_lp_box {
clear: both;
margin-bottom: 20px;
}
.sb_lp_box img {
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box {
clear: both;
margin-bottom: 30px;
}
.post_box h2 {
font-size: 20px;
margin-bottom: 10px;
}
.post_box p.post_meta {
margin-bottom: 0;
}
.post_box p span.cat a {
color: #507921;
font-weight: 400;
}
.post_box img {
width: 550px;
height: 160px;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box a.more {
float: left;
}
.lbe_box {
clear: both;
margin-bottom: 20px;
}
.lbe_box h3 {
font-size: 16px;
margin-bottom: 0;
}
.lbe_box h3 a {
color: #507921;
font-size: 16px;
font-weight: normal;
}
.lbe_box h3 a span {
font-size: 12px;
color: #507921;
}
.lbe_box p {
margin-bottom: 0;
}
.lbe_box p.date {
font-size: 10px;
font-weight: 700;
color: #507921;
}
#gallery {
margin: 0;
padding: 0;
}
#gallery ul {
margin: 0;
padding: 0;
}
#gallery ul li {
display: block;
float: left;
width: 281px;
margin: 0 30px 30px 0;
padding: 8px;
border: 1px solid #d0c9b8;
background: #b6ac97;
}
#gallery ul .third {
margin: 0 0 30px 0;
}
#gallery ul li a img {
border: 1px solid #ccc;
margin-bottom: 5px;
}
#tooplate_footer_wrapper {
clear: both;
width: 100%;
background: #a19882;
border-top: 10px solid #d0c8b4;
}
#tooplate_footer {
width: 960px;
margin: 0 auto;
padding: 15px 0;
text-align: center;
color: #000;
background: url(images/tooplate_footer.jpg) top center no-repeat
}
#tooplate_cr a {
color: #5fa008;
font-weight: normal;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
#nav ul {
z-index: 9999;
}
thanks again;
From what I can see from the snippet provided, my best guess would be to add:
position:relative;
to your:
#nav ul{
z-index:9999;
}
HOWEVER I cannot see div id="nav" in your html! If you have just not included it in your snippet, that's fine, but if this is also an error and you mean to assign that css to div class="nav", then try changing that whole block to:
.nav ul{
position:relative;
z-index:9999;
}
One final note to remember, assign z-index to elements that ALSO have a position set (be it relative or absolute etc) - as far as i'm aware, z-index doesn't work unless the block has a position attribute set to it also.
Hope this works for you.
I'm trying to get the items on one of my pages to line up at the bottom. The realworld example is http://www.silverartcollector.com. You can see on the main page the content area, there are 2 product boxes that have different size images which will be common. I want the bottoms to align so it will look neater. I've tried doing vertical-align:bottom on my main class but it doesn't work, I'm presuming because of the float:left. However, after hours of testing, I can't figure it out. I appreciate any input/help.
Here is the page code:
<div class="float_r" id="content">
<h3>Recent Additions</h3><br>
<div class="product_box">
<img width="150" src="admin/uploads/ONE-7 O.JPG">
<h3>Huck Finn</h3>
<p class="product_price">One Mint</p>
<!--ONE-7<br/>-->
<a class="detail" href="productdetail.php?id=1">Details</a>
</div>
<div class="product_box">
<img width="150" src="admin/uploads/MLM-11 O.jpg">
<h3>Keep Me & Never Go Broke</h3>
<p class="product_price">Mother Lode Mint</p>
<!--MLM-11<br/>-->
<a class="detail" href="productdetail.php?id=20">Details</a>
</div>
</div>
And here is the stylesheet:
/*
Credit: http://www.templatemo.com
*/
body {
margin: 0;
padding: 0;
color: #999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
line-height: 1.4em;
background-color: #2e2e2e;
background-repeat: repeat;
background-image: url(../images/templatemo_body.jpg)
}
a, a:link, a:visited {
color: #08aee3;
font-weight: normal;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.more {
display: inline-block;
width: 80px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 10px;
font-weight: bold;
color: #21bdd0;
background: url(../images/more_but.jpg);
}
a.more:hover {
background: #333;
text-decoration: none;
}
p {
margin: 0 0 10px 0;
padding: 0;
}
img {
border: none;
}
blockquote {
border: 1px solid #ccc;
border-left: 5px solid #000;
padding: 19px;
margin: 20px 0 0 0;
}
cite a, cite a:link, cite a:visited {
font-size: 12px;
text-decoration: none;
font-style: normal;
}
cite span {
font-weight: 400;
color: #333;
}
.templatemo_list {
margin: 10px 0 10px 15px;
padding: 0;
list-style: none;
}
.templatemo_list li {
color:#636363;
margin: 0 0 5px 0;
padding: 0 0 0 15px;
background: url(../images/templatemo_list.png) no-repeat scroll 0 7px;
}
.templatemo_list li a {
color: #636363; font-weight: normal;
}
.templatemo_list li a:hover {
color: #000;
}
h1, h2, h3, h4, h5, h6, h7, h8{
color: #333;
font-weight: normal;
}
h1 {
font-size: 30px;
margin: 0 0 30px;
padding: 5px 0;
}
h2 {
font-size: 26px;
margin: 0 0 25px;
padding: 5px 0;
}
h3 {
font-size: 20px;
margin: 0 0 20px;
padding: 0;
}
h4 {
font-size: 16px;
margin: 0 0 15px;
padding: 0;
}
h5 {
font-size: 14px;
margin: 0 0 10px;
padding: 0;
}
h6 {
font-size: 12px;
margin: 0 0 5px;
padding: 0;
}
h7 {
font-size: 16px;
margin: 0 0 15px;
padding: 0;
line-height:150%
}
h8 {
line-height:150%;
font-size: 14px;
margin: 0 0 15px;
padding: 0;
color: white;
}
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.float_l { float: left }
.float_r { float: right }
#templatemo_wrapper {
width: 960px;
margin: 0 auto;
padding: 0 10px 10px;
}
#templatemo_header {
width: 100%;
padding: 50px 0 10px;
}
#templatemo_menu {
width: 100%;
height: 77px;
margin-bottom: 3px;
background: url(../images/templatemo_menu.jpg) repeat-x
}
#templatemo_middle {
width: 100%;
height: 200px;
margin-bottom: 3px;
padding-bottom: 2px;
background: #fff url(../images/templatemo_middle.jpg) repeat-x bottom
}
#templatemo_main {
width: 100%;
margin-bottom: 10px;
}
#content {
width: 680px;
background: #ffffff;
border: 1px solid #fff;
padding: 15px;
}
#sidebar { width: 240px }
#templatemo_footer {
width: 960px;
text-align: center;
padding: 9px 0px;
background: #121212;
border: 1px solid #3a3a3a
}
#site_title {
float: left;
}
#site_title h1 {
margin: 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 300px;
height: 20px;
font-size: 12px;
text-indent: -10000px;
color: #999;
text-align: left;
background: url(../images/logo.gif) no-repeat top left;
}
#header_right {
float: right;
margin-top: 5px;
}
#header_right a {
color: #ccc;
}
#menu_second_bar {
padding: 5px 10px;
}
#top_shopping_cart {
float: left;
padding: 5px 0;
font-size: 11px;
}
#templatemo_search {
float: right;
}
#templatemo_search form {
margin: 0;
padding: 0;
}
#templatemo_search .txt_field {
float: left;
display: block;
margin-right: 5px;
height: 24px;
line-height: 24px;
width: 300px;
color: #999;
font-size: 12px;
padding: 0 5px;
font-variant: normal;
border: 1px solid #666;
background: #333;
}
#templatemo_search .sub_btn {
float: right;
display: block;
color: #fff;
height: 26px;
font-size: 11px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
border: 1px solid #333;
background: #0ec4f7;
}
.sidebar_box {
position: relative;
background: #4c4a4a;
margin-bottom: 20px;
}
.sidebar_box h3 {
font-size: 14px;
font-weight: 700;
padding: 10px;
width: 220px;
height: 20px;
margin-bottom: 0;
background: url(../images/templatemo_sidebar_header.jpg) no-repeat; color: #999
}
.sidebar_box span.bottom {
position: absolute;
bottom: -26px;
left: 0;
width: 240px;
height: 26px;
background: url(../images/templatemo_sidebar_bottom.jpg)
}
#sidebar .sidebar_box .content {
padding: 10px 10px 0;
}
#sidebar .sidebar_list {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar .sidebar_list li {
display: block;
margin: 0;
padding: 3px 0;
border-top: 1px solid #595858;
border-bottom: 1px solid #343434;
}
#sidebar .sidebar_list li.first {
border-top: none;
}
#sidebar .sidebar_list li.last {
border-bottom: none;
}
#sidebar .sidebar_list li a {
color: #d6d3d3;
}
#sidebar .sidebar_list li a:hover {
color: #fff;
text-decoration: none;
}
.bs_box { clear: both; margin-bottom: 20px }
.bs_box img { float: left; margin-right: 10px; border: 4px solid #3d3d3d }
.bs_box h4 { margin-bottom: 0 }
.bs_box h4 a { font-size: 12px; color: #08aee3; font-weight: 700}
.bs_box .price { font-size: 12px; font-weight: 700; color: #fff }
.product_box {
float: left;
width: 225px;
text-align: center;
margin: 0 0px 0px 0;
}
.product_box img {
margin-bottom: 5px;
}
.product_box h3 {
font-size: 11px;
color: #000;
font-weight: 700;
margin-bottom: 10px;
}
.product_box .product_price {
color: #8fb410;
font-size: 14px;
font-weight: 700;
}
.product_box .add_to_card {
float:left;
display: block;
width: 140px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
background: url(../images/add_to_cart.jpg);
margin-left: 42.5px;
}
.product_box .detail {
float: left;
display: block;
width: 140px;
height: 28px;
line-height: 28px;
text-align: center;
background: url(../images/detail.jpg);
margin-left: 42.5px;
}
.checkout input {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 5px;
}
#contact_form {
padding: 0;
width: 312px;
margin-bottom: 40px;
}
#contact_form form {
margin: 0px;
padding: 0px;
}
#contact_form form .input_field {
width: 300px;
padding: 5px;
color: #222;
background: #fff;
border: 1px solid #dedede;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
margin-top: 5px;
}
#contact_form form label {
display: block;
width: 100px;
margin-right: 12px;
font-size: 13px;
}
#contact_form form textarea {
width: 300px;
height: 200px;
padding: 5px;
color: #222;
background: #fff; border: 1px solid #dedede;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
margin-top: 5px;
}
#contact_form form .submit_btn {
padding: 5px 12px;
background-color: #000;
border: 1px solid #fff;
color: #fff;
font-size:14px;
margin: 10px 0px;
}
.faq h3 { font-size: 14px; margin: 30px 0 5px }
.content_half {
width: 320px;
}
.content_13 {
width: 220px;
margin-right: 10px;
}
.no_margin_right {
margin-right: 0;
}
#templatemo_footer {
color: #707070;
}
#templatemo_footer a {
color: #999;
}
.question {
position:relative;
display: inline-block;
text-align:center;
left:-1em;
top:-5em;
padding: 10px 0px 0px 0px;
width: 174px;
height: 58px;
color:black;
font-weight:bold;
font-size: 13px;
line-height: 1.3em;
background: url('../admin/images/bubble.png') left top no-repeat;
opacity:0;
z-index:1;
}
.yes{
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #434d17;
text-shadow: 0px 1px 0px #fff;
background: url('../admin/images/buttony.png') left top no-repeat;
}
.cancel {
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #fff;
text-shadow: 0px 1px 0px #000;
background: url('../admin/images/buttonn.png') left top no-repeat;
}
.mint_box {
float: left;
width: 300px;
text-align: left;
margin: 0 10px 10px 0;
}
}
I think an inline-block approach would do what you want:
.product_box {
display: inline-block;
margin: 0;
text-align: center;
vertical-align: bottom;
width: 225px;
}
You could use relative positioning to move the div down, however, you would need to give the Keep Me & Never Go Broke div a unique id
add to div
id="whatever_u_want_to_call_it"
then style the id to have a relative position
#whatever_u_want_to_call_it{
position: relative;
bottom: -215px;
}