I'm currently working on a splash page for my website and need help with the border which I want to run underneath the main text which will be centred on the page. At the moment when I set the border to run 800px it stays left-aligned with the text above so it isn't even. I'm new to CSS and any help is appreciated. Here is my code:
#logo
{
width: 800px;
position: relative;
top: 150px;
left: 250px;
border-bottom: 1px solid white;
}
Try this:
#logo {
display:block; /* Unless it already is */
width: 800px;
margin: 100px auto;
border-bottom: 1px solid white;
}
Related
I manage a WordPress site, and I'm having some trouble applying a custom background behind the main content div. Here's a link to the site: AccelePedia. You'll see that the main content div is set to 85% width, and on each side is white space. I've tried everything, but I can't apply a background to that white space. I've included the code below pertaining to the div we're looking at. Any help here would be greatly appreciated. :)
If it helps at all, I'm running Wordpress 3.6.1 with the 2013 theme. (Which I have modified.)
Thanks!
/**
* 3.0 Basic Structure
* ----------------------------------------------------------------------------
*/
body
{
background: url(http://accelepedia.com/accimages/background02.png) repeat-x top left;
width: 100%;
}
.site {
background: url(http://accelepedia.com/accimages/background02.png) repeat-x top left;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
max-width: 1600px;
width: 100%;
}
.site-main {
position: relative;
width: 85%;
margin-left:auto;
margin-right:auto;
margin-top: 5px;
border: 5px solid gray;
background: #000;
z-index: 1000;
}
.site-main .sidebar-container {
background-image: url(http://accelepedia.com/accimages/background02.png)
height: 0;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
}
.site-main .sidebar-inner {
background-image: url(http://accelepedia.com/accimages/background02.png)
margin: 0 auto;
max-width: 1040px;
}
The background image does not exist:
http://accelepedia.com/accimages/background02.png < this file returns a 404
When I set the following it works:
body {
background-image: url(https://www.google.com/images/srpr/logo11w.png);
}
I have this code of my div. I want to alight some text inside. The text has to be aligned to the left curv of the div. How can this be possible?
Thank you!
Here is the code of the div:
#cv {
position: absolute;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
I believe you want the text to follow the semi circle, and not just have an ordinary align left along a straight edge. This is not (yet) possible with a simple css property. There are some hacky techniques like this however:
http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes
There are even a tools to help you, like this one:
http://www.csstextwrap.com/
Adobe is pushing a new css property to wrap text:
http://www.adobe.com/devnet/html5/articles/css3-regions.html
It should be already available in Chrome Canary, but I suppose that is of little use for you today. I think you will have to do with a hack today...
Working example: http://jsfiddle.net/mQFK6/4/
You want to add a <p> to hold the text, and then move it down 50% to the middle of the circle, and float it left
#cv {
position: relative;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
p{
top: 50%;
position: relative;
float: left;
margin-left: 5px;
}
Related to this question.
Here's a fiddle: http://jsfiddle.net/DRbRS/
Notice how the red-outlined list div does not align at the bottom of the green container div.
The problem is that there is no way of knowing ahead of time what the resulting height of the list ought to be, even if the height of the header is known.
Is there any way to deal with this without resorting to javascript?
What we need is a style like height: fill;
Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/
This article describes why it works.
http://www.alistapart.com/articles/conflictingabsolutepositions/
Replace your CSS with this
#container {
left: 50px;
width: 200px;
position: fixed;
height: 90%;
border: 2px dashed green;
}
#header {
height: 30px;
line-height: 30px;
text-align: center;
border: 2px dashed blue;
margin-left:-2px;
margin-top:-2px;
width:200px
}
#list {
border: 2px dashed red;
overflow: auto;
height: 91%;
width:200px;
margin-left:-2px;
margin-top:-2px;
}
or see the demo here http://jsfiddle.net/enve/DRbRS/3/
UPDATE: Here's a jsFiddle.
I want it to look like this:
... but it looks like this:
The #container is horizontally centered, and must stay so. Can't seem to get this right...
this happens when you float boxes side by side, one box to the left, the other to the right, both having width:50%. But padding, margins and border unintentionally increase the width of the boxes causing them to be more than 50% and forcing the right box to move under the previous box.
try setting static width to the boxes (will need calculation)
http://jsfiddle.net/fuYYv/
Bryan Downing in the comments gave me a clue.
I added
footer #container {
position: relative;
top: -XXXpx;
}
Works perfect. Big thanks to you wizards :)
This should be useful for others. jsFiddle with answer. Code below:
header, #container, section, footer, footer img#iphone { display: block; }
header {
background: url('images/header.jpg') repeat-x;
height: 160px;
border: 5px solid #aa3;
color: #aa3;
}
header img#logo {
margin: 0 auto;
}
#container {
width: 550px;
margin: 0 auto;
overflow: hidden;
border: 5px solid #33a;
color: #33a;
}
section {
float: left;
width: 310px;
height: 200px;
border: 5px solid #3a3;
color: #3a3;
}
footer {
background: url('images/footer.jpg') repeat-x;
height: 150px;
border: 5px solid #aa3;
color: #aa3;
}
footer #container {
position: relative;
top: -320px;
}
footer img#iphone {
float: right;
height: 400px;
width: 204px;
border: 5px solid #a33;
color: #a33;
}
I have a table of contents in my page (see here) with these CSS styles:
div.toc {
height:38em;
position:fixed;
right:0;
top:5em;
width:21em;
z-index:1;
}
How do I have to change these settings to make sure the DIV isn't partially hidden behind the body/window scroll bar?
(Tested with Firefox 3.6 and Opera 10.10).
Actually, your div.toc is properly positioned. The problem is with your <iframe>.
Remember your box model... width and height is calculated independently from the margin and padding...
So, by having width: 100%; on your iframe.toc plus a margin-left: 0.5em, you are basically telling the browser the following:
Use the full width of the parent element and offset it 0.5em to the left.
Total effective width: 100% + 0.5em
What you really want to say is the following:
Substract 0.5em from the full width of the parent element to use as padding on the left and use this as width.
Total effective width: 100% - 0.5em (desired)
The solution is therefore simple... Remove the margin-left from iframe.toc and put a padding-left: 0.5em on div.toc.
div.toc {
background-color: #f0f0f0;
position: fixed;
top: 5em;
right: 0;
width: 21em;
height: 38em;
padding-left: .5em;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
z-index: 1;
}
iframe.toc {
background-color: #f0f0f0;
border: 0;
width: 100%;
height: 30em;
border-bottom: 1px solid #ccc;
}
You can make you table of contents position 1 em from the right like this: right: 1em;
I just tried it for you and right: 1em; looks good.