I've got a div for my header and a text in that div. Now I have figured out how to put that text at the bottom of the div but I can't seem to put it in the center.
text-align: center; didn't work.
#heading {
position: relative;
background: -webkit-linear-gradient(#acbfb9,#cae1da); /* For Safari */
background: -o-linear-gradient(#acbfb9,#cae1da); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#acbfb9,#cae1da); /* For Firefox 3.6 to 15 */
background: linear-gradient(#acbfb9,#cae1da);
height: 150px;
width: 100%;
}
#title {
position: absolute;
bottom: 20px;
}
<div id="heading">
<h1 id="title">StrAgility</h1>
</div>
First, your #title has not width set so it has the width of the text it contains if you use text-align:center; it won't center in the #header.
So you need to set width:100% on #title to and then text-align:center; will work as you expect.
see this
FIDDLE
CSS :
#title {
position: absolute;
bottom: 20px;
width:100%;
text-align:center;
}
Text-align center doesn't work for you as you'd expect as you haven't set the width of the title div. As such, it's currently sitting in the centre of the div, it's just that the div isn't wider than your text. So to change that add 'width:100%' and then add 'text-align:center'.
Ah, beaten to it.
Related
I have the following code that does not cover the full page height if a page has content beyond the normal view port (not having to scroll). If I scroll down the outer div displays for just a small bit and that goes back to white.
Why is the outer div not taking the full height of the page even if it requires scrolling?
html ,body {
height: 100%;
font-style: Helvetica;
}
.page_background, .page { margin: 0 auto; }
.page_background {
width: 100%;
min-height: 100%;
background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
background: linear-gradient(#282828, #888888); /* Standard syntax */
position: absolute;
/*height: 100%;*/
}
.page {
background-color: #FFFFFF;
width: 85%;
min-height: 100%;
bottom: 0;
position: absolute;
height: 100%;
left: 7.5%;
}
<div class="page_background">
<div class="page">
</div>
</div>
I created a fiddle to demonstrate what I am doing. You can even see if you scroll in the fiddle, it doesn't take the gray border.
https://jsfiddle.net/1qwwtgjp/
Edit: Your Main Issue is CSS Positioning
See here: https://jsfiddle.net/1qwwtgjp/3/
You have used position: absolute; in your styles, but are looking for your content to flow (and your background height with it). Remove all the absolute positioning, including the left, bottom, etc, and the explicit height on your .page element so it can flow to whatever height it truly is. This will bring the outer wrapper along with it.
So the new styles for your .page class should be:
.page {
background-color: #FFF;
width: 85%;
min-height: 100%;
/** REMOVE THESE: **/
/* left: 7.5%; */
/* bottom: 0; */
/* position: absolute; */
/* height: 100%; */
}
Old Answer:
If I understand your question correctly, you may simply not be aware that browsers tend to have default margins on the <body> tag.
Simply add a style to remove it:
html, body { margin:0; }
and see if that solves your issue.
You can fix this by assigning overflow property to hidden for the outermost wrapper div.
.outerpagewrapperdiv{
overflow:hidden;
}
Here is the thing.. I have a web page split to 2 sections (intro and main)
The intro section stretches to 100 based on the browser height with CSS:
#intro {
height: 100vh;
}
I want to add an arrow with href that will be positioned at the bottom section of the intro div no matter which screen size is entering the page.
Do you have any idea how can it be done?
Thanks!
#intro {
...
position: relative; /* or absolute, as appropriate */
}
#down_arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -25px; /* half the element's width */
}
This assumes markup similar to the following. In the future, please provide your markup in your question.
<div id="intro">
<div id="down_arrow"> ... </div>
</div>
Set position:relative to the #intro element and position:absolute to the arrow.
Also give a bottom and left rule:
#arrow {
width:40px; /* sample width - set as you wish */
position:absolute;
bottom:10px;
left:50%;
margin-left:-20px; /* important: set half of the width (centers the div) */
}
margin-top:90vh
:D and I need to write some text so stackoverflow knows I'm not spamming.
Rich homie quan is a good rapper. I think the limit has been reached, now.
Did You mean something like this Fiddle
I use positioning of intro element as relative and set this viewportheight as you want.
So if i set arrow postion to absolute it will stay inside intro element.
.arrow{
width: 50px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25px;
}
Using flexbox (demo):
<div class="intro">
<div class="nav"></div>
<div class="link-container">
<a>Arrow</a>
</div>
</div>
<div class="main"></div>
CSS:
.intro {
height: 100vh;
display: flex;
flex-direction: column;
background: blue;
}
.intro > .link-container {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
...
Place the arrow inside of the intro container and use:
.arrow{
bottom: 0px;
}
you may also need to fiddle around with the POSITION property as well, but this should give you what you need. Hope this helps!
.section2 {
position:fixed;
bottom:0;
}
#intro {
position: relative;
}
Add appropriate styles to make it as center of the screen.
I'm working with my project.
I want 3 divs to be in one line and fixed position..
First div is repeated x
2nd div is in middle
Last div is repeated x.
I want my output to be like this:
http://jsfiddle.net/9o22xe2x/
<div class="header-fixed">
<div class="header-bg1"></div>
<div class="header-logo"></div>
<div class="header-bg2"></div>
</div>
CSS
.header-fixed{
position: fixed;
top: 0;
width: 100%;
}
.header-bg1{
background:url('images/header-bg1.png') repeat-x;
height: 88px;
left: 469px;
display: block;
}
.header-bg2{
background:url('images/header-bg2.png') repeat-x;
height: 128px;
left: 469px;
display: block;
}
.header-logo{
background:url('images/header-logo.png') no-repeat;
width: 469px;
height: 128px;
}
add below to your css:
.header-fixed div {
float: left;
clear: none;
}
then in the HTML call it as:
<div class="header-fixed">
<div class="header-bg1"></div>
<div class="header-logo"></div>
<div class="header-bg2"></div>
</div>
try and see !
Using display: inline-block you can do:
Add that style to child divs:
.header-fixed>div{
display:inline-block;
vertical-align: top;
}
Remove whitespace between those divs. Note the commented HTML in the fiddle.
add some width to the first and third child div like:
.header-bg1, .header-bg2{
width: calc((100% - 469px)/2);
/* 100% of parent width minus the logo width divided */
/* with 2 will put the same width for the first and third child */
/* and center the logo */
}
caniuse CSS calc()
JSFiddle
Note: I've added margin: 0 to the body to remove it's default margin.
Here is a simple implementation with 2 lines of HTML and a small amount of simple CSS:
First background is a background image on the body
Logo is an image in the header.
Second background is on a pseudo element of the header which is positioned with position: absolute and left: (logo width) / top: 0;.
Tested and working Chrome, Firefox and IE 9 + (IE 8 and even IE 6 and 7 is possible with modification)
Example
Note: The default margin on the body has been removed to prevent a gap.
body {
background: #D3BC00 url('http://i.imgur.com/tZR9xWD.png') repeat-x;
margin: 0;
}
header {
position: relative;
background: #D3BC00;
width: 500px;
/* smallest size is logo width */
margin: 0 auto;
}
header:before {
content: '';
display: block;
height: 100%;
background: #D3BC00 url('http://i.imgur.com/GkQQ4PF.png') repeat-x;
position: absolute;
width: 100%;
top: 0;
left: 469px;
/* logo width */
}
<header>
<img class="logo" src="http://i.imgur.com/m3EiiKN.png" />
</header>
I have the following code for a section on my website: http://jsfiddle.net/qda6bkze/
The problem is, I can't get it to be responsive. Ideally, I'd like for the orange box and the picture to align themselves so that the picture overlaps the orange box. Something like this: http://puu.sh/bMb8M.jpg
I know I'll have to use media queries, but I was wondering what changes to make in order for the image to align itself under the orange block, since right now it sits to the right no matter how big the browser window is.
Here's what i have for CSS now:
.home-feature4 {
position:relative;
max-width:1200px;
}
#boxy {
width:1200px;
height:790px;
}
.feature4text, .orangeblock, .orangephoto {
position: absolute;
text-align: center;
}
.feature4text {
z-index: 2;
color:#32719a;
font-family:"Scout", sans-serif;
text-transform:uppercase;
font-size:12pt;
top: 100px;
left: 120px;
width:425px;
}
.orangeblock {
z-index:1;
top: 280px;
left: 20px;
}
.orangephoto {
z-index: 3;
top: 0px;
left: 600px;
}
Take out the top and left properties and add float: left;
Like so:
.orangephoto {
z-index: 3;
float: left;
}
A reference for the float property (and others) from W3 Schools
You need to give your div an "ID" and place the image inside the div. I wrote some mark up for you below feel free to copy it and make adjustments for it to work on your site. Let me know if you have any further questions I would be happy to help.
/* Your can adjust the CSS however you see fit for your Project */
#orangeblock {
width:410px; /* Give your background block extra pixels needed for your border */
height:310px; /* Same with your height */
background-color:#CCC;
}
#orangeblock img {
width: 390px; /* your image size shouls always be smaller than your div size */
height: 290px; /* This will allow you to see the background image */
padding: 10px; /* Your padding will have to be adjusted to get the image where your want */
/* you can also use padding-left: padding-right: padding-top: padding-bottom: and place whatever pixels you like */
}
<html>
<head>
</head>
<body>
<div id="orangeblock">
<img src="https://cdn.shopify.com/s/files/1/0636/3475/files/home-ossection-04-photo.jpg">
</div>
</body>
</html>
I have horizontally centered some overflowed text (actually I found this on stack overflow). I'm trying to vertically center it to no avail.
The HTML:
<div id="outer"><div id="inner"><div id="text">some text that will overflow</div></div></div>
Here's the CSS:
#outer {
display: block;
position: relative;
left: 100px;
width: 100px;
border: 1px solid black;
background-color: silver;
height: 150px;
}
#inner {
/* shrink-to-fit width */
display: inline-block;
position: relative;
/* shift left edge of text to center */
left: 50%;
}
#text {
/* shift left edge of text half distance to left */
margin-left: -50%;
/* text should all be on one line */
white-space: nowrap;
}
I have an adapted fiddle here:
http://jsfiddle.net/HfT72/
Does anyone have any thoughts?
Working JSFiddle, though I don't know if this solution is useful to you.
I set the #inner wrapper to top: 50%; as well as setting position:relative for the #text, then displacing it by top:-8px(half of the font height of 16px).
There might be a better solution, but vertical centering has rarely a clean solution.
Edit: Updated JSFiddle showing the difference between my solution and the above one. Resize the preview window to see what I mean.