I've seen a lot of discussion and debate on this with solutions from pure CSS to pure HTML. They can get pretty complicated, nesting divs within divs, using some pretty intense looking CSS. I figured I'd ask though, because I need a straightforward solution to this problem, and it needs to not rely on CSS tables (i.e. {display:table;} because I'm using that to show/hide the entire div and solutions using that never seem to work nicely with my other code. So how should I do this?
I came up with a solution. I'm not sure it's the best or most compatible, but here it is:
<style type="text/css">
table.center {
width: 100%;
height: 100%;
}
h1.center {
text-align: center;
}
</style>
<div id="hide-able">
<table class="center">
<tr><td><h1 class="center">I'm centered!</h1></td></tr>
</table>
</div>
If you have a better solution, please share!
you can have your outer div #wrapper{margin:0 auto;width:900px}
that gets it done nicely.
make sure to include doc-type for IE.
Related
Hello i'm creating a webpage from scratch and I'm running into a problem
I know using the style tag is not very good, but would it be in this case okay to use? or maybe is there a better way of doing it?
let's say I have this CSS
.group-box {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: rgba(30,30,30);
padding: 15px;
height: 100px;
border: 1px solid rgba(10,136,0, 0.2);
}
and I have
<div class="groupbox"></div>
but now let's say I wanted to make my groupbox bigger for one-time use, is it okay to do?
<div class="groupbox" style="height: 300px;"></div>
or should I just make a whole separate class like a small-groupbox and a big-groupbox with all the same properties, just different heights values? I'm leaning more towards the style attribute. But maybe there is a better way?
I am wondering what the CSS "coding" standard would say about this question. my question is subjective, but I want to know what most others who are more experienced at CSS would do in my situation.
Thanks
It totally depends on ‘your situation’. In particular considering maintainability/readability for future developers. There can be no one right answer. Both methods are allowed by the standard.
The thing to watch if using classes is cascading/specificity which you can be confident are dealt with if using style.
But set against that is the ability in a stylesheet to use class names which have meaning. And there is true separation between styling and semantics, the styling not being ‘buried’ amongst HTML. You can also group settings so the maintainer isn’t hunting through many lines of code to find changes.
You can use both, however, it's always best practice to use external CSS, and class than inline-CSS, however if it's very few line, then it'll not affect the performance much.
I can't figure out how to make a div move when another div is clicked.
Here is a jsfiddle demo: https://jsfiddle.net/vufosn18/ (make sure you make it fullscreen so the image doesn't overlap with the text)
I have been googling around for a bit and can't find anything, so I tried:
#feas:focus #construct{
margin-top: 300px;
position: absolute;
}
When I click on feasibility it gives construction management a margin-top of 300px.
Any help is appreciated, if your answer could be in JavaScript/CSS that would be great.
It would be hard to fix all your issues in one answer. But I'll try to get you going:
Everything is absolute, I think this is not recommended for your case. Read more
You are using ID's everywhere, causing lots of duplicate styles. Try changing this to classes. This will be much easier to manage small changes.
I recommend checking that you are working html strict, this may prevent having rare situations in different browsers. (FYI)
To answer your question:
There are a lot of plugins out there that are easy to use. I suggest you to use one of them instead:
https://jqueryui.com/accordion/
A step by step example (just googled it)
..
For what you want to show in each tab you can have independent html/css. By default is img and p relative. So they won't overlap then.
here is a simple animation
Click on hello and the div with the word world will move down
function click(){
document.getElementById('bottom').style.top="50px"
}
document.getElementById('top').addEventListener('click',click,false)
#top{
width: 50px;
height:50px;
border:solid;
}
#bottom{
position:relative;
top:0px;
width: 50px;
height:50px;
border:solid;
transition-property:top;
transition-duration:3s;
}
<div id="top">
hello
</div>
<div id="bottom">
world
</div>
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
I have what seems like a simple problem, but i have yet to find a solution. I have a series of divs which may vary in height, thought they will generally be the same width. I would like a fluid layout that basically ends up generating a variable number of columns as the page is resized. Perfect for float left. The problem is that when the divs are different heights, there ends up being a lot of white space vertically between the elements.
Clearly, the simple solution is to write some javascript to do all of this for me. But i would hate to have to resort to that if there's a css solution.
Here is a simple example:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Simple Float Example</title>
<style type="text/css">
.dv { border: solid 1px red; float: left; width: 300px; }
</style>
</head>
<body>
<div>
<div style="height: 40px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
<div style="height: 60px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
</div>
</body>
</html>
You'll see that when the page is very narrow, everything looks as you would expect. All of the divs stack up. If you expand the page to full size, yet again - everything looks fine. But when there are 2 or 3 columns, look how much extra space there is. I'd post an image, but my reputation does not yet permit me to do so.
Anyway, i experimented with various display and position settings, and i couldn't get it to really do what i want.
Any suggestions? Thanks!
-RP
Are you after this type of look?
http://desandro.com/resources/jquery-masonry/
If so, no, there is no easy way to handle that with pure CSS. You need a bit of JS as well.
There is no particularly good way to generically handle this with CSS.
Read this previous answer I wrote that goes over the various options, and shows that they don't work:
CSS Floating Divs At Variable Heights
You're stuck with JavaScript. Fortunately, the JavaScript you need has already been written in the form of a jQuery plugin:
jQuery Masonry
I've suggested the same thing before:
Position floated elements directly under each other
css alignment question
<div id="broadcast">
<div class="broadcast_element">
<div class="broadcast_username"><?php echo $row[0]?>:</div>
<div class="broadcast_broadcast"><?php echo $row[2];?></div>
</div>
</div>
Simplified CSS:
.broadcast_element
{
width: 100%;
}
\#broadcast
{
width: 200px;
}
The problem is: The php script echoes the data in a straight line causing it to the overflow from the div (broadcast).
word wrap: I hate IE, so no way i'm using that.
overflow: the properties do not provide what i want to achieve.
The question simply - I'm looking for a solution that'll solve this overflow problem once and for all. I'm looking for something general i can apply in any similar case.
My thoughts - Being a noob the only way i can think of is using javascript to insert a <br/> after every 200px of data? I know thats sad :P.
Thank You.
Did you try those CSS properties :
White-space
Word-wrap
Overflow: hidden