I would like to know how to build this example for all resolutions ( from 27 to iPhone ), I would like to put my text just above my bottom image ->
.content {
display: inline-block;
width: 100%;
max-width: 800px;
margin: 0px auto 75px
}
.imgstyle {
float: left;
max-width: 800px;
width: 100%;
}
.textcontent {
text-align: left;
display: inline-block;
margin: 0 auto;
max-width: 300px;
position: absolute;
left: 0px;
right: 0px;
z-index: 1000;
width: 100%;
}
.hr {
height: 1px;
width: 50px;
background: #282828;
}
.textstyle1 {
font-family: 'GFS Didot', serif;
font-weight: 300;
text-align: left;
margin-top: 30px;
font-size: 40px;
}
.textstyle2 {
text-align: left;
line-height: 21px;
margin-top: 20px;
}
.textstyle3 {
text-align: left;
line-height: 21px;
font-weight: 700
}
<div class="content">
<img class="imgstyle" src="http://www.facticemagazine.com/newsletter/img/test/1.jpg" />
<div class="textcontent">
<div class="hr"></div>
<h1 class="textstyle1">Keep them<br/>closed</h1>
<p style="textstyle2">Helen Molsted by Arron Dunworth
<br/>Exclusive / November 11, 2016</p>
<p class="textstyle3">Read more ></p>
</div>
</div>
you have to remove the left: 0 and add right: 0.
Updated Fiddle
Try it:-
.textstyle1{
margin:0px auto;
float:right;
}
<h1 class="textstyle1">Keep them<br/>closed</h1>
or
.textstyle1{
margin:0px auto;
float:right;
}
P{
text-align:right;
margin:60px auto;
}
<h1 class="textstyle1">Keep them<br/>closed</h1><br>
<p>Helen Molsted by Arron Dunworth
<br/>Exclusive / November 11, 2016</p>
<p>Read more</p>
Related
I am trying to achieve similiar effect to this:
The header and its subheader are both vertically aligned to the image.
I've written following code:
http://jsfiddle.net/u4zxn4eb/
It works but is it the best way to achieve this?
<div class="wrapper">
<h1>
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
<div class="vertical_align">
Your company's name
<p>Description</p>
</div>
</h1>
</div>
CSS:
body {
background: lightgrey;
}
.wrapper {
background: grey;
width: 100%;
}
h1 {
font-size: 18px;
margin: 0;
position: relative;
top: 35px;
}
.vertical_align {
display: inline-block;
vertical-align: middle;
}
img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
p {
margin: 0;
}
EDIT
As #chrisbedoya suggested I shouldn't put div inside h1 tag.
Deleted.
Instead of using h1 tag to position the whole, it's better to apply these rules separately:
.vertical_align a,
.vertical_align p {
position: relative;
top: 40px;
}
Well, define "best". If your method is standards compliant and works in all browsers then use it. If you're interested, here's how I'd do it:
<style>
#header {
height: 100px;
margin: 0px;
padding: 0px;
width: 500px;
}
#rectangle {
background-color: #f0f0f0;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 500px;
z-index: 1;
}
#square {
background-color: #ff0000;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 20px;
top: 20px;
width: 80px;
z-index: 2;
}
#text {
/* background-color: #00ff00; */
margin: 0px;
padding: 0px;
position: absolute;
left: 120px;
top: 41px;
width: 360px;
z-index: 2;
}
h1 {
font-family: Arial;
font-size: 20px;
line-height: 20px;
margin: 0px;
padding: 0px;
}
p {
font-family: Arial;
font-size: 12px;
line-height: 12px;
margin: 5px 0px 0px 0px;
padding: 0px;
}
</style>
<div id="header">
<div id="rectangle"></div>
<div id="square"></div>
<div id="text">
<h1>Company Name</h1>
<p>Company Tagline</p>
</div>
</div>
Well, this question is way too subjective and better suited for CodeReview. But I thought I'd give you my input.
First, let's clean up the HTML. Get some HTML5 in there as well.
<div class="wrapper">
<header>
<a href="#" class="logo-link">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
</a>
<div class="vertical_align">
<h1>Your company's name</h1>
<h2>Description</h2>
</div>
</header>
</div>
Then make the CSS nice and tidy. We don't need much:
.logo-link {
display: inline-block;
position: relative;
top: 24px;
margin: 0 24px;
}
.logo-link img {
display: block;
}
.vertical_align {
display: inline-block;
vertical-align: top;
}
Here's an example.
I would use a position: relative property to align the image slightly below the header like you have in your image there.
I am new to this, so I have this problem where the contents in the page will be shifted when the browser is minimized. When the browser is minimized, the contents including the logo will be shifted and the contents will be shifted out of the blue transparent background.
here is my css codes
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1300px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.whole{
margin: 0px auto;
height: 1242px;
width: 1000px;
}
.clear{
margin: 0 auto;
clear: both;
}
.logo {
width: 460px;
height: 170px;
margin: 0 auto;
}
.fax {
margin: 0 auto;
width: 480px;
height: 110px;
margin-right: 267px;
}
.fax p {
color: white;
font-family: 'Istok Web', sans-serif;
font-size: 35px;
text-align:center;
float:left;
margin: 0 auto;
margin-top: 55px;
width: 394px;
}
.faxLogo{
float: left;
height:60px;
width: 60px;
margin: 0 auto;
margin-top: 40px;
margin-left: -385px;
}
.tel{
margin: 0 auto;
width: 480px;
height: 70px;
margin-right: 267px;
}
.telDetails{
float:left;
height: 10px;
}
.telLogo{
float: left;
height:60px;
width: 60px;
margin: 0 auto;
margin-top: -10px;
margin-left: 65px;
}
.tel p {
color: white;
font-family: 'Istok Web', sans-serif;
font-size: 35px;
text-align: center;
margin:0 auto;
margin-top: 10px;
margin-left: 10px;
}
.locationLogo{
float: left;
height: 60px;
width: 60px;
margin: 0 auto;
margin-left: 65px;
}
.location{
margin: 0 auto;
width: 500px;
}
.location p {
color: white;
font-family: 'Istok Web', sans-serif;
font-size: 35px;
float: left;
margin:0 auto;
margin-top: -35px;
margin-left: 160px;
line-height: 60px;
}
.detail1 {
margin: 0 auto;
text-align:center;
}
.detail1 p{
font-size: 45px;
font-family: 'Istok Web', sans-serif;
color:white;
text-align:center;
margin-left: 130px;
}
.detail2 {
font-size: 45px;
font-family: 'Istok Web', sans-serif;
color: white;
margin: 0 auto;
}
.detail2 p{
margin-top: -20px;
text-align:center;
margin-left: 45px;
}
here is my HTML codes
<div class="clear" style="height: 445px;"></div>
<div class="whole">
<div class="logo"><img src="images/logo_3.jpg" /></div>
<div class="clear" style="height:50px;"></div>
<div class="detail1">
<p>TEXT</p>
</div>
<div class="detail2">
<p>TEXT</p>
</div>
<div class="clear" style="margin-top:-53px;"></div>
<div class="location">
<div class="locationLogo">
<img src="images/location.png" />
</div>
<div class="locationDetails">
<p style="width: 500px;">TEXT<br />TEXT<br />TEXT</p>
</div>
</div>
<div class="tel">
<div class="telLogo" style="width: 10px;">
<img src="images/tel.png" />
</div>
<div class="telDetails">
<p style="width: 365px;">TEXT</p>
</div>
</div>
<div class="fax">
<div class="faxLogo" style="width: 10px;">
<img src="images/fax.png" />
</div>
<div class="faxDetails">
<p style="width: 394px;">TEXT</p>
</div>
</div>
</div>
Your content inside your transparent box moves when the window resizes but your transparent box is part of the background image. Use the oil rig as a background image and put your content in a div. Something like this:
.box {
width: 100%;
height: auto;
background-color: rgba(0,0,255,0.5);
}
<div class="box">
<ul>
<li>SOME CONTENT HERE</li>
<li>SOME CONTENT HERE</li>
<li>SOME CONTENT HERE</li>
<li>SOME CONTENT HERE</li>
</ul>
</div>
You can now place the div wherever you see fit on your page.
This is the layout I'm trying to achieve with my page:
Basically, the hero and sidebar are two columns on the page. The hero text and image should both be in one div, so they should be treated as one element, like the sidebar. The div with the content ID has max-width: 1150px;. The reason I'm including the hero text and image separately is because I want to point out that the hero image is a div with a background-image, as opposed to an img element.
The elements are structured like this:
<div id="content">
<div id="hero">
<div id="heroText">
</div>
<div id="heroImage">
</div>
</div>
<div id="sidebar">
</div>
</div>
The method I'm using right now is where I put float: left; on the div with ID hero, and float: right; on the div with ID sidebar.
When I do this, and resize my browser below 1200px (margins + hero max-width + sidebar width), the sidebar goes below the hero, instead of the hero shrinking below its max-width value 800px.
How can I make the hero start to shrink instead of what happens now, the hero holding up until the browser shrinks below 900px (margins + hero width).
The CSS used currently is below:
#content
{
margin: 0px auto;
max-width: 1150px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
padding-top: 25px;
}
#hero
{
float: left;
max-width: 800px;
width: 100%;
}
#heroText
{
font-family: Lato;
font-size: 24pt;
font-weight: lighter;
height: 150px;
margin: 0px auto;
max-width: 600px;
text-align: center;
}
#heroText p
{
margin-bottom: 20px;
margin-top: 0px;
}
#heroImage
{
background-image: url(heroImage.png);
background-repeat: no-repeat;
background-size: contain;
height: 450px;
text-align: center;
}
#heroButton
{
margin-top: 90px;
width: 240px;
}
#news
{
float: right;
width: 300px;
}
#newsPane
{
background-color: #666666;
border-radius: 10px;
display: inline-block;
color: #fff;
height: 450px;
width: 300px;
}
#newsPaneText
{
font-size: 12pt;
font-weight: lighter;
max-height: 350px;
overflow: auto;
padding-left: 10px;
padding-right: 10px;
}
#newsPaneText h1
{
font-size: 18pt;
font-weight: lighter;
margin-top: 5px;
}
#newsPaneText small
{
font-size: 10pt;
font-weight: bold;
}
#newsPaneButton
{
margin-left: 60px;
margin-top: 25px;
width: 180px;
}
#emailPane
{
background-color: #e5e5e5;
border-radius: 10px;
color: #333;
display: inline-block;
height: 130px;
margin-top: 20px;
}
#emailForm
{
padding-left: 10px;
padding-right: 10px;
margin-top: 5px;
}
#emailField
{
background-color: #fff;
border: none;
border-radius: 5px;
color: #333;
font-family: Lato;
font-size: 14pt;
height: 27px;
margin-top: 10px;
padding: 0px;
width: 280px;
}
#emailSubmitButton
{
float: right;
margin-top: 10px;
width: 120px;
}
#emailFormStatus
{
float: left;
font-size: 11pt;
font-weight: bold;
margin-top: 15px;
}
FIDDLE
HTML:
<div id="content">
<div id="news">
</div>
<div id="hero">
<div id="heroText">
</div>
<div id="heroImage">
</div>
</div>
</div>
CSS:
#content {
margin: 0px auto;
max-width: 1150px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
padding-top: 25px;
}
#hero {
max-width:800px;
margin-right:300px;
}
#heroText {
font-family: Lato;
font-size: 24pt;
font-weight: lighter;
height: 150px;
margin: 0px auto;
max-width: 600px;
text-align: center;
background:#FF6699;
}
#heroImage {
background-image: url(heroImage.png);
background-repeat: no-repeat;
background-size: contain;
height: 450px;
text-align: center;
background:#6699FF;
}
#news {
float: right;
width: 300px;
height:600px;
background:#66CC33;
}
I have an image of a web-browser that I am trying to position a text url over using position:absolute. The problem is that when I adjust the width of the page the text doesn't move the image in the fluid layout.
Device screen with text url example (what i'm trying to achieve): http://matthewhartman.github.io/base/
My code: http://jsfiddle.net/VwkwT/1/
HTML:
<div id="primaryContainer" class="primaryContainer clearfix">
<header id="Header">
<img id="Logo" src="img/logo.png" class="image" />
</header>
<section id="HeroDiv" class="centre">
<img id="Hero" src="img/browser.png" class="image" />
<div id="url">www.website.com</div>
</section>
<div id="box1" class="clearfix">
</div>
<div id="box2" class="clearfix">
</div>
<div id="box3" class="clearfix">
</div>
<div id="box4" class="clearfix">
</div>
</div>
CSS:
* {
margin:0px;
padding:0;
}
.primaryContainer {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 100%;
background-color: rgb(252, 252, 252);
}
#box1 {
float: left;
height: 1190.75px;
margin-left: 0px;
margin-top: 153px;
clear: both;
width: 100%;
background-color: rgb(244, 244, 244);
}
#box2 {
float: left;
height: 759.40625px;
margin-left: 0%;
margin-top: -90.5px;
clear: none;
width: 100%;
margin-right: 0%;
background-color: rgb(242, 242, 242);
}
#Logo {
float: left;
width: 190px;
height: auto;
margin-left: 13.893926%;
margin-top: 41.75px;
margin-bottom: 45.75px;
clear: none;
}
#box3 {
float: left;
height: 733.828125px;
margin-left: -100%;
margin-top: 668.90625px;
clear: none;
width: 100%;
margin-right: 0%;
background-color: rgb(184, 218, 242);
}
#box4 {
float: left;
height: 733.828125px;
margin-left: 0%;
margin-top: 0px;
clear: both;
width: 100%;
margin-right: 0%;
background-color: rgb(244, 244, 244);
}
#HeroDiv {
position:relative;
height: 392px;
}
#url {
position:absolute;
font-size:11px;
color:#8B8B8B;
font-family: 'Candara', Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
}
#Hero {
position:relative;
width: 809px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
clear: both;
}
Any help is appreciated!
I have an image in my footer linked to my blog. This link is overflowing to the copyright and I have no idea why.
I never added a link to the copyright itself only to the image but for some reason when I hover over the copyright it links to the blog. I can't explain it this has never happened to me before.
Any help would be appreciated.
HTML
<footer>
<div class="footer">
<div class="left">
<img src="#" alt="">
<h6>Title</h6>
<p></p>
</div>
<div class="middle">
<p><a href="#"><img src="#" alt=""></p>
</div>
<div class="right">
<p><a href="#"><img src="#" alt=""></p>
</div>
</div>
</footer>
CSS
footer {
width: 100%;
background-color: #212119;
}
.footer {
margin: 0 auto;
width: 960px;
height: 350px;
margin-bottom: 10px;
color: #474741;
}
.footer .left {
margin-top: 20px;
margin-left: 10px;
float: left;
width: 33%;
text-align: left;
}
.footer .left img {
margin-top: 40px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
height: 110px;
width: 113px;
}
.footer .left h6 {
color: #474741;
margin-top: 10px;
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
font-family: arial, sans-serif;
}
.footer .left p {
margin-top: 40px;
font-size: 14px;
}
.footer .left p:last-child {
margin-top: -15px;
font-family: arial, sans-serif;
}
.footer .middle {
text-align: center;
margin-top: 40px;
float: left;
width: 33%;
}
.footer .middle p {
margin-top: 0px;
}
.footer .right {
text-align: center;
float: right;
width: 33%;
}
.footer .right p {
margin-top: -152px;
}
.copyright {
clear: both;
}
.copyright p{
margin: 0 auto;
width: 960px;
color: #e8ad4f;
font-size: 20px;
margin-bottom: 10px;
vertical-align: top;
}
You need to close your a tags...
<p><a href="#"><img src="#" alt=""></p>
... becomes ...
<p><img src="#" alt=""></p>
Otherwise everything that follows will be enclosed in the link.