Hi all I seem to be having serious trouble getting my div to go exactly where I need it to. Here is a link to the website.
As you can see my slideshow is supposed to be in the frame, but in now way shape or form am I able to make it do so.
here is the link to the style sheet that Im working with.
Some help would be much appreciated, I've googled page upon page and can't seem to find any solution so I can to the place that I've found help from before.
#slideshow {
position: relative;
left: auto;
right: auto;
top: 119px;}
This CSS looks horrible (width of #content, left:auto; margin-top: auto...)
My suggestion is to make a fresh start and get rid of all those autos.
Have you tried removing the "margin-top: auto;"?
#content {
height: 374px;
width: 524;
margin-right: auto;
margin-left: auto;
margin-top: auto;
}
A quick fix would be to add
.ws_images{
margin-top: 122px;
}
This'll fix what ails you:
#contentbox {
position: relative;
}
#content {
position: absolute;
left: 100px;
top: 100px;
}
Personal preference:
#wowslider-container1 {
border: none;
}
Related
I'm trying to figure out where the extra spacing on the right of my container comes from, i can't seem to find a element that goes outside the HTML tags using inspector.
Live Preview
Any help is appriciated,
Thanks in advance!
It is coming from this class
slider-title tk-futura-pt-bold
instead of using position and left on the above class.
Use the follwing to re-position your div (slider):
left: 10%;
top: 10%;
transform: translate(10%,10%);
I would set the slider-box to position: relative; and set the slider-title to position: absolute; this would solve your issue.
write this code at the end of your css and you will get the problem solved :)
.slider-description[_ngcontent-c3], .slider-title[_ngcontent-c3] {
width: calc(100% - 10%);
}
instead of left: 10%; use padding-left: 10%; in .slider-title tk-futura-pt-bold class
The elements with classes slider-description and slider-title have css styling left added to it.
You can fix this by using the following:
#slider{
.slider-box {
position: absolute;
left: 10%;
top: 170px;
}
.slider-description, .slider-title{
color: #fff;
}
.slider-title {
font-size: 24px;
}
.slider-description{
width: 500px;
}
}
So I've set up some div's on my page and while they look fine to me other people log on and the div will be improperly placed. I've looked and looked but can't find out why it's not loading the same for me, so if anyone can help in this it'd be appreciated. The div not showing correctly is
div.head-content
{
display: block;
position: absolute;
top: -64px;
left: 92.7%;
margin-left: -360px;
width: 131px;
height: 46px;
}
The reason for this is either browser comparability or some alignment mistake.
if you are using wrapper make
#wrapper
{
position:relative;
}
and it will do the job.
Unless you show us the entire code this is the most I can help.
#vivek is correct try this
#wrapper
{
position:relative;
width:100%;
height:100%;
}
.head-content
{
display: block;
position: absolute;
top: -64px;
left: 92.7%;
margin-left: -360px;
width: 131px;
height: 46px;
}
Hey all i have a wonderful CSS problem here.
I am trying to use an APDIV that has a style of:
#name {
position: absolute;
width: 356px;
height: 25px;
z-index: 1;
left: 43px;
top: 1000px;
}
#donation_form {
margin-left:auto;
margin-right:auto;
width:785px;
height:520px;
background-image:url(../img/formBG_ChattClub.gif);
}
And that looks great in dreamweaver in design view:
BUT when i go to view it in the browser it shows like so:
The HTML code for the name is:
donation_container does not have a style associated with it.
What am i missing so that it lines up with the boxes just fine without any problem??
Thanks!
#donation_form {
position: relative;
}
#name {
top: 3px;
left: 5px;
}
Beside what you have written already
I am having some problems with my DIV, it wont display over a a DIV that has a web user control in it. Below you can find my css. I believe I have done everything right and am hoping that someone can maybe see an error that I have made and help me out. If you need any other code let me know. I also wonder if its just IE rendering it wrong? Thanks for looking.
The Popup CSS:
{
background: #ececec;
position:absolute;
top: 236px;
left: 201px;
height: auto;
width: 280px;
border: solid 1px gray;
z-index: 50;
text-align:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 15px;
font-size: 8pt;
}
The Activity DIV (same the div above just changed position)
{
border: solid 2px #A9C5EB;
position: absolute;
top: 353px;
left: 290px;
width: 710px;
height: 227px;
font-size: small;
overflow: scroll;
overflow-x: hidden;
background-color: #F8FBFE;
z-index: 2;
}
To know the HTML is essential to fix your problem.
What is the html that contains your popup? Is it relative to the body tag or some other element? Is the containing element position: relative;?
Try setting the containing element's z-index and position:
#my-container {
position: relative;
z-index: 1;
}
See this SO post about absolute positioning.
On a side note, check out IE-7.js which fixes many IE browser issues, including - AFAIK - this bug.
I know this has been asked alot of times in the past but for the life of me I can't seem to get any of the other solutions to work.
What I'm trying to do is to get the footer (which is an image that repeats across the width of the page) to stick to the bottom of the browser when there isn't enough content to naturally push it to the bottom of the page and when there IS enough content to push it to the bottom it does just that. An example is the one at http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm which does exactly what I want but I can't get to work either.
The code that I've currently got implemented makes the footer stick to a certain section of the page with text going under it. You can see it at sourcectrl.co.uk but its not much to look at. Heres the code for your viewing pleasure.
html, body {
font: 100% Arial, Helvetica, sans-serif;
height: 100%;
color: #597347;
margin: 0;
padding: 0;
background: #573909;
}
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 66px;
background: url(../images/FillerPage_01.gif) repeat-x left bottom;
}
section {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: 87px;
position: relative;
padding-bottom: 90px;
}
footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 87px;
background: url(../images/FillerPage_08.gif) repeat-x left bottom;
}
Sorry if it seems messy! I'd just like to know if I'm heading in the right direction or theres something I'm just not getting? Oh yeah I'm trying to do all of this with the html 5 markup which is why there is no #footer and the like (could this be why none of the solutions work?).
If anyone could give me any help or guidance I'd be soooooo grateful.
I believe the code you are looking for is here:
http://www.themaninblue.com/writing/perspective/2005/08/29/
I implemented this just now on my site, and it's working great!
it's a while since you asked your question but hopefully this helps!
This is the source that helped me achieve such a layout :
http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx
Put everything in the Main in a Wrapper and use the following code:
html, body, form
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px; (-80px will be different for you, usually the same as the footer but negative but mine is different)
}
#footer, .push
{
height: 60px; (This is just the height of MY footer, change this to whatever size your footer is)
}