i would like to have a sort of minimum margin-top. Basically if you visit my webpage
NerdyFuture. And scale the browser window down, the carousel will get smaller that's why the last news header and box need to go up. But at some point I want it to stop going up, so that the box doesn't overlap the carousel. How can i do this? Is there some kind of hack for this?
Latest News Header:
#latest_news_header{
z-index:3;
position:relative;
float:left;
width:100%;
min-width: 613px;
max-width:45%;
display:inline;
margin-top:23.5%;
font-size: 1.0em;
text-align:left;
background-color:#828282;
margin-left:18.6%;
font-weight:400;
padding:3px;
font-family: Proxima-Nova,Helvetica,Arial,sans-serif;
text-transform:uppercase;
color:#30DB00;
text-shadow: 1px 1px 3px #333;
Latest News Box:
.latest_news_box{
z-index:2;
position:relative;
display:inline;
float:left;
width:100%;
margin-left:18.6%;
min-width: 619px;
max-width:44.9vw;
height:600px;
background-color:white;
}
In Header_CSS.css line 35 you have :
#header {
width: 100%;
z-index: 10;
background-color: #828282;
max-height: 46px;
max-width: 100%;
}
remove the
max-height: 46px;
and give your #latest_news_header a margin-top of something like 10px, or whatever you feel is right.
Related
Please, no javascript.
Imagine this if you will. A page that has hundreds of boxes with each box containing a joke, cite, image... (all boxes with a display:inline-block;).
Now I'm trying to place A chart with a few components with position:absolute; and left: in one of the display:inline-block; boxes with no luck. The chart shows at the left side of the page with the next joke box underneath it.
How do I control it?
Cheers, All.
Part 2 (my box code):
.boxDarth{
border-radius:5px;
border:1px solid #663810;
box-shadow:-3px 5px 4px #000000;
margin:6px 3px;
padding:6px;
display:inline-block;
line-height:1.5;
text-align:left;
text-decoration:none;
font-weight:lighter;
letter-spacing:1.4;
text-shadow:-1px 1px 1px #37363b;
word-wrap:break-word;
vertical-align:top;
position:relative;
}
The chart ccs is quite long. If what I provide here is not enough, and since I've never asked a question here; should I paste it here? upload a file?
.pie{
position:absolute;
width:100px;
height:200px;
overflow:hidden;
left:150px;
-moz-transform-origin:left center;
-o-transform-origin:left center;
-webkit-transform-origin:left center;
transform-origin:left center;
}
The container should have position: relative as a CSS attribute
The chart has to be a child of the inline block box, and the box needs to have position: relative; on it.
.inline-box {
display: inline-block;
background: violet;
width: 300px;
height: 300px;
position: relative;
}
.chart {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 150px;
background: cornsilk;
}
<div class="inline-box">
<div class="chart">
hi, I'm an absolutely positioned chart inside of a relatively positioned inline box
</div>
</div>
I have a problem, I want to set search results be like on picture: http://prntscr.com/62bbce (sry for my bad drawing skills :/)
But i get that: http://prntscr.com/62bbpw
this is my css code:
#search{
margin-left:100px;
width:300px;
border-radius:5px;
}
#search_results{
position:absolute;
background:white;
font-size:17px;
}
You have to set the width of the search results to 300px too if you want both divs to be the same width.
#search_results{
position:absolute;
background:white;
font-size:17px;
width: 300px;
}
You position it the same way as the other div:
#search_results{
border:1px solid grey;
background:white;
font-size:17px;
width: 300px;
margin-left: 100px;
margin-top: 15px
}
Full code: http://codepen.io/anon/pen/raYdLw
Right now I would like to have a plus sign with a circle around it.
http://jsfiddle.net/dtracers/cvtztcy1/1/
<h1>TEXY TXT <span>+</span></h1>
<style>
span {
border-radius: 50%;
border-style:solid;
border-width: 1px 3px 1px 1px;
padding:0px;
padding-bottom:0.125em;
cursor:pointer;
margin:0px;
}
/* Just to see if that would modify anything */
h1 {
padding:0px;
margin:0px;
}
</style>
After looking at it you can tell that this is not a circle but instead an elipse.
I have realize that it is the text height that is causing this issue but is there a way to make it appear closer.
The background is dynamic so I can not use an image.
And I would rather not have a floating element that depended on absolute positioning.
I would also like the circle in height to be equal to its current width.
I know I can just make it wider but I don't want a giant circle I want a tight small circle
EDIT
For those that are saying this is the same question it is kinda.
The difference between what I am asking and what that person is asking is that in their case the circle is larger than the bounds of the text.
What I am asking is for a circle that is smaller than the bounds of the text.
As such none of the solutions given there will apply to my question.
You can achieve this using :after pseudo element. check the DEMO.
span {
position:relative;
padding:0; margin:0;
cursor: pointer;
}
span:after
{
content:"";
position:absolute;
display:inline-block;
left:-1px;
top:7px;
background:gold;
border-radius: 50%;
width:0.5em;
height:0.5em;
font-size:1.3em;
z-index:-1;
}
Adjust your padding value in css and all is good :
demo
span {
border-radius: 50%;
border-style:solid;
border-width: 1px 3px 1px 1px;
padding:0 2%; /* updated */
/* padding-bottom:0.125em; removed */
cursor:pointer;
margin:0px;
}
This will lead to a perfect circle:
span {
border-radius: 150px;
border-style:solid;
border-width: 1px;
padding:1% 2%;
cursor:pointer;
margin:0px;
width:200px;
line-height:300px;
}
One solution is to make the span have equal width and height using em so it naturally adjusts to the font size.
h1 span {
display: inline-block;
width: 0.9em;
height: 0.9em;
line-height: 0.8em;
text-align: center;
color: teal;
background-color: palegoldenrod;
border: 0.18em solid;
border-radius: 1000px;
padding-left: 1px;
cursor: pointer;
}
Then center the plus sign with line-height and text-align.
Fiddle with the CSS:
http://jsfiddle.net/zx2c4drL
When I change the resolution of my navigation bar it glitches. Here is my HTML;
<!--Start header-->
<div id="header">
<div id="nav_header">
<ul id="list-nav">
Troll Happy
<li>iPhone Fail</li>
<li>Forever Alone</li>
<li>Rage Comics</li>
<li>Derpina</li>
<li>Okay face</li>
<li>Forums</li>
</ul>
</div>
</div>
<!--End header-->
And my CSS;
#header {
height:66px;
background-color:#000;
position: absolute;
width: 100%;
left:0;
}
#nav_header {
height:50px;
margin-left:100px;
}
ul#list-nav {
list-style:none;
margin:20px;
padding:0;
}
ul#list-nav li {
display:inline;
font-family: Century Gothic, sans-serif;
font-size:13px;
font-weight:bold;
}
ul#list-nav li a {
text-decoration:none;
padding:15px 0;
width:110px;
color:#eee;
float:left;
text-align:center;
border-right:1px solid #353535;
}
You can see what is happening here;
trollhappy.co.uk
As you can see, if you change the resolution the navigation bar goes very glitchy!
Thanks again guys and girls
you just small mistakes, it follows;
u remove the margin-left:100px, insted margin:0px auto; and set width:840px;
#nav_header {
height: 50px;
margin: 0 auto;
width: 840px;
}
ok i understand the misstake, u set the body tag then work perfectly,,,,
body{
margin:-18px 0px 0px 0px;
}
ok friend on small changes do this,u add the min-width:1000px;
#header {
background-color: #000000;
height: 70px;
left: 0;
min-width: 1000px;
position: absolute;
right: 0;
}
Your <li><a> elements are being floated left, which means they'll overspill their container if they can't all fit in a single line because the container is horizontally too small.
For simplicity's sake you'll want to just hide the links rather than implement some nice graceful degradation for smaller screens (just make sure it looks nice with a browser window 960px wide). Just apply the overflow: hidden; style to #nav_header.
I'm using the following style, on an Ajax modal popup. The Width is set correctly, but it is aligned on the left side of the screen. If I set the width to a fixed number, eg 600px, it becomes centered. Is there a way to do both centered and based on a percentage?
.modalPopup {
background-color:#ffffff;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
position:relative;
width:80%;
}
Try
.modalPopup {
background:#fff;
border:3px solid gray;
padding:3px;
position:relative;
width:80%;
margin: 0 10%; /* percent based margins will do the trick */
}
This is what I ended up using, but Zoltan showed me the way. This has allows me to have a scrollbar if needed.
.modalPopup {
background:#fff;
border:3px solid gray;
padding:3px;
position:relative;
width: 80%;
height: 400px;
margin:0 10%;
overflow:auto;
}