|
CSS - Search Engines Able To Read If Display:none
Hi everyone I was thinking about making a navigation which when an element was clicked on it would show (display:block) subsections of that element which would then be the end links. Until a navigation section was clicked on its relavent block would be set to display:none.
My question is does / will google and others have a problem with this or would they be able to understand a link which would be like the following: <a href="#" onClick="idofelement.style.display=block"> and then would they be able to follow the regular links which this link creates. Thank you for your help. Similar TutorialsOk, so I have been reading that it is best to place text as far up in the source code as possible for search engines. That being said, is it feasible to write code that uses DIVS extensively, and by doing so, place a div for the very top of a web page at the bottom of the source code, and a div for body text at the very beginning of the source code? I hope this makes sense... okay i want to make myself a website and to make it decent i seem to need to know HTML, PHP, CSS etc etc :s it all seems really hard i know quite a bit of macromedia flash and i know quite a bit of html but i am all new to CSS and PHP. CSS from what i can gather is what i need to know and i don't have a clue about it can somebody give me a link to an easy tutorial for CSS? or if anyone knows where i can start? most tutorials i just end up giving up on because i just can't be bothered reading any further thanks fir reading this i just need to know the basics so i can have a play around with and teach myself. Daz On two pages of my site: mileswright . com/?page_id=324 and mileswright . com/?page_id=331 it seems that part of the CSS file is being ignored. If you look at any of the other team members such as: mileswright . com/?page_id=334 you will see that the content div has padding being applied to it. In the first two pages though, the content div is being ignored. I'm really at a loss as to why this is happening. If anyone can shed some light on it I would be very grateful! (I apologize for the links not working but since I am a new poster I can't post links, but I figure that it would be pretty worthless if I didn't give links.) I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Obviously something is just not clicking for me. I've spent almost all day reading, and everyone makes it sound so darn easy! I have 2 basic problems, and it doesn't seem like they should be that hard to fix. The test site is at lgs.lambrite.com/test.htm and the stylesheet is lgs.lambrite.com/new.css Problem 1. For the life of me, I cannot get the link that says "Skip To Content" to accept the more specific set of link colors. I have tried every variation I can think of, with no luck. Code: <div id="subnav0" style="position:absolute; width:769px; height:22px; z-index:3; top: 192px; visibility: visible;" class="subnav"><a href="#content">Skip to Content</a></div> Code: .subnav #subnav0 a:link a:visited a:hover a:active {
color: #343457;
text-decoration: none;
}
My second issue is a little more complicated. Right now, all my layers have their positions hard-coded. This means that the content area is fixed in height, and I need it to be able to expand to accomodate the text. I did this because I was not able to (figure out how to) place the many subnav layers in the same position to do the rollovers, the wrapper would not expand properly, and the footer would not regularly start below the end of the content. Even a good example of a similar layout would be helpful; everything that I find uses 2-3 columns, float and the clear property. I really want to understand this stuff, but if I don't figure this one out in a few days, I'm going to have to use tables and learn it the next time around. So I really appreciate any input. Thanks! Sarah I was quite proud of that title, especially at 4 minutes past monday. Anyway - I digress. I am trying to create a scrolling news-type box using a div which is clipped so it looks like it scrolls up and down inside a 'window'. I have not declared what height i want the scrolling div to be as i never know how much text will be in it. When you scroll all the way to the bottom, I want there to be a way so that it stops scrolling - and for this i need the height of the div. Is there anyway of finding the height at all, or will i have to use a fixed height div. If my explanation is a touch wooly, the prototype page is here http://www.mortivica.com/moonrakers - the nav menu displays differently in IE and FF Here is the css: Code: #menu {
float: left;
width: 100%;
text-align: center;
margin: 0px auto;
padding: 0px;
display: inline;
}
ul {
text-align: center;
margin: 0 auto;
padding: 0;
display: inline;
}
li {
float: left;
padding: 10px;
margin: 0 auto;
border: 1px solid black;
background: #333;
list-style-type: none;
display: inline;
width: 10.84%;
}
li a {
padding: 0;
width: 69.9px;
}
li:hover {
background: #000;
}
menu is a containing div. Whats wrong???? Thanks in advance. Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks Hi! I have a problem in Firefox with a layout located at: link removed. Please follow this path: Executive Furniture > Executive Desks > The Haydon Range - and then select a product. Don't open a new tab, refresh the page or resize the text and scroll down. There is a huge gap between the last 'related items' product and the card images. Now if you open a new tab, resize the text or refresh the page, the gap disappears and won't re-appear until you close the window and re-open the site in a new window (start a new session maybe). I have a feeling this has something to do with margins or it may just be a bug - I haven't a clue! The relevant CSS is situated at link removed. The main template layout is shared between the other CSS files in that directory, but they aren't relevant to that part of the layout. I apologise for it not being the most efficient CSS in the world . You'll have to "view source" for the HTML; and this I won't apologise for, because it's being spat out by the crappiest piece of shopping cart software ever. It took me 4 months to get it to validate (originally 850+ errors)! Anyway, if any of you could help me figure out why Firefox is displaying this big margin I would be eternally grateful. Cheers I am using a template to make a webpage and it has a search in it. I would like to keep it and have it setup to perform a search on the site only. This the code in the template: <div id="navBar"> <div id="search"> <form action="#"> <label>search</label> <input name="searchFor" type="text" size="10"> <input name="goButton" type="submit" value="go"> </form> </div> What do I need to do to enable it to search the site where I'm going to put it. I'm brand new to CSS and I've been trying to customize a template, but it seems whenever I move the Search bar from the top left into the menu bar on the right side it offsets the placement of other items and I cannot for the life of me figure this out. My website is floydsewingmachines dot com (I guess it won't let me post the actual address?) but any suggestions or help would be greatly appreciated. Thanks! Hi there, sorry to bother y'all, but I've been fighting with this css for hours now and I can't seem to get it quite right. I'm trying to center a search box and button skinned with an image, which I think should be fairly simple, but I'm not very good with css yet and it's being more evil than usual. I will try my best to provide all the pertinent information, and thank you very much in advance for any assistance you might provide. My top bar is as such, at the moment (the current issue being that I can't get the text to not be on the edges with the image border while keeping the text field and the button flush against each other), although I've tried a number of other solutions, this is the closest as of yet that I have gotten. Code: <div class="header"> <div class="leftAlign"><a href="/Controller?pageRequest=home"><img src="/img/spinner.png"></img></a></div> <div class="rightAlign" id="topRight"> <jsp:include page="AccountLinks.jsp"></jsp:include> </div><br /> <form id="searchForm" action="/SearchServlet"> <input type="text" id="searchText"></input><input type="image" src="/img/searchButton.gif" alt="Search" id="searchButton"></input> </form> </div> and the relevant css is Code:
div.header{
width: 1000px;
margin: 0 auto;
min-height: 60px;
display: block;
text-align:center;
}
div.leftAlign{
float: left;
text-align: left;
}
div.rightAlign{
float: right;
text-align: right;
}
#searchForm{
vertical-align: top;
margin: 0;
line-height: 1;
outline:0;
}
#searchText{
background:url(/img/searchText.gif) no-repeat top center;
padding:0px;
margin:0;
display:inline;
border:0;
width:159px;
height: 31px;
}
#searchButton {
background:url(/img/searchButton.gif) no-repeat top center;
padding-top:0px;
margin:0;
display:inline;
border:0;
width:42px;
vertical-align: top;
line-height: 1;
height:31px;
}
Any help that you can provide would be greatly appreciated. Thank you very much. Does CSS have any effect on the way search engines crawl your page? Like if I had some description text I wanted to have on my page, but didn't want it to be part of my design. Could I just put it in a div and move it off the screen with CSS? Would that text still be beneficial to search engines? I can't seem to get the search box to centre on my site. Everything else is fine but for some reason the search box isn't. I've tried to create a container for it (that didn't work) I've tried numerous different codes in my css file and still no joy. I could put the css file up here but it's over 1000 lines long. Not advertising my site just need a professional opinion: http://trisearch.co.uk You'll see the problem. Thanks for any help or advice If you click on start and search a new windows opens, you should be able to see Name, In Folder, Size etc. I am looking to style the <td> cells in a table to look like that. i.e. same colours, lines and hover over effects. I dont think it will be impossible, but for the life of me I cant match the colour. Does anyone know what the colour is exactly, or has anyone seen an example of this style elsewhere so I dont have to waste time designing it. Hello, not sure if I'm posting in the correct area, but you guys here have been great help in the past. I'm almost to the point where I'd like to publish my site, make it available to those who might seek my key words, and thought that correct use of css and page crafting was sufficient for the robots to index my site. This seems at this time to be a falce assumption. Do I need to subscribe to the likes of google, Yahoo, etc to be seen, or is it just that my site isn't up to much and maybe a rethink is in order. Any advice on the big SEO would be greatly appreciated, Cheeeers HELP!! I am trying to center and right justify my search box in my navi menu. I would like to have it centered to my text links but I don't know where to start... Any help would be appreciated!! The site is at: drumchattr.com/atlantis Thanks! Dave I just copied wordpress's HTML 5 seach box code, but i will have to delete part of them because of the seach box's hint words When I add such words, it will not be displayed correctly. Anybody can help solve this issue. my website here nowrpg.com I cannot seem to get the image to line up next to the text box, no matter what I do the image has a small gap and the bottom of the image is about 3px higher than the search box: CSS Code: Code: #header { border: 1px solid #d6d6d4; width: 940px; padding: 10px; background-repeat:no-repeat; height: 110px; display: block; margin: 0 auto; text-align: left; margin-bottom: 2px}
#header #header-logo { float: left; margin-left: 40px; margin-top: 20px; }
#header #nav { float: right; border: 0px solid #ff0000; }
#header #nav ul { margin: 0; padding: 0; list-style: none; font-size: 11px; }
#header #nav ul li { margin: 0; padding: 0; display: inline; }
#header #nav ul li a { color: #0063be; text-decoration: none; margin-right: 12px; }
#header #nav ul li a:hover { text-decoration: underline; }
#header #nav ul li input { color: #0063b3; border: 1px solid #d6d6d4; font-size: 11px; padding: 2px; margin: 0;}
#header #nav ul li img { margin: 0; padding: 0; margin-top: 4px;}
HTML CODE: Code:
<div id="header">
<img src="images/logo.jpg" id="header-logo" />
<div id="nav">
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Log In</a></li>
<li><input type="text" /></li>
<li><img src="images/icons/go.jpg" /></li>
</ul>
</div>
</div><!-- END HEADER -->
Anyone see what I'm doing wrong or how to fix this? Thanks! |
|||||||