Page 1 of 1
Picture before Breadcrumb [SOLVED]
Posted: Tue Nov 27, 2007 6:19 pm
by Gregor
Hello,
I'd like to have a tiny picture showing the translation option before the breadcrumb "waar ben ik: ". Don't mention the translation
Any idea how can get the picture in line with the breadcrumb? In the stylesheet I placed:
Code: Select all
/* position for vertaling */
div#vertaling {
height: 3px;
}
Thanks in advance,
Gregor
Re: Picture before Breadcrumb
Posted: Tue Nov 27, 2007 7:17 pm
by neophron
How about a background-image with css? Do you want only one pic or for every link?
Is this page online?
neophron
Re: Picture before Breadcrumb
Posted: Tue Nov 27, 2007 10:12 pm
by Gregor
Thanks for your reply.
The site is online (
www.uisge-beatha.eu), and I only want the picture once, because it is ment to translate the webpage to English. So, I guess it is just one link.
Re: Picture before Breadcrumb
Posted: Wed Nov 28, 2007 12:50 am
by carasmo
You have to put the picture and the div containing the picture inside the breadcrumbs div and clearfix it or put a inside the containing div. Then style it accordingly (float left, margin, etc.,). Usually I use a line-height on the containing div to get things to line up vertically (for one line items).
Or you can float the image like you did with the breadcrumbs and the search.
Don't put the image between a p tag, because the p tag typically has padding and margin on it on it.
EXAMPLE ONLY:::
Code: Select all
<!-- Start Breadcrumbs -->
<div class="breadcrumbs">
<!-- Vertaling van de site --> <div id="vertaling">
<a href="http://translate.google.com/translate?u=http%3A%2F%2Fwww.uisge-beatha.eu&langpair=nl%7Cen&hl=nl&ie=UTF8" target="_blank" title="Uisge Beatha in het Google Engels..."><img src="uploads/images/cms/flag_en.gif" alt="English" title="Uisge Beatha in het Engels" /></a>
</div><!-- Einde Vertaling van de site -->
{breadcrumbs starttext='Site Location' root='Home' delimiter='»'}
<hr class="accessibility" />
<br />
</div>
<!-- End Breadcrumbs -->
then your css is something like:
div#vertaling {width: 22px;height:12px;}
div#vertaling a {border:0px;}
div.breadcrumbs br {clear:both;height:0px;}
I think this will work, it's all in my head working.
Re: Picture before Breadcrumb
Posted: Wed Nov 28, 2007 7:52 am
by Gregor
Thanks Carasmo. If you look at the pages, some things are changed, and although both pages (main and other menu pages) use a different stylesheet, the part for the 'Breadcrumb' and 'vertaling' are in both stylesheets the same. However, if look at the mainpage and one of the menu pages, you'll see the difference.
I already had a look with cssedit, however my knowledge on css is too little to solve it
Re: Picture before Breadcrumb
Posted: Wed Nov 28, 2007 2:51 pm
by carasmo
Without actually building your site, I can't make it consistent for all pages, they should all use the same style sheet. For the main page, the best way to do this is by enclosing the entire breadcrumb output in a container and then style the container, it should work but if there is other stuff interfering with it, that I don't know.
Code: Select all
<!-- Start Breadcrumbs -->
<div class="breadcrumbs">
<!-- Vertaling van de site --> <div id="vertaling">
<a href="http://translate.google.com/translate?u=http%3A%2F%2Fwww.uisge-beatha.eu&langpair=nl%7Cen&hl=nl&ie=UTF8" target="_blank" title="Uisge Beatha in het Google Engels..."><img src="uploads/images/cms/flag_en.gif" alt="English" title="Uisge Beatha in het Engels" /></a>
</div><!-- Einde Vertaling van de site -->
<p>{breadcrumbs starttext='Site Location' root='Home' delimiter='»'}</p>
<hr class="accessibility" />
<br />
</div>
<!-- End Breadcrumbs -->
then add this to the style sheet
Code: Select all
div.breadcrumbs p {margin:0;padding:0 0 0 25px;}
Re: Picture before Breadcrumb
Posted: Wed Nov 28, 2007 8:10 pm
by Gregor
Thanks for taking the time to have a look.
I'm sorry to tell, but the code did not help. If there is anything interfering, I don't know. I find stylesheets difficult to understand. I always thought that for different page lay out, one also need more stylesheet. If I understand you correctly, than there is no need to do so, and can I put all styling in one sheet
Re: Picture before Breadcrumb
Posted: Wed Nov 28, 2007 9:18 pm
by carasmo
Looks as intended on FF. I don't know about the other pages, but the home page is correct on FF.
One style sheet for entire site, or a few but they all are attached with the CMSMS way (through the template stylesheet relationship), your site is set up non-standard.
Re: Picture before Breadcrumb
Posted: Thu Nov 29, 2007 5:19 am
by Gregor
So that makes a new project... get my stylesheets in 'the standard way'. I now have two templates (a 3 column and a 2 column) and the stylesheets are all attached via the relationship menu. I noticed it is quit some work o get 2 stylesheets nearly o equal (becaue of the 2 - 3 column lay out)
Just to make sure I understand you correct, so all page-templates (2 and 3 column) use one stylsheet that does the styling for all pages. Some specific styling, calendar for instance, is done in a seperate styesheet.
Re: Picture before Breadcrumb
Posted: Thu Nov 29, 2007 6:36 am
by carasmo
You would make global items in the global contents for header, footer, etc. It would be very helpful for you to learn CSS from Andy Budd or some other CSS guru. His book and site helped me a lot, but it took months and months.
Re: Picture before Breadcrumb
Posted: Thu Nov 29, 2007 5:05 pm
by Gregor
I ordered a book on css. Thanks for the suggestion. Now find the time to study...
I managed to et the two in line. First I merged the two stylesheets to one stylesheet and created a second one that only holds the difference for a two and three column lay out. Than started with the tips I earlier in this post, and now in FFand Safari, they are in line. In IE the breadcrumb is placed under the picture.
Re: Picture before Breadcrumb
Posted: Fri Nov 30, 2007 3:25 pm
by carasmo
IE bites. Did you check it in IE 7. More and more people are moving to that. I can't think of what would be happening in IE to cause it to move to the next line. Look around in google too.
Re: Picture before Breadcrumb
Posted: Fri Nov 30, 2007 3:55 pm
by Gregor
I checked it at work, and they have IE 6.0 and I don't think they will go to IE 7 just because of my site
I'll google around..
Would you mind to have a look at my site again with FF and click on the various menus. Something weird is happing when clicking on "Fotoalbum", and than hover over a menu item that has two or more deeper menu's. The menu takes the whole width of the screen. Thanks.
Re: Picture before Breadcrumb
Posted: Fri Nov 30, 2007 5:45 pm
by carasmo
Probably didn't attach the style sheet or there's a missing end bracket or something funky with the stylesheet. I use Fire Fox developer tools to validate both CSS and xhtml, because it helps point out errors (such as style sheet errors or syntax or a missing closing div). I am booked up right now, so unfortunately I can't troubleshoot the problem.
Re: Picture before Breadcrumb
Posted: Sun Dec 02, 2007 8:18 am
by Gregor
@Carasmo:Thanks for the help so far.
RonnyK mentioned that it (still) does not look good in IE7 (which I don't have/use). Because I replied on an earlier post about menu's, I'll close this post.
Gregor