I'm trying to add in a sponsor logo into the top right corner of the Navigation Pane of my website using CSS.
Here is my website link: www.headlightshortfilm.com.au
Does anyone know how to do this using CSS? Squarespace can't help me so I was about to pay a Squarespace specialist to do it but I feel it must be pretty simple. I thought i'd try here first :)
Add this Div after your <div id="topNav" style="padding-right: 0px;"></div>
<div class="sponsored-logo">
<img src="imageURL">
</div>
Add this class on your stylesheet
.sponsored-logo {
float: right;
}
Add float: left; to your #logo and #topNav
Hope this helps.
Related
Is there a better way to position a logo in the middle of the navigation? This is a wordpress build using the twitter bootstrap. I'm using absolute positioning but not sure what to do with the responsive aspect. Any input would be much appreciated. The url is: http://ndi.nowmgbeta.com/
The easiest way probably is to change the <div class="brand-nmg"> to:
<div class="row-fluid brand-nmg text-center">
and remove the brand-nmg class from the link inside it.
Then use the following css:
.navbar {
position: relative;
}
.brand-nmg {
position: absolute;
}
(so remove the left: rule from .brand-nmg)
I'm trying to figure out how to add an image between blog posts (i.e., a graphic basic divider line, not a border) on my website: www.sacspartans.org
I know how to create and div, add the image, etc. But I don't know what file to make the modification to. Does anybody know?
I'm using Toolbox, the bare bones starter theme.
Any help would be much appreciated.
EDIT: I opened up the index file... but I'm not sure where to add my div.
Add the div right above <?php endwhile; ?>
Make it so that the three divs are like this:
<div class="div">
//blogpost 1
</div>
<div class="div">
//pic
</div>
<div class="div">
//blogpost 2
</div>
CSS
.div {
float: left;
display: inline;
//rest of css
}
I've been working on my first child theme for WordPress for a couple of days and have pretty much got everything working as expected apart from one thing.
[http://stevefleming.co.uk/blog/][1]
I've tested in Fire Fox and Chrome and the right hand 'widget' div is being pushed
below. It's not happening on other pages and yes, I did customize the page. I've looked at a working one and then this page and can't see any obvious difference.
Hope somebody can help before I lose my mind.
Thanks
Steve
Just put your #sidebar before your #main in the markup, so that its float affects the main section.
<div id="sidebar">
</div>
<!-- /#sidebar -->
<div id="main">
</div>
<!-- /#main -->
Add "float: left" to your main so that it should look like:
#main {
width: 620px;
float: left;
}
I have a problem using a clickable adverting skin as background of my Wordpress site. My site is this: http://www.tvindiretta.com. If you scroll down any page of my site you will see that the top of the background covers the content and mess all up... I think that I should add a white background in foreground. I really need your help, I'm a noob in CSS and programming.... I read about this parameters googling for...
display: block; ??
text-indent: px; ??
overflow: hidden; ??
z-index:22 ???
...but I don't know how to solve this problem... Here is my Wordpress theme CSS file http://www.tvindiretta.com/wp-content/themes/videoplus/style.css Thanks a LOT for any help in advance
P.S. This site: IMPRONTALAQUILA.ORG in certain pages shows the same ad and also other similar skins without any bug or problem... how can I get the same result? I want the background to be fixed so that users see it browsing any part of the page
Remove fixed from
background: white url(http://www.affiliago.it/accounts/default1/banners/SKIN_BAKECA.jpg) no-repeat fixed;
In your body style.
UPDATE:
Add in your css:
.myClass{
background-color:white;
width:994px;
margin:0 auto;
}
And add those styles to:
<div class="clear"> to <div class="clear myClass">
<nav> to <nav class="myClass">
<div class="wrap"> to <div class="wrap myClass">
I am working with WordPress and I am trying to modify my template so that on my blog pages. I have a menu on the right hand side of the page while the blog content is on the left. The problem I am having is that all the space under the menu <div> is wasted and I would like to have the blog content wrap/flow around the menu <div>. Normally I would float the menu <div> to the right, however the WordPress engine outputs this <div> after the blog content so I am not sure how to float it to the upper right corner of the page.
I have created a JSFiddle example to illustrate.
You can use a short bit of JavaScript to move the menu as necessary. See the JSFiddle I forked from yours.
Essentially I modified the HTML to add ids to the menu and the blog content, something like this:
<div id="blog">
<p>...</p>
</div>
<div id="menu">
...
</div>
Then I styled them like so in CSS. Note that the menu has an explicit width but the blog content itself does not.
#blog { }
#menu {
float: right;
width: 400px;
}
Then I used a quick bit of JQuery to move the menu into the blog so that it can float right and the text will wrap around it:
$('#blog').prepend($('#menu').remove());
Essentially what the JavaScript does is it removes the menu from the dom and then inserts it as the first child in #blog.
You need to set float of menu to right and put it on top of the post div.
For example, the CSS should be like this:
#post {width: 500px;}
#menu {
float: right;
width: 250px;
height: 100px;
color: #6666FF;
border: solid 1px #333;
}
And HTML:
<div id="post">
<div id="menu">lorep ipsum</div>
</div>
You can wrap text around a div like you would do with an image e.g: http://jsfiddle.net/Nbpen/