When I try to use the top word in CSS on a link it does not work.
I want my links to be lower on the page so I would use top: 10%;. That does not work though because my links seem to not move no matter what. I can however get them to move sideways with text-align:center;.
My HTML
<div id="pythonfilelistfiles">
<a href="http://localhost/project1/pythonfiles-calcuator.html">
<div class="pythonfilelistboxs" id="file1">
<h1> Simple Calculator </h1>
</div>
</a>
My CSS
#pythonfilelistfiles {
width: 78%;
height: 92%;
margin-left: 20%;
margin-top: -2%;
max-width: 78%;
max-height: 92%;
overflow-y: scroll;
}
#file1 {
top: 0%;
}
.pythonfilelistboxs {
width: 96%;
height: 12%;
background-color: black;
margin-left: 2%;
z-index: 5;
position: relative;
border-radius: 8px;
border: 2px solid red;
color: red;
text-align: center;
line-height: 80%;
}
There are a number of ways you could accomplish this, most of which are probably a little more maintainable than using positioning properties -
Add padding to the top of the containing div.
Increase the line-height for those links.
Use margin-top to move it down a relative amount (you'll need to set it to display: block as well, which will change how they behave in the page flow).
It is probably easier to use a unit other than percentages in any case - it would better practice to use a type-related unit like em or rem.
Related
I created a custom tag called <bubble></bubble> and its styles can be applied using the custom type attribute.
Code:
bubble[type=normal] {
border-radius: 10px;
background-color: #5e9bff;
text-align: center;
color: white;
padding: 6px;
width: 50px;
}
<bubble type="normal">Hello!</bubble>
The problem comes in positioning the element when placed with the div tags. First of all, the width: 50px; gets ignored unless I use Position: Absolute; which has another problem I'll describe below. Second, It partially overlays the text when <div></div> tags are used even after applying the margins on Top and Bottom.
Code with Absolute Positioning:
bubble[type=absoluteposition] {
position: absolute;
border-radius: 10px;
background-color: #5e9bff;
text-align: center;
color: white;
padding: 6px;
width: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
<bubble type="absoluteposition">Hello!</bubble>
The problem here is position: absolute; acts like float: left; which I don't want to use even after using margins on top and bottom. This problem also occurs with div tags.
Demo in JSFiddle.net
If you have a solution OR You think there is a problem in my code OR You think there is an Alternative way to fix this problem OR You need more details on my Question, please Reply.
if you want to specify , height , width on above when using absolute than you may try wrap bubble tag in another div with relative position like :
<div class="some" style="
position: relative;
display: inline-block;
width: 100px;
height: 50px;
">
<bubble type="absoluteposition">Hello!</bubble>
</div>
Cheers !
So I have two <div>s nested inside another .
Something like:
<div class="wrapper">
<div class="left_sidebar"></div>
<div class="text_area"></div>
</div>
I noticed that when the text_area <div> contains enough text, it slightly pushes the left_sidebar to the left and moves over as well. It doesn't do it when my text posts are short.
This is the CSS I have:
.wrapper {
position: relative;
margin-left: 20%;
}
.left_sidebar {
position: absolute;
margin-top: 1.5%;
width: 20%;
border-right: 1px solid #777F7F;
text-align: right;
padding-right: 1%;
}
.text_area {
position: absolute;
text-align: left;
margin-left: 22%;
font-size: 1em;
width: 45%;
}
EDIT: I feel that I should mention that this doesn't happen on my 23inch 1080p monitor, but it does happen on my 11inch 768p monitor.
I think you may get rid of position: absolute; from left_sidebar & text_area because I didn't see any clue of this positioning. Instead of position: absolute;, using float:left; will help you I guess.
See this fiddle.
I'm trying to get a child DIV to have its padding set relative to its fixed parent DIV.
To demonstrate the problem, I've put together a quick JSFiddle - http://jsfiddle.net/mdxsegLt/
.top-fixed {
position: fixed;
top: 0px;
height: 70px;
max-height: 12.5%;
margin-bottom: 20px;
width: 100%;
left: auto;
right: auto;
z-index: 1030;
background-color: green;
}
.padding-percentage {
position: relative;
width: 50px;
max-width: 30%;
/*padding: 14px;*/
padding-top: 20%;
background-color: red;
}
<div class="top-fixed">
<div class="padding-percentage">test</div>
</div>
In that example, I'd like the red DIV to be contained entirely within the green, using 20% of the green DIVs height for the padding, not the entire page.
First things first... lets drop the ALL CAPS element names. It's bad practice these days. I think you were overdoing it a bit with your CSS declarations and by NOT nesting the text properly by wrapping it in a span or p tag. You shouldn't just have floating text that's not wrapped in a p or span tag. Wrapping it in such tags allows you to further customize like I did in my fiddle.
UPDATE
I think I actually get what you're trying to do.
CSS:
.top-fixed {
position: fixed;
top: 0px;
height: 70px;
width: 100%;
background-color: green;
}
.padding-percentage {
height: 100%;
width: 50px;
background-color: red;
}
.padding {
margin-top: 0px;
padding-top: 20px;
}
HTML:
<div class="top-fixed">
<div class="padding-percentage">
<p class="padding">TEST</p>
</div>
</div>
LINK TO FIDDLE
Looks like you needed to adjust the CSS and add a class to the "test" text by tossing it an a p tag.
Check out my fiddle and hope it helps you!
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
This is my admin panel and I want to divide it into 2 columns with divs. The left div is a menu and has this style set:
#menu_left{
position: fixed;
float: left;
width: 300px;
height: 100%;
top: 0;
left: 0;
background: #666;
color: white;
}
The right one is the content and has this style:
#content{
text-wrap: unrestricted;
float:left;
width: 100%;
left: 300px;
}
It doesn't work as it should work, I want it to wrap the text, but it doesn't.
Tell me also please, if there is any faulty style setting.
Oh the html:
<body>
<div id="menu_left">
<h1>Menu</h1> <hr />
</div>
<div id="content"></div>
</body>
You have width 100% on content, which makes it stick out 300px to the right of the window, because of the width of #menu_left. You should make this some pixel value, or change #menu_left to a % width, say 20%, then content could be 80% and they would fit nicely.
Plus you should remove left: 300px; from #content, it will already go where you want it to because of the float: left;.
Just clear out these lines and you should be good to go.
#menu_left{
position: fixed; <--don't need
float: left;
width: 300px;
height: 100%;
top: 0; <--don't need
left: 0; <--don't need
background: #666;
color: white;
}
#content{
text-wrap: unrestricted; <--don't need (you really want to break letters in the same word?)
float:left;
width: 100%;
left: 300px; <--don't need
}
Using a pre-made system makes a lot more sense than trying to start from scratch. I would recommend using a css system like grid960 http://960.gs/