How can I put a div with text, logo or any more stuff on the center of this banner, like the example?
<div class="banner">
<img src="img/banner2.jpg" width="100%" alt="Nasajon Sistemas">
</div>
Example :
My Page
Here there is an example you can fit to your needs:
.center{
text-align:center;
width:200px;
height:100px;
background-color:red;
position:absolute;
top: 50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
.outter{
width:100%;
height: 500px;;
background-color:black;
}
<div class="outter">
<div class="center">
<h1>Mywebsite</h1>
</div>
</div>
https://jsfiddle.net/alexcuria/uunwbqyb/
Related
How do I keep the balloon image position stick to the grid image as you resize it?
Balloon1 and B2 are actually inside grid 5 and 7 but if you resize left right, the Balloons will offside.
Do I need a special calc or javascript / jquery library for that?
Thanks.
updated fiddle
.container{
max-width:600px;
max-height:400px;
}
.image-container{
width:70%;
float:left;
position:relative;
}
.img-grid{
max-width:100%;
max-height:100%;
}
.balloon{
position:absolute;
left:30%;
top:50%;
}
.balloon2{
position:absolute;
left:60%;
top:15%;
}
Resize this area
<div class= "container">
<div class="image-container">
<img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
<img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
<img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
</div>
<div class="text-container">
</div>
</div>
Use media queries at say four points throughout the resize, i.e.
#media only screen and (max-width: 600px) {
img{width:60%;height:auto;}
}
Just play about with the image width.
You have to decrease size of the balloons when image gets smaller.
In order to do that you can set ballons width in percentages.
.container{
max-width:600px;
max-height:400px;
}
.image-container{
width:70%;
float:left;
position:relative;
}
.img-grid{
max-width:100%;
max-height:100%;
}
.balloon{
position:absolute;
left:30%;
top:50%;
width: 6%;
}
.balloon2{
position:absolute;
left:60%;
top:15%;
width: 6%;
}
Resize this area
<div class= "container">
<div class="image-container">
<img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
<img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
<img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
</div>
<div class="text-container">
</div>
</div>
Here is updated fiddle.
Hope this is what you were looking for. I have set the image width to 8% so as to resize when screen is resized.
.container{
max-width:600px;
max-height:400px;
}
.image-container{
width:70%;
float:left;
position:relative;
}
.img-grid{
max-width:100%;
max-height:100%;
}
.balloon{
position:absolute;
left:30%;
top:50%;
width: 8%;
}
.balloon2{
position:absolute;
left:60%;
top:15%;
width: 8%;
}
Resize this area
<div class= "container">
<div class="image-container">
<img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
<img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
<img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
</div>
<div class="text-container">
</div>
</div>
So I have a div inside a div. The content in the child div needs to be text-aligned left and the child div itself needs to be centered within the parent div. My problem is, I can't get the child div to only be the width of its content so I can center it. It keeps stretching the length of the parent div. I've tried display:inline-block, inline, table. nothing is working. How do I get the child div to be centered within the parent, but have the child div content be aligned to the left?
Here is my code.
HTML:
<div class="gallery">
<div class="sub_gallery">
<a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
<a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
<a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
...
</div>
</div>
The CSS:
.gallery {
width:100%;
text-align:center;
}
.sub_gallery {
padding:6px;
overflow:auto;
text-align:left;
display:inline-block;
}
.image {
display:inline-block;
width:200px;
height:200px;
overflow:hidden;
position:relative;
margin:6px;
}
.image img {
position:absolute;
top:-10000px;
bottom:-10000px;
left:-10000px;
right:-10000px;
margin:auto;
width:100%;
}
EDIT:
Here is a simple diagram of what I want it to look like:
Diagram
This answer makes things quite different but try it. I am quite sure this will help because it centers the images perfectly on the page.
HTML:
<body>
<div class="gallery">
<div class="sub_gallery">
<center>
<img class="image" src="pic1.jpg">
<img class="image" src="pic1.jpg">
<img class="image" src="pic1.jpg">
...
</center>
</div>
</div>
</body>
CSS:
.gallery {
width:100%;
text-align:center;
}
.sub_gallery {
padding:6px;
overflow:auto;
text-align:left;
width:100%;
}
.image {
width:200px;
height:200px;
overflow:hidden;
position:relative;
margin:6px;
}
.image img {
position:absolute;
top:-10000px;
bottom:-10000px;
left:-10000px;
right:-10000px;
margin:auto;
width:100%;
}
I hope this was helpful.
Currently I am making a page where I have 4 divs each taking 50% width and height.
I would like to make a div where a box can float at the exact center of the page overlapping these elements.
This is the coding so far.
<html>
<head>
</head>
<body>
<div style="background-color:red; width:50%; height:50%; float:left">
</div>
<div style="background-color:blue; width:50%; height:50%; float:right">
</div>
<div style="background-color:green; width:50%; height:50%; float:left">
</div>
<div style="background-color:orange; width:50%; height:50%; float:right">
</div>
</body>
</html>
Absolute positioning would seem to be the most obvious solution.
html,
body {
height: 100%;
position: relative;
}
.center {
width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #663399;
}
<div style="background-color:red; width:50%; height:50%; float:left"></div>
<div style="background-color:blue; width:50%; height:50%; float:right"></div>
<div style="background-color:green; width:50%; height:50%; float:left"></div>
<div style="background-color:orange; width:50%; height:50%; float:right">
<div class="center"></div>
</div>
I think that you should try absolute positioning. Here is another SO question where someone asked how to center a popup dialogue. Similar to what you are doing. How to design a CSS for a centered floating confirm dialog?
Look at the answers provided by Steve Robbins and Cristian Toma. Those I think might help you.
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
Ok , so below is my CSS AND HTML code. I have been using percentage for the divs so that those divs can re-adjust to bigger screen sizes . The annoying thing is that when I resize the window to a smaller size on my computer , those elements keep moving till they overlap and I don't want that . How can I use percentages to make those divs re-adjust to bigger resolutions , yet not move when resizing the window to a smaller size based on the CSS and HTML I have below
Here is the CSS
body{
background:#F4F4F4;
background-size:100%;
width:100%;
height:100%;
margin:0 auto;
min-width:1300px;
min-height:750px;
}
.logo{
position:absolute;
left:40%;
top:5%;
}
.logo_homepage{
position:absolute;
left:4%;
top:5%;
}
.homepage_slogan{
position:absolute;
left:3%;
top:45%;
}
.search_box{
position:absolute;
left:30%;
top:30%;
width:35%;
height:50%;
min-width:35%;
min-height:50%;
}
.user_info{
position:absolute;
left:75%;
height:100%;
width:20%;
min-width:20%;
background:white;
}
.header{
position:absolute;
top:0px;
width:100%;
min-width:98%;
height:100px;
min-height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:absolute;
top:60%;
left:40.5%;
}
.login{
position:absolute;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
#slides{
position:absolute;
top:20%;
width:50%;
background:transparent;
height:20%;
left:25%;
}
.socialfeeds{
position:absolute;
top:41%;
width:25%;
height:52%;
min-width:25%;
min-height:52%;
left:25%;
}
.heading{
position:absolute;
top:20%;
width:100%;
min-width:100%;
height:10%;
min-height:10%;
left:2%;
}
.bucket{
position:absolute;
top:18%;
left:20%;
width:13%;
min-width:13%;
}
.title{
position:absolute;
top:20%;
left:32%;
width:30%;
min-width:30%;
}
.feed_icons{
margin:20px;
}
.featured{
position:absolute;
top:30%;
width:30%;
min-width:30%;
background:transparent;
height:60%;
min-height:60%;
left:60%;
}
and the HTML
<body class="whitebackground">
<div class="header">
<div class="logo"><img draggable="false" src="/images/logo.png" /></div>
<div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
<div class="login"><img draggable="false" src="/images/login.png" /></div>
</div>
<div class="bucket">
<span class="feed_icons"><img draggable="false" src="/images/bucket.png"/></span>
</div>
<div class="title">
<span class="feed_icons"><img draggable="false" src="/images/title.png"/></span>
</div>
<div class="socialfeeds">
<span class="feed_icons"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></span>
</div>
<div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
<div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013©</span></div>
</body>
Position: absolute pulls the elements out of the DOM rendering rules. The CSS as written tells the browser to always place these elements at X position no matter what size of the element or screen. A List Apart has an excellent article for getting a good grounding in how positining works: http://alistapart.com/article/css-positioning-101
Remove the positioning and instead use either the "display:" or "float:" properties. Things will begin to flow according to the DOM rendering rules.
In addition, make sure applied CSS classes have functional or semantic naming. Avoid using classes that make reference to design treatment since things like colors/big/small can and do change over time., ie, "whitebackground". The code is much better served using something like the "client-name" or .theme and then declaring the background color for that class or on the BODY tag.
HTML Mark-up
<body class="site-body">
<div class="header">
<div class="logo"><img draggable="false" src="/images/logo.png" /></div>
<div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
<div class="login"><img draggable="false" src="/images/login.png" /></div>
</div>
<div class="bucket">
<span class="feed_icons"><img draggable="false" src="/images/bucket.png"/></span>
</div>
<div class="title">
<span class="feed_icons"><img draggable="false" src="/images/title.png"/></span>
</div>
<div class="socialfeeds">
<span class="feed_icons"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></span>
</div>
<div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
<div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013©</span></div>
</body>
CSS:
.header {
height: auto;
overflow: hidden; /* clears floated child elements */
width: 100%;
min-width: 98%;
}
.logo, .slogan, .login {
display: inline-block;
}
/* or...
.logo, .slogan, .login {
float: left;
} */
.slogan {
margin-left: 40.5%;
}
It's better to use media-queries here.
#media all and (max-width: 60%) and (min-width: 30%) {
..........whatever you want to do...................
}
for more info on media-queries visit: css-media-queries