http://maniamicizia.it/index.php?page=home&lang=it
I have based my website on float:left and that is working nice (IE isn't just because of the rgba background and adapted background). I'm now having this strange issue that prevent the text from standing in its own div.
Here is the CSS/HTML
<div style='
border:10px solid rgb(239,226,173);
background:rgba(200,200,200,0.7);
margin-left:320px;
margin-top:290px;
width:150px;
height:200px;
box-shadow: 0px 0px 6px 3px rgba(100, 100, 100, 1);
-webkit-transform:rotate(0deg);
'> Hello World </div>
Just...why? I know how to handle the position, but why is the text going out like that?
The div is "obviously" the one on the right of the post-it.
I tried it myself, but the text is not overflowing at all, it stays inside the div. Probably you are inheriting an style attribute from a parent div.
Use float:left; in your element style to keep the text inside its desired box.
<div style="
border:10px solid rgb(239,226,173);
background:rgba(200,200,200,0.7);
margin-left:320px;
margin-top:220px;
width:150px;
height:200px;
box-shadow: 0px 0px 6px 3px rgba(100, 100, 100, 1);
-webkit-transform:rotate(0deg);
float:left;">
Wth am I doing here?
</div>
Related
New to the site and fairly new to coding as a whole, but wanting to learn as well.
Basically what im trying to do is essentially make this border grey where the grey box is, and blue for the rest of it. I've tried googling it but struggling to find something that describes exactly what im looking for.
The grey area is 200px wide and starts roughly 26px in from the left side of the page.
Can anyone help at all? Thanks in advance
Border Image
Header code is here - the grey box is part of a logo image.
<div class="fusion-header" style="height: 91px; overflow: visible;">
<div class="fusion-row">
<div class="fusion-logo" data-margin-top="5px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px">
You can override a parent border in the logo element, by using a negative bottom margin with the size of the border.
.header {
background: #515151;
border: 5px solid #5EDBE7;
}
.logo {
width: 200px;
height: 50px;
margin: 50px auto;
background: #5D5D5D;
/* Override the container vorder */
border-bottom: 5px solid #999;
margin-bottom: -5px;
}
<div class="header">
<div class="logo"></div>
</div>
so I'm trying to set up a website and I want the green nav bar to be flush with the bottom of the image. However, no matter what changes I make to the source code and css it still leaves a space. Does anyone know how to fix this?
HTML:
<body>
<img src="xyz.gif">
<div class="hasbackground">
...
</div>
</body>
CSS:
.hasbackground { background-color: blue; }
Here's an example JSFiddle: http://jsfiddle.net/a1mn0ytz/
Thanks
Your image is display: inline, but it needs to be display: block. Elements that are inline or inline-block treat white space as if it's inline (e.g. the spaces between these words.) That can sometimes manifest vertically, apparently.
Remove the 2 pixel border you have on the image.
Change
<img width="946" height="246" style="border:2px solid #000000" alt="dogwash" src="Banner.jpg">
to
<img width="946" height="246" alt="dogwash" src="Banner.jpg">
The border of attribute of the image is following:
border: 2px solid #000000;
Change it to following:
border-left: 2px solid #000000;
border-right: 2px solid #000000;
i have a div tag like this :
<div id="test">
<p>Some text here</p>
</div>
i want to make border-bottom of 'test' lunate! any one can help?
it is something like this :
The answer you got from susheel is accurate, but if you want a more elliptical border, you need to set different parameters.
Set you border style to:
border-radius: 15em/5em;
border-top-left-radius: 0;
border-top-right-radius: 0;
You can play with the parameters to get a different curve or even change the em to px (but I myself thik it's better this way).
fiddle:
http://jsfiddle.net/F649s/
#test{
width:150px;
height:150px;
border:1px solid silver;
border-radius: 0 0 50% 50%
}
I have some divs near each other in one block and I want them to stay in the same block(line) on getting the screen bigger(CTRL +), here's my code (http://fiddle.jshell.net/YDyfy/),
CSS:
#menu{
width:100%;
height:40px;
margin:auto;
padding:0 0 12;
background:url(file:///C:/Users/Windows7/Desktop/imgbg.jpg) repeat 0 0 #f8f8f8;
border:1 solid;
border-width:0 1 1;
box-shadow:0px 1px 10px #000;
text-align:center;
position:fixed;
top:0;
left:0;
right:0;
}
.menutext{
font-family:Helvetica neue,Helvetica,Arial,Verdana,Sans-serif;
font-size:16;
display:inline-block;
border:solid;
border-color:#aaa #ccc;
border-width:0 0 5 6;
padding:6 40 7 40;
margin:7 15;
box-shadow:-1px 2px 5px #404040;
}
HTML:
<div id="menu">
<div class="menutext" linkId="div1">Description</div>
<div class="menutext" linkId="div2">Shipping and payments</div>
<div class="menutext" linkId="div3">Seller information</div>
<div class="menutext" linkId="div4">Feedback</div>
</div>
Simply, I want when the screen get bigger divs stays in the same line/block
Use white-space:nowrap on the container (updated Fiddle).
Your question is very unclear, so don't shoot me if this isn't what you are looking for.
As a general sidenote, you should never nest block level elements such as <div> inside inline elements such as <a>. If anything those should be <span> elements.
I'm a little confused. You want them to appear all on the same line? Or on separate lines?
If you want them all on one line when the window increases, then I see no problem with the fiddle you provided.
If you want them all on separate lines, change the display attribute to block in your CSS.
You miss some px in padding, margin and font, I think due to this you got the issue.
Use font size in percentage or EM.
i know we can use inset and ouset border to styling border for a table.
table{border: 1px inset #fff;}
td{border: 1px outset #fff;}
everything is OK when we are using table because every thing is in a td and you never put an element or text in the table tag directly.
now the question is that when we are using divs to do the same styling there are many problems.
if we put a text or element in outer div we don't see any border in right side of it.
first inner div hast not border in top.
here is the fiddle to make the problem more specific.
http://jsfiddle.net/v4D9q/
Do you have to use inset/outset?
It's a few lines more css, but why not just put a border on the top/left/right of the outer, and only set border bottom on the inner elements.
HTML:
<div class="outer">
outer div (we dont see border in right side)
<div class="inner">inner div</div>
<div class="inner">inner div</div>
</div>
CSS:
.outer{
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
}
.inner{
border-bottom: 1px solid #000;
}
http://jsfiddle.net/PFhfF/