I have a JS fiddle here. It's been a while since I've worked in CSS and HTML...
http://jsfiddle.net/Peege151/4Au3c/
Here is the HTML
<body>
<div id="logo" style="font-family: AlexBrush-Regular;font-size:500%">
XYZ
</div>
<div id="content">
<div id="navbar">
Item Item Item
</div>
<div id="main">
<div id="fb">
</div>
<div id="tweet">
</div>
<img src="/emmybg.jpg" alt=""style ="height:600px">
</div>
</div>
</body>
and this is my css
body {
background-color:#666666;
text-align: center`
}
#content{
width: 75%;
background-color:#666666;
margin-left: 10%;
margin-right: 10%;
margin-top: 3%;
}
#navbar{
height:30px;
width:100.4%;
background-color:#000000;
color: #ffffff
}
#font-face {font-family: AlexBrush-Regular; src: url('AlexBrush-Regular.ttf');}
logo {
font-family: AlexBrush-Regular;
text-align:center;
}
#tweet {
float:right;
width:17%;
height:600px;
border:solid red;
}
#fb {
float:left;
width:17%;
height:600px;
border:solid red;
}
#main {
height:600px;
width:100%;
border: solid black;
overflow:hidden;
}
#main .img{
float:left;
height:500px;
border: solid black;
}
#footer{
height:30px;
background-color:#000000;
color: #ffffff
}
Notice in the JSFiddle - As the page resizes, those red content boxes stay the same size.
In the middle of those, I have an image...
When the page is resized, the image pops on another line. I would like to force the image to stay in-line..."
If possible though, I would like the image to "disappear" under the red content boxes, so the aspect ratio isn't changed. If they go beyond the far edges of the red boxes, I will hide overflow there.
Is that possible?
Hopefully I have phrased my question clearly.
Thanks for your help!
Try setting the image as a background, rather than an <img> tag?
I added these to the #content styles
background-image:url(http://placekitten.com/600/600); /* I used a placekitten since I can't see your example image*/
background-repeat:no-repeat;
background-position:center center;
Note that background-position:center center; ensures the sides get cut off if the image is too big, but the image is always central.
Here's an updated fiddle: http://jsfiddle.net/4Au3c/2/
Related
I have a blank HTML page and I want to align 2 elements...Vertically and Horizontally. These elements are a <img> tag, a <p> tag for text, and 2 <div> tags for containing those elements...
When I resize my window I don't want these elements to be cut-off by my browser. After countless hours of trying to figure this out, and searching Stack and various other websites...I came close, but I could never get it 100% like I want it...
There's this white-space at the bottom and the ride side of the bordered second div near the text, and the culprit appears to be the <p>. When I get rid of the tag the white-space goes away. However, I want the text under the image so I need it...
The white-space is making me question whether the content is placed in the center or not. How can I get rid of it?
HTML
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<br> UNDER CONSTRUCTION!
</p>
</div>
</div>
</body>
CSS
body
{
margin:0;
background-color: seagreen;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
I changed you HTML to enclose your text in a span tag and removed the br:
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<span>UNDER CONSTRUCTION!</span>
</p>
</div>
</div>
</body>
Then I added this to your CSS. It styles the enclosing span as a block, so you don't need to <br> tag in your HTML. It also uses line-height to adjust spacing above and below the line of text.
#content span {
display: block;
margin: 0;
line-height: .8;
}
And removed the position attribute from here:
#container
{
/*position:relative;*/ /* Removed */
height:100%;
width:100%;
min-width:400px;
}
Here is a sample fiddle
UPDATE
It appears the reason why you are seeing white-space still on Firefox is that you are using outline instead of border on your CSS for #content.
I don't know exactly why Firefox is rendering the outline differently. But if you change your CSS for #content to the following, you'll get the same result on Chrome, Firefox, Edge and IE (11).:
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*outline:3px solid red;*/
border: 3px solid red;
}
Here is the updated fiddle
I have gone through your code . i have made some changes in above given code . I hope this gone be helpful to you.
CSS
body
{
margin:0;
background-color: seagreen;
}
img{
display: block;
margin: auto;
width: 50%;
}
/* add this css to remove the white space under text */
p
{
margin-bottom: -9px !important;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
margin-top: 200px;
padding-top: 10px;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
<div id="container">
<div id="content">
<img src="http://spectrumapartments.com.au/wp-content/themes/spectrumapartments/img/building/red-squares.png" alt="Under Construction">
<br>
<p>UNDER CONSTRUCTION!</p>
</div>
</div>
I GAVE IT ANOTHER TRY, HOPEFULLY THIS WILL SOLVE IT FOR YOU. YOU SOUND VERY DESPERATE.
*{
border: 0;
margin: 0;
margin: 0;
}
.container {
font-size: 0;
}
.container span {
font-size: 35px;
background: #ff8ea1;
padding: 0;
margin: 0;
}
.container span.no-space {
display: inline-block;
vertical-align: top;
height: .75em;
line-height: .75em;
}
<div class="container">
<span>Under Construction</span>
<div style="height: 20px;"></div>
<span class="no-space">Under Construction</span>
</div>
TRY THIS ONE!
I have defined a Div which is 100% wide and 380 px in height. Within this Div, I want to display an image, text, and an image right in the middle and center.
I tried using this code -
<div id="mainContent">
<div class="wrapper">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1">
some random text I want to put in the middle
</div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
</div>
and the related CSS is
#mainContent {
background-color: #10AEEF;
margin: 0px auto;
border: 0px solid #000000;
width:100%;
height:380px;
text-align:center;
}
.wrapper {
text-align:center;
border:0px solid #00FF00;
}
.wrapper:before {
content:'';
height:100%;
display: inline-block;
vertical-align:middle;
}
.centered {
display: inline-block;
vertical-align:middle;
}
.g1 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
.text1 {
margin: 0px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 44px;
color: #FFFFFF;
border: 0px solid #FF0000;
width:50%;
float:left;
}
.g2 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
I am trying to avoid using a table to display this. But I want the centered class to be in the middle and center and within that g1 in the middle, text1 in the middle, and g2 in the middle.
Right now all are floating to left. But when I take it out, they are are aligned one on top of the other but in the middle. I think I am missing something basic.
If I understand your question correctly and you want both images and the text centred one on top of another then this is (I think) all you need:
#mainContent{
background-color:#10AEEF;
height:380px;
text-align:center;
}
Note that you specify things like border:0px solid #000000;. Essentially what you are doing is already specifying what is default, you don't need them.
EDIT
This is the code needed to center everything both vertically and horizontally:
<div id="mainContent">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1"><p>Some text here...</p></div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
And the css
#mainContent{
background-color: #10AEEF;
width:100%;
height:380px;
text-align:center;
position:absolute;
}
.centered{
position:relative;
top:50%;
transform: translateY(-50%);
}
Note: If you want to keep the wrapper div make sure you change the css from .centered to .wrapper
Can someone tell me why the contents of page-view-count & num-of-days div spills into top-header in my implementation?
Markup:
<div id="top-stats">
<div id="page-view-count">count</div>
<div id="num-of-days">num of days</div>
</div>
<div id="top-header"This is a test</div>
CSS
#top-stats{
width: 100%;
}
#page-view-count, #num-of-days{
color: #666;
text-shadow:1px 1px #FFFFFF;
font-size:13px;
font-weight: bold;
padding-bottom: 5px;
}
#page-view-count{
float:left;
}
#num-of-days{
float:right;
}
#top-header{
width:100%;
display:block;
background-color:#DBDB70;
border-radius:3px;
}
If I were to remove the float property it stacks up nicely inside top-stats.
See fiddle
I'm probably missing some simple rule but I'm probably looking too closely and need another pair of eyes..
#top-header{
clear: both;
width: 100%;
display:block;
background-color:#DBDB70;
border-radius:3px;
}
Fiddle
I have and I want that div has the same dimensions as the width of the browser less 30px in height and width to give an idea to have a white border. Whenever these divs resize the browser will adjust accordingly.
I did not use the border: 15px solid white because it will create scroll-bars and I do not want
I tried this but it creates also an scroll-bars.
<body>
<div id="background-wrapper">
<div id="main-wrapper">
<!-- <img src="bla bla" /> -->
</div>
</div>
</body>
#background-wrapper{
background-color:#FFF;
position:absolute;
width:100%;
height:100%;
background-color:#FFF;
}
#main-wrapper{
background-color:#F00;
position:relative;
float:left;
width:100%;
height:100%;
top:15px;
left:13px;
}
Any Ideas??
Why not get rid of the #background-wrapper element and then do this instead?
#main-wrapper {
position: absolute;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
An example can be found here.
You could try some padding on your inner div
<body>
<div id="background-wrapper">
<div id="main-wrapper">
<!-- <img src="bla bla" /> -->
</div>
</div>
</body>
#background-wrapper{
background-color:#FFF;
position:absolute;
width:100%;
height:100%;
background-color:#FFF;
}
#main-wrapper{
background-color:#F00;
position:relative;
float:left;
width:100%;
height:100%;
padding: 30px /*This shouldn't create scrollbars, but provide padding inside your divs*/
}
Try this:
body {
background-color: #fff;
}
#main-wrapper {
margin: 30px;
}
No need for background-wrapper.
I have a header bar that spans horizontally across my web page, which is comprised of one div tag and three nested div tags.
HTML:
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="rightTop">
RIGHT
</div>
<div id="centerTop">
CENTER
</div>
</div>
CSS:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#leftTop
{
display: inline;
float: left;
}
#rightTop
{
display: inline;
float: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
}
And it works just great, except for the fact that the div tags are out of order in the HTML code, which I don't like. If I order the div tags by placing them Left, Center, and Right, in the HTML, then the Right div just disappears from the webpage! I'm guessing that it has something to do with the float and text-align attributes having a conflict.
Anyone have any ideas on what is going on here, or is there an easier way to do this in CSS?
Try float: left; on #centerTop or display: inline on all three without any floats.
This works fine, but it depends on what you need. If you dont know the height of the content and you want it to expand dynamicly, then this is not enough:
#leftTop
{
float: left;
}
#rightTop
{
float: right;
}
#centerTop
{
float:left;
text-align: center;
}
I just tested the code from the original post in Firefox 3.0.10, Opera 9.64, IE8 and Google Chrome 2.0.181.1
All browsers showed all 3 divs, not a single div fell off the screen... Are you perhaps using IE6?
I am running your HTML and CSS of FF 3.0.10.
When you re-arrange the CENTERTOP div to be between the LEFTOP and RIGHTTOP divs, the RIGHTTOP div doesn't fall 'off the page' but the "RIGHT" text just falls off onto the next line.
My solution is proposed below (you'll notice I have some additions and some best-practice techniques).
HTML CODE:
<html>
<head>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
<div class="clearer">
</div>
<div id="randomContent">
RANDOM CONTENT
</div>
</body>
CSS CODE:
#top-bar {
margin: 0;
font-family: Arial;
}
#leftTop {
float: left;
width: 20%;
border: 1px solid red;
}
#centerTop {
float: left;
width: 20%;
border: 1px solid blue;
}
#rightTop {
border: 1px solid green;
}
.clearer {
clear: both;
}
#randomContent {
background-color: yellow;
}
So you'll notice in the HTML that the divs are arranged in order from LEFT to CENTRE to RIGHT. In this CSS, this has been reflected by floating the LEFTTOP and CENTRETOP divs left. You will also notice that I have specified a width property on the LEFTTOP and the CENTERTOP divs, to enable you to space out your divs as wide as you want. (You'll be able to visually see your width modifications as I've added in a border on the divs). No width percentage property has been applied on the RIGHTTOP div as it will consume the remaining 60% of the width (after the LEFTTOP and CENTRETOP have consumed the 40%).
I have also added a CLEARER div. Think of the CLEARER div is a horizontal line break. Essentially it acts as a line of demarcations to separate the floated divs from the content below.
You can then add whatever content you want in the RANDOMCONTENT div.
Hope this helps :)
I don't know that it disappears, but it would drop down a line. Lot's of websites put it out of order for that reason (I know I do).
Another alternative:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#top-bar>div
{
float: left;
width: 33%;
}
#rightTop
{
text-align: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
width: 34%;
}
And then put <br style="clear:both"/> right before you close your top-bar div.
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
<br style="clear:both"/>
</div>
Not sure if you want the width's defined like this, however.
Another solution:
Set the leftTop, centerTop, and rightTop to display:table-cell,
Set the top-bar to display:table-row,
Set a container to display:table
Set the width of the container and row (#table-bar) to 100%;
Set the width of the columns to the desired ratios (e.g., 25% for left and right, 50% for center)
caveat: table, table-row, and table-cell css display values do not work in IE 5.5 or 6 (and maybe Opera 8); but they do work nicely in all contemporary browsers. IE conditionals can be used to split code for IE > 5 and IE < 7.
TEST:
<html>
<head>
<title>3 Column Header Test</title>
<style type="text/css">
body#abod {
background-color:#F5ECBD;
color:#000;
}
#hdrrow {
margin:0;
padding:0;
width:100%;
border:1px solid #0C5E8D;
display:table;
}
#top-bar {
margin:0;
padding:1px 4px;
width:100%;
font-size:100%;
background-color:orange;/*#005555;*/
font-family: Arial;
border:1px solid #000;
display:table-row;
}
#leftTop {
margin:0;
padding:0 16px;
width:24%;
text-align:left;
color:#000;
background-color:#F0DD80;
border:1px dashed #f00;
display:table-cell;
}
#centerTop {
margin:0;
padding:0 16px;
width:40%;
margin:0 auto;
text-align:center;
color:#000;
background-color:#F5ECBD;
border:1px dashed #f00;
display:table-cell;
}
#rightTop {
margin:0;
padding:0 16px;
width:24%;
text-align:right;
color:#000;
background-color:/*#F0DD80;*/transparent;
/*shows the orange row color*/
border:1px dashed #f00;
display:table-cell;
}
#footer {
padding:25px;
color:#000;
background-color:#F5ECBD;
}
</style>
</head>
<body id="abod">
<div id="hdrrow">
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
</div>
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4>
</body>
</html>
Use relative positioning to swap the positions of the divs after they have been floated:
The HTML
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
The CSS
#leftTop {
width:33%;
float:left;
}
#centerTop {
width:33%;
float:right;
position:relative;
right:33%;
}
#rightTop {
width:33%;
float:right;
position:relative;
left:33%;
}
I use the same process in my Perfect Liquid Layouts to change the column source ordering.