I want to know how I can manage something like this in css.
I mean the M, in my case this is a picture of a letter, which have to go over a border.
I try it on tipeeestream on a event list, and I've tried some things, but doesn't work. The problem is, that I don't get a good resource about their css style and I have to get a informations about the browser about their css sytle.
Can someone help me out please?
Edit: This is my css code in their editor
.event .left {
border-style: solid;
border-width: 3px 0 3px 3px;
border-color: black;
}
.left {
position:relative;
width: 50px;
}
.left:after {
content: "";
position:absolute;
overflow:visible;
width: 100px;
height: 100px;
display: block;
}
.event .middle, .event .right {
border-style: solid;
border-width: 3px 3px 3px 0;
border-color: black;
}
.event.middle-event .middle, .event.middle-event .left, .event.middle-event .right{
background: transparent;
border-style: none;
}
.event.last-event .middle, .event.last-event .left, .event.last-event .right{
background: transparent;
}
You can try with absolute and relative positioning for each of the elements, the background, the M, and the "eanwhile".
http://codepen.io/ruchiccio/pen/zBoGXY
<div id="background">
<div id="m">M</div>
<div id="title">eanwhile</div>
</div>
#background {width:500px; height:100px; background-color: yellow; border:4px solid black; position:relative;}
#m {font-size:220px; position:absolute; top:-80px;}
#title {font-size:70px; position:absolute; top:10px; left:180px;}
As the commenters mentioned, please include the code that you have tried so far next time.
Using CSS, the easiest way to do this is set the element with the border (I've chosen the class .box) to have position:relative;. Then put the image in the box, and set its position as: position:absolute;. After this, you can move the image around freely, relative to the .box. Here is an example: http://jsbin.com/dimonilife/edit?html,css,output
You can set overflow: visible to the element containing the image and then give the image negative margin top.
eg:
<div style="overflow: visible;">
<img src="..." style="margin-top: -40px" />
...
</div>
I have styled them using inline styles only for demo purposes, the styles should be applied using classes if you want to follow best practice.
Related
i created a white div and gave it an opacity of 0.4 and then i gave it a black border. however because i made the div transparent, the border was also transparent. How can I make the border non transparent whilst keeping the div transparent?
CSS:
#box{
background-color:white;
opacity:0.4;
width:600px;
height:200px;
border-radius:15px;
border: 5px solid black;
}
You cannot make part of an element one opacity and another part of that same element another opacity.
Here is a silly example: https://jsfiddle.net/sheriffderek/85utzq4p/
Try using rgba() for background color instead - or wrap the element in something.
.box {
background: rgba(255, 0, 0, .5);
}
Add another div that contains the current div. Remove the border property and the width and height properties on the #box and add it the other containing div. Make sure the containing div has a class instead of an id. An example:
.entirebox {
width: 600px;
height: 200px;
border-radius: 15px;
border: 5px solid black;
}
#box {
background-color: white;
opacity: 0.4;
}
<div class="entirebox">
<div id="box">
<p>The stuff that you originally had here</p>
</div>
</div>
Here, I added the containing div and named it entirebox. Notice how the containing div has a class, while the div you started off with still has an id.
Hope this helped.
if you are looking for something that can work with solid color backgrounds and image backgrounds both you can create another parent and set it in this way:
body{
margin: 0px;
}
div.child {
display: block;
position: relative;
width: 200px;
height: 150px;
background: red;
opacity:0.3;
}
div.parent{
display: inline-block;
position:relative;
border: 4px solid black;
top: 0px;
left: 0px;
}
<div class="parent">
<div class="child">
</div>
</div>
I would like to achieve a look using bootstrap like this:
If you see the lines that say Top Hit, Artists and Genres I was hoping that I could put it on the top line of a panel like this:
I would like to put the text like "Top Hit" on the top of the panel.
Thanks, couldn't figure this out and hope you guys might know :-)
You will have to make use of negative margin to achieve this.
Say you have the HTML as:
<div>
<h1>Artists</h1>
</div>
Then you need CSS as:
div{
height:100px;
width:100px;
border:2px solid black;
margin-top:10px;
text-align: center;
}
h1{
width:50px;
margin-top:-10px;
margin-left:auto;
margin-right: auto;
background:white;
}
Explanation:
Inside the div, align the text in the center. Give negative value of margin-top of h1 to place on the top of border-line of div. Now give some width and margin-left and margin-right as auto, this will center the heading.
See the fiddle: "http://jsfiddle.net/kboutd9q/1/"
See the screenshot as:
You can try like this-
*{margin:0;padding:0;}
div {
border: 2px solid #ccc;
height: 200px;
margin: 10px auto;
position: relative;
width: 300px;
}
h3 {
background: #fff none repeat scroll 0 0;
height: auto;
left: 20px;
padding: 3px 5px;
position: absolute;
top: -15px;
}
<div>
<h3>Test</h3>
</div>
For some reason it seems that my outline and border is shifted down and left. I made a JSFiddle with the code so you can see whats wrong.
( http://jsfiddle.net/FHB4j/ )
This image right here is what it is supposed to look like. I made another element in my design the same, and its working. Although when using the same EXACT method here it doesn't work? It doesn't make since I must be making a stupid mistake.
Huge Thanks in Advance!
My CSS
.standard-content-module {
width: 414px;
overflow:hidden;
}
.standard-content-module header {
width: 414px;
height: 48px;
background: #cc9900;
}
.standard-content-module p {}
.standard-content-module-content_container {
background: #cccccc;
border: 5px #ffcc00 solid;
outline: 10px #cccccc solid;
width: 384px;
height: 100px;
margin-top: 17px;
}
.standard-content-module-content_container p {}
My HTML
<div class="standard-content-module">
<header><p>Module Title</p></header>
<div class="standard-content-module-content_container">
<p>123</p>
</div>
</div>
Set .standard-content-module overflow visible (or just remove it)
.standard-content-module {
width: 414px;
overflow:visible;
}
DEMO VIEW
I was surfing at this iA Blog post the other day and tried to figure out how did they do the dots as separator around the date.
I looked at CSS and figured out it is possible only with their own special font. Is there a way to do that without using their font? What would be some hacks without using images to do the same thing?
Screenshot below:
I had the same question once and I came up with this:
.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:'';
display:table-cell;
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}
I uses pseudo elements and some table-like functionality. It has some limitations but it will always stretch up to full width. All you have to do is change the background and add the class to the element of you choice.
DEMO: http://dabblet.com/gist/2172806
I used a negative (relative em) margin to place the header over the dotted top-border of the containing block. This should keep the code save when the font-size changes. See CodePen for an example.
You can use, say, a div with a dotted border on the top, like in this jsFiddle.
Basically you can put the text over the border (i.e. with absolute positioning) and apply a white background to it.
<div>
<p>I. JUNE 2012</p>
</div>
div {
border-top: 2px dotted #eee;
position: relative;
text-align: center;
}
p {
background: white;
position: absolute;
top: -25px;
padding: 0 10px;
}
Create an element with a dotted border, and in it center an element with a white background and a position that overflows the parent's height.
A crude example:
HTML
<div class="title_container">
<div class="title">I. June 2012</div>
</div>
CSS
.title_container {position:relative;height:20px;border-bottom:1px dotted #000;}
.title_container .title {display:table;position:relative;top:10px;left:0;right:0;margin:0 auto;padding:0 10px;background:#FFF;}
See jsFiddle demo
You could use something like this. But it's probably not very robust against font and size changes.
HTML:
<div id='container'>
<div class='dotted'>
<span>2013-03-10</span>
</div>
</div>
CSS:
#container {
width: 30em;
}
.dotted {
text-align: center;
position: relative;
top: 1em;
border-top: 1px dotted #888;
overflow-y: visible;
}
.dotted span {
display: inline-block;
position: relative;
top: -0.75em;
background: #fff;
padding: 0 1ex;
}
I have a little problem in centering elements inside a div. Although the css works fine for Google Chrome, it fails for Internet Explorer.
Say I have a div with id="contactus" and I want everything inside the div to be centred, whether it be a header, para or images. More specifically, I want a header to be centred, which is followed by an underline spanning over the 80% of the width in the div, with centre alignment. Consider this:
<div id="contactus">
<h2>CONTACTS</h2>
</div>
#contactus {
margin-top: 20px;
height: 308px; /*2px for the border on both sides*/
width: 248px; /*2px for the border on both sides*/
background-color: #F0F0F0;
border: 1px solid #A9A9A9;
}
#contactus h2 {
margin:0 auto 0 auto;
text-align: center;
font-family:arial,sans-serif;
padding-top: 10px;
/*this is for the underline after the heading*/
width:80%;
border-bottom:1px solid gray;
}
The header and the underline remain left aligned in IE, but centre aligned in Chrome. How can I rectify that ?
Note: I am using a separate css stylesheet for IE, so the answer may be specific to IE only.
it might be because of doctype Check that you have a valid doctype
try
<!DOCTYPE html>
change like this
#contactus {
text-align:center;
margin-top: 20px;
height: 308px; /*2px for the border on both sides*/
width: 248px; /*2px for the border on both sides*/
background-color: #F0F0F0;
border: 1px solid #A9A9A9;
}
<div id="contactus" align="center">
<h2>CONTACTS</h2>
</div>