I created a landing page like below:
I place the text and buttons in a div container and the alignment is correct but I am trying to move it below the logo so it looks naturally better. I tried using bottom to adjust the positioning but it does not reflect anything.
My code:
<body style="font-family:Verdana;color:#aaaaaa;">
<div class="backgroundImage logo">
<b>{{ __('SIGN UP AS A DEALER') }}</b>
<div class="container" >
<h1 > A home is made of <i>
<p >hopes</p></i> and <i><p >dreams</p> </i>
</h1>
<h1 >Let us<i> <p >inspire</p></i> you to build the perfect home!</h1> <br>
<a href="/login " class="btn grad1" ><b>{{ __('LOGIN') }}</b></a>
<b>{{ __('SIGN UP') }}</b>
</div>
</div>
</body>
SASS:
.backgroundImage {
background-image: url(/images/homepage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
* {
box-sizing: border-box;
}
a.btn {
color: black;
border-radius: 10px;
background-color: #fbcc34;
}
h1 {
color: white;
}
.a {
top: 50%;
}
p {
display: inline;
font-size: 75px;
font-family: "Dancing Script" cursive;
font-family: "Tangerine", cursive;
}
text-align: center;
position: relative;
top: 50%;
// Add media query for mobile devices
#media (max-width: 767px) {
h1 {
font-size: 120%;
float: left;
}
p {
font-size: 170%;
}
.backgroundImage {
background-image: url(/images/homepage.jpg);
background-repeat: no-repeat;
background-position: center;
}
}
Can anyone point out why is it not positioning to the center?
Edit:
The positioning is now fixed but however when I switch to mobile layout, it goes like below:
How do I center the first sentence?
so you have to set position so bottom,left,right,top works!
.container {
position: relative;
text-align: center;
bottom: 30px;
}
Try that!
Try the margin-top property, for example: <div class="container" style="margin-top: 200px;">.
Do you want to move only button or along with that text too? If you want to move only button use this:
<div class="backgroundImage logo">
<b>{{ __('SIGN UP AS A DEALER') }}</b>
<div style="padding-top:40%"></div>
<div class="container" >
<h1 > A home is made of <i>
<p >hopes</p></i> and <i><p >dreams</p> </i>
</h1>
<h1 >Let us<i> <p >inspire</p></i> you to build the perfect home!</h1> <br>
<a href="/login " class="btn grad1" ><b>{{ __('LOGIN') }}</b></a>
<b>{{ __('SIGN UP') }}</b>
</div>
</div>
Or you want to bring only buttons just replace that div before the button.
And I'm not sure about here 40%, please give which will suit you. Many would say it's not a proper way to get the result but we can do as this too.
Related
I am trying to design a weather website. In the body I have a div for my search bar, and then a div below it for the main area with the weather information. The problem is that there is a divider between the two (below the search area and above the main area) How do I get rid of this? I have tried margins but I can't figure out what I'm missing.
As well, I am trying to get these two divs to share one background image
Thanks in advance
<div class="searchArea">
<ul>
<li><div><input type="text" id="search_term" placeholder="Other Location ..."></div></li>
<li><div><input type="submit" value="Check Weather" onclick="findNewWeather()" /></div></li>
</ul>
</div>
<div class="mainArea">
<h1>City Name</h1>
<ul>
<li>
<div>
<h1>Current</h1>
<img src="http://openweathermap.org/img/wn/10d#2x.png" alt="today icon">
<h2>12oC</h2>
<h3>Feels: 9oC</h3>
<h3>Mostly Sunny</h3>
ETC ....
.weatherMain {
margin-top: 1px;
background-image: url("./WP.jpg");
background-size: 100%;
background-repeat: no-repeat;
color: gray;
padding: 25px0px;
display: flex;
flex-direction: row;
height: 600px;
font-family: poiret one;
font-size: 35px;
color: yellow;
font-weight: bold;
}
.searchArea {
background-image: url("./banff.jpg");
background-position: 0 -75;
height: 50px;
margin-bottom: 1px;
}
Given the code you posted above, I think the problem is that your <ul> and <h1> tags have their own margins that are pushing your <div> tags apart.
This should fix the issue:
.searchArea ul {
margin-bottom: 0;
}
.weatherMain h1 { // or .mainArea h1, your example has both
margin-top: 0;
}
To give them one background, I would recommend wrapping them in a <div> and applying the background image to that.
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
the heading and sub heading of a slider is not center aligned its working fine all on other screen sizes but in this screen size the heading and subheading floats to the left
#media screen and (min-width:992px) and (max-width:1199px) {
.position{
position: absolute;
padding-top: 240px;
}
.swiper-slide{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 60px;
line-height: 79px!important;
color: #fff;
}
.subtitle{
font-family: 'Rouge Script', cursive;
font-size: 40px;
line-height: 39px!important;
font-weight: 400;
color: #fff;
font-style: italic;
}
}
i'm using text-center bootstrap class for aligning the text
My HTML
<div class="item text-center">
<div class="position col-lg-12">
<h1 class="swiper-slide">
<strong>
welcome to the shop
</strong>
</h1>
<p class="subtitle">
<span>
Take your time looking around & don't be shy
</span>
</p>
<p class="top-space">
<button type="button" class="btn btn-default btn-lg button hvr-float-shadow" id="focus">
START BROWSING
</button>
</p>
</div>
<img src="img/front_girl1.jpg">
</div>
Use text-align:center; will align text in center .
check below code
.swiper-slide{
text-align: center;
}
.subtitle{
text-align: center;
}
this is cause the issue :
.position{
position: absolute;
padding-top: 240px;
}
remove absolute position and it will work properly
LIVE DEMO
It should work regardless of the positioning context. You should check specificity and display type(if element set to display:inline than text align will not apply directly to that element). Hard to say without live demo. Can you provide more code or a complete fiddle ?
I'm trying to build a small website that is one page with 5 stacked divs within the body. The first and second div are fine but all the divs after that(3, 4, and 5) all repeat the unique background image when the site is viewed in IE9. The site works fine in FF 20.0.1, IE10, IE 10 compatibility, and IE9 compatibility so this issues appears to only show up in IE9. I have taken everything out of the CSS and html except for just those 5 containers and find that I can't pinpoint the issue causing the background images to duplicate in the 3rd, 4th, and 5th div. I've also repeated the second div and it also duplicates the background in the second instance. If anyone has any insight as to what I am missing I would greatly appreciate it.
Also, I have played with no-repeat and other ideas I found while searching for a solution but nothing has worked for me at this point.
CSS:
* {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
font-family: Myriad, Arial, Helvetica, sans-serif;
}
p {
margin-bottom: 1em;
}
a {
color: #60789c;
text-decoration: none;
}
a:visited {
color: #60789c;
}
img {
border: 0;
}
body {
margin-bottom: 0px;
margin-top: 0px;
}
div#content {
margin: auto;
padding: 0;
width: 900px;
}
div#SectionOne {
Background-image: url(../images/section1.jpg);
height: 707px;
width: 100%;
}
div#SectionTwo {
Background-image: url(../images/section2.jpg);
color: #FFFFFF;
height: 1159px;
width: 100%;
}
div#SectionThree {
Background-image: url(../images/section3.jpg);
height: 668px;
width: 100%;
}
div#SectionFour {
Background-image: url(../images/section4.jpg);
height: 1385px;
width: 100%;
}
div#SectionFive {
Background-image: url(../images/section5.jpg);
height: 1165px;
width: 100%;
}
And this is the HTML:
<body>
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo" />
</div>
<div id="SectionThree">
<a name="SectionThree"/>
</div>
<div id="SectionFour">
<a name="SectionFour"/>
</div>
<div id="SectionFive">
<a name="SectionFive"/>
</div>
</div>
</body>
Close your a tags like this <a name="SectionXXX"></a> rather than this <a name="SectionXXX" />
HTML
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo"></a>
</div>
<div id="SectionThree">
<a name="SectionThree"></a>
</div>
<div id="SectionFour">
<a name="SectionFour"></a>
</div>
<div id="SectionFive">
<a name="SectionFive"></a>
</div>
</div>
All I can suggest with what you've posted is that you change Background-image to background-image ... but that's a long shot.
Also your <a> elements are incomplete; and the name attribute is out of date now. Use IDs instead. That is, if you want to link to one of those divs, use this:
Go to Section Five
Then just get rid of those as in the divs altogether.
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)