I want to display two images in a div with one at the top and one on the bottom.
I have achieved this but there seems to be extra space especially at the bottom and I don't know where this comes from. When I use Firebug layout it show a height of 61 pixels but my images are only 18x16 and I think that doesn't include padding and margins which are just a few pixels in any case.
What am I doing wrong? Is there a better way to do this?
jsfiddle
<div class="ex6">
<img src="images/uparrow.png" align="top" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="up"><p>
<img src="images/downarrow.png" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="down">
</div>
css
div.ex6
{
padding-top:5px;
padding-bottom:1px;
padding-right:10px;
padding-left:10px;
border:2px;
font-size:0.7em;
border-style:solid;
border-color:#ddd;
margin-top: 8px;
margin-bottom: 2px;
overflow: hidden;
float:right;
background: #eee;
cursor:pointer
}
Your problem lies in the <p> tag you added after the first image. A paragraph has a fixed style that includes a margin/padding after the paragraph. Get rid of it and take care of adding the line break via CSS to make sure the images are shown one below the other.
To achieve this you can for example set the images inside of your image to be displayed as block element:
div.ex6 img { display: block }
If you do that, you will have to add some more styling though to add some more margins, especially between the images. You do could do it like this:
div.ex6 img:first-child { margin-bottom: 5px }
But there are also many other ways, including just using <br /> instead of <p>. I personally don't like using manual line breaks for positioning though.
Related
I have a problem with an image on my website and want to get rid of it by modifying the dimensions of it to 1px height and 1px width.
I am trying to do it with css but I have a problem selecting the image because the class of it has empty spaces (class="avatar avatar-96 photo tie-appear"). This is the code of the image when I inspect it:
<span class="dwqa-date">
<img alt="" src="http://0.gravatar.com/avatar/3314a60ebb551b6be74e876f2c56e115?s=96&d=mm&r=g" srcset="http://0.gravatar.com/avatar/3314a60ebb551b6be74e876f2c56e115?s=96&d=mm&r=g 2x" class="avatar avatar-96 photo tie-appear" height="96" width="96">
<strong>⋅</strong>
22 mins ago
</span>
Do you know how I can get rid of this image? If you know the code you make me a great favor.
Thanks!!
Display: None
Is your friend.
Changing the picture dimensions will still push the other stuff around and make it very ugly on low-resolution-screens.
Your CSS class does not have spaces, each of those is its own CSS class
class="avatar avatar-96 photo tie-appear" can be selected with the css selector .avatar.avatar-96.photo.tie-appear
See this duplicate question: How to select classes with spaces
Edit: I have it set up on this JS Fiddle for you: https://jsfiddle.net/y3s2869g/ You can see the CSS selector is removing the image by setting the display to none. Hope that helps!
Edit again: After reviewing the markup on the site, you can remove the avatar images with the following CSS:
.dwqa-author > img.avatar, .dwqa-comment-author img.avatar {
display:none;
}
You might also want to remove some of the extra padding, CSS similar to this will accomplish that:
li.dwqa-comment {
padding: 15px 20px !important;
}
.dwqa-header div.dwqa-author {
padding-left: 0px !important;
}
.div.dwqa-content {
margin-left: 0px !important;
}
I have two pics pic1.png (100px x 20px) and pic2.png (100px x 380px) which each are inside a link and should look like one pic of 100px x 400 px. Unfortunally (at least in Firefox and IE) as a result there is a visible gap of several px between these two pics.
Website-Source (please excuse that I put it all into one line - but I did not want to possibly falsify the exact code by formatting):
<div style="display:inline-block;width:100px;height:400px;max-height:400px"><img alt="somealt" title="sometitle" src="pic1.png"><img alt="somealt" title="sometitle" src="pic2.png"></div>
Can you tell me what is wrong in the above Source and how I could fix it?
The images are being rendered one below the other, as if they were text, in different lines. Thus, the line-height CSS property is causing a visible space within them, in the same way that you expect some spacing between lines of text.
You can solve this by adding line-height: 0; to the style of the div.
See an example: JSFiddle
you should add border="0" attribute to the images, the fact that the browsers add a border of 1 or 2 pixels to the images that are inside an anchor tag and use the default "link" styling, probably you are getting the space between the images.
<img alt="somealt" title="sometitle" src="pic1.png" border="0">
or in CSS file that you're including, this will make that any image inside an anchor tag has no border:
a img { border: 0; }
http://jsfiddle.net/njwx47tg/
Why don't you use float:left? to the a tag?
<div style="display:inline-block;width:100px;height:400px;max-height:400px;margin: 0px; padding: 0px; border: 0px;"><img alt="somealt" title="sometitle" src="pic1.png"><img alt="somealt" title="sometitle" src="pic2.png"></div>
Add:
margin: 0px;
padding: 0px;
border: 0px;
I have two divs declared as,
<div id="icdAid" align="center" ></div>
<div id="errorMsg" align="center" ></div>
How can I add space between them?
You can add this to your CSS
#icdAid
{
margin-bottom:10px;
}
This will add a space of 10px to the bottom of icdAid div.
JSFIDDLE DEMO
In html - use <br/> to add new line.
In css - #icAid{ margin-bottom: 20px; }.
Also align attribute is deprecated, use css for that div{ text-align: center; }
Your should use the CSS solution
#icdAid {
margin-bottom: 15px;
}
This is used if you want the results replicated to wherever you use the icdAid id. But if you want a fix on a single page use <br/> tags in-between the close and open tags of you <div>'s.
With the CSS solution you have more control over the spacing as <br/> tags are a set width.
body {
background-color: white;
color: #000000;
font-family:"arial",arial;
margin:auto;
}
(header logo EWITA) #header {
position:relative;
left:-150px;
background-color:transparent;
text-align:center;
margin-top:50px;
padding:0;}
(HR LINE) hr.main {
position:relative;
top:-5px;
background-color:#353535;
height:10px;
width:100%;
margin:0;
padding:0;
z-index: -1;
}
#menubar {
position:relative;
background-image: URL('./pictures/menu.png');
background-repeat:no-repeat;
left:730px;
top:-40px;
height:25px;
width:300px;
background-color:transparent;
color:#ffffff;
padding:5 0 0 20;
}
(menu bar) table,tr,td {
border-spacing:0;
border-collapse:collapse;
padding:0 10 0 10;
}
(page after head) #wrapper {
margin:auto;
min-height:500px;
background-image: URL('./pictures/background.png');
background-repeat: repeat-xy;
z-index:-2;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 40px;
border:1px solid;
padding: 50 30 50 30;
this is my css i am writing a page for a client and due to some relative positioning it makes me a problem with a background as u see here the white line after the HR line.
Thanks everyone who responds.
Edit:
Wondered how to update this answer, as there is a lot to talk about found it best to take it from bottom up. This will bring you to a layout like this:
Stage one demo.
The menu and logo should stay in place when you re-size the window etc.
Had a look at your code now. It is better, but you still have some trouble:
border is still set on image. Invalid markup.
repeat-xy is still used on background. Invalid property value.
#content still has padding without units. Invalid property value.
<br> tags are still used to make paragraphs in text.
There is an extra } after #content. Invalidates CSS file.
Number 4. should be fixed, but not that important right now.
As we already have discussed 1-3 it is hard to understand why you keep them. Invalid markup and styling makes for unreliable result.
It can look OK in one browser, in one version of one browser, look whack in another, and totally break in a third. You get misinformation between code and result. When or if you fix it to be valid other unexpected things may change and you have to do a lot more work to clean it up. As a whole and rule number one. No matter how wrong markup and styling might be seen from a how to do it perspective one have to keep invalid markup and style out of it.
To validate your work, and as you are where you are in regards to experience, do it all the time. Do small changes: validate. Do small changes: validate. And so on. Use:
For HTML
For CSS
Markup
The markup as it is now is not the easiest to style or get to behave good in a dynamic way. hr's is not the easiest to work with and vary between browsers. Do not use tables for menu's or styling. They are best left for what they are intended to: show tabular data. For your menu you can ask yourself: what is the menu; well, it is a list. A list of options for end-user to navigate trough the site. There is a lot of examples on the web using lists as menus. Search the web for CSS list menu etc. You can create nice looking, cross-browser reliable CSS only, (no JavaScript dependency), menus.
But let us start with the basic markup: You will usually find it good to wrap the whole page inside a wrapper. Then add sub-items into that. To position elements like your main menu, logo etc. it could be good to use a wrapper for each and position them by float, margins etc.
In general use margins and padding.
Page layout
Head Div
Divider Div
Content Div
Footer Div
Head
Div float left Div float left
LOGOmenu
Styling + markup
To make it easy for yourself use temporary borders and background colors to view how the various elements float around. Also use the browsers built-in tools to show various things like margins etc. This is invaluable.
Only remember that if you use borders, and you intend to remove them on finished product, they can take up space.
As an example you could have something like this:
Strong colored first attempt.
HTML:
<div id="wrap">
<div id="head">
<div id="logo">
<a href="index.php">
<img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
</a>
</div>
<div id="menubar">MENU</div>
</div>
</div>
CSS:
* {
margin : 0;
padding : 0;
}
body {
font-family: Arial;
height : 100%;
background : orange;
}
#wrap {
position : relative;
background : pink;
width : 100%;
height : 100%;
}
#head {
position : relative;
width : 800px;
height : 131px;
margin : 100px auto 0 auto;
background : blue;
}
#logo {
position : relative;
width : 431px;
float : left;
background : red ;
}
#logo_img {
width : 439px;
height : 131px;
float : left;
}
#menubar {
position : relative;
background : #fff;
width : 300px;
float : left;
margin-top : 107px;
padding : 3px 0 3px 10px;
}
Note: I use a hard reset of margin and padding on all elements by:
* {
margin : 0;
padding; 0;
}
And then set margins and padding on tags and elements as I use them. Often find this to be a much easier way then the other way around. Remember that things like body also has padding etc. and often can result in undesired spacing.
This way you also get rid of the horizontal scroll-bar at bottom.
By using float on thing like logo and menubar the elements align nicely.
Next we can add the divider. Here we could use a div and set border for top and bottom. On content we use padding to make space between header, text and footer. We also add white border to top of content that aligns nicely with the divider.
Added divider, content and footer.
HTML:
<div id="divider"></div>
<div id="main_content">
MAIN CONTENT
</div>
<div id="footer">
FOOTER
</div>
CSS:
#divider {
border-top : 5px solid #353535;
border-bottom: 3px solid #888;
}
#main_content {
position : relative;
background : url('http://cupido.g6.cz/pictures/background.png');
border-top : 2px solid #fff;
padding : 120px 0 130px 0;
}
Next we can add the content text and style it. Also added style to footer.
With content and styled footer.
HTML
<div class="content_text">
<p>
text text text ...
</p>
</div>
CSS:
.content_text {
margin : 0 auto;
width : 700px;
background : #fff;
border : 1px solid;
padding : 50px 30px;
}
.content_text p {
font-size : 16px;
}
Resize window etc. and see it floats nicely around.
Now it is time to add the menu. As mentioned earlier we can use list for the menu. It is much more suited for the task then a table. In that regard also note that a menu might have sub items, as such a list becomes the only sane option.
Also note on the menu: You likely do not want to style visited links with other color. But that is up to you of course.
With added menu and some re-styling on background colors etc.
HTML:
<ul>
<li><a class="menu" href="smaler.php">úvodní stránka</a></li>
<li><a class="menu" href="sluzby.php">služby</a></li>
<li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>
CSS:
As we already have set margins and padding to 0 on all elements this is trivial:
#menubar ul {
list-style : none;
}
#menubar li {
padding : 0 10px;
float : left;
}
a.menu {
text-decoration : none;
color : #fff;
}
a.menu:hover,
a.menu:active {
color : #3cc8a8;
}
Remove helping colors etc. and we have a version 0.1 ready for further testing and expansion.
Result.
Result as one page.
Validated markup on result at W3C
Validated CSS on result at W3C
Original answer:
There is more then one problem. Firstly the markup:
XHTML
<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />
<img src="./pictures/header.png" width="439" height="131" border="0" alt="">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="" />
<hr class="main" /></hr>
Should be:
<hr class="main" />
Use paragraphs to group text, not:
Text<br/><br/>Text<br/><br/>Text ...
but:
<p>Text</p><p>Text</p><p>Text... </p>
CSS
Inline comments are not valid, use:
/* some comment */
Not:
// some comment
You are missing unit on most of your padding values. If a value is non-zero it needs a unit such as pt, px etc. Use:
padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;
If you do not, it has no/(should not have any) effect.
background-repeat does not have repeat-xy. Use:
background-repeat: repeat;
/* not */
background-repeat: repeat-xy;
or nothing at all, as that is the default.
Fix those first. Then set some color to your things so that it is easier to understand what you want. You can change them back later. Use red, blue etc.
Example.
Regarding zero width no break space bug, as displayed in Vim:
Try adding this CSS:
CSS:
#wrapper {
margin: auto;
min-height: 500px;
background-image: URL('../images/squared_metal.png');
background-repeat: repeat-xy;
z-index: 10;
padding-top:10px;
margin-top:-30px;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 10px;
border:1px solid;
padding: 50 30 50 30;
}
I totally overlooked the 'padding-top' css property originally. Thank you all for providing that information!
Please update your site with this CSS and let me know if it works! Since I tested this on my own machine, you should change back the background-url to your custom .png file.
Under some situations, Firefox grossly miscalculates the widths of some DOM elements, which in turn causes layouts to break.
This jsFiddle gives an example of the problem. The numbers displayed below the table are the widths (in pixels) of the div that is shaded dark-gray, and of its parent (as reported by jQuery). Compare the results produced by the latest versions of Firefox (or IE 11) and Chrome (or Safari). Chrome always reports 250 for both widths (as expected), but Firefox always reports a larger number (though the exact number may depend on the OS and/or version of FF and/or phase of the moon). As a result, there's not enough room to render the svg elements in the next td at 3/row.
(More bewildering still: the numbers displayed below the table will vary according to the number of svg elements included in the second td element.)
This erratic/unpredictable behavior makes it practically impossible to design a layout.
How can I ensure that FF will compute such widths correctly, or alternatively, how can I work around this bug?
EDIT: updated jsFiddle (including the link to it).
Now, to keep the gods of SO happy:
body > div,table,table *{outline:1px solid red;}
html,body{height:100%;}
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
*{margin:0;padding:0;border:0;}
table{
border-spacing:0;
border-collapse:collapse;
}
body{
font-family:courier;
font-size:13px;
background-color:palegoldenrod;
}
body > div{
width:312px;
margin:0 auto;
padding:40px 0 0;
background-color:white;
min-height:100%;
}
label{
display:block;
padding:0 1ex;
}
.button-container{
color:white;
background-color:#555;
}
.button-container > div{
display:inline-block;
}
.button-container > div:first-child{
font-weight:bold;
}
.ul-container > div{
width:100%;
border:1px solid black;
-webkit-border-radius:4px;
border-radius:4px;
}
ul{list-style:none;}
li{
width: 72px;
float:left;
margin: 0px 5px 1px;
padding: 0px 5px;
border-width: 1px;
line-height: 14px;
}
br{
clear:left;
}
body > div > div:last-child{margin:40px;}
<body>
<div>
<table><tbody><tr>
<td>
<div class="button-container">
<div>xxxx xxxxx</div>
<div>
<label> <input type="radio"> xxxx xxxx xxx xxxx xxxx </label>
</div>
</div>
<div class="ul-container" style="width: 250px;">
<div style="width: 248px;">
<ul style="width: 246px;">
<li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li><li>I</li>
</ul>
<br>
</div>
</div>
</td>
<td>
<div>
<svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg>
</div>
</td>
</tr></tbody></table>
<div></div>
</div>
(function ($) {
var $msg = $('body > div > div:last-child');
function showw (sel) {
var w = $(sel).width();
$('<span>', {text: '' + w})
.css('margin-left', 5)
.appendTo($msg);
console.log(w);
}
showw('.button-container');
showw('table td:first-child');
}(jQuery));
If you remove the inline-block rule for .button-container > div, it forces the two divs to sit on separate lines, allowing the table to take on a consistent width.
What is happening there is the browser is trying to put the elements on the same line. A cell in a table with no explicit width or overflow instructions will grow wider to accommodate the content lines inside it. Because the two elements are inline, they are considered a single line. The text wraps as you would expect (the browser does a good job protecting the integrity of your content), but this is arbitrary as far as the width calculation goes; it affects the calculated width of the line that the elements form, and therefore pushes the table cell open wider. The browser is trying to take what you gave it and make sense of it while it also tries to preserve the integrity and legibility of your data, because it is a table and that's what tables do.
This is another good example of why tables are not the right tool for layout. They are designed to accommodate and present data, so they do a good job flowing and sizing around text. Different user agents have different strategies when it comes to how this is accomplished -- that is all within the specification. When you abuse the element, you wind up having to contend with design properties that do not suit your use case.
Fiddle: http://jsfiddle.net/Cy7dA/
It isn't "miscalculating the width" at all.
Your problem is simply that your label and input are different widths in both browsers. The extra width is then pushing the button-container and td out further.
Try to get your input/label combo consistent between the browsers (you probably need explicit margins on the input) and your problem is solved.