How it should be: http://prntscr.com/59nrxz
How it is: http://prntscr.com/59nsfg
My HTML:
<div class="col-md-6 logo" id="header-logo">
<a href="{{ path('static_page', {template:'home'}) }}" title="Return Home">
<img alt="logo" src="static/img/Risne-Logo.png"></img>
<span class="logo_left">RISNE</span>
<span class="logo_right">STARS</span>
</a>
</div>
My CSS:
.logo_left, .logo_right {
font-family: "Droid Sans";
font-size: 34px;
top: -20px;
}
.logo_right {
color: #FECD0F;
}
.logo_left {
color: #234371;
}
I don't care about font or anything, i just need to get the text to move to the right position.
Depending on what you want, a simple position: relative could do the trick.
.logo{
position: relative;
top: -20px; /* This will move it 20px up */
left: 20px; /* This will move it 20px to the right */
}
That'a assuming that you put both of your span's in a div (or heading) that has a class of logo.
Try this it might do the trick :
.logo_left, .logo_right{
vertical-align : top;
margin-left : 10px;
}
Related
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.
I am trying to show an image inside the customized circular li. I just want to show a success tick image in that li. I have a CSS as -
span.round-tabs {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
li.success span.round-tabs.one {
background-image: url('img/if_Tick_Mark_Dark_1398912.png');
}
<li class="success">
<a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" >
<span class="round-tabs one">
<i class="icon icon-profile-male"></i>01
<h4>Patient's Details</h4>
</span>
</a>
</li>
But I am getting the result as:
instead of:
What am I missing here?
Either use
background-position: center center;
or use
background-position-y or background-position-x to position the image correctly.
Then you may want to make sure the size is correct using the background-size rule in CSS. If you post a jsfiddle, I'll be happy to implement this solution into that for you to see.
Html noob here. I'm trying to make a division that contains some ordinary text and a download button. I've got a paragraph for the normal text and an anchor with an image for the button. For some reason, the button wants to take the same alignment as the paragraph. I have this code:
p {
color: #fff;
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
}
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
<div id="downloadText">
<p>In the meantime, would you like to download a fun bubbles game for Linux?</p>
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>
</div>
Both the paragraph and the anchor end up aligned left. Why would this be? (note: if I change paragraph to align right, both will align right.) thanks in advance!
It's a bit unclear..
Run this snippet, hope it helps you:
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
p {
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
display: block /* Set display block, the element will move */
}
<div id="downloadText">
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</div>
The anchor is an inline element, which means its box is as large as its content. The box is positioned to the left because of the paragraph's style. The anchor's content might still be positioned to the right, but it doesn't matter because its width is as large as its content.
You've got a few options:
set a { position: absolute; right : 0 } in the style. Not great, imo
set the width of the anchor to 100% a { width : 100%; text-align : right } I also do not favor this option.
the most correct one css-wise is to wrap the anchor in another block-level element, e.g. another paragraph:
.installer-container {
text-align : right;
}
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
</p>
<p class="installer-container">
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.