Quick question. I was writing out some code and was curious if there is a way to add a border on a div that is 5px within the object - as in not on the actual edge of the div. I checked out WC3 and didn't see any specs - but I may have missed it.
In my case I'd be using a dashed border 5px inside the div, to create an effect like the div had been sewn to the rest of the site. I can do it fairly easily with background-image but why add KB when a line or two of css could do it.
I would assume it would be something like "border-position" or "border-distance".
Thanks in advance.
I've never come across any property that resembles this, so I'd have to say, simply, 'no.'
But then I'd feel bad for that, so all I could really suggest is wrapping the div you wish to 'sew on' within another div and styling the parent with the same background-color to emulate the look you're after. Here's some css for a possible take:
.wrap {
border-width: 0;
background-color: #ffa;
width: 50%;
padding: 0.5em;
}
.wrap #panel {
background-color: inherit;
height: 6em;
border: 5px dashed #f90;
text-align: center;
}
And some html:
<div class="wrap">
<div id="panel">
<p>This panel should look kinda sewn-on.</p>
</div>
</div>
And, finally, A JS Fiddle demo
Okay, having just rediscovered this answer (thanks to the up-voter!), I can, now, provide an actual CSS-only no-extraneous-elements solution, using box-shadow:
#panel {
background-color: #ffa;
height: 6em;
border: 5px dashed #f90;
text-align: center;
width: 50%;
margin: 30px auto 0 auto;
box-shadow: 0 0 0 15px #ffa;
}
JS Fiddle demo.
The fourth parameter is the key, it defines the, uh, 'spread' of the shadow (the third parameter defines the 'fuzziness'/'diffusion' which in this case is 0), using the same background-color as the element itself gives the illusion that the border is within the element, while it's actually a shadow of the element extending out from the element.
Thats what IE used to do in quirks mode. With CSS3 box-sizing you can switch between the two modes, but I'm not sure how the support is at the moment
See http://www.quirksmode.org/css/box.html for more infos.
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 here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
Here is an example: http://jsfiddle.net/7zhLm/5/
The image inside is larger than the div supports.
Therefore it is cropping the rest (overflow-x: hidden).
I am trying to create a white border around the image, but it doesn't seem to work.
After checking what's going on there with dev tool I saw that the lower part overlays the white border.
How to I fix that?
I see you're using both overflow-x and overflow-y. You can just use overflow:hidden; as it works on any browser while -x and -y are not supported by older ones.
Anyway, to avoid it you can add another <div>. Check the live demo, and here is the updated code:
<div id="fixed_event_1" class="splashTabLogout" >
<div>
<img src="http://www.twospy.com/galleriffic/demo/Sample%202.jpg" width="300" />
</div>
</div>
.splashTabLogout {
width: 300px;
height: 100px;
cursor: pointer;
background: #fff;
padding: 10px;
/* border-radius and box-shadow stuff */
}
.splashTabLogout > div {
max-width:100%;
max-height:100%;
overflow:hidden;
}
JSFiddle
You tried to set a border with a padding. Change it to a 10px white border.
The HTML you have is fine. It's semantic, simple -- don't change it. Change the details about it, and fix the CSS, and you'll be rockin': http://jsfiddle.net/7zhLm/9/
CSS
.splashTabLogout {
border: white solid 10px;
border-radius: 3px;
box-shadow: rgba(0,0,0,.22) 0 2px 6px;
overflow: hidden;
}
.splashTabLogout img { width:300px }
HTML
<div id="fixed_event_1" class="splashTabLogout" >
<img src="your-pic.jpg" />
</div>
Note: Including width/height inside an img tag is valid. Period. In a gallery of images, or anywhere else, where you may have multiple images with the same dimensions, it's often easier, and less code to declare the width/height from the CSS file. FYI
I am trying to format a list of links with some css, I am having trouble though.
Please look at the image below...
<div class="tag-list">
<a href="/tag/htaccess" >.htaccess</a>
<a href="/tag/css-2" >css</a>
<a href="/tag/database-2" >database</a>
design pattern
<a href="/tag/mysql" >mysql</a>
<a href="/tag/pdo" >PDO</a>
php
server
web-design
</div>
the code...
<style>
.tag-list a {
color: #FFF;
text-transform: uppercase !important;
background:#444;
padding: 4px 6px 4px 6px;
-moz-border-radius:3px;
border-radius:3px;
font:.8em Helvetica,Arial,sans-serif;
margin: 1px 0px 0px 0px!important;
display: block
}
</style>
My goal is to get this list of links to LOOK like that except they should only be the width of the text + padding instead of the full width. I have tried wrapping each link in the div, wrapping the div around the block of links like I have in the code above, If I wrap EACH link in a seperate div and remove the display: block it will show them as the proper width for each link and each on a new line, the only problem with that is that the margin does not work to let me space them out top and bottom.
I'm sure this is a simple fix for someone who knows more about css
jsbin.com link
Thanks for any help
Desired end result something like this...
When adding float: left; clear: both; it makes my other divs show up under it like this...
These easiest thing to do would be at add a float property. This essentially shrink wraps elements. I've also added a clear property to get them to stack.
.tag-list a {
color: #FFF;
text-transform: uppercase !important;
background:#444;
padding: 4px 6px 4px 6px;
-moz-border-radius:3px;
border-radius:3px;
font:.8em Helvetica,Arial,sans-serif;
margin: 1px 0px 0px 0px!important;
display: block;
float: left;
clear: both;
}
I believe this is what you want: http://jsfiddle.net/thnT8/
Note: I'd encourage you to utilize better markup, such as an unordered list. Not only it is more semantic, but it would allow better hooks and avoid the use of floats.
UPDATE
Per the comments and my note above, here's the code: http://jsfiddle.net/84g6Q/1/
Replacing display: block; with:
float: left;
clear: both;
Should work.
You can avoid using floats and clears by making it a list and changing the display of your anchor tags to inline-block: http://jsfiddle.net/hZLzZ/
You set the display to block, that means it will span across it's entire container.
Just remove the display: block, float the elements left, add clear:both to get them to stack, and set the right padding to what you want:.
Here it is using your code: http://jsbin.com/ecoxay/2/edit
I want to do so the size of the bubble, is auto-adjusting after the text(comment) which is inside the div..
Firstly heres the code:
.bubble {
font-size: 12px;
margin-bottom: 0px;
}
.bubble blockquote {
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #000;
}
.bubble blockquote p {
display: inline;
margin: 0px;
padding: 0px;
font-size: 18px;
}
.bubble cite {
position: absolute;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 5px;
background: transparent url(b/tip.gif) no-repeat 20px 0;
font-style: normal;
}
And the page:
<div class="bubble">
<blockquote>
<p>
Hello, my name is Azzyh
</p>
</blockquote>
<cite>I wrote this today</cite>
</div>
Now as i said, i want it to auto adjust to the text, so the "bubble" is around "hello, my name is azzyh"..
Not like how it is now:
http://img341.imageshack.us/img341/8303/exampleu.png
As you see it goes all out to the browser's right+left end..
Check the image, you'll see the line (the "box") where the text is, are too big for the text. I want css to adjust the box after the text.. so the "lines" gets around the text "hello my name is" sorry for my english
See this image:
http://img17.imageshack.us/img17/6057/exampleph.png
The "red" is how i want it to be..
How can i do this?
Thanks
div elements are block-level elements that, by default, stretch as far to the left and right as their containing blocks will allow.
In order to get the width of the div to auto-adjust, you'll have to convert it to an inline element, using the same style as you put on the p: display: inline;
Note that this may have the unintended side effect of not automatically forcing each div onto a new line. Without more information, though, I'm not entirely sure if that would be good or bad in your layout.
A similar problem I had was solved by applying the following CSS:
display:inline-block;
I wanted a link to look like a button but not expand the background to fill the width of the containing DIV.
Supported in nearly all browsers, including partial support in IE6 and IE7 but only where element has 'inline' as a default. There are some alternative properties to gain cross-browser support. There is also something on Google Code for setInlineBlock, but I haven't tried this myself.
Move your border property
border: 1px solid #c9c2c1;
from
.bubble blockquote {}
into your
.bubble blockquote p {}
and that should put the box where you want it.