I cant get my text to align right:
#login_status
{
font-size: 1.2em;
text-align: right;
display: block;
float:right;
}
Here is the other pertinent css:
#logo
{
position: absolute;
top: 15%;
margin-left: 1em;
}
#login_status
{
font-size: 1.2em;
text-align: right;
display: block;
float:right;
}
#header_container
{
background: #7fc041;
height: 7.4em;
left: 0;
right: 0;
position: fixed;
width: 100%;
top: 0;
}
#header_text
{
margin-left: 9.75em;
font-size: 2em;
color: White;
font-style: italic;
}
and the html/server controls:
<div id="header_container">
<div id="header">
<div id="headerBar">
<img src="images/logo.png" id="logo"/>
<span id="header_text">Scrum Reports</span>
<asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="login_status" />
</div>
</div>
</div>
Well I'm no asp.net expert, but I see you using #login_status with text-align: right and CssClass="login_status", which seems to me like it would output
<div class="login_status">
Thus you should either change #login_status to .login_status, or have it set the id rather than the class because the styles seem to be fine.
http://jsfiddle.net/ExplosionPIlls/mzUTW/
Related
How can I center my webpage only with html & css? I tried it with margin: auto, margin: 0 auto and also margin-left: auto & margin-right: auto. Nothing seems to work from the things I've read on the internet. I'll show you my code. I want that everything is centered. Every Div. And compatible with mobile Applications.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
}
.social {
float: left;
text-align: center;
margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px;
}
.social #spotifylogo {
position: relative;
bottom: -7px;
}
.social #fblogo {
position: relative;
bottom: 1px;
left: -1px;
}
.social #twitterlogo {
position: relative;
bottom: 1px;
left: 6px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
float: left;
position: relative;
right: -495px;
margin-top: 25px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
position: relative;
right: -225px;
bottom: -100px;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>
if you want center items you can use 'flex-box'
something like this
html
<div class="Aligner">
<div class="Aligner-item">…</div>
</div>
and css
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
for this to work just warp the items with flex box (display: flex) you just put it on your title (h1)
this code is from this article :
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
also there is much more you can do with flex box
can also read abut flex box at w3s
https://www.w3schools.com/css/css3_flexbox.asp
I made several tweaks but mainly removed all the flexbox information - this was the biggest change across the CSS edits. Hope this helps!
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
text-align: center;
}
.social {
text-align: center;
margin-bottom: 20px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
display: block;
max-width: 100%;
height: auto;
}
#headpic-image {
display: block;
margin: auto;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img id="headpic-image" src="headpic.jpg" width="900" height="500">
</div>
Do not use properties such as top,bottom,left,right to align items unless necessary. It's impossible to get a sensible layout in this way. You do not need to use position: "relative" for each item. A lot of your codes are wrong. I took these parts to comment lines for you to see. You can use flexbox for some structures to center items. Often marginx "auto" will work for inline-block or block-sized elements.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
/* margin-top: 50px; */
font-size: 40px;
font-weight: bold;
}
.social {
/* float: left; */
text-align: center;
display: flex;
justify-content: center;
/* margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px; */
}
.social #spotifylogo {
/* position: relative;
bottom: -7px; */
}
.social #fblogo {
/* position: relative; */
/* bottom: 1px;
left: -1px; */
}
.social #twitterlogo {
/* position: relative; */
/* bottom: 1px;
left: 6px; */
}
.nav {
text-align: center;
color: black;
font-size: 14px;
display: flex;
justify-content: center;
/* float: left;
position: relative;
right: -495px;
margin-top: 25px; */
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
text-align: center;
/* position: relative; */
/* right: -225px;
bottom: -100px; */
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>
add this in your CSS
div_id(div that you want to change) {
margin: 0 auto;
}
So I've been testing how my website looks with different screen sizes and I noticed my footer is positioned correctly at the bottom right of the screen for resolutions 800x600 to 1920x1080 BUT on 2560x1600 it does NOT position at the bottom right
/w h y/ ?
Im using CrossBrowserTesting
Here's my code:
body {
font-family: 'Courier New', Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
}
#wrapper {
position: relative;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
#verr {
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
right: 10px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 93%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<div id="manyarms">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" style="width:310px; height:250px;">
<p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
</div>
<div id="sensible">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
<p style="color:#6458b7;">He loves to pose for photos!</p>
</div>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Is this an error in my code or this a bug in CrossBrowserTesting?
Any assistance is greatly appreciated!
If you replace your :
#footer {
padding-left: 93%;
}
with
#footer {
float: right;
margin-right: 10px;
}
You will fix your div on the right and that regardless if the screen is large, medium or small.
your #wrapper streches and its css is - max-width: 100%;and your #footer is inside the #wrapper
soo maybe your content doesnt stretch the wrapper to full width and thats why the #footer isnt in the far right of screen(because its in far right of #wrapper)try to take #footer out of #wrapper OR make #wrapper width:100% and body and html width:100%
I'm trying to vertically centered align the text with my image. Currently, the text looks like it's aligned at the bottom of the image.
Here's my jsfiddle:
http://jsfiddle.net/huskydawgs/L5Le0w37/7/
Here's my HTML:
<div class="column-resources-box">
<img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
<h4 class="title-bar">Apple<br>
Center</h4>
<ul>
<li>Gala</li>
<li>Pink Lady</li>
<li>Fuji</li>
</ul>
</div>
Here's my CSS:
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
}
.column-resources-box img {
margin:0 2%;
float:left;
height:50px;
width:50px;
}
}
h4.title-bar {
color: #2251a4;
background: none;
font-family: 'Arial', inherit;
font-weight: normal;
text-transform: none;
line-height: normal;
margin: 0;
padding: 0;
text-align: left;
}
Try this out.
I wrapped the two items you want centered in the div, and then centered the image.
.wrap {
display:inline
}
.apple_image {
vertical-align:middle
}
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
}
.column-resources-box img {
margin:0 2%;
float:left;
height:50px;
width:50px;
}
}
h4.title-bar {
color: #2251a4;
background: none;
font-family: 'Arial', inherit;
font-weight: normal;
text-transform: none;
line-height: normal;
margin: 0 0 0 0;
padding: 0;
text-align: left;
}
<div class="column-resources-box">
<div class="wrap">
<a class="apple_image" href="http://en.wikipedia.org/wiki/Apple">
<img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
</a>
<h4 class="title-bar">AppleCenter</h4>
</div>
<ul>
<li>Gala</li>
<li>Pink Lady</li>
<li>Fuji</li>
</ul>
</div>
You could use absolute positioning to put things exactly where you want them.
Fiddle: http://jsfiddle.net/t8rL871j/
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
position: relative;
}
.column-resources-box img {
margin:0 2%;
height:50px;
width:50px;
position: absolute;
}
h4.title-bar {
color: #2251a4;
background: none;
font-family:'Arial', inherit;
font-weight: normal;
text-transform: none;
line-height: normal;
margin: 0 0 0 0;
padding: 0;
text-align: left;
position: absolute;
top: 10px;
left: 60px;
}
.column-resources-box ul {
margin:60px 2%;
height:50px;
width:70px;
position: absolute;
}
<div class="column-resources-box"> <img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
<h4 class="title-bar">Apple<br>
Center</h4>
<ul>
<li>Gala</li>
<li>Pink Lady</li>
<li>Fuji</li>
</ul>
</div>
There's a syntax error in your CSS. Here's your CSS, excerpted from the top:
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
}
.column-resources-box img {
margin:0 2%;
float:left;
height:50px;
width:50px;
}
}
Notice the extraneous close brace. That seems to be preventing the browser from getting to the remaining CSS.
Fixed: http://jsfiddle.net/L5Le0w37/13/
You can move it down a little to center it with position:relative; top:7px;:
Centered: http://jsfiddle.net/L5Le0w37/16/
I rewrote your code a bit but here's another possible way using top padding..
vertical-align: top;
padding: 4px 0px 0px 0px; /* adjust top padding */
http://jsfiddle.net/Hastig/mj5yzsr7/3/
You can adjust the spacing between Apple and Center with h4.title-bar { line-height: 25px; } then adjust the top padding to compensate.
Wrap your text and image inside of a div and style it like this:
HTML
<div class="appleWrapper">
<img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
<h4 class="title-bar">Apple<br>Center</h4>
</div>
CSS
.appleWrapper {
height: 50px;
}
.title-bar {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Check out the online example here
<div class="carousel-item-top">
<img class="img-responsive" alt="a" src="carousel/crsl-img-1.png">
<div class="carousel-item-top-hover">
<div class="buttons">
<a class="button btn" href="#">view larger</a>
<a class="button btn" href="#">more details</a>
</div>
</div>
</div>
This is the html for this piece of code. The text in the button btn classes i want centered, but for some reason it doesn't respond to text-align: center
.carousel-item-top {
position: relative;
}
.carousel-item-top-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #219fd1;
opacity: 0;
}
.carousel-item-top-hover .buttons {
width: 100%;
top: 45%;
position: absolute;
text-align: center;
left: 0;
}
.carousel-item-top-hover .buttons .button {
border-radius: 3px;
background-color: rgba(0,0,0,0.85);
padding: 6px 5px;
text-align: center;
text-transform: capitalize;
font-family: 'Roboto', Arial, sans-serif;
font-weight: 700;
color: #ffffff;
display: inline-block;
margin: 4px;
}
.carousel-item-top-hover .buttons .button:hover {
text-decoration: none;
}
And this is the css concerning the rebel element and its relevant neoighbors. Anyone has any ideea as to why it doesn't work?
A-ha! It seems it had a text-indent from somewhere, so i set it as none in the button class.
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?