I am trying to design gallery of images using php and css. I have placed the images in unordered list like,
<ul style="list-style-type:none;">
<?
while($data=mysql_fetch_row($result))
{
$pic=$data[2];
if ($pic)
{
$path="http://www.myworkdemo.com/pecifica/photos/".$pic;
}
?>
<li style="list-style-type:none; float: left; margin-left:4px; margin-top:5px; margin-bottom:5px;">
<img src=<?=$path?> width=300 height=240></img>
<!--<td class='delete'><a href='addproject.php?ProjId=<?=$data[0]?>&action=edit' >Edit</a></td>-->
<div class='delete'>Delete</div>
</li>
</ul>
And i got all the images but one bullet(starting) was not removed from the list. my gallery after css formatting is like
and due to that bullet i lost the alignment of first row images. please guide me.
Very easily:
list-style-type: none;
Also consider list-style: none; if the bullet is actually an image not rendered by the browser.
It lies in two of your CSS files.
Line 514 http://www.myworkdemo.com/pecifica/admin/css/style1.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Line 523, http://www.myworkdemo.com/pecifica/admin/css/style.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Disabling both of these with firebug eliminated the bullet (which is actually a custom gif file). You'll need to review how you're using the involved classes.
Related
I've ran into a problem using a custom WordPress menu that I can't seem to solve, so after doing a lot of searching the web & failing to fix this over the past few days, I've decided to see if anybody here on StackOverflow can help.
Please note: I would use a Walker function for this but I'm too far gone with the code right now and the way the design works I'm having to build the menu this way.
My snippet for my dropdown: http://pastebin.com/8Stfs90c (would post but it would crucify the screen).
I’m having trouble with the 3rd level of my dropdown menu. In this image: http://s13.postimg.org/lxhslt0lz/image.png you can see that there’s a <li></li> that I’ve highlighted (Pages, About Me, About Us). The structure is as follows
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
And these are fine, BUT when it goes to the third dropdown, it cuts of the <li> and leaves the rest of the Pages children and puts them into a separate container and not the <li> for Pages.
So it should work like so:
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
Right Sidebar (Parent: Pages)
Left Sidebar (Parent: Pages)
Our Process (Parent: Pages)
And all though it may look like this on the dropdown (visually), as you can see in the code it isn’t represented by this. I think the problem I’m having is the checks I’m doing for closing the </li> is wrong. I’ve had this problem for a few days and I just can't seem to fix it. I was going to post this on the WordPress based forum but it's more of a PHP error than anything else.
Here’s a quick screenshot of me hovering over the elements that should be in Pages: http://s23.postimg.org/ef4ame6m3/image.png - as you see they’re separated from the <li>.
To replicate this what I've done is just created a menu structure in WordPress and used the code that's in the snippet (basically I just pasted it into the index.php file) to show how it's being represented.
I really hope somebody can help with this as it has been driving me mad and put a holt on my project for the past few days.
Apologies for the links above, I would post them directly in (screenshots & code) but I didn't want to take away from the actual problem.
If somebody does manage to provide me with the solution I'd be more than happy to buy you a virtual coffee or two!
Out of curiosity, I could be missing the point, is there a reason why would not want to use wp_nav_menu() to handle all of this?
Ex below would output the correct structure for you to theme as your screenshot if applied in your context?
wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'your-class', 'fallback_cb' => 'wp_page_menu', 'theme_location' => 'primary-menu' ) );
Thanks.
Had a quick look at the code, I suppose line 100-130 are dealing with the third dropdown. Actually whats happening is you already have an ol on line 105, then its again being called through the loop on line 122.
echo "<ol><li><a href='" . $link . "'>" . $t->title . "</a></li></ol>";
I think the problem is on line 128 you have to remove ol from the end and create a new condition just for this.
Sorry if i am not being of any help but its really hard to picture the whole code in mind without seeing it. If you are really stuck send the ftp details in chat and i can have a look.
Hi There try this css code to create multiple Nested menu create.
WP code for menu in header.php
<nav class="photoshoot-menu">
<?php wp_nav_menu(array('theme_location' => 'primary','container' => ' ')); ?>
</nav>
CSS Code Add in your style.
.photoshoot-menu {
float: right;
width: auto;
padding-left: 0px;
padding-right: 0px;
}
.photoshoot-menu ul {
padding-left: 0px;
margin: 0px;
}
.photoshoot-menu > ul li {
display: inline-block;
position: relative;
text-transform: uppercase;
margin: 3px 2px;
position: relative;
}
.photoshoot-menu > ul > li > a {
color: #212121;
display: inline-block;
padding: 8px 20px;
border: 1px solid #4f4f4f;
border-radius: 4px;
}
.photoshoot-menu > ul > li > a:hover,
.photoshoot-menu > ul > li > a:focus,
.photoshoot-menu > ul > li.current_page_item > a {
background-color: #343434;
color: #f45c06;
}
.photoshoot-menu ul ul {
border-radius: 4px;
border: 1px solid #4f4f4f;
background-color: rgba(38, 38, 38, 0.95);
opacity: 0;
position: absolute;
top: 42px;
width: 100%;
min-width: 170px;
z-index: 1;
visibility: hidden;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.photoshoot-menu ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.photoshoot-menu ul ul li {
width: 100%;
}
.photoshoot-menu ul ul li a {
display: inline-block;
line-height: 16px;
padding: 5px;
color: #FFF;
width: 100%;
}
.photoshoot-menu ul ul li a:hover,
.photoshoot-menu ul ul li a:focus {
color: #f45c06;
}
.photoshoot-menu ul ul ul {
left: 99%;
top: 0px;
}
<nav class="photoshoot-menu">
<ul class="menu" id="menu-all-pages">
<li>Home
</li>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li>Level 3
<ul>
<li>Lorem Ipsum
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Sample Page
</li>
</ul>
</nav>
i am working on a grid view for image gallery
this is what i did so far but there are still vertical spaces between some of the photos
CSS:
#container{
background-color:transparent;
top: 60px;
left:8%;
height:100%;
border:1px solid ;
width: 82.19%;
position:absolute;
outline: 0;
}
.box {
background-color:#3e3e3e;
border:1px solid #bebebe;
margin: 6px 3.5px;
width:362px;
display:block;
float:left;
border-radius:3.6px;
}
.box:nth-child(2n + 0) {
float: right;
}
how i am applying it:
<div id='container'>
<?php
(some php & mysql here)
echo "<div class='box'><img src='pictures/$image' width='360' ></div>";
</div>
?>
i can't figure out the proper css to create a grid view with no extra vertical spaces.
images have varying heights fixed width, the space i m talking is that space which is not letting grid structure to form properly the vertical distance b/w some photos is alot more than it should be
Is there anybody who can help me?
NOTE: Don't suggest any jquery plugins i want to use pure css
Can somebody please help me out on how to increase the size of the rounded button with respect to text. Please check the image:
I want to be able to write any length of text and rounded button will stretch automatically based on text.
Please help me on how to write CSS for to get this working ?
Note: I don't want to use CSS3 border-radius because it does not work in IE and I don't want to use css3pie, etc, that's why i have created the rounded images. Thanks
Use the Sliding Door Principle. http://www.alistapart.com/articles/slidingdoors/.
In sliding doors you have two extreme as images(rounded) between these images is a background. The images move (slide further) based on the length of the text.
ul {
list-style-type: none;
}
ul li {
height: 31px; // height of the background image *reused below
margin: 10px; // width of the left image *reused below
float: left;
background: url(left.png) no-repeat top left;
}
ul li div {
height: 31px;
margin-left: 10px;
padding-right: 10px;
background: url(right.png) no-repeat top right;
}
//used with
<ul>
<li><div>text</div></li>
<li><div>texttexttext</div></li>
<li><div>texttexttexttext</div></li>
</ul>
I would probably opt for creating a div which inherits a css class like the following
<div class="button">TEXT HERE</div>
The CSS would be the following:
.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: blue; }
The above style would allow all browsers (except older IE's) to render the rounded corners rounded which means you will have no need for images
.hi guys, i have a little problem on styling my menu bar. i have the following code:
#can_header {
width:1024px;
height:140px;
background-color:#8D96A8;
}
#can_header ul{
list-style-type:none;
margin: 0;
padding: 110px 0 0 550px;
font-family: adolph;
text-transform: uppercase;
font-size: 1em;
}
#can_header li{
display:inline-block;
line-height: 15px;
border-right: 2px solid #CCC;
}
#can_header li#item-104{
border-right: none;
}
#can_header ul a:visited{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:link{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:hover{
color:#EB1886;
}
#can_header ul a:active{
color:#FFFFFF;
}
what i want to do is that when i click one of the links on my ul the color of the selected link will permanently change while on the page of the link. with my present code the color of the link only changes while on-click.. but when the page changes the color will be back to normal. TIA! More Power!
.By the way I'm using Joomla, i'm just editing the CSS of the template that i made.
I'm afraid what you want to do isn't possible with CSS only. What you can do is create a css class that indicate that an item in your menu is selected and assign that class to your li element either using javascript or server side when you render the template
You can't do that with CSS alone, you need to add some class to the selected link (ie class="selected") using Javascript or PHP.
Then you can add a style rule for links with class .selected.
Their right you can't do that with CSS alone. You can use :active and change the text-color, or whatever, while it is being clicked down (aka onmousedown) but you can't have it change like blue + click = red.
JQuery should be able to help you with this though.
This will be handled by the menu module you are using to display the menu. Most modules have the option to turn on active highlighting which basically does what everyone is talking about, adds a CSS class to the active menu item. Chances are all you need to do is turn on the active highlighting on and add the appropriate CSS.
Also, I noticed you are turning off a right border in one of the menu items by using the itemID. You would be better off using the :lastchild psuedo selector in case you ever change the order of your menu items or remove the one you have chosen to be last.
Instead of #can_header li#item-104 use #can_header li:last-child
You should add css class programmatically to child object based on requested page.
An Example with php:
function GetFileName()
{
$currentFile = basename($_SERVER["PHP_SELF"]);
$parts = Explode('.', $currentFile);
return $parts[0];
}
$basename = GetFileName();
<li>
<a href="index.php" <?php if($basename =="index") echo "class='current'"; ?>>Home</a>
</li>
<li>
<a href="about.php" <?php if($basename =="about") echo "class='current'"; ?>>About</a>
</li>
I have two divs floated left so that they appear next to each other. They are both populated with dynamic content so that for some users the left div may have more items and height and for others the right div might be longer.
I want to put a border in between the two divs so that it is border-right on the left div if the left div is longer or border-left if the right div is longer.
My thought is to do this at run time so that the php code checks the # of items in each div first and then proceeds to add the appropriate in line style tags to the appropriate divs. It will probably work but I'm wondering if there's an easier way to do this through css?
What you can do is set the two divs to overlap by their border width, and set a border-right on the leftmost float, and a border-left and position: relative on the rightmost float. Then the line will appear to grow with the longest one, but in actuality it is 2 overlapping borders.
I set up two examples on jsfiddle so you can see them. But I am attaching the CSS here. I used horribly obvious colors just to make it clear what I am showing.
Links to JSfiddle complete code:
http://jsfiddle.net/8nU6K/1/
http://jsfiddle.net/8nU6K/2/
.container{
overflow:hidden;
background-color:red;
width:350px;
}
.left, .right{
padding: 3px;
float: left;
margin: 0;
background-color:white;
width: 150px;
}
.left{
border-right:10px solid green;
}
.right {
position:relative;
left:-10px;
border-left:10px solid blue;
}
Don't try guess how big things will be on the server, that'll just lead to frustration and bugs. An easy client side solution is to do this:
Put a left border on the right box and a right border on the left box.
Make the borders the same width and color.
Add a negative left margin on the right box that has the same width as the border.
Use padding inside boxes to simulate spacing between them.
Demo HTML:
<div class="a">
<ul>
<li>Where</li>
<li>Is</li>
<li>Pancakes</li>
<li>House</li>
</ul>
</div>
<div class="b">
<ul>
<li>No</li>
<li>One</li>
<li>Uses</li>
<li>The</li>
<li>Two</li>
<li>Cent</li>
<li>Stamps</li>
</ul>
</div>
<br style="clear: both;"><br>
<div class="a">
<ul>
<li>No</li>
<li>One</li>
<li>Uses</li>
<li>The</li>
<li>Two</li>
<li>Cent</li>
<li>Stamps</li>
</ul>
</div>
<div class="b">
<ul>
<li>Where</li>
<li>Is</li>
<li>Pancakes</li>
<li>House</li>
</ul>
</div>
And some CSS (the border colors are just for illustration):
.a {
float: left;
border-right: 1px solid red;
padding-right: 10px;
}
.b {
float: left;
border-left: 1px solid green;
padding-left: 10px;
margin-left: -1px;
}
And a live example: http://jsfiddle.net/ambiguous/X8J5p/