Wordpress and Webdesign Forum go41 » WordPress Code Snippets

Joern, got rounded div borders but one problem and also 1 quick question!

(9 posts) (2 voices)

Tags:

No tags yet.

omerkhan01
Member

Hey Joern,

You can visit my wp development test site here

I implemented this rounded border code -both php and CSS
from this site.

Now as you can see the border is chopped up at the bottom /left/ right. Is there something I should do with the CSS.

Also, I am trying to use this nice gradient background and have it repeat

In my CSS I have this
body {
background:/*url(images/backgrounds/vtile.png) repeat-x 0px 0px #252525*/ #19110A;
color: #000;
padding: 13px 0 25px 0;
}

and it is still not showing. Is this because it is competing with bg color. Are you allowed to have one or the other or can you have both an image and a bg color?

Lastly, I tried to float right my div googleadv and it doesn't move Joern.

I really appreciate these last few tips.

BTW. I use Firebug. LOVE IT. Wonderful for detecting what web structure corresponds with what CSS selector.

In case you need to log into my account

at mmtest1.byethost22.com

User:admin
password:ironman21

Thanks

Omar

Posted 1 year ago #
Joern
Moderator

in style.css you can write comments like this:
/* standard link behaviour */

this '/*' is the start of a HIDDEN comment, this '*/' is the end

so in your entry
body { background:/*url(images/backgrounds/vtile.png) repeat-x 0px 0px #252525*/ #19110A;
color: #000;
padding: 13px 0 25px 0;
}
there is a HIDDEN part, this:
/*url(images/backgrounds/vtile.png) repeat-x 0px 0px #252525*/
HIDDEN means the browser will not read

a background image plus color is allowed, in your site with the red line in the background image is the color black for the lower uncovered parts

above wrong entry should read:

body { background:url(images/backgrounds/vtile.png) repeat-x 0px 0px #252525;
color: #000;
padding: 13px 0 25px 0;
}

same for your fcontent

.fcontent{
background:url(images/backgrounds/bg_leadcontainer.jpg) repeat-x 0px 0px #252525;
color:#ddd;
border-top:4px solid #CC0033;
border-bottom:4px solid #CC0033;
padding:15px;
width:592px;
min-height:500px;
}

the google add
it is a span CLASS, so in style.css you need .googleadv not #googleadv

I gave you this in the last thread:
.googleadv {
float:right;
width:200px;
}

Posted 1 year ago #
omerkhan01
Member

Hi Joern,

The googleadv was referenced as a selector as . and not a # and it still didn't work. Also, I want to position the Featured content gallery right on the fcontent container with the grey background. Are there x, y coordinates I can do to directly align it on top of it. Or is there a z-index property when you want to put one divide over another? Lastly, in relation to the repeating background x times, when I un commented the url, my whole page went white?

Please help. I promise you these are the last three before this CMS is done. Thank you a million for your help. I even told my client that this project taught me sooooooooooooooo much about WP development, php, CSS and has made me a much better developer, in part due to my wordpress guru, Joern!

Thanks man

Omar

Posted 1 year ago #
Joern
Moderator

the google add location

you have now:
.googleadv
{
margin-right:20px;
float:right;
}

I gave you: (third and last time here...)

.googleadv {
float:right;
width:200px;
}

something float right aligns to the right side of the outer div it's in, if you set a margin-right additionally, you push it to the left from this right side.

your featured gallery
it is in homecontent-topleft width:600px; - okay
it is in fcontent width:592px; plus border 4+4px=600 - okay
it is in featured with no style in css
it is in myGallery, now we come close to the problem, you have:

#myGallery, #myGallerySet, #flickrGallery {
border:1px solid #000000;
height:500px;
width:700px;
z-index:5;
}

this 700px is more than the 592px it's in, so change this entry to width:592px;

you will not find this in your style.css, check either the plugin settings if you can set it there or find the plugins css in the plugins folder.
It might be also the image size itself, they are 700px

It might be possible to override by putting this changed values into your style.css:

#myGallery, #myGallerySet, #flickrGallery {
border:1px solid #000000;
height:500px;
width:592px;
z-index:5;
}

Posted 1 year ago #
omerkhan01
Member

Joern, the Fcontent issue-Solved. You were right. I changed the settings in the settings tab for the Featured Content Gallery Plug in. Now it fits nicely into the fcontent container.

Quick question about googleadv and a few more questions you didn't answer.

Joern, why is it important to put width:200px? It is still not moving right. Let's say I wanted to move it more right, so that the right border is right underneath the right border of the button ammazing people.

Also, can you please address my question on the background repeat x issue. I told you that I uncommented the url and then the whole page went white. It is not showing my image repeated along the X axis, across the screen.

I told you that for the right column I used this guys code. His name is ulrich( I think from Deutchland) and got a nice rounded radius border effect.

Here is his site with instructions.

All I want to do is to make the height of my right column div great but it is not.

Ulrich says that in the CSS you need to go to this selector my_corners_t and
input the height to 500PX.

Like height:500px;

it still doesn't change the height.

THX

Omar

Posted 1 year ago #
omerkhan01
Member

Joern, btw how can I compensate you for giving me this golden knowledge of how to master wordpress. I would like to buy you a gift or send you a bottle of wine or something. Will you accept it. Please don't ever lose touch with me. I need a mentor. BTW I am #1 on Google for Toronto(my city) wordpress development.

Here is my web development/wp development firm and I know that wp development or CMS is going to be the hottest wave into the future for many years to come. I love coding, developing, graphical content design, information architecture, multi browser compatibility testing, web marketing, ecommerce, etc. However, I believe in having a teacher and mentor always. You are that person for me.

Your friend

Omar Khan
Toronto, Canada:))))

Posted 1 year ago #
Joern
Moderator

for me the add is on the right now...
I tried it without width and it didn't move, remember you still have this 'center' around.

Firebug reads your body tag like:
body {
background:none repeat scroll 0 0 #19110A;
color:#000000;
padding:13px 0 25px;
}

because the image is commented out:

body {
background:/*url(images/backgrounds/vtile.png) repeat-x 0px 0px #252525*/ #19110A;
color: #000;
padding: 13px 0 25px 0;
}

in your div page entry is also something 'half' uncommented:

#page { /* main container */
width:940px;
margin:0 auto;
font-size:1em;
background: url('http://www.mmtest1.byethost22.com/vtile.png') repeat-x 0px 0px #252525*/ #19110A;

padding: 10px 20px 40px 20px;
border-top:4px solid #999;
border-bottom:4px solid #999;
}

in this line:
background: url('http://www.mmtest1.byethost22.com/vtile.png') repeat-x 0px 0px #252525*/ #19110A;
should be:
background: url('http://www.mmtest1.byethost22.com/vtile.png') repeat-x 0px 0px #252525;

is this vtile.png in your theme folder? or here: images/backgrounds/vtile.png
this is the path from the theme folder to the image, make sure it is there where you lead the way to.

Posted 1 year ago #
omerkhan01
Member

To answer your question. I put the vtile.png in the index folder, but now moved it to the images folder. So you are saying that because of the commenting or partial commenting, that is why a piece of CSS code doesn't work right?

Now, quick question, if I wanted to take the facebook and twitter image on the same horizontal plane as my nav buttons, which is in let's say a div , then just make it float left right.

Did you get my question about my round border div? Actually I figured it out.

Joern, I put a border around my googleadv div and as you can see there is space between the top border and the start of the ad.

Can I close this with padding or simply
set the height of the div to the combined length of both ads which is 400PXhere

Joern I figured it out. There were two

in my code. However, I still see a very small black space from the top border. How do you get rid of that?

Thanks

Omar

Posted 1 year ago #
omerkhan01
Member

Dude I figured it all out. Anyways you are the man. Have a great vacation my friend.

Omar.

Posted 1 year ago #

RSS feed for this topic

Jump to Latest Reply

Reply

You must log in to post.