chipperi Posted July 6, 2014 Share Posted July 6, 2014 The site is http://somebodylovesmeinc.org it is a site for a small nonprofit I am working on. For the most part it looks and behaves the way I want it. But ....theres always a But. When I minimize or maximize the window, everything except the topbar which contains the words Some Body Loves Me, resizes accordingly. So it looks horrible in lower screen resolutions. 2nd But. How would I create the navbar so I can edit it across all pages, instead of opening every single page and adding links etc. That is why I went with CSS but I am a complete rookie so laymans terms please. Chip Link to comment Share on other sites More sharing options...
dsonesuk Posted July 6, 2014 Share Posted July 6, 2014 copy this <ul> <li class="last"><a href="index.php"><span>Home</span></a></li> <li class="last"><a href="events.php"><span>Events</span></a></li> <li class="last"><a href="about.php"><span>About</span></a></li> <li class="last"><a href="contact.php"><span>Contact</span></a></li> <li class="last"><a href="vol.php"><span>Volunteer</span></a></li> <li class="last"><a href="donate.php"><span>Donate</span></a></li></ul> to a separate page example lside-navmenu.php, just this, no html body or links to js or css, as this is inside the page this menu is included in and will reference css, js through these pages. In the pages add the include reference to this file. <div id="cssmenu"><?php include 'lside-navmenu.php'; ?></div> all you need to do is amend lside-navmenu.php and th change will reflect in all page that include this file. 1 Link to comment Share on other sites More sharing options...
chipperi Posted July 6, 2014 Author Share Posted July 6, 2014 Thank you so much! But#2 solved. Now for the resizing issue. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 6, 2014 Share Posted July 6, 2014 (edited) You can use css3 font-size: 5vw; (approx value) unit, but you may find its not fully supported in all browsers, the other option is make it a image with transparent background and set image width in percent. Also you really, i mean really should not use position absolute, unless you can't achieve the same result using float, padding and margins. Edited July 6, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
chipperi Posted July 7, 2014 Author Share Posted July 7, 2014 Grr still plugging at it...I made the title a gif with a transparent background, and I still cant get it to do what I want to do. Also if I get rid of Position:absolute; things go all kinds of crazy. I have been messing with www.somebodylovesmeinc.org/template.php and test.css to keep from messing up the rest of the site.. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 7, 2014 Share Posted July 7, 2014 <!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=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="main.css" /> <title> SomebodyLovesMeInc.org</title> <style type="text/css"> *{padding:0;margin:0;} /* set all margins and padding to 0 */ /*reset default margins etc.*/ body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;background-image: url("http://somebodylovesmeinc.org/gfx/siteart/marb013.jpg");} html, body {height: 100%;} p{margin:1em} hr{margin-top:0; margin-bottom:0;} h1, h2, h3, h4, h5, h6{margin:0.9em;} h1 {padding:0;font-size:2em;} h2 {padding:0;font-size:1.84em;} h3 {padding:0;font-size:1.68em;} h4{padding:0;font-size:1.52em;} h5 {padding:0;font-size:1.36em;} h6 {padding:0; font-size:1.20em;} #wrapper {min-height:100%; position: relative; } #inner_wrapper{background-color: #CCC; position: absolute; top: 0; bottom: 0; left: 125px; right: 125px; z-index: 0;} #inner_wrapper ~ * {z-index: auto; position: relative;} #lside, #rside {width: 125px;background-image: url("http://somebodylovesmeinc.org/gfx/siteart/marb013.jpg");} #lside{float: left;} #rside {float: right;} #middle {overflow:auto;margin: 0 125px; font-size: 25px; text-align: center;} #header img { width: 50%; height: 200px; margin: 0 auto; display: block;} #cssmenu { font-family: Verdana, Helvetica, Arial, sans-serif; float:right; width: 150px; } #cssmenu ul { list-style: none; text-indent: 0px; margin-left: 40px; margin-top: 1.6em; } #cssmenu li { margin-top: 3px; } #cssmenu a { font: 12px Verdana; padding: 4px; color: #646464; display: block; padding: 6px 30px; height: 20px; text-decoration: none; background:url('http://somebodylovesmeinc.org/gfx/siteart/background.gif'); } #cssmenu a:hover { background: url('http://somebodylovesmeinc.org/gfx/siteart/highlight.gif') no-repeat right; padding: 6px 40px; } </style> </head> <body> <div id="wrapper"> <div id="inner_wrapper"></div> <div id="lside"> <img src="http://somebodylovesmeinc.org/gfx/siteart/whitelogo200.gif" width="150" height="120" /> <div id='cssmenu'> <ul> <li class='last'><a href='index.php'><span>Home</span></a></li> <li class='last'><a href='events.php'><span>Events</span></a></li> <li class='last'><a href='about.php'><span>About</span></a></li> <li class='last'><a href='contact.php'><span>Contact</span></a></li> <li class='last'><a href='vol.php'><span>Volunteer</span></a></li> <li class='last'><a href='donate.php'><span>Donate</span></a></li> </ul></div> </div> <div id="rside"> </div> <div id="middle"> <div id="header"> <img src="http://somebodylovesmeinc.org/gfx/siteart/sblm.gif" width="800" height="200" /> </div> <div id="content"> <p> SomeBodyLovesMe.org is in the process of being built. </p> </div> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
divinedesigns1 Posted July 8, 2014 Share Posted July 8, 2014 (edited) Grr still plugging at it...I made the title a gif with a transparent background, and I still cant get it to do what I want to do. Also if I get rid of Position:absolute; things go all kinds of crazy. I have been messing with www.somebodylovesmeinc.org/template.php and test.css to keep from messing up the rest of the site.. i normally put my font-size in percentages, you can try that and see if it works for you, also if im using a image i make the image tag width 100% Edited July 8, 2014 by DDs1 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 8, 2014 Share Posted July 8, 2014 (edited) Font-size percentage relate to default font size of 16px (font-size: 62.5% = 10px) or a predefined px size, not to width or height dimensions of parent container, UNLESS you use new css3 unit vw, it will work, but! is not supported in all browsers. Edited July 8, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
divinedesigns1 Posted July 9, 2014 Share Posted July 9, 2014 Font-size percentage relate to default font size of 16px (font-size: 62.5% = 10px) or a predefined px size, not to width or height dimensions of parent container, UNLESS you use new css3 unit vw, it will work, but! is not supported in all browsers. did not know that part, but which browsers support vw/vh? Link to comment Share on other sites More sharing options...
dsonesuk Posted July 9, 2014 Share Posted July 9, 2014 http://www.sitepoint.com/new-css3-relative-font-size/ Link to comment Share on other sites More sharing options...
divinedesigns1 Posted July 15, 2014 Share Posted July 15, 2014 http://www.sitepoint.com/new-css3-relative-font-size/ sadly not all browsers, well up to date browsers support it Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now