PDA

View Full Version : A vanity home page you cannot navigate back to once you are IN site. possible?


asamuel
Aug-18-2007, 09:30 AM
I want to redo my nav bar.

I want a vanity home page that only has ENTER visible as a nav bar link

> This will link to a gallery (nav bar + PORTFOLIO). below which will be a nav bar that says PORTFOLIO (that page) and CONTACT.

eg. the link that says ENTER does the same thing as the link that says PORTOFOLIO. Only once you enter the site you are never directed to the vanity homepage again.

I've seen this done alot on pages that I like. Can it be done through CSS?

Help always always appreciated. xxx

Allen
Aug-18-2007, 03:42 PM
I want to redo my nav bar.

I want a vanity home page that only has ENTER visible as a nav bar link

> This will link to a gallery (nav bar + PORTFOLIO). below which will be a nav bar that says PORTFOLIO (that page) and CONTACT.

eg. the link that says ENTER does the same thing as the link that says PORTOFOLIO. Only once you enter the site you are never directed to the vanity homepage again.

I've seen this done alot on pages that I like. Can it be done through CSS?

Help always always appreciated. xxx
Try this. It adds "Enter on your homepage. You can also add a
photo there also, see option below.

Add this to your header html.

<div id="myEnter"><a href="/Portfolio">Enter</a></div>
Add this to yoru CSS.

#myEnter {display: none;}

.homepage #myEnter {
text-align: center;
font-family: Comic Sans MS, verdana;
font-size: 300%;
}

#myEnter a {text-decoration: none !important;}
#myEnter a:hover {color: white;}

.homepage #navcontainer {display: none;}



**** OPTION ****
If you want a photo also on your homepage add this instead of the header
html above. Also add the CSS shown above.

<div id="myEnter">
<a href="/Portfolio">
<img src="/photos/105945402-M.jpg" width="600" height="443" />
</a><br/>
<a href="/Portfolio">Enter</a></div>

Additionally change the height of your banner for this option to
tighten up your homepage.

.homepage #my_header {
display: block;
margin-left:auto;
margin-right:auto;
background: url(http://samuelbedford.smugmug.com/photos/109073942-O.gif); (http://samuelbedford.smugmug.com/photos/109073942-O.gif%29;)
height: 210px;
width: 750px;
}


You footer is not showing, it has to be visible. Add the closing div
after your nav code in your footer. This has to be done even it you
don't so any of the other stuff.

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/pictures">Pictures</a></li>
<li><a href="/Bio">Bio</a></li>
<li><a href="/contact">contact</a></li>
</div>

asamuel
Aug-20-2007, 12:00 AM
Allen as always you comw up with the goods. thanks I will tell you how it went when the techies at the phone company fix my upstream.

asamuel
Sep-03-2007, 01:48 AM
I have included the css and the html above and now I cannot see any nav bar links at all. Any ideas where I'm going wrong. Feel free to look. Thanks Sam.

Allen
Sep-03-2007, 06:07 AM
I have included the css and the html above and now I cannot see any nav bar links at all. Any ideas where I'm going wrong. Feel free to look. Thanks Sam.
Add the red in your CSS. My bad, forgot to include the display.

.homepage #myEnter {
display: block;
text-align: center;
font-family: Comic Sans MS, verdana;
font-size: 300%;
}


You footer is not showing, it has to be visible. Add the closing div
after your nav code in your footer. This has to be done even it you
don't so any of the other stuff. Because it's not closed everything
below in included in the navcontainer div.

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/pictures">Pictures</a></li>
<li><a href="/Bio">Bio</a></li>
<li><a href="/contact">contact</a></li>
</div>

asamuel
Sep-19-2007, 04:39 AM
Dear people / Allen ;)

I have made the above adjustments and I am quite happy. But a number of futher things have come to light.

Most important is that I want my Enter Nav bar to take me directly into the portfolio of images. There will only be one and I dont want tto see the page of galleries. Just click enter > straight into portfolio, then toggle between portfolio and contact.

You footer is not showing, it has to be visible. Add the closing div
after your nav code in your footer. This has to be done even it you
don't so any of the other stuff.

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/pictures">Pictures</a></li>
<li><a href="/Bio">Bio</a></li>
<li><a href="/contact">contact</a></li>
</div>

Actually this </div> had always been included, so I wonder if there is a compatability problem, but I've always opened up the page O.K. So?


my enter nav bar is Sweet :D but its the wrong font. If you look at my web page the other nav fonts are different, I've checked out the CSS and cannot locate what it is. Can anybody identify the font so that I may change it?

Lastly I would kill for a wee smidgen more space between my image on the homepage and the enter nav. I've forgotten how to do this too. Anyone?

Love and homage as always Sam:bow

Allen
Sep-19-2007, 06:04 AM
Dear people / Allen ;)

I have made the above adjustments and I am quite happy. But a number of futher things have come to light.

Most important is that I want my Enter Nav bar to take me directly into the portfolio of images. There will only be one and I dont want tto see the page of galleries. Just click enter > straight into portfolio, then toggle between portfolio and contact.



Actually this </div> had always been included, so I wonder if there is a compatability problem, but I've always opened up the page O.K. So?


my enter nav bar is Sweet :D but its the wrong font. If you look at my web page the other nav fonts are different, I've checked out the CSS and cannot locate what it is. Can anybody identify the font so that I may change it?

Lastly I would kill for a wee smidgen more space between my image on the homepage and the enter nav. I've forgotten how to do this too. Anyone?

Love and homage as always Sam:bow

In your header code add another break to push your Enter down some.
Also change the link to go directly to your photos instead of the category.

<div id="myEnter">
<a href="/gallery/2059370">
<img src="/photos/106181093-M.jpg" height="443" width="600">
</a><br /><br />
<a href="/Portfolio">Enter</a></div>


Add the font you want here in the red part.

.homepage #myEnter {
display: block;
text-align: center;
font-family: verdana;
font-size: 200%;
}


Example of multiple fonts. The browser loads the first one and if not installed
on machine tries the next and so on. Look here (http://typetester.maratz.com/) for fonts.

font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;

asamuel
Sep-19-2007, 06:27 AM
Thanks Allen,

I get closer with every step.

but adding that Gallery address still wont link me directly to the gallery. First I'm back with the catagories as you can see. Any ideas?

Allen
Sep-19-2007, 06:44 AM
Thanks Allen,

I get closer with every step.

but adding that Gallery address still wont link me directly to the gallery. First I'm back with the catagories as you can see. Any ideas?
chnage this

<div id="myEnter">
<a href="/gallery/2059370">
<img src="/photos/106181093-M.jpg" height="443" width="600">
</a><br><br>
<a href="/Portfolio">Enter</a></div>

to this

<div id="myEnter">
<img src="/photos/106181093-M.jpg" height="443" width="600">
<br><br><a href="/gallery/2059370">Enter</a>
</div>

asamuel
Sep-19-2007, 07:00 AM
Thats what I'm talking about Allen! Thats what I'm talking about! :ivar

But theres one more thing and I am oh so cheeky. I'm trying to flip the colors to be like my other nav bars, by writing the below, but its not working. Do know what to do?


#myEnter {display: none;}

.homepage #myEnter {
display: block;
text-align: center;
color: white;
font-family: trebuchet MS;
font-size: 180%;
}

#myEnter a {text-decoration: none !important;}
#myEnter a:hover {color: #ffffff;}

.homepage #navcontainer {display: none;}



thanks again Sam.

Allen
Sep-19-2007, 07:40 AM
Thats what I'm talking about Allen! Thats what I'm talking about! :ivar

But theres one more thing and I am oh so cheeky. I'm trying to flip the colors to be like my other nav bars, by writing the below, but its not working. Do know what to do?
thanks again Sam.
Try this combo.

#myEnter {display: none;}

.homepage #myEnter {
display: block;
text-align: center;
font-family: trebuchet MS;
font-size: 180%;
}

#myEnter a {
color: white;
text-decoration: none !important;}

#myEnter a:hover {color: #ccc;}

asamuel
Sep-19-2007, 08:00 AM
thats just perfect, thanks Allen.:lust