Posted 3 years ago #
I cannot seem to get my sidebar alignment right. Certain ads etc are set to be centered, yet aren't and go outside the sidebar. I have messed around with this a lot and any time I get it to work, it appears worse in an other browser. http://www.ventvox.com
Any help would be much appreciated. =)
Posted 3 years ago #
I looked at your page and it looked fine... but I think I know what you are describing.. this has worked for me on several applications, and it may for you:
the concept is to create div's for your advert areas (most often images).. this is how it is done in your theme:
<div class="advert_container">
advertisement or picture here
</div>Now you need to go to your style.css and define the div.. They would look something like this:
.advert_container {
height:400px; /*or defined max height*/
width: 400px; /*or defined max width*/
}
.advert_container img {
height: 90%;
width: 90%;
margin:auto;
}
.advert_container script {
height:90%;
width: 90%;
margin:auto;
}
Now I haven't tested this with the term 'script' in a css, but I see no reason why it wouldn't work. The basic premise is you make a div with a defined dimension, and then another with a percentage dimension of the container. You may have to insert several of these, one for tall skinny ads (skyscrapers) and one for standard banners (long and short) and one for badges (square or close to), but the payout is a well constructed page that doesn't wallow all over the place because of huge ad's or pic's folks feed to you...
happy coding.
Posted 3 years ago #
Thanks so much, I will try this out soon and let you know. =)
Posted 3 years ago #
Hi,
I am looking thru the css stylesheet and I am not sure what I should be changing....could you take a look at the following?
/** Menu
------------------------------**/
#menu {
float: left;
width: 200px;
}
#menu a {
color: #808080;
text-decoration: none;
}
#menu a:hover {
color: #eee;
text-decoration: none;
}
#menu ul , #menu li#search {
margin-bottom: 10px;
}
#menu li {
margin-left: -30px;
padding-left: 3px;
list-style: none;
}
#menu li.pagenav ul ul , #menu li.widget_pages ul ul {
margin-bottom: 0px;
}
#menu li#search {
clear: both;
}
#menu li#search h2 {
margin-bottom: 3px;
}
/*flickrRSS*/
#menu li#flickrrss {
width: 200px;
}
#menu li#flickrrss h2 {
margin-bottom: 0px;
}
#menu li#flickrrss a {
float: left;
}
#menu li#flickrrss a img {
margin: 2px 2px;
border: 2px solid #444;
padding: 1px;
background: #fff;
}
#menu li#flickrrss a:hover img {
border: 2px solid #fff;
background: #444;
}
Posted 3 years ago #
you wouldn't be changing anything, you would be adding what I posted above to your stylesheet...
when you have done that you will need to go to your theme and put the advertisement stuff in the div's prescribed.. like what is above in the code box...
the concept is to define an outer container, and the an inner one which is a percentage (either %, or em) of the other... so an advert (which is an image would be say 600px wide and 600px tall)- raw it wouldn't fit in your sidebar, but if you use the manner prescribed it will be no bigger than around 390px X 390px... and would fit... of course at the expense of being condensed- but as long as your aspect ration is similar it shouldn't be an issue.
you can see this in action here and here... all my ad's use this constraint.
Posted 3 years ago #
Drewactual,
Thank you for taking the time to explain this. I will see what I can do with it! =)
Posted 3 years ago #
I am still having issues with this. I am brand new to all of this, so please forgive me for not understanding the basic steps to getting this corrected...have more patience for me?
It's close. set the menu width back to 200px and remove the width/height from these:
.advert_container img {
height: 90%;
width: 90%;
margin:auto;
}
.advert_container script {
height:90%;
width: 90%;
margin:auto;
}
you can reduce it to:
.advert_container img, .advert_container script { margin: auto;}
also, change the <div class="advert_container"> to
<li class="advert_container">
stuff
</li>since your sidebar is a ul already.
then, download firebug http://getfirebug.com It'll be your pal. :)
Posted 3 years ago #
yeah man, no worries...
in the theme you use, find the area that in responsible for presentation of your ad's. You will be modifying that file with a little html...
before any of the ad's start, you are going to want to open a new div. If you used the example I provided it will be advert_container, and will look like this:
<div class="advert_container">
either at the end of that particular ad or at the end of all your ad's in that particular area (left sidebar for instance) you will want to close that div:
</div>
then you will want to open your style.css and add the css modification/addition I provided above.
There may be an instance where you are wanting to contain a skyscraper banner ad (narrow but tall) or a traditional banner (short but wide) or a badge (square or close to) which you may want to write additional css declarations for... for instance:
.advert_container_skyscraper {
height:800px; /*or defined max height*/
width: 120px; /*or defined max width*/
}
.advert_container_skyscraper img {
height: 90%;
width: 90%;
margin:auto;
}
.advert_container_skyscraper script {
height:90%;
width: 90%;
margin:auto;
}and:
.advert_container_traditional_banner {
height:200px; /*or defined max height*/
width: 800px; /*or defined max width*/
}
.advert_container_traditional_banner img {
height: 90%;
width: 90%;
margin:auto;
}
.advert_container_traditional_banner script {
height:90%;
width: 90%;
margin:auto;
}and:
.advert_container_badge {
height:200px; /*or defined max height*/
width: 200px; /*or defined max width*/
}
.advert_container_badge img {
height: 90%;
width: 90%;
margin:auto;
}
.advert_container_badge script {
height:90%;
width: 90%;
margin:auto;
}of course, if you are needing to contain a skyscraper, you would want to insert the html division declaration specific to that ad placement... i.e:
<div class="advert_container_skyscraper"> all your ad code</div>
Now, very specific to your issue, I would create a div class in your css and call it whatever, but for speaking purpose let's say it is called left_bar_ad...
it would be:
.left_bar_ad {
height:200px;
width: 200px;
margin:auto;
}
.left_bar_ad img {
height:90%;
width:90%;
margin:auto;
}and then find where you inserted the ad in your theme, and ad to that file immediately preceding the ad:
<div class="left_bar_ad">the SINGLE ad</div>
this should center as well as scale the ad's presentation on your page.
drewactual, you're one hell of a dude writing all that up. Not to contradict but his side bar is a ul. the divs being stuck in (without being inside of an li) are part of what's causing him grief on the site right now.
ventvox, everything drewactual is saying is spot on. just change div to li and you should be set. the css doesn't change, just the html tags.
Posted 3 years ago #
drewactual, you're one hell of a dude writing all that up. Not to contradict but his side bar is a ul. the divs being stuck in (without being inside of an li) are part of what's causing him grief on the site right now.
ventvox, everything drewactual is saying is spot on. just change div to li and you should be set. the css doesn't change, just the html tags.
and that is what I get for not peeking at his source... yup... in a general sense my theory works, but not with his li's .
Posted 3 years ago #
Will working with the above idea or code help me align my LinkedIn button on my sidebar? I am using Elegance and the LinkedIn button seems like it is not vertically aligned. I would also like to move it up above the Archives section.
Or is there some easier way to do this?
Oh. Figured out the horizontal alignement part - very easy - input the code align="right" and it looks fine.
Still need to know how to move it up above the Archives section.
This topic has been closed to new replies.
