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;
Related
I'm having issue styling grid view for my product list page. What i want is to style it in a way that four products will be display on each row and with maximum of three rows per page. Currently, what i have is product displaying vertically. Any help?
My code for product.php is:
<?php
$result=mysql_query("select * from products") or die("select * from products"."<br/><br/>".mysql_error());
while($row=mysql_fetch_array($result)){
?>
<div id="product-grid">
<div class="product-item">
<div class="product-image"><img src="<?php echo $row['picture']?>" /></div>
<div><strong><?php echo $row['name']?></strong></div>
<div class="product-description"><?php echo $row['description']?></div>
Price:
<div class="product-price">$<?php echo $row['price']?></div>
<div><input type="button" value="Add to Cart" onclick="addtocart(<?php echo $row['serial']?>)" /></div>
<?php } ?>.
My style is something like this but its not having any desirable effect.
body{width:610px;}
#product-grid {border-top: #F08426 2px solid;margin-bottom:30px;}
#product-grid .txt-heading{background-color: #FFD0A6;}
.product-item { float:left; background:#F0F0F0; margin:15px; padding:5px;}
.product-price {color:#F08426;}
.product-image {height:100px;background-color:#FFF;}
Any help will be appreciated.
You can use flex
Checkout demo below
demo
#product-grid {
display: flex;
flex-wrap:wrap;
}
.product-item {
display: inline-block;
background: #ccc;
margin:10px 0 0 10px;
width: calc(100% * (1/4) - 12px - 1px)
}
close product-item div u just forgot to close product-item div that's why your css is not working.
<?php
$result=mysql_query("select * from products") or die("select * from products"."<br/><br/>".mysql_error());
while($row=mysql_fetch_array($result)){
?>
<div id="product-grid">
<div class="product-item">
<div class="product-image"><img src="<?php echo $row['picture']?>" /></div>
<div><strong><?php echo $row['name']?></strong></div>
<div class="product-description"> <?php echo $row['description']?> </div>
Price:
<div class="product-price">$ <?php echo $row['price']?> </div>
<div>
<input type="button" value="Add to Cart" onclick="addtocart(<?php echo $row['serial']?>)" />
</div>
</div> <!--here you forgot-->
</div>
<?php } ?>
and apply overflow:hidden on #product-grid and width as you want width with float:left no need to add float:left on .product-item so just remove it
#product-grid {
border-top: #F08426 2px solid;
margin-bottom: 30px;
overflow: hidden;
float: left;
width: 25%;
}
fiddle here
Note: I recommend to you use product-item as a class not id always use class for multiple item with same name
thanks
Thanks to every one that respond to my question. It gave me an insight into fixing the problem. I was able to get my grid working using the below code
body {
font-family: "open san", verdana, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #333;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
width: 100%;}
.prod-box{
width: 200px; height: 340px;
padding: 10px; margin: 15px;
background-color: #fff;
float: left;
}
.prod-box img:first-child, .prod-box-list img:first-child{width: 190px; float: left;}
.prod-box h3 a{
text-decoration: none;
width:140px;
float: left;
margin: 5px 0;
color:#888;
font: italic normal 14px georgia;
font-style: italic;
}
.prod-box p{ display: none;}
.prod-box .old{
margin-right: 20px;
color: #be0000 !important;
text-decoration: line-through;
}
.prod-box .price{
width: 60px;
display: inline;
float: left;
font: italic 13px georgia;
color: #181818;
}
.prod-box .cart-ico{
border-radius: 20px;
width: 35px; height: 35px;
float: right;
margin: 5px;
cursor: pointer;
}
.prod-box .cart-ico:hover{
background-color: #7eb800;
}
I have the following code on the page www.7hermanosmx.com/menu.php - everything is working correctly except the yellow boxes (class menuholder) should be floating left against each other three per row. They steadfastly refuse to do this! I know I have done something wrong, and I know I am going to look silly, but can anybody please help me spot my error?
I have the css...
.menutop {
font-size: 18px;
color: #FFF;
background-color: #099;
clear: both;
height: 32px;
padding-left: 15px;
padding-top: 5px;
}
.menuholder {
background-color: #FFC;
width: 250px;
height:auto;
float:left;
font-size:14px;
}
.menutext {
font-style: italic;
color: #666;
}
and I have the html (delivering database driven content)
<div data-binding-id="repeat1" data-binding-repeat="{{FULL_MENU.data.groupBy( "TYPE" )}}" style="width:100%">
<div class="menutop">{{$name}}</div>
<div class="menuholder"> <div style="padding:8px">
<div data-binding-id="repeat2" data-binding-repeat="{{$value}}">
<strong>{{NAME}}</strong>
<font style="font-style: italic; color: #004000;">({{COST.currency( "$", ".", ",", 2 )}})</font><div data-binding-html="{{DESCRIPTION}}" class="menutext"></div>
<br />
</div></div>
</div>
</div>
JS FIDDLE
CSS
.fl {
display: table-cell;
width: 276px;
float: left;
margin: 5px;
}
Please follow this
JS FIDDLE link for demo. Thanks
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.
Ok, I am pretty experienced at CSS but at this point I am at a loss.
I layed out how I want the title to look like in photoshop:
alt text http://screensnapr.com/u/qz26q5.png
however, the closest I can approach it with css is:
alt text http://screensnapr.com/u/s7xi7a.png
I need the black background to extend to the edges of the image and padding on the right side of the title.
I hope you understand my question! thanks.
here is the html:
<div class="glossary_image">
<img src="<?php echo $custom_fields['image'][0]; ?>" />
<div class="title">
<h2><?php the_title(); ?></h2>
</div>
</div>
and the css:
.glossary_image {
position: relative;
height: 300px;
width: 300px;
margin-top:10px;
margin-bottom: 10px;
}
.glossary_image .title {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
}
.glossary_image .title h2 {
display: inline;
font-family:Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight:bold;
line-height: 35px;
color: #fff;
text-transform:uppercase;
background: #000;
}
Remove the padding from .glossary_image .title and add padding-right: 10px; to .glossary_image .title h2.
You might also want to add padding-top to the h2.
You could make the image the background of a div element, by doing this the overlay positioning should be no problem.
Everything is OK in Chrome, FF and IE8. But in IE6 there's a strange margin right below the div "middle-column" (inside it there are 3 divs called featured1, 2 and 3.) which is above the divs "left-column" and "right-column"). I already tried everything to get rid of that problem. I tried the "display: inline technique" and CSS resets. Please Help! I'm testing my website here
MY HTML:
<body id="home">
<!-- header -->
<div id="header">
<div class="container">
<h1>wider design</h1>
<!-- navigation -->
<ul id="navigation">
<li class="home"><span>home</span></li>
<li class="portfolio"><span>portfolio</span></li>
<li class="about"><span>about</span></li>
<li class="contact"><span>contact</span></li>
</ul>
</div>
</div>
<div id="content">
<div id="top-column">
<p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong>
on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p>
</div>
<div id="middle-column">
<h2>Featured Projects</h2>
<div id="featured1">
<img alt="" src="images/project1.png"/>
<p>Featured work number 1</p>
</div>
<div id="featured2">
<img alt="" src="images/project2.png"/>
<p>Featured work number 2</p>
</div>
<div id="featured3">
<img alt="" src="images/project3.png"/>
<p>Featured work number 3</p>
</div>
</div>
<div id="left-column">
<h2>Web Design</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
<div id="right-column">
<h2>Web Translation</h2>
<p></p>
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11932489-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
MY CSS Reset:
/* reset */
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
ul {
list-style: none;
}
/* tags */
body {
background-color: #FFFFFF;
color: #757575;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
background: url(../images/logo.png) no-repeat scroll 0 0;
margin-bottom: 20px;
text-indent: -9999px;
}
h2 {
color: #669BD9;
font-family: Arial;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
a {
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
margin: 0 auto;
width: 960px;
}
My CSS Structure:
#content {
background-color: #FFFFFF;
padding: 20px;
overflow: hidden;
margin: 0 auto;
width: 960px;
}
#content h2 {
border-top: 1px dashed #C0C0C0;
border-bottom: 1px dashed #C0C0C0;
padding: 2px 0 2px 0;
margin: 15px 0 15px 0;
}
#top-column {
color: #818181;
font-size: 16px;
font-family: Arial, "MS Trebuchet", sans-serif;
margin: 10px 0 10px 0;
padding: 10px 0 20px 0;
}
#top-column strong {
font-weight: normal;
color: #3C3C3C;
}
#middle-column div {
float: left;
height: 224px;
width: 320px;
}
#right-column {
float: left;
width: 420px;
}
#left-column {
float: right;
width: 500px;
}
#footer {
clear: both;
background-color: #F0F0F0;
height: 200px;
}
If you take a look at div id="slideshow", you'll see that it has margin:10px auto which is basically saying to apply a margin-top of 10px and a margin-bottom of 10px. IE6 tends to double margins so by applying margin:5px 0; it should display the same as it does in Firefox, IE8, IE7 and all other up to date browsers.
-- Also just for reference, the 'auto' style was not needed in this case, this is generally used if you are looking to make an element sit in the center of its parent. An example of this would be if you wanted a website to display in the center of your screen you would use 'margin:0 auto;'
I hope this solves your problem!