My container, #topmenu is in fixed position. I just added a phone number (image) that I want to move with this bar, but it doesn't move with the fixed bar.
I've absolutely positioned it within a relatively positioned element, but it just doesn't stick.
If I just make the phone number position:fixed then it moves around with the viewport width. What's the best way to accomplish what I'm doing?
CSS fragment:
.topsocial a { margin-left: 15px; }
#topmenu {position:fixed; z-index:220; }
#topmenu .ktwrap {padding-top: 3px; padding-bottom: 3px; color: #fff;}
#topmenu ul li { display:inline; list-style-type: none; padding: 0px 10px 0 0; font-size: 13px; }
#topmenu .widget-container { margin-top: 5px;}
.topsocial .widget-containter {margin-top: 0px!important;}
#menu-menu li a span {
display:block;
line-height:14px;
margin-right: 4px;
text-transform: lowercase!important;
}
.menu-menu ul li a span {
line-height:14px;
margin-right: 4px;
text-transform: lowercase!important;
}
.topsocial {margin-top: 5px; color: #fff;}
.ktlogo {float: left; width: auto; margin-top:-35px; margin-left: 137px; font-family: 'HoneyScriptLight'; font-size: 60px; padding-top: 22px; }
.ktlogo img:hover {background: none;}
#navigationtop { font-size: 12px; color: #fff;}
#navigationtop ul li strong { display: block; padding-bottom: 7px; font-size: 14px; }
#navigationtop .ktwrap { padding-top: 60px; padding-bottom: 5px; height:71px; }
#floatnumber {
position: absolute;
top: -3px;
right: 150px;
z-index : 270;
}
PHP fragment:
<?php get_template_part( 'includes/template-parts/topbar' ); ?>
<?php } ?>
<?php
$disable_sidebar = of_get_option('disable_footer', '' );
if( $disable_sidebar['navbar']==0 ) { ?>
<div class="ktfullwidth" id="navigationtop">
<div class="ktwrap"> <div id="floatnumber"><img src="http://combined-effort.com/wp-content/uploads/telephone-18005174660.png" alt="Phone Number 1-800-517-4660"></div>
<div class="ktlogo">
<?php
$disable_sidebar = of_get_option('disable_parts', '' );
if( $disable_sidebar['logo']==0 ) { ?>
<?php if ( of_get_option('logo') ) { ?>
<img src="<?php echo of_get_option('logo'); ?>" />
<?php } else { ?>
<a href="<?php echo home_url() ?>">
<?php if ( of_get_option('logotext') ) { ?>
<?php echo of_get_option('logotext', ''); ?></a>
<?php } else { ?>
Combined Effort</a>
<?php } ?>
<?php } ?>
<?php } ?>
</div>
You can change
<ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">...</ul>
<div class="topsocial right">...</div>
into
<ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">...</ul>
<div class="right">
<img src="http://combined-effort.com/wp-content/uploads/telephone-18005174660.png" alt="Phone Number 1-800-517-4660">
<div class="topsocial right">...</div>
</div>
And then delete the othe image.
Without having read or tested your code in detail: If I got you right and you want to move the number with the bar then you have to put it within this fixed header. In the orignal code you can see that there are two overlapping headers and the number is NOT in the one with position fixed. Which there is
<div id="topmenu" class="ktfullwidth">
but in (and in your code seemingly as well)
<div class="ktfullwidth" id="navigationtop">
Put the number inside the #topmenu-div.
You might also be able to use position fied on the number itself, but i would recommend ot put it in the div.
Edit: I got confused by the names of the navigation-divs. I hope I got it right now.
Related
I reached to a problem in my website.
My website is showing all the records in she same page, that each record calls the main div called "work" and inside of that one is calling another one called "worktitle".
I want the worktitle div stays like the image:
Image
But the problem is on the second row. The divs that belongs to the seconda row are in the same place as the first row.
Like you can see here:
Website
HTML Code
<div id="box1">
<?php do { ?>
<div id="work">
<a href="<?php echo $row_works['url']; ?>" target="new">
<img src="images/<?php echo $row_works['image']; ?>" />
<div class="worktitle">
<span class="infotec"><?php echo $row_works['infotec']; ?><br/>
<?php if ((isset($_GET['lang'])) && ($_GET['lang']=="en")) {
echo $row_works['descriptionen']; }
else {
echo $row_works['descriptionpt'];
} ?>
</span>
<span class="title"><?php echo $row_works['title']; ?></span>
</div>
</a>
</div>
<?php } while ($row_works = mysql_fetch_assoc($works)); ?>
</div>
CSS Code
#work {
float: left;
margin: 0px;
padding: 0px;
width : 200px;
border: solid 1px #787879;
}
#work a{
color: #FFF;
text-decoration:none;
}
#work a:hover {
opacity: 0.5;
}
#work img {
margin: 0px;
width: 200px;
z-index: 9;
}
a img{
border: 0;
}
.worktitle {
position: absolute;
top: 200px;
background-color: #787879;
opacity: 0.6;
font-weight: bold;
font-size: 14px;
z-index: 10;
}
.infotec {
font-weight: normal;
font-size:9px;
}
.title {
text-align: right;
}
What am i doing wrong? Please help me out.
First of all id's must be unique in your html so change #work to .work then try giving it a relative position and aligning your description to the bottom.
.work{
position: relative;
}
.worktitle {
position: absolute;
bottom: 0;
}
I'm having a problem displaying images side by side inside of an overflow box.
They seem to be going to the end of the box then going to a new line for some reason.
Here's what I got:
<div style="overflow-x:auto; overflow-y:hidden; white-space:nowrap; width:500px; height:145px;">
<?php
for ($i=1; $i<=9; $i++) {
echo "<table><tr><td>";
echo "<img src=\"images/store/" . $i . ".jpg\" height=\"100px\" />";
echo "<br /><center><img src=\"images/store/buy.png\" width=\"75px\" /></center></td></tr></table>";
}
?>
</div>
Any help would be amazing!
I would recommend updating and formatting your code better, then addressing the issue you're having.
Don't echo out HTML tags using PHP.
Don't use inline-styles applied directly to the tags (use classes/ids)
Don't use tables, for non-tabular data.
With that said, here is a working example of what I believe you're trying to achieve:
http://jsfiddle.net/a8yDv/
PHP/HTML:
<div class="images">
<ul>
<?php for ($i=1; $i<=9; $i++) : ?>
<li>
<img src="images/store/<?php echo $i; ?>.jpg" class="top-image" alt="" />
<img src="images/store/buy.png" class="bottom-image" alt="" />
</li>
<?php endfor; ?>
</ul>
</div>
CSS:
.images {
border: 5px solid red;
height: 145px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 500px;
}
.images ul {
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.images li {
display: inline-block;
text-align: center;
}
.images img {
display: block;
margin: 0 auto;
}
.images img.top-image {
height: 100px;
margin-bottom: 5px;
}
.images img.bottom-image {
width: 75px;
}
/* Clearfix - http://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
You could use the white-space:nowrap; property in your styles:
div {
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
width:500px;
height:100px;
}
Demo.
I believe all I really had was a bug, and #Yamo seemed to point it out for me. Everything works fine now!
<div style="overflow-x:auto; overflow-y:hidden; white-space:nowrap; width:500px; height:145px;">
<table><tr>
<?php
for ($i=1; $i<=9; $i++) {
echo "<td><img src=\"images/store/" . $i . ".jpg\" height=\"100px\" />";
echo "<br /><center><img src=\"images/store/buy.png\" width=\"75px\" /></center></td>";
}
?>
</tr></table>
</div>
This is for a Wordpress site powered by Thesis. What I'm trying to do is have a featured posts area filled with whichever posts I put in the featured/featured2 categories.
This is the PHP
function custom_featured_box() {
if(is_home()) {
?>
<div id="featuredbox" class="clearfix">
<?php $my_query = new WP_Query('category_name=featured&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;
?>
<div id="featuredbox-main" style="background: url(<?php the_post_thumbnail('featured') ?>) no-repeat;">
<?php the_title() ?>
</div>
<?php endwhile; ?>
<?php $my_query = new WP_Query('category_name=featured2&showposts=3');
while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;
?>
<div id="featuredbox-secondary">
<div class="secondary-item" style="width: 205px; background: url(<?php the_post_thumbnail() ?>) no-repeat;">
<?php the_title() ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php
} }
The "new WP_Query" function is just calling the category "featured" and "featured2" (<-- this is for the secondary featured posts) and taking the first post (for the "featured" category) and first 3 (for the "featured2" category) and placing them in the featured posts section. The only problem I'm having is that the #featured-secondary isn't putting the "featured2" posts next to each other. Also the thumbnail images aren't displaying but I haven't bothered trying to figure that out yet.
Here is the CSS:
.custom #feature_box { padding:0em; }
.custom #featuredbox { padding: 8px 0 10px 0;}
.custom #featuredbox-main {overflow: hidden; width: 650px; height: 225px; border: solid
1px #ccc; margin: 0 0 10px 0; position: relative;}
.custom #featuredbox-main a:hover {text-decoration: underline;}
.custom #featuredbox-main a {z-index: 1; position: absolute; top: 121px; min-
height: 35px; left: 0; font-size: 20px; font-weight: bold; color: #fff; padding: 15px
10px; width: 100%; background: url(http://location-of-the-background-here);}
.custom #featuredbox-secondary {height: 162px; overflow: hidden; width: 650px;}
.custom .secondary-item {margin-right: 10px; position: relative; border: solid 1px
#ccc; height: 160px; float: left; overflow: hidden;}
.custom .secondary-item a:hover {text-decoration: underline;}
.custom .secondary-item a {z-index: 1; position: absolute; top: 52px; left: 0;
font-size: 12px; font-weight: bold; color: #fff; padding: 8px 10px; width: 185px;
background: url(http://location-of-the-background-here);}
I don't see why the CSS isn't making the #featuredbox-secondary posts to be placed next to each other.
Any help would be greatly appreciated.
P.S. here's a to screenshot of what it looks like with the current code, hopefully it helps people understand what I'm getting at. http://img43.imageshack.us/img43/3011/csshelp.jpg
If I understand you correctly, then you want every div with the class "secondary-item" which is inside the div with the ID "featuredbox-secondary" to float right next to each other? If so, you need to apply the float declaration to the class "secondary-item".
I am trying to float the timer right top across from the logo. but it's not working.
If I use the regular style="float:right" it works perfect...
<div id="whole_page" />
<div id="header" />
<?php echo "$logo" ?>
<div id="timer" style="float:right" /><?php
echo "$today";
?></div>
</div>
<div id="nav" />
Home |
About |
Help
</div>
<div id="content" />
<?php
echo "Hello, my name is, $first_name \"$nick_name\" $last_name<br />";
echo "I am from $city, $country<br />";
?>
</div>
</div>
This is the css:
#whole_page {
width: 65em;
margin: auto;
padding: 0;
text-align: left;
border-width: 0 1px 1px;
border-color: #000;
border-styler: solid;
}
#header {
color: white;
background: #ebebeb;
font-size: 24pt;
margin-bottom: 0;
font-weight: bold;
}
#timer {
float: right;
margin-bottom: 0;
}
#nav {
color: #000;
font-size: 12pt;
font-weight: none;
background: #ebebeb;
padding: 0.5em;
border: none;
Usually, for a float to work, you need to set a width on the element.
(Otherwise, the browser renders the element at 100% and there is nothing to float.)
So make this
#timer{
width:200px; //OR WHATEVER SIZE
float:right;
margin-bottom:0;
}
What happens when you use F12 debug? Do you see any style applied to the element? Also view the source code of of rendered page and see the actual CSS in the page. Then please post the necessary css from there to debug it.
Try to add to div header:
float:left;
If you want that a div to be in the next line just place:
clear: both;
I am having a CSS problem in IE
This page looks fine in Firefox, chrome, opera....but on IE the "date bar" overlaps on the first <li> bar
Here : http://www.animefushigi.com/latest-episodes
CSS is as followed :
#content h2.other-posts {
height: 31px;
font-size:12px;
line-height: 31px;
background: #2c2b2b;
padding: 0 10px;
border: 1px solid #1b1b1b;
color: #888888;
margin-bottom:1px;
}
#content #other-posts {
list-style: none;
padding: 1px;
margin-top:15px;
margin-bottom:15px;
margin-left: 20px;
}
#other-posts li {
list-style: none;
background: #151515;
height: 30px;
line-height: 30px;
border-left: 1px solid #050505;
border-right: 1px solid #151515;
border-bottom: 1px solid #050505;
border-top:1px solid #0f0f0f;
margin-bottom: 1px;
padding: 0 10px;
}
#other-posts li a {
float: left;
}
The Wordpress PHP file is as followed :
<ul id="other-posts">
<?php
$postslist = get_posts('numberposts=50&order=desc&orderby=date');
foreach ($postslist as $post) : setup_postdata($post);
?>
<?php the_date('', '<h2 class="other-posts">Added on ', '</h2>'); ?>
<li><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a></li>
<?php endforeach; ?>
</ul>
How can I make this all-browser friendly?
I would suggest you use IE specific conditional comments. That way you can target IE idiosyncrasies, with an IE specific stylesheet.
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie/specific/css.css"> <![endif]-->
try:
#other-posts li { display:inline }
instead of applying the display rule to "li a". It's the list item that you want displayed inline, not the links inside.
EDIT : Extremely sorry. dun know where that 'without' came from.
Try Removing the float and specifying a width or height of the list.