I have two divs on my page and I want to display them side by side. I have tried using float:left and display:inline-block, but it doesn't work.
Can anyone help Please? This is a what my page looks like fiddle
use <p> or <h3> and set it inline-block too , reset white-space for #maincontent and its inner content:
http://jsfiddle.net/ATdkE/15/
div#login, div#register, #maincontent > h3 {
white-space:normal;/* reset to normal */
display:inline-block;
}
div#login, div#register {
background: linear-gradient(top, #fff, #f8f8f8);
border: 1px solid #d0d2d5;
border-bottom: 1px solid #bebfc2;
border-radius: 4px;
margin: 0px 0 10px 0;
padding: 30px;
width: 212px;
vertical-align:top;
}
#maincontent {
white-space:nowrap;/* keep all inline element on one single line */
text-align:center;/* no need of obsolete attribute in HTML markup :) */
}
you can add some margin and change vertical-align http://jsfiddle.net/ATdkE/17/
Try putting them within a parent div that has fixed margins. i.e. margins not set to "auto".
Get rid of the "OR" inside the header tag. Header tags are display block by default, so they are overwriting your float left. You can also change the header tag to float: left;
Its not good practice to write tags inside <p></p> you should get rid of <p> and directly write
<h3>OR</h3>
Give style to
h3{
display:inline-block;
}
See Demo
First the invalid HTML,
You cant have a block level element inside the p tag, so please remove the p tags that surround the h3 tags
Second, make the display of the h3 with text OR as inline-block
Demo : http://jsfiddle.net/ATdkE/14/
You may have to add some more styles
IE supports inline-block, but only for elements that are natively inline.
Use
float:left
http://jsfiddle.net/ATdkE/18/
Related
I wrote in parenthesis and in all caps, the things I am confused about in my homework instructions.
This is my homework instructions:
On the first line of your "main.css" file create a comment that reads "general". Under that comment write the following
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
Add the css line from the templates page (on the course website) that groups some selectors and sets them all to "display block".
Skip one line and write a comment that reads "wrapper". Under that comment write a css id of "wrapper" and add the following properties.
Give it a width of 1024px
Give it a margin property with the values of 0 and auto (margin: 0 auto centers the page on the browser window. We have to have a width to allow it to show that it is centered.)
Skip one line and write a comment that reads "main".
Put a border of 1px solid #000 around the left, right bottom of the main element.
(NOT SURE IF I DID THIS PORTION CORRECTLY ^)
Add a padding of 10px to the main element. We add a padding so the content will not butt up against the edge of the main element
Using a contextual selector select all the images within the divisional element with the id of "images" and set each image height to 90px, width to 120px and a margin of 20px around the image. We are using CSS to resize our images.
(NOT SURE HOW TO WRITE A CONTEXTUAL SELECTOR TO SELECT ALL THE IMAGES WITH THE DIV ELEMENT WITH THE ID of "images")
This is what I have created but am not sure if it is correct:
/* general */
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
*{margin: 0; padding: 0;}
article, aside, figure, footer, header, main, menu, nav, section {display: block;}
<style>
/* wrapper */
#wrapper {width: 1024px; margin: 0 auto; }
/* main */
main{border-left: solid 1px #000; border-bottom: solid 1px #000; border-right: solid 1px #000; padding: 10px; }
div images, #images {height: 90px; width: 120px; margin: 20px; }
</style>
The wording in your homework is incredibly poor, but what I believe you're looking for is to target all elements with an ID of images contained within a DIV. This would be:
div #images {
height: 90px;
width: 120px;
margin: 20px;
}
This will target any element with the ID of images inside any DIV, even if there is an element in between them (such as <div><span><img id="images"></span></div>). Note that you can also target direct descendants with >. div > #images will target <div><img id="images"></div>, but not <div><span><img id="images"></span></div>.
Keep in mind that having multiple elements on the page with the same ID is invalid markup, and the page will fail to validate correctly. The only situation where this would be valid is if your teacher is meaning to have a single element called #images on multiple different pages. You should use classes for targeting multiple elements on the same page. It's possible your teacher meant for you to use a class, which would be div .images.
As for your border, you have done it correctly, though note that you can set all four borders at once with the shorthand border:
main {
border: solid 1px #000;
padding: 10px;
}
Also, keep in mind that your second line should also be in a comment, or else it will throw a syntax error:
/*Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.*/
Hope this helps! :)
Hi i will try to answer this the best that i can, i am only a programming student so this is my best shot :)
First of all, id's has to be unique you cant have two identical id's on the same page.
If you have etc
<div id="test"></div>
<div id="test"></div>
And you try to style it like #test{background-color: red} only the last div will actually have a red background.
But basically this is what he wants:
/*--GENERAL--*/
*{
margin:0;
padding: 0;
}
/*--WRAPPER--*/
#wrapper{
width: 1024px;
margin: 0 auto;
}
/*--MAIN--*/
main{
border-left: 1px solid #000;
padding: 10px;
}
div #images img{
height: 90px;
width: 120px;
margin: 20px;
}
Examples of contextual selector
I hope this will help you with your programming journey! :)
I have a main div which contains a table :
<div id="main_container"><table>
you can see the full code in:
http://jsfiddle.net/tF62u/
As you can see, the child table is wider than the div but it (the div) doesn't adjust accordingly.
Which definition am I missing here?
Add display:inline-block to your div's CSS rules:
#main_container {
font-size: 9px;
border: solid 3px #faa;
background-color: rgba(245, 255, 10, 0.12);
display: inline-block;
}
jsFiddle example
Add display:table; to your #main_container
http://jsfiddle.net/tF62u/4/
One possibility is to make the div float left. Floating elements are as wide as their contents, rather than as wide as the window.
#main_container {
font-size: 9px;
border: solid 3px gray;
background-color: rgba(245, 255, 10, 0.12);
float:left;
}
Updated fiddle.
Also make sure to clear this float afterwards, or other content that follows will be displayed to the right of the div if the window is wider than the table.
By the way, this also goes for display:inline-block; if you do that you will need to make sure that the div is followed by a block element.
Another solution, for this particular fiddle, would be to remove the div entirely and apply all the styles to the table. Of course that would only work if the table were all the content of the div...
Just make your #main_container have a display of table-cell:
#main_container {
display: table-cell;
}
DEMO
I'm trying to come up with a solution for this problem.
I have a control where the background is an image.
The text that I would like on the form is included in the bg image, however for the purpose of accessibilty, I'd like to include it in an H3 tag.
The problem I have encountered with the solutions I have is that the space is still allocated and I need it to be supressed. It also needs to be Google friendly too.
Here's 2 solutions I have:
text-indent:-999px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
Any ideas?
The normal way to hide elements is to use one of the following:
visibility:hidden; which hides the element but still takes up space.
display:none; which hides the element and does not take up space.
I believe the second is what you want in this instance.
Well, first of all
display: none;
But, if you want, there might be other solutions for styling your heading tag
/* on its container */
overflow: hidden;
/* on h3 tag */
float: left;
margin-left: -100%;
or
font-size: 0;
line-height: 0;
height: 0;
overflow: hidden;
You may also need to set/reset few other properties, to clear any other space around your heading, like
margin, padding, white-space, text-indent, border, etc.
You can give font-size:0; to your h3 tag HEADING will be in your code with your background.
And this will help you in SEO also..
DEMO
HTML
<div id="wrap">
<h3>heading</h3>
</div>
CSS
#wrap {
height: 230px;
width:660px;
background:url("http://www.eldercarefunding.org/Portals/18/Skins/s_eldercare_green/images/header.bgL.png") no-repeat 0 0;
}
#wrap h3 {
font-size:0;
}
The title may be a bit misleading.
http://jsfiddle.net/whb8A/
I have a h3 element inside a span tag and of course it shouldn't go there, however I cannot seem to style the spanned text in the div in the manner I want.
If you hover over the image in the jsfiddle, the hidden div is shown and that is exactly what I want it to look like but if I take the h3 tag away from the text I can't seem to style it with CSS.
Should I be looking at a Jquery alternate? If so any tutorials of guides would be great, thanks
UPDATE: Thanks for all the help so far but I don't think I've explained very well.
http://imageshack.us/photo/my-images/827/examplewc.jpg/
The left side is how I would like it to be styled however removing the h3 tags and removing h3 from the class .info causes it to be styled as on the right side. It's the border width, postion and padding I am concerned about the most
Another solution is to put the text style definitions directly under the <a> tag, so as to override the default anchor tag styling. Example:
.featured a {
color: #fff;
text-transform: uppercase;
}
If anyone is interested I solved the problem.
Instead of using the h3 tags and a span, I removed both and instead put a div inside the div that appeared on hover. You can see what I mean in the below fiddle. Now validates in html5 which is what I was after, thanks for all the help
http://jsfiddle.net/whb8A/62/
All I see when I drop the <h3> tag is a loss of margin around the text. If you want that back, simply replace the <h3> with a <span>, change the CSS to match that instead of the h3 and add display: block to the rule.
You have this near the end of your CSS:
.item a:hover .info {
display: block;
position: absolute;
bottom: 10px;
left: 30px;
width: 250px;
margin: 0;
padding: 10px;
background: #000;
}
This will select all .info elements inside of hovered a tags inside of a .item element, but in your HTML you have no .item element
Remove .item from the CSS and all is well when you remove the H3
Total noob question, but here.
CSS
.product__specfield_8_arrow {
/*background-image:url(../../upload/orng_bg_arrow.png);
background-repeat:no-repeat;*/
background-color:#fc0;
width:50px !important;
height:33px !important;
border: 1px solid #dddddd;
border-left:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-left-radius:0px;
border-top-left-radius:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topleft:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-top-left-radius:0px;
margin:0;
padding:2px;
cursor:pointer;
}
HTML
<span class="product__specfield_8_arrow"> </span>
Fiddle
Basically I'm trying to emulate a button, make a span (or something) look like a button next to an input field that actually doesn't need to be one because of an auto fill generator that generates errors onEnter. Thought this'd be a quick fix for now but obviously not.
Thanks.
Span is an inline element. It has no width or height.
You could turn it into a block-level element, then it will accept your dimension directives.
span.product__specfield_8_arrow
{
display: inline-block; /* or block */
}
Try using a div instead of the span or using the CSS display: block; or display: inline-block;—span is by default an inline element which cannot take width and height properties.
Inspired from #Hamed, I added the following and it worked for me:
display: inline-block; overflow: hidden;
Span takes width and height only when we make it block element.
span {display:block;}
As per comment from #Paul, If display: block is specified, span stops to be an inline element and an element after it appears on next line.
I came here to find solution to my span height problem and I got a solution of my own
Adding overflow:hidden; and keeing it inline will solve the problem just tested in IE8 Quirks mode
spans are by default displayed inline, which means they don't have a height and width.
Try adding a display: block to your span.
Span starts out as an inline element. You can change its display attribute to block, for instance, and its height/width attributes will start to take effect.
Use this all problem solve way
Try it..
span.product__specfield_8_arrow
{
display: inline-block;
}
span {display:block;} also adds a line-break.
To avoid that, use span {display:inline-block;} and then you can add width and height to the inline element, and you can align it within the block as well:
span {
display:inline-block;
width: 5em;
font-weight: normal;
text-align: center
}
more here
There are now multiple ways to mimic this same effect but further tailor the properties based on the use case. As stated above, this works:
.product__specfield_8_arrow { display: inline-block }
but also
.product__specfield_8_arrow { display: inline-flex } // flex container will be inline
.product__specfield_8_arrow { display: inline-grid } // grid container will be inline
.product__specfield_8_arrow { display: inline-table } // table will be inline-level table
This JSFiddle shows how similar these display properties are in this case.
For a relevant discussion please see this SO post.
The way I deal with this is to use a borderless, read-only input tag and then you can set the attributes as desired:
<input type="text" readonly
style="border:none; background-color: transparent; width:200px; margin-top:10px; padding-left: 10px;"
[value]="statusMessage">