In my html page I have the following for the hover action on the navigation links.
<td class="menuNormal"
onmouseover="expand(this);"
onmouseout="collapse(this);"
width="130"
align="left">
<p><b>Vida de Mulher</b></p>
<div class="menuNormal">
<table class="menu" width="130">
<tr>
<!-- ... -->
And this is the css style sheet which is used for the hover action:
table.navbar {
font-size: 12pt;
margin: 0px;
padding: 0px;
border: 0px;
}
table.menu {
font-size: 11pt;
margin: 5px;
padding: 0px;
}
td.menuNormal {
padding: 0px;
color: #003399;
vertical-align: top;
background-color: #f6f6f6;
}
td.menuHover {
padding: 0px;
color: #003399;
width: 112px;
vertical-align: top;
background-color: lightblue;
}
This may be caused by a :hover effect in your css, or maybe removing the width of your td class .menuNormal in your html code will remove this moving effect, in last case if none of these works I suggest adding the same width to td.menuHover assuming this class was created for some hover effect on your td
td.menuHover {
padding: 0px;
color: #003399;
width: 130px; /* changing this value for the same as .menuNormal */
vertical-align: top;
background-color: lightblue;
}
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'm having trouble with the text within the button in particular. Whenever I try to apply padding to the top or bottom of the button so the text is centered, bu all it does is move the whole button. I suspect it has a lot to do with my lack of understanding with positioning and display.
<!DOCTYPE html>
<html>
<head>
<title>WhiteGrid</title>
<link type="text.css" rel="stylesheet" href= "stylesheet.css"/>
</head>
<body>
<div>
<div id="header"><img src="title.png"></div>
<div id="navbar">
<div class="button"><p>Home</p></div>
<div class="button"><p>Gallery</p></div>
<div class="button"><p>About</p></div>
<div class="button"><p>Settings</p></div>
</div>
<div id="body"></div>
<div id="footer"><p>Copyright© 2015 Hayden Shaw. All rights reserved.</p></div>
</div>
</body>
</html>
CSS:
body {
background-color: #C6C1C9;
}
#header {
display: block;
background-color: #856799;
height: 60px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#header > img {
display: block;
margin: auto;
}
#navbar {
display: block;
background-color: rgba(73,71,74,0.7);
height: 40px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#body {
display: block;
width: 100%;
min-height:500px;
}
#footer {
padding-top:24px;
display: block;
background-color: #7D7285;
width: 100%;
height: 60px;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#footer > p {
position: relative;
text-shadow: 0px -1px rgba(0,0,0,0.2);
color: #A3A3A3;
font-family: Verdana;
font-size: 10px;
text-align: center;
}
.button{
margin:0px;
text-shadow: 0px -1px rgba(0,0,0,0.2);
font-family: Verdana;
text-align: center;
color: white;
display: inline-block;
height: 40px;
width: 80px;
background-color: rgba(73,71,74,0);
}
.button:hover{
background-color: #353336;
color: #856799;
}
Thanks in advance.
Don't apply padding to the button but to the paragraph you have the text in. If you are having trouble laying out the text, I would suggest using an image of the text which would be easier.
It seems like you are trying to create a menu bar. I wouldn't do it using divs. Using a table or list is much easier.
<table>
<tr>
<td>Home</td>
</tr>
</table>
<ul>
<li>Home</li>
</ul>
This will be much easier to style.
There's no need to use positioning for this. And you shouldn't be using div's to create buttons either, for a number of reasons.
The best thing you could do is use the <button /> element, or use an anchor tag instead:
HTML:
Button
CSS:
.paddedButton
{
padding: 10px;
}
.khaki
{
background-color: khaki;
}
.noUnderline
{
text-decoration: none;
}
.noUnderline:hover
{
text-decoration: underline;
}
I want to create an icon that looks like a circle with a "plus" icon inside and right below it a descriptive p tag.
For I reason I cannot figure out doing this completely breaks the whole block. What am I doing wrong?
jsfiddle
Here's the HTML:
<div class="follow-single">
<div class="follow-wrapper">
<a class="follow" id="#follow_4" rel="nofollow" data-method="put" href="/jessie/follow">
<span class="glyphicon glyphicon-plus"></span>
<p class="title">Unfollow</p>
</a>
</div>
</div>
And the CSS:
follow-single {
max-width: 360px;
margin: 0 auto;
border-top: 1px solid #ddd;
margin-top: 20px;
padding-top: 20px;
}
.follow-single .follow-wrapper {
text-align: center;
}
.follow-single .follow-wrapper .follow {
color: #3c763d;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
padding: 10px 17px;
border-radius: 4px;
}
.follow-single .follow-wrapper a {
text-decoration: none;
}
.follow-single .follow-wrapper .title {
font-size: 12px;
display: block;
}
Set the display on the achor tag to be inline-block.
.follow {
display: inline-block;
}
Fiddle
Additionally, an unrelated to the original question, your definition of follow-single is missing a leading dot character: .follow-single
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/.