This is my Portfolio i'm working on
The first time you enter the website the yellow Wakey card is below the sidebar (it should be on the right side of the sidebar.
And after refreshing the website it goes into the right position
What can be causing this?
This is the css of the content div where the card is located
#content
{
width:70%;
position: absolute;
display: inline-block;
}
And this is the sidebars
#sidebar
{
background-color:#4b4b4b;
margin:0px;
margin-left:5%;
width:400px;
height:1000px;
-moz-box-shadow: 0px 0px 25px #000000;
-webkit-box-shadow: 0px 0px 25px #000000;
box-shadow: 0px 0px 25px #000000;
display: inline-block;
}
You can see the html from the website so i won't post it to keep it short
On IE it's displaying properly, it gives me this problem on chrome
UPDATE:
I've changed the #content-wrapper display to display:inline; now, but it didn't help
Why not float your sidebar? and let the #content position itself in the normal document flow.. you might want to set width for #content also..
#sidebar
{
background-color:#4b4b4b;
margin:0px;
margin-left:5%;
width:400px;
height:1000px;
-moz-box-shadow: 0px 0px 25px #000000;
-webkit-box-shadow: 0px 0px 25px #000000;
box-shadow: 0px 0px 25px #000000;
float: left;
}
#content
{
float: left;
}
Related
I have a centered webpage and for now I have resized it using media-queries but I don't know how I can achieve something like on stackoverflow itself. Once you decrease the width of the page, it's gettings smaller and smaller and the margin-left is decreasing towards zero; so at one point the page fills the whole window. I use a lot of margin-left: 25% to have the page centered, but this does not work like the design I want. Once I resize the browser window, the pages width gets smaller and it stays centered, while I don't really want the width to get smaller, but rather decreasing the space at the left and right of the page.
This is for example a title I use:
margin-top: 3%;
float:left;
font-size: 350%;
margin-left: 25%;
width:10%;
This is the "middle" of the site which has a white background:
position: absolute;
border-radius: 3px;
top: 0px;
left: 21%;
width: 58%;
min-height: 100%;
background: white;
z-index: -1;
-webkit-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
Sorry, this is probably quite easy, but I somehow really don't get it...
Thanks
I think you need to set your left and right margins to auto. Not 25%.
Like this:
margin-left:auto;
margin-right:auto;
But you have to define a width of your container to which the auto values are applied.
If you take a look at the CSS of the example site you provided in your comment:
#mainbody {
width: 980px; /*this line*/
text-align: center;
vertical-align: top;
padding: 0;
margin: auto; /*this line*/
height: auto;
background: #fff;
}
Well i have 2 divs that i want to be side by side and aligned in the center of the page?
HTML:
<div id="box"></div>
<div id="box"></div>
CSS:
#box
{
width: 450px;
color: #ffffff;
height: 500px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
float:left;
margin-right:15px;}
This is what it looks like right now:
(I cant post photo's because i dont have 10 rep sorry!) but i want them to be under and aligned to the nav bar. Thank you.
What you need here is use inline-block instead of float that allows you to use the text-align property on the parent. Try this:
.box {
/*float:left; Remove this*/
display:inline-block; /*Add this*/
}
Since ID must be unique I use .box add that class on the divs
And on the parent use:
body {
text-align:center;
}
I use body in this case I don't see any other parent but change it for the real one
Check this Demo http://jsfiddle.net/WJfx5/
Also you can read This Article to know about the use of inline-block elements
put this 2 divs in another big div, and add margin: 0 auto; to it and a width.
<div class="bigdiv">
<div class="box"></div>
<div class="box"></div>
</div>
.bigdiv { margin:0 auto; width: 930px }
.box:last-child {margin-right: 0px;}
Create a wrapper around those div like
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
</div>
Then with css
#wrapper {
text-align: center;
width: ??; //add yours
height: ??; //add yours
}
FYI: id should be unique
Updates:
.box {
width: 450px;
color: #ffffff;
height: 500px;
display: inline-block;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
}
#wrapper{
text-align: center;
}
JSFiddle
Well I want to place a caption on the border of my images for a image gallery I am developing.
Basically my images use borders and margins to create a effect around them to make them look like Polaroid photos. I would like to place a caption on top of the border. here is my css.
.column img {
position:relative;
display:inline-block;
width:130px;
height:100px;
margin: auto;
padding:10px;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.35);
-webkit-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
-moz-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
box-shadow: 1px 3px 3px rgba(0,0,0,.8);
border: 1px solid #fff;
padding: 5px 5px 35px 5px;
}
.column div {
max-width: 100%;
max-height: 100%;
float: left;
margin: 0 15px 5px 0;
margin-left: 5px;
border-radius: 2px;
overflow:hidden;
}
The border works fine and looks fine but the caption does not display on top of the border any help would greatly be appreciated.
Try using the <fieldset> and <legend> tags to draw a captioned box around the images.
<fieldset>
<legend>Caption Here</legend>
<!-- Image here -->
</fieldset>
I have been searching since yesterday for a solution but couldn't find one, or couldn't find the right keywords to search with.
So I have a header on my website like this is a header and I centered that nicely and extended the background color of it.
Now I found out how to make a nice interactive/glossy nav bar as a footer but im using it at the top and the thing is I also want to extend it's size, however it just centers itself and doesn't extend. I'll show this in a screenshot and will post my code.
Also: I want my box to be centered, which is contained in a div called #main_inner_area.
Note: Navbar is still called #footer in CSS/HTML code.. I want to extend the sides of my navbar, like the background color of my header is extended to the full width.
my screenshot: i41 DOT tinypic DOT com SLASH 2qk6mmt.png (sorry but its hard to explain without screenie)
HTML:
<div id="main_area">
<header>
<h1>This is a header</h1>
</header>
<div id="footer">long code for layout navbar</div>
<div id="main_inner_area">
<article>d fsdf sdf sdf dsf dsf dsf</article>
</div>
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
#main_area{
background:#4863A0;
display: block;
text-align: left;
}
header {
height:100px;
background: #4863A0;
color:white;
border:none;
width:700px;
margin: 0 auto;
}
#footer{
width:700px;
top:100px;
margin:0 auto;
padding:0;
left:0;
right:0;
margin: 0 auto;
height: 40px;
border-radius:7px 7px 7px 7px;
font-family:Arial;
text-shadow: 1px 1px 1px black; /*h,v,blur,color */
/* glass effect */
border-bottom: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.5);
/*inset = inner shadow ----------- this just creates multiple shadows*/
/*top border, top white section, overlay top white, bottom*/
box-shadow: inset 0px -2px rgba(255,255,255,0.3),
inset 0px -15px 20px rgba(0,0,0,0.2),
inset 0 -10px 20px rgba(255,255,255,0.25),
inset 0 15px 30px rgba(255,255,255,0.3);
}
#main_inner_area{
float: left;
width:735px;
margin:25px 0px 10px 0px;
}
article{
background: rgba(255,255,255, 0.5);
border: 1px solid #4863A0;
margin:0px;
margin-bottom: 10px;
padding: 15px;
font-family: Tahoma;
font-size: 14px;
text-align:left;
display:block;
width:700px;
height:auto;
border-radius: 7px 7px 7px 7px;
}
P.S. I'd REALLY appreciate it. Im an 18 year old student trying to learn some extra things next to my study.
To make your header dynamic just remove the width attribute from it (and from #footer aswell). If you set it to a fixed value of course it cannot scale.
To center your article use margin-left: auto; margin-right: auto;
Update: (stretch Nav Bar)
CSS Changes
#footer {
width: auto;
}
#footer .links {
width: 700px;
margin: 0 auto;
}
HTML Changes:
<div id="footer">
<div class="links">long code for layout navbar</div>
</div>
See http://jsfiddle.net/UKYDb/1/
I'm not sure what you mean by "extend" but you're setting a fixed width and height to everything:
#footer {
width: 700px;
height: 40px;
...
}
Try using percents instead of fixed widths for everything in your CSS code.
width: 100%;
I have some HTML retrieved from a database so I have no control over it and it looks different than if I just put it inside a div :
And here is my CSS:
#cvDiv {
position:absolute;
top:40px;
left: 300px;
border: none;
width: 720px;
display:inline;
background-color:White;
text-align:justify;
padding:15px;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 0px 0px 5px 5px #888;
-webkit-box-shadow: 0px 0px 5px 5px #888;
z-index:auto;
}
and here is the HTML:
http://jsfiddle.net/ug96v/
What am I doing wrong?
And what I want to do is a make the the top picture look like the bottom one.
EDIT
This ended up being a DOCTYPE problem.
Don't use position:absolute;, it forces the div to position itself relative to the the first parent container that has position:relative;. It may be causing part of the problem.