Can someone tell me what I can add the _layout page to have all my pages center align and adjust to 100 % depending on the resolution? Is this possible. I think it might be in:
Thanks!
.container {
width:90%;
}
Set margin:auto; on your .container div.
.container{
border:1px solid red;
margin:auto;
width:90%;
}
<div class="header">
<p>
Header
</p>
</div>
<div class="container">
<p>
some text
</p>
<p>
some more text
</p>
</div>
You can use the <center> HTML tag like this in your _Layout page
<center>
#RenderBody()
</center>
This will center the content of all views/pages that use that layout.
For more information take a look at this HTML center tag.
Related
I have two divs in my html page. I want one to remain as it is if I scroll the page. I did-
<html>
<body>
<div id="head" style="height:100%; width:100%; background:#ff0000; position:fixed; z-index:1">
<p>
Hi
</p>
</div>
<div id="main" style="length:100%; width:100%;">
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hi
</p>
<p>
Hi
</p>
</div>
</body>
</html>
But the problem is that 'main' div is already overlapped by 'head'. It is not showing both 'Hello's at all.
What should I do so that initially no one is overlapped until we scroll.
Thanks in advance.
Good day. You can add some padding-top to #main. for example:
<div id="main" style="length: 100%; width: 100%; padding-top: 40px;">
Depending on your #head 's height, you may need more than 40px padding-top.
demo: http://jsfiddle.net/thisizmonster/19um6tak/
I have 3 div tags inside a div tag, all I want in same line. That I did using some css, but when I zoom out/in browser content goes in different lines.
css code:
#about{
float:left;
width:33%;
}
.about-panel{
width:100%;
}
html code:
<div class="about-panel">
<div id="about">
<p><img style="width:400px;height:280px;margin-top:0%;" src="/media/Banner.png"></p>
</div>
<div id="about">
<p style="margin-left:12%;"><img style="height:280px" src="/media/roto.gif"></p>
</div>
<div id="about">
<iframe width="400" height="280" src="//www.youtube.com/embed/o3vMWRWPYzE" `frameborder="0" allowfullscreen></iframe>`
</div>
</div>
I want all content as it is in same line even after zoom in/out
How I need the contents to be aligned
A jsfiddle would have been nice but for time being, try display:inline-block; in you about-panel. It throwing up because of missing display type for the div most probably!!
.about-panel{
width:100%;
display:inline-block; /* add this and check*/
}
#about{
float:left;
width:33%;
}
There can only be one id.. change the "about" to class.. That should work!
I'm having issues in making a piece of text on my website, which will be part of the navigation system, become responsive. Currently, the text is just sitting there and will not move when I readjust my browser.
Here is my HTML:
<div id="apDiv1">
<div class="wrapper1">
<h2>Home</h2>
</div></div>
Here is my CSS:
.wrapper1{
width:100%;
max-width:960px;
margin:0 auto;
}
You expect your text to move when you change the size of your browser window.
However, if the text is left adjusted (as you your case), it will always be on the left, regardless of the window size. So you should not expect it to "move".
Are you trying to center the div on-screen? I'm not sure what you mean by move the text.
If you want to center the div ".wrapper1", add position: relative to it.
If you want to center the text, make it text-align: center;
Did you include the css file correctly in your html?
The following works as expected. You can base your debugging on that:
<html>
<head>
<style type="text/css"> .wrapper1 {color:red; text-align:center; width:100%;} </style>
</head>
<body>
<div id="haha">
<div class="wrapper1">
<h2>Hello World.</h2>
</div>
</div>
</body>
</html>
I'd like the text under this image to be left justified under the image ('my title' to be aligned with the left side of the image), no matter what it's height, without Javascript.
HTML
<div class="container">
<div class="img-container">
<img src="http://img.thesun.co.uk/multimedia/archive/01572/empire-state-build_1572000a.jpg"/>
<div class="info">
<h1>my title</h1>
<p> my description</p>
</div>
</div>
</div>
CSS
.container{
width:900px;
position:relative;
}
.img-container{
text-align:center;
}
img{
max-width:100%;
}
.info{
text-align:left;
}
http://jsfiddle.net/NGwdc/
If you adjust .container width, it should always be aligned to the left side of that image.
Is this possible with only CSS?
The answer is to make the image container display:inline-block, and the outer-most container text-align:center
http://jsfiddle.net/NGwdc/1/
I am having trouble correctly centering my website
It seems to be centered when I zoom out. but to a user that doesn't zoom out it looks out of place. any suggestions? the site was created with all AP divs it doesn't center correctly even when trying to use the following:
<div align="center">
Try margin:0 auto; for the container div it will center align your div :)
See the example
See the fullscreen view of the result
your design is not correct in my opinion. you must:
<body>
<div id="wrapper">
<div id="header">
from apdiv1 to 31
</div>
<div id="content">*/instead of blockquote*/
put content
</div>
<div id="footer">
put content</div>
</div>
</body>
with css
body{background-image:concrete bkg.jpg}
#wrapper{margin:0 auto}
more more more...
brgds
In css
add property
body
{
text-align:center;
margin:0 auto;
}