 halp, centered nav with image more than i bargained for |
  |
| bones_n_water |
 May 20 2016, 04:37 AM
Post
#1
|
|
Group: Members Posts: 2 Joined: 20-May 16 Member No.: 24,265  |
ugh i've tried everything i could think of and then a whole host of plugins but there must just be some simple way to do it i that i just dont know/dont know how to look up...
  the one that looks like something other than crap is my design in illustrator and then that other one there's what I got for my bust efforts in dreamweaver. this page was heavily consulted. the basic idea was to create an unordered list that included two dropdowns with two items each and then have the logo (which is also the home page link) be between them and center them in the head and stick that in a header that had a png of the birdsn bar as it's background and it would just be centered on that and all look beautiful aand id just slap that doodad up on top all my pages BUT NOthing i do can center it????? and like i can get it to align with inline block but then the dropdowns are hangin down with the bottom of the logo which is no and also bad???? someone who understands these things better please help id honestly be satisfied if i could just understand WHY it's not working. heres my code stuffs: html: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Angela Paul | Artist and Designer</title> <link href="css/main.css" rel="stylesheet" type="text/css"> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Lato:400,700,300|Quicksand' rel='stylesheet' type='text/css'> <link href="css/script.js" type="text/javascript"> </head> <body> <header> <ul> <li><h1 align="center">art</h1> <div align="center"> <ul> <li></li> </ul> </div> <ul> <li><h6 align="center"><a href="digital.html">digital</a></h6> </li> <li><h6 align="center"><a href="traditional.html">traditional</a></h6> </li> </ul> </li> <li> <div align="center"><a href="index.html"><img src="images/wierdlogo.png" width="100" hight="auto"></a></div> </li> <li><h1 align="center">info</h1> <div align="center"> <ul> <li></li> </ul> </div> <ul> <li><h6 align="center"><a href="about.html">statement</a></h6> </li> <li><h6 align="center"><a href="resume.html">resume</a></h6> </li> </ul> </li> </ul> </header> <lb> <div id="welcome"> <p><h1>I’m Angela,</h1></p> <p><h2>and this is my work</h2></p> </div> <footer> </footer> </body> </html> ________________________________________________________________________________ ______________________ css: body { line-height: 1; background-color:#000000; background-image:url(../images/mountains-n-starfield.png); background-repeat:repeat-x; background-attachment:fixed; background-position:bottom; background-size:auto 50%; } #wrapper{ Width:960px; hight:100%; background-color:#000000; margin:0 auto; display:block; } header{ background-image:url(../images/birdbar.png); background-attachment:local; background-position:top; background size:760px auto; background-repeat:no-repeat; width:100%; z-index:6; hight:200px; padding-top:20px; margin:20px auto; background color:#000000; text-align:center; } #welcome{ margin-top:60px; text-align:center; z-index:5; } #artoption{ text-align:right; width:150px; hight:144px; text-decoration:none; margin-right:30px; } #infooption{ text-align:left; width:auto; hight:144px; text-decoration:none; margin-left:30px; } ul { display: inline; margin: 0; padding:0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } ul li { position: relative; float:left; background: none; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } ul li:hover { background: none; color: #fff; } ul li ul { padding: 0; position: absolute; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } ul li ul li { background: none; margin:10px; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } ul li ul li:hover { background: none; } ul li:hover ul { display: block; opacity: 1; visibility: visible; } a{ text-decoration:none; } h1{ font-family:quicksand; font-size:36px; color:#ffffff; margin:6px; } h2{ font-family:quicksand; font-size:15px; color:#ffffff; line-height:16px; } h3{ font-family:lato; font-weight:lighter; font-size:27px; color:#ffffff; } h4{ font-family:montserrat; font-size:30px; color:#ffffff; font-weight:bold; } h5{ font-family:lato; font-size:14.5px; color:#ffffff; } h6{ font-family:quicksand; font-size:20px; color:#ffffff; } footer{ width:100%; background-image:url(../images/foothills.png); background-size:auto 50%; background-position:bottom; background-attachment:fixed; background-repeat:repeat-x; z-index:8; } (i also have the meyerweb reset in my css but like... nobody cares) This post has been edited by bones_n_water: May 20 2016, 04:45 AM |
  |
 
|
| pandy |
May 20 2016, 04:46 AM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I have a problem relating the mockup to the HTML (so few images there). Could you link to the page so we can see the thing with images?
|
|
|
|
| bones_n_water |
May 20 2016, 04:57 AM
Post
#3
|
|
Group: Members Posts: 2 Joined: 20-May 16 Member No.: 24,265 |
http://angelampaul.x10host.com/project3/index.html
yeah that makes more sense... this thing isnt exactly u ready to go live so i only uploaded it just now |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 02:14 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC