I'm having much problems with my header.
I'm using joomla 2.5 and I've installed maximenuck for the header, but I can't center it at screen.
You can see my web here: http://www.barataweb.es/lourdes/.
I hope this code may help you
.maximenuck{
width: 960px;
margin: 0 auto;
}
paste this code in your .css file and check it weather its center or not.
......................
......
Hi now used to this css
#header ul.menu.maximenuck {
margin-top: 44px;
position: static;
width: 1000px;
}
your navigation define is position absolute than first you change to position and now define your navi min width than apply css according to your design
First of all, you're doing something wierd with the placement (#wrapper2, #main)
You cannot center it, even using Selva's answer, because the ul has position:absolute. Change it to relative, then apply Selva's values.
Related
I've been trying to center my YouTube video embed but it just won't work properly.
I've tried flexbox and center tags in html, this is the closest I've gotten, really need some help here
My Code:
CSS
.Video {
display: inline-block;
position: absolute;
padding-left: 15px;
padding-right: 15px;
transform: translate(0,-50%);
}
The issue is your css is wrong. Get rid of the position, display and transform. I'm pretty sure you don't need any of those.
Checkout this jsfiddle I made. I think you're looking for margin: 0 auto;. Make sure the embedded videos are wrapped in a div, then apply the margin. If you already have a margin-top or margin-bottom, then just set margin-left: auto and margin-right: auto;
To use flex-box, this works:
Embed your .video in a .flex-container. Give this .flex-container a width and a height. And add the following properties to the .flex-container: justify-content and align-items set them both to center. Thats it.
Check this codepen. I used joes (above) HTML markup.
Also take a look at the out-commented markup above the codepen.
It's just important that the elements you want to center are direct children of the element the flex property is applied to.
I used part of the wordpress theme of another developer and now this slider content is floating to top
I want to center content vertically and horizontally with padding on all sides padding:100px;
Someone can visit my site and help with centering this block? This is url of my mywebsite, please share some knowledge and hope I will solve this problem.
I looked through your code, (thank god for Inspect Element on Google Chrome!) and it seems you have the header inside the body of the code, try moving the page header above the body in your html. I have found this to work for me in some cases.
Also next time try adding code relevant to the question to your OP, will help get faster and better answers
EDIT: You can centre it horizontally by changing the left and right tags in the css:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
}
EDIT 2: Try this, im not sure if it will work but its worth a show:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
height: 80%;
top: 10%;
bottom: 10%;
}
Try doing the steps explained on this site: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/. You will most likely want to apply this to:
.image img
which is the CSS selector for the div with a class of image containing an image tag. This may be too general though and I actually recommend giving your image an ID and targeting that.
So I'm making a jQuery slideshow using the jQuery cycle plugin.
Part of the code generates an <input type="button"> with a value from 1 to i (where i equals the total number of slides)
I'm trying to style these buttons so that they appear on top of the image in the slideshow. However when I try to absolute position the buttons they all stack on top of each other. I understand why this is happening, I just don't understand how to get around it.
This is how I'm targeting the buttons the JavaScript is generating.
input[type=button] {
position: absolute;
left: 400px;
}
How do I prevent the buttons from stacking?
If Position is absolute, you must define left and top for each separately, else it will stack up,
Or you may use position:relative with margin:5px; float:left;
thank you,
Instead of trying absolute positioning, try floating the image.
input[type=button] {
position: relative;
float: center;
padding: 10px;
}
This should eliminate the stacking and you can also easily add borders and customize this to be whatever you want. This is just a general description of what I thought was necessary .
I used tags instead of buttons, but I don't think it should make too much of a difference. Anyways, if you want to go about making it vertical, I would just go like this:
HTML:
<h1>Example</h1><br />
<h1>Example1</h1><br />
<h1>Example2</h1><br />
CSS:
h1{
position: relative;
float: none;
padding-bottom: 10px;
}
This is fairly simple CSS work so it won't take you too far, but this is a good start. Also, I would never recommend using absolute positioning unless you're only dealing with one object instead of several since it creates a stacked look. Hope this helps.
after reading this article:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
i am trying to achieve vertically stacked divs each containing 2 child divs positioned to the far left and right of each parent div. i found the same concept here:
Position absolute but relative to parent
but I can't figure out why mine isn't working.The in-progress file can be viewed here:
https://dl.dropbox.com/u/10388895/newPeterSalvatoDotCom/index.html
Any help would be greatly appreciated.
One way to fix this would be to give the projectDivs a height. They currently collapse to 0. Add the following to your stylesheet and see what happens:
.projectDivs{height:600px}
I think setting these rules to the .projectDivs class get what you want done. Let me know if they don't.
.projectDivs {position: relative;
margin-bottom: 50px;
clear: both;
float: left;
margin-left:auto;
margin-right: auto;
width: 100%;
}
i set the margins individually because you have a margin bottom set already.
I have a "ribbon" type header on the top of my website:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
position: absolute;
top: 0;
left: 0;
margin-bottom: 100px;
padding: 10px 0 0 0;
color: #C0C0A8;
}
The absolute positioning is needed to make sure it occupies the complete width of the user's browser (as far as I know). However, the rest of my webpage (the main body which contains all my other divs) is hidden behind this ribbon:
#pagebody {
width: 60%;
margin-left: auto;
margin-right: auto;
}
The only solution I have been able to find is adding a bunch of <br> between the end of top-wrapper and the start of pagebody.
Is there a better way of doing this?
As per my comment in another answer:
You can just use width: 100%, but make sure you remove the default gap it leaves with:
html, body {
margin: 0;
padding: 0;
}
You should also check out necolas' normalize.css. It includes all of this basic CSS rules you're going to need in pretty much every site :)
Absolutely positioned elements (top-wrapper) are always on top of relative elements (pagebody), unless you do some hacky stuff with z-index (and even that is limited). What you probably want to do is move the pagebody element down just past the top-wrapper. I don't know how tall your top-wrapper is because it has no specified height. And you might not know it due to font-size differences. But overall, you simply need to add a top margin or padding to the pagebody tag, something like this:
margin-top:50px;
Absolute positioning takes an element out of the normal flow. You do not need absolute positioning to maximize width. You do that with width:100%.
There are many ways to do this. First, you can place your top wrapper outside the pagebody element and then just define its width as 100%.
If you have a graphic that is a ribbon and it is supposed to overlap the top of the pagebody element - as I think you are saying above - then you would use position absolute and z-index to place it above the pagebody element. Then add the proper padding-top to pagebody.
You didn't provide html so we don't really know what you're up to totally.