i'm now starting designing with proper mark-up and organization.
and now, i have problem with my div border. it does not enclose all ot the div's content.
this is my html snippet:
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div>
<img src="img/flower1.jpg" />
<span id="itemName">Ballpen</span>
<br/><span id="itemPrice">Php 90.00</span>
</div>
</div></div>
and here's my css:
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
why doesn't this work?
thanks
See if adding the clearfix class to your div fixes anything
http://www.webtoolkit.info/css-clearfix.html
Without more info, I can only assume that the combination of flower1.jpg and the other contents are wider than 590 pixels. When you specify a concrete width for an element in CSS, it will adhere to that width, even if its contents are larger.
Also, important to point out that the > direct descendant selector is not supported in IE.
Whenever I have trouble like this, I make a minimal self-contained example for testing. This one works perfectly although I've used a local image. When I reduce the width to 50 pixels, the image extends beyond the right-hand side of the border so this may be the problem you're having. What exactly is outside the border in your case?
Based on your further comments that you float:left the image div, the following shows what might be your problem. If you run this code, you'll see the the first bordered div no longer encloses the image. Is that the problem you're seeing?
<html>
<head>
<style type="text/css">
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Including the cleardiv fix (shown here) appears to fix the problem:
<html>
<head>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div class="clearfix" id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Just something to note your image doesn't have a title or more importantly alternate text maybe you haven't got around to this, but its point that needs looking into. Alternate text allows a users to understand what might have been there if for example the images don't load up or they have images turned off. It is also an accessbility issue if user are using a screen reader a description of the image is useful to them.
<img src="img/flower1.jpg" alt="Photo of a Daisy" title="This is a Daisy" />
Related
This CSS & HTML shows three text boxes that are completely wrapped in their borders when viewed in IE and Edge. When viewed in Chrome (or on my Android's browser) the right side of the border is clipped off.
I can make it work by adding a trailing " " to each span, but I'd rather learn whether I'm doing something wrong...
<html>
<body>
<style>
.link-bubble {
float:none;
white-space:nowrap;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
margin:2px;
}
</style>
<div style="float:right; width:30%; text-align:center; line-height:40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
I'm not 100% sure why that specific behavior is happening and the discrepancies between browsers, but I would bet it has to do with white-space:nowrap and the parent elements width: 30% and some quirkyness with that.
Instead of trying to work around that quirk, a much easier way to do this is change the display of the .link-bubble's from inline to block. You can do this with the display: block on the class, or just change the elements from span to div or other block elements. Here's some good reading on the box model - I'd also recommend reading up on css flexbox and grid, much easier and more modern way of handling positioning of elements vs divs and floats.
Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.
<html>
<body>
<style>
.link-bubble {
overflow: hidden;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
display: block;
margin: 2px;
}
.link-bubble a { white-space: nowrap; }
</style>
<div style="float:right; text-align:center; width: 30%; line-height: 40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
I want to put checkbox inside a div tag. I want to create like
but the result that I get was like
the checkbox position should be at the right.
Create a containing div, then add three floating divs, one per element; Media element, text element, then check box. clear your float within the containing div. Place the check box in the far left div. Adjust CSS as needed.
Here is a working fiddle Check out the fiddle
#media_cont {
height:200px;
box-shadow:0px 0px 5px #000;
border-radius:10px;
padding:5px;
}
.media_content {
float:left;
width:33%;
text-align:center;
}
#checkbox {
margin-top:15%;
}
.clear {
clear:both;
}
.container {
padding-top:10px;
}
<div id="media_cont">
<div class="media_content"><img src="#" width="200" height="200"></div>
<div class="media_content">
<div>
<h2 class="header">
John Doe
</h2>
<h4 class="header">
User Profile 1
</h4>
</div>
</div>
<div id="checkbox" class="media_content"><input type="checkbox" checked></div>
<div class="clear"></div>
<div class="container">
<p>
New section
</p>
</div>
</div>
UPDATE: If you wish to have the check box clicked, simply add some JQuery such as the following:
$(document).ready(function() {
$("#profile").click(function() {
$('input[type="checkbox"]').attr("checked", "checked");
});
});
Then add the call id profile to your containing divs class.
<div id="profile" class="profile">
Here is an updated fiddle:
Click inside div and append checked into input field
Try the following:
.myDiv{
position: relative;
}
.myCheckbox {
position: absolute:
top: 50px; /* you compute this properly */
right: 15px; /* you compute this properly */
}
use awesome bootstrap checkbox
http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
I'm in the early stages of building a mobile version of our website, and I'm already having an issue with a div tag & background not centering. The stylesheet code is as follows:
<!DOCTYPE html>
<html><head>
<style type="text/css">
BODY{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px; background-color:#fff;FONT-SIZE:12px;COLOR:#000000;FONT-FAMILY:Arial, Helvetica, sans-serif;}
header {
display:block;text-align:center;width:100%;height:6.5em;
}
.topHeader {display:block; width:100%; height:5.4em;}
#acdlogo {
float:left;text-align:left; overflow:hidden; display:inline;
}
#acdHeadLinks {
float:right;text-align:right;margin-top:5px;
}
.clearAll { clear:both; font-size:0; padding:0; margin:0; }
.search-bg {
text-align:center;width:85%;background-color:#265e99;
height:45px;z-index:1000; border-radius:5px; -webkit-border-radius:5px;
}
</style>
</head>
Here is the code that appears after the stylesheet code:
<body>
<div>
<header>
<div class="topHeader" align="center">
<div id="acdlogo">
<img src="images/logo.gif" border="0" alt="Alt Text">
</div>
<div id="acdHeadLinks">
<img src="images/mcontact.png" border="0"><br>
Directions My Account My Cart
</div>
</div>
<div align="center" class="search-bg" id="searchgcs">
hello world
</div>
</header>
</div>
</body></html>
The problem is that the blue background is supposed to hold the search engine form, but it's aligning left not center, and I don't know what I need to do to center it. I'm trying real hard not to have to use tables. Anybody can help me figure this out? Thanks!
UPDATE: Alright I have a new error. I'm trying to center an image using div tags and I'm not getting anywhere, even with the answer below. I've even stripped down the code to only attempt to center the image and no go. The image is always aligned left inside the div tag and I want it centered. Here is my code:
<!DOCTYPE html>
<html><head><title></title>
<style type="text/css">
#mainImage {
width:300px;
margin:0 auto;
padding:0;
}
img.curMainImage {
max-height:240px;
max-width:240px;
}
</style>
</head>
<body>
<div id="mainImage"><img class="curMainImage" src="Image Here" border="0" /></div>
</body>
</html>
Anybody can help?
add margin: 0 auto; to your .search-bg - http://jsfiddle.net/7djxY/1/
.search-bg {
text-align:center;
width:85%;
margin: 0 auto;
background-color:#265e99;
height:45px;
z-index:1000;
border-radius:5px;
-webkit-border-radius:5px;
}
Update: the margin: 0 auto; is used to set the top and bottom margins to 0, and the left-right margins to auto. In that case the browser will automatically detect the available side margin space and distribute it equally to the left and right. And with the same margins both sides the element becomes centered.
<div id="wrapper">
<div id="header"></div>
<div id="pattern"></div>
<div id="main">
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
<h3 class="text">
Freelance Web/Logo <br />
Designer & Developer <br />
→ Muzammil Hussain
</h3>
</div>
</div>
CSS :
body { font-size:12px/20px; }
#wrapper { position:relative; }
#header { width:100%; height:150px; background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;}
#pattern { width:100%; height:150px; background:url(http://i51.tinypic.com/ao75eg.jpg) repeat; position:absolute; top:0px; }
#main { width:1200px; margin:0 auto; margin-top:-103px; }
#main img { float:left; margin-right:10px; }
#main h3 { float:left; margin-top:5px; font:12px/20px "Bookman Old Style"; text-shadow: 1px 1px #000; line-height:14px; color:#fff; }
Well please first of all check if i did any mistake let me know. and also i having trouble that my #pattern overlaying all my classes. i just want this class appear over #header. but something i am missing..
Actually i want results like that.
Please let me know.
This markup could be improved a lot. But if you are just looking for a fix try adding position: relative to #main.
What's happening is #pattern is coming out of the natural flow of the document because it has position: absolute set on it. Therefore unless stated otherwise it appears on top of every other element inside it's parent element.
Also I would consider reducing your markup to something like this...
<div id="wrapper">
<div id="pattern"></div>
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
<h3 class="text">
Freelance Web/Logo <br />
Designer & Developer <br />
→ Muzammil Hussain
</h3>
</div>
Be careful not to use too many IDs when using them to style elements. They can be very powerful and on a large site can result in lots of pain trying to override them and their child elements when you want to.
In IE7, my order sample button "#itmSampl" isn't vertically aligned with the ".add-to-cart" button to the left of it, although in FF3.6 and Chrome 5 it is. I need it to be aligned correctly in IE6-8. Does anyone see what I'm missing?
<style type="text/css">
#buttonbox { position:relative; width:326px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><%=getCurrentAttribute('item','addtocarthtml')%></table>
</div>
<div id="ordrWizrd" class="add-to-cart"><img src="/images/img/add-to-cart.gif" alt="configure item"></div>
<div id="itmSampl"></div>
</div> <div class="clearfix"></div> </div>
Also, here's the test page if a visual helps (you have to login to see the buttons instead of the bulleted list): http://www.avaline.com/85W_test_2
Login:test2#gmail.com
Pass:test03
Solution 1: Since you are already using a lot of tables in your page, another one won't hurt - just change your HTML from what you have above to something like this (may require a few tweaks):
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><tr>
<td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
<td valign="bottom"><div id="itmSampl"></div></td>
</tr></table>
</div>
<div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->
Solution 2: Take away all the "position: absolute" stuff with #itmSampl (remove the CSS bottom, position, right, and maybe margin and height/width properties). Then, add CSS float: right; margin-top: -36px; to #itmSampl to make it float on the right and move upward 36 pixels.