I'm building a game page and I'd like to put a top information bar inside a larger container that will hold the full game window. Right now there is a gap between the border of the game window and the green background of the info bar, and I'd like it to be at the very top.
HTML
<div class = "game-window">
<div class ="info-bar">
<p id="messageline">New Game!</p>
</div>
<button class="btn btn-success" id="newpickbutton" onclick="buypick()">Buy a new pick!</button>
<button class="btn btn-primary" id="digbutton" onclick="dig()">Dig!</button>
</div>
CSS
/*------------------------------------------------------------------------------------------------
Layout
------------------------------------------------------------------------------------------------*/
.game-window {
border: solid 3px;
width:800px;
height: 800px;
margin-left:auto;
margin-right:auto;
}
.info-bar {
border: solid 0px transparent;
background-color:lightgreen;
height:100px;
}
/*------------------------------------------------------------------------------------------------
Screen Elements
------------------------------------------------------------------------------------------------*/
#digbutton {
width:500px;
height:500px;
}
#messageline {
margin-top:20px;
}
If I remove the line border: solid 3px; from the game-window class, the info-bar positions itself properly, but I can't figure out how to keep the border and have the info-bar at the top (but still inside the border).
Remove the margin on your messageline paragraph.
#messageline {
margin:0px;
}
jsFiddle example
Related to what j08691 said - if you want that margin, you can add any kind of padding to the parent element - .info-bar in this case, the margin will only 'push' against the parent. One of those weird things about CSS.
.info-bar {
border: solid 0px transparent;
background-color:lightgreen;
height:100px;
padding-top: 1px;
}
See this codepen for an example.
Related
I have a div with the following CSS:
.glyphicon-arrow-right {
font-size:25px;
margin-top:22.66%;
margin-left:5%;
color: #414141;
}
set inside a div with CSS
.forwardbutton {
width:60px;
height:60px;
border-radius:50%;
margin: 0 auto;
border: 1.75px solid #414141;
opacity: .3;
text-decoration:none;
}
When I resize on a computer screen, the arrow sits directly in the center. However, when I view the div on other devices (tablet, netbook/ phone) the arrow is not centered, with a height noticeable higher than it should be.
I was wondering if anyone could identify the issue. Thanks in advance.
EDIT: HTML
<a href="work.html">
<div class="forwardbutton">
<div class="front glyphicon glyphicon-arrow-right"></div>
</div>
</a>
I am trying to add a opaque underlay using CSS.
Could you help me understand what I am doing wrong?
CSS
popUp#translucent{
width: 400px;
height: 100px;
background-color: black;
margin-left: auto;
margin-right: auto;
position:fixed;
opacity: .4;
}
popUp#content{
width:400px;
height: 100px;
}
#popContainer{
width: 400px;
height: 100px;
display: visible;
position: fixed;
z-index: 1000;
}
HTML
<div id="popContainer">
<popUp id="translucent"></popUp>
<popUp id = "content">
<button class="btn large btn-custom" data-h="193" data-s="32" data-l="64" ,="" data-p="15">Alpha</button>
</popUp>
</div>
http://jsfiddle.net/CeRX3/
Thanks
Here is a way to create underlay for a button using CSS.
Plz check this fiddle made by using code from w3 schools.
html
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
css
div.background
{
width:500px;
height:250px;
background:url(http://www.w3schools.com/css/klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
You can use above code. There is this problem with Opacity in CSS.
The Problem With CSS Opacity
The problem occurs when we add child elements to the html element that this code
affects. All child elements will inherit the same opacity settings, even if you try to
specify full opacity for all those elements (which would be too troublesome to do
anyhow).
The Hacky Solution
How can we work around this problem? In some instances, you could visually mimic a
parent-child relationship between the elements using absolute positioning, and this
will resolve the problem.
Then if u want to solve your problem then you may have to use a work around method for the purpose.
change your background colour to grey and the opacity to .1 in the translucent. it looks more translucent then.
I am trying to create a sort of a window, formed by multiple divs. I'm basically putting div after div in my cshtml page, and trying to set their positions in the .css files.
After a considerable effort, I managed to set the divs in their beautiful positions. But as soon as I start to put text, or dom element or whatever inside one of those divs, it changes its position, and pushes other divs, creates a mess.
I somehow managed to keep some by using float, but it is really difficult. Isn't there an easy way to manage the inside elements of a div? Why does the inside elements cause the container div to travel to other places?
Here's the .html and .css code. The divs are empty and positioned correctly. You can simply write "qwe" inside div id="fiyat"> for example and see what I'm talking about.
.html code:
<div id="tablodetay">
<div id="secimler">
</div>
<div id="parcacerceve">
</div>
<div id="resim">
</div>
<div id="ebatsecimvefiyat">
<div id="ebatsecim">
</div>
<div id="fiyat">
</div>
</div>
<div id="urunozellik">
</div>
</div>
.css code:
div#tablodetay div#secimler
{
border:1px solid #000000;
margin:2px;
display:block;
width:706px;
height:100px;
display:block;
}
div#tablodetay div#parcacerceve
{
border:1px solid #000000;
margin:2px;
display:inline-block;
width:86px;
height:400px;
}
div#tablodetay div#resim
{
border:1px solid #000000;
margin:2px;
height:400px;
width:400px;
display:inline-block;
}
div#tablodetay div#ebatsecimvefiyat
{
margin:2px;
height:402px;
width:200px;
display:inline-block;
}
div#tablodetay div#ebatsecim
{
border:1px solid #000000;
height:248px;
width:200px;
margin-bottom:2px;
}
div#tablodetay div#ebatsecim form input
{
float:left;
border:1px solid #000000;
}
div#tablodetay div#fiyat
{
border:1px solid #000000;
height:148px;
width:200px;
}
div#tablodetay div#urunozellik
{
border:1px solid #000000;
height:120px;
width:706px;
margin-top:-2px;
margin-left:2px;
}
You need to define css attributes for each div. To prevent it from changing size or position you need
div ... {
position:absolute;
left: 50px;
top:50px;
width:100px;
height:50%;
}
position:absolute; ignores all other divs and puts your div on the spot you define.
width and height are overruled if the overflow isnt set to none or scroll
The browser will use your width and height as starting point, not end point.
You could also try to set max-width and max-height.
I am new to Css. I don't know whether this question had answer or not. Actually i have a page
<body>
<div id="confirm">
<img src="images/help.png" alt="Help Icon">
<div id="message">
Are you sure you want to deletesadcasdsaduasudashdhasdoiasnidosanidoasyduiasnduasnoidnasidonasiodashydioasndoiasndioasdhioasydoiasndioashydasiodsaoidasd
</div>
<button>Ok</button>
</div>
</body>
I am setting his style. Here is my css
#confirm {
background-color: #ddd;
display:block;
width:400px;
min-height:120px;
position:absolute;
border:1px solid #ccc;
border-radius: 15px;
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /*Opera, safari*/
behavior: url(css/border-radius.htc); /*IE*/
}
#confirm img {
border:1px solid #ccc;
margin:20px 20px 0 20px;
float:left;
width:64px;
}
#message {
width: 280px;
border:1px solid #ccc;
float: left;
white-space: normal;
margin:20px 0 0 0;
overflow: hidden;
}
#confirm button {
position: relative;
width:68px;
margin:20px 180px 0 0;
float:right;
}
Right now when i run my code it produses output like this
Now i want that no matter how large the text of the "message div" is. The "confirm div" automatically adjust their size and as well as positions all the elements inside it.
Like right now i have set "confirm div" "min-height = 120". As you see the text is cropping. The text should not be cropped, The size of message div should increase automatically depending on the size of text. As message div size increase, the confirm div also increase in height, confirm div adjust the image and button in it. Finally all the elements should be inside the confirm Div. Or you can say that the message and image should always be remain in the center of the div.
How can i do it?
Thanks
Thanks
your message text has no white space and has a verrrry long word in it, you need to all that word to be broken to auto size the div
Add
word-wrap: break-word;
to the CSS for #messsage
JSFiddle
Update
Ok that proved difficult but does this work for you JSFiddle2, I've added another div and put the image in that one, its positioned absolute not float so can centre the image. Also had to add another div thats floated as the image was to force the message to be in the right place.
word-wrap: break-word; will serve the purpose.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
DEMO
UPDATE
LIKE THIS middled from top?
I have a bunch of "help" links that have content in them that appears on mouseover. The links are all 15x15px and I want the nested popup to auto-size itself, but am having issues getting it to work. It's easy to make this work if I pull the popups outside of their container, but then they're just restricted to the width of the next parent container...
http://jsfiddle.net/NsGaN/
<a href="#">
<div>this text should not wrap</div>
</a>
<a href="#">
<div class="div2">this text should wrap once the div reaches 300 pixels wide, but not before that</div>
</a>
a {
display : block;
width : 20px;
position : relative;
}
div {
position : absolute;
border : 1px solid #000;
max-width : 300px;
padding : 10px;
top : 10px;
left : 10px;
}
.div2 {
top : 300px;
}
See: http://jsfiddle.net/NsGaN/4/
You need to decide why you want to constrict the links to 20px (15x15) when you also don't want text to wrap, these two points are kinda self-exclusive
if you change your css to this:
a {
width:20px;
position:relative;
}
div {
border:1px solid #000;
padding:10px;
top:10px;
left:10px;
float:left;
max-width:300px;
}
It'll be what your looking for.