I am trying to float my logo to the left in the header but it doesn't float to left at all. I would really appreciate if someone could point our my error since I am new to CSS.
This is my website if you would like to see my problem live: http://cashski.com/
Here is my HTML code:
<div id="navigation">
<div class="center_navigation">
Contact
Instagram Followers
Instagram Photo Likes
<img src="img/logo.png" />
</div>
</div>
Here is my CSS code:
body {
padding: 0px;
margin: 0px;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}
#navigation{
width: 100%;
height: 50px;
margin: 0px auto;
position: relative;
background-color: #2d5b89;
border-bottom: 1px solid #244a75;
}
.center_navigation {
width: 960px;
height: 50px;
margin:0px auto;
font-size: 16px;
}
.center_navigation a {
padding: 10px 0 10px 30px;
float: right;
margin-top: 4px;
color: #babcc5;
text-decoration: none;
}
.center_navigation a:hover {
color: white;
}
.center_navigation a img {
float: left;
}
The problem is your all anchor tags are float:right and your image is inside a anchor tag, so making img float:left doesn't change much.
So you either need to put the style on the container of image ie. anchor tag like this
<a href="index.php" style="float: left;">
<img src="img/logo.png">
</a>
or if your image is always in last anchor tag then you can also use this
.center_navigation a:last-child{
float: left;
}
Js Fiddle Demo
Related
The spent text with the teal background is meant to be a tag, and I want the tag to appear above the todo bar...kind of like this:
Like a small rectangle on top of a big one. So the tag would be on the top left corner of the todo bar. How would I achieve this? I've tried doing margin to the tag, but that did not work out at all.
CSS for the tag (style.css)
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
React JS code for the tag part (Todo.js)
<li className={`todo-item${todo.completed ? "completed" : ""}`}>
{isSpent && <p className="tag">Spent</p>}
{isReceived && <p className="tag">Received</p>} ${text}
</li>
In case anyone needs the whole of the todo.css file: https://pastecode.io/s/s5XZ9e3DRW
If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!
I think if yow will separate the tag and the navbar to two different div tags and put them on main div something like:
<div id="wrapper">
<div id="top-left">top left div</div>
<div id="down">down side div</div>
</div>
and the css will be something like (using grid on the main div):
#wrapper {
display: grid;
}
#top-left {
background: green;
width: 250px;
float:left;
margin-right: 20px;
}
#down {
background: blue;
float:left;
width: 500px;
}
the result is:
I would go with something like this, where input:focus could be a class set on on .container, for example, if the input has any values.
I couldn't understand why you used li and p in your original code, because you need to override so much stuff to make it look nice.
Using "rem" over a fixed pixel value is also preferred if you want to create a responsive site, where you just override the font-size in the body to make everything scale.
.container {
position: relative;
display: flex;
}
body,
input {
padding: 1rem;
}
.container.selected > .todo-item,
input:focus ~ .todo-item {
transform: translateY(-1rem);
}
.todo-item {
position: absolute;
left: 1rem;
transform: translateY(1rem);
transition: transform 400ms;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
<div class="container">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
<div style="padding-top: 1rem"><-- select this input</div>
</div>
<div class="selected container" style="padding-top: 2rem">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
</div>
body {
background-color: #48AEE0;
}
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
width: 80px;
text-align: center;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.other {
margin: 0;
display: inline-flex;
flex-direction: column;
}
input {
height: 30px;
width: 200px;
border: white;
margin: 0;
}
<div class="container">
<div class="tag">spent</div>
<div class="others">
<input type="text">
</div>
</div>
I have the following HTML:
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div>
<img
class="Section__item__image"
width="120px"
src="/static/images/test.jpeg"
>
<i class="Section__item__icon icon-right-nav-workflow"/>
</div>
<div class="Section__item__text">This is a descritption</div>
</div>
And this is my style using scss:
.Section {
&__item{
border: #EEF3F7 solid 1px;
padding: 10px;
height: 150px;
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
&:hover {
background-color: #E3F4FE;
cursor: pointer;
}
&__title {
text-align: left;
color: black;
font-size: 16px;
font-weight: 900;
}
&__image {
padding-top: 5px;
float: left;
}
&__icon {
float: right;
font-size: 40px;
}
&__text {
float: left;
}
}
}
The result is the following:
And what I need to get is the following:
I need the text to be under the image and where you see a "red" line in the right the text can't go further, if text is bigger then wrap text.
Also if you see right icon has to be positioned exactly on the same top level as the image.
Any clue?
There's loads of ways to do this (flexbox, grid, tables, absolute positioning). The oldschool way would be a clearfix but really you should avoid floats altogether. The simplest solution to what you have so far is to remove ALL of the float's; make the div that holds the image and the icon position:relative; and set the icon to position:absolute; top:0; right:0;.
.Section__item {
border: #EEF3F7 solid 1px;
padding: 10px;
min-height: 150px; /* changed to min-height so that it expands if there's loads of text */
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
width:400px;
}
.Section__item:hover {
background-color: #E3F4FE;
cursor: pointer;
}
.Section__item__title {
color: black;
font-size: 16px;
font-weight: 900;
}
.Section__item__imagewrap {
position: relative;
}
.Section__item__image {
margin-top: 5px;
}
.Section__item__icon {
font-size: 40px;
line-height: 40px;
position: absolute;
top: 0;
right: 0;
}
.Section__item__text {}
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div class="Section__item__imagewrap">
<img class="Section__item__image" width="120px" src="https://placeimg.com/320/240/any">
<i class="Section__item__icon icon-right-nav-workflow">i</i>
</div>
<div class="Section__item__text">This is a description. If the text is long it will wrap and the section__item's height will increase to fit the content.</div>
</div>
Uh... don't use float? Or rather, only use float on the one thing you want to break out of normal flow, which is the icon.
PS: <i> is not an autoclosing tag, so writing <i /> is incorrect even if browsers will likely ignore your mistake. Also, putting padding on an image doesn't seem right, I switched to margin-top in this code.
.Section__item {
display: inline-block; /* so it doesn't take full width of the snippet */
border: #EEF3F7 solid 1px;
padding: 10px;
height: 150px;
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
}
.Section__item:hover {
background-color: #E3F4FE;
cursor: pointer;
}
.Section__item__title {
text-align: left;
color: black;
font-size: 16px;
font-weight: 900;
}
.Section__item__image {
margin-top: 5px;
vertical-align: top;
}
.Section__item__icon {
font-size: 40px;
float: right;
}
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div>
<img class="Section__item__image" width="120" height="120">
<i class="Section__item__icon icon-right-nav-workflow">Icon</i>
</div>
<div class="Section__item__text">This is a descritption</div>
</div>
I am working on a navbar in HTML. I don't understand why the elements do not line up nicely within the navbar.
body {
background-color: #ECEFF1; /* Blue Gray 50 */
font-family: 'Roboto', sans-serif;
margin: 0;
}
#header {
background-color: #ba68c8; /* Purple 300 */
color: #ffffff; /* White */
height: 24px;
padding: 8px;
}
.header-link {
font-size: 24px;
text-decoration: none;
}
<div id="header">
<a class="header-logo" href="#">
<img src="http://www.sigmacubes.com/img/logo_h.svg" height="24" />
</a>
<a class="header-link" href="#">
Text
</a>
</div>
Although the svg is aligned vertically, the text does not stay aligned vertically. Why is this happening?
What you can do is reduce the header-link font size to 20px and give it position absolute
.header-link {
font-size: 20px;
text-decoration: none;
position: absolute;
}
Or if you want to keep the size 24px you better give it margin-top: -5px too
.header-link {
font-size: 24px;
text-decoration: none;
position: absolute;
margin-top: -5px;
}
Is vertical-align:middle; an option for your header-link class?
Maybe add display: table-cell; in conjunction with vertical-align:middle; if that further matches the look that you wanted.
Hi everyone I'm fairly new to HTML5/CSS, so I'm in need of some help.
The problem is the image won't go inside the box.
It's current placement is at the bottom left of the box.
I'd like to put it in the left side IN the box and the h2 and p on the image's right side
I'm just stuck as to what I'm missing
Also, is it okay if I create an id for each of the html element? it just seems like there are too many elements, and is this frowned upon in web design? If so, what's the proper way of doing it?
Thanks very much in advance
#featPost {
padding:70px 0px 0px 51.2px;
/* background-color: orange;*/
}
#featPost section {
width: 750px;
height: 261px;
border-style: double;
border-width: 4px;
border-color: black;
}
#featPost figure {
position: relative;
padding-right:20px;
float:left;
}
#featPost h1 {
font-family: "Calibri", Helvetica, sans-serif;
}
#featPost h2 {
padding: 50px 0px 10px 41.5px;
font-size: 30px;
text-align: center;
font-family: "Calibri", Helvetica, sans-serif;
}
#featPost section{
border-style: double;
border-width: 4px;
border-color: black;
}
#featPost p {
padding-bottom: 150px;
font-size: 20px;
}
<aside id="featPost"><article>
<h1> Featured Post </h1>
<section>
<h2> Essay as Easy as 1,2,3 </h2>
<figure>
<img src="images/example.png" width="250" height="250" alt="image of an egg">
</figure>
<p> What? There are rules in writing an essay?? Read more</p>
</section>
</article></aside>
I would suggest to float the image to the left. I updated your code a bit:
HTML:
<aside id="featPost">
<article>
<h1> Featured Post </h1>
<section>
<figure>
<img src="http://placehold.it/250x250" width="250" height="250" alt="image of an egg" />
</figure>
<h2> Essay as Easy as 1,2,3 </h2>
<p>What? There are rules in writing an essay?? Read more</p>
</section>
</article>
</aside>
CSS:
#featPost {
padding:70px 0px 0px 51.2px;
/* background-color: orange;*/
}
#featPost section {
width: 750px;
overflow: auto;
border: 4px double black;
}
#featPost figure {
float:left;
}
#featPost h1 {
font-family:"Calibri", Helvetica, sans-serif;
}
#featPost h2 {
margin-top: 50px;
font-size: 30px;
text-align: center;
font-family:"Calibri", Helvetica, sans-serif;
}
#featPost p {
font-size: 20px;
}
DEMO
h2 and p tag takes full width automatically that's why you are not able to float image.
Below is a screenshot indicating the manner I intend on placing an image and text above a list.
my desired design
Below is my screenshot in terms of my misalignment problem.
my alignment problems
Below is the HTML for the image, the "FIRSTNAME SURNAME" text and the list below it:
<section class="vertical_menu_bar_section">
<div id="img_logged_in_user">
<img src="http://static3.depositphotos.com/1005574/205/v/950/depositphotos_2053115-Smile-button.jpg"
height="128" width="128" align="left" /><p>FIRSTNAME SURNAME</p>
</div>
<div id='vertical_menu'>
<ul>
<li><a href='#'><span>CALENDAR</span></a></li>
<li><a href='#'><span>TOTALS</span></a></li>
<li><a href='#'><span>OPTION 3</span></a></li>
<li><a href='#'><span>OPTION 4</span></a></li>
</ul>
</div>
<section>
Below is my CSS:
/* Section - Vertical menu bar */
.vertical_menu_bar_section {
color: #FFFFFF;
background: #FF0000;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin: 0;
height: 100%;
}
#vertical_menu {
background: #FF00CC;
list-style: none;
margin: 0;
padding: 0;
width: 200px;
font-size: 20px;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
}
#vertical_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu li {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu a {
background: #333;
border-bottom: 1px solid #393939;
color: #FFFFFF;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight: normal;
}
#vertical_menu a:hover {
background: #2580a2 url("/public/images/hover.gif") left center no-repeat;
color: #fff;
padding-bottom: 8px;
}
/* */
#img_logged_in_user {
clear: both;
display: block;
float: left;
background: #2580a2;
}
Any ideas as to where I'm going wrong.
Thanks.
Please check if this is what you need
Fiddle
For the both Divs .img_logged_in_user and .vertical_menuI have introduced to a one common Div named as .basic_div The width in the Basic_div will affect the both and will be aligned
Also added a <span> so the user name wont get below the pic.
To keep the image and name aligned you should set the width property of the wrapping element (which is #img_logged_in_user):
#img_logged_in_user {
width: 250px;
}
Then set the image margin to add a spacing between them:
#img_logged_in_user > img {
margin-right: 20px;
}
See live example here: http://jsfiddle.net/cdog/sbu24c45/.