I am developing a website and I have trouble with legend field which is overlapping with the table fields. I had posted the code on http://www.daniweb.com/web-development/web-design/html-and-css/threads/351601.
I searched google for this kind of error but could not resolve it.
remove position: absolute; from the following css selector
#registerForm legend {
color: #999999;
float: left;
font-size: 1em;
left: 1em;
line-height: 1.3em;
margin: 0;
padding-top: 1.25em;
position: absolute;
width: 16%;
}
Demo at http://jsbin.com/ivoyi4
After removing the position:absolute It looks better in the Firefox but in the safari the word is wrapped to the next line i.e., "User" in the first line and "information" in the second line above the table. What I wanted is to push the user information to the left side where the table starts but it acts weird in firefox with the position as absolute.
Related
I'm looking at this CSS menu https://codepen.io/StephenScaff/pen/bVbEbJ and it seems to do what I want apart from the '>' image/icon at the end of each menu option.
Is there a way to only show this image/icon if there is a submenu/flyout ?
I've worked it it is being added using
.sidebar-nav>ul>li>a:after {
content: "";
font-family: ionicons;
font-size: 0.5em;
width: 10px;
color: #fff;
position: absolute;
right: 0.75em;
top: 45%;
}
But I don't know how to only apply that to the menu entries with sub entries.
Thanks
You can add a class "has-sub-entries" to the links that should have it.
.sidebar-nav>ul>li>a.has-sub-entries:after {
}
so you remove the :after element on
.sidebar-nav>ul>li>a:after
I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!
I have been struggling to find answers as to why this does this so I'd figured I'd post it here to see if anyone else knows this happens and if there is an explaination. Or maybe it is just a CSS/HTML bug I am unaware of.
I created the following jsfiddle for an example.
#import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');
body {
background-color: #20262e;
height: 100%;
margin: 0px;
padding: 0px;
}
.title {
margin-bottom: 0 !important;
padding-right: 100px;
color: #ffffff;
font-size: 50px;
font-family: 'Playfair Display', serif;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
line-height: 1;
position: relative;
display: inline-block;
}
.title::after {
background-color: #f5a800;
width: 80px;
height: 4px;
content: '';
position: absolute;
top: 50%;
right: 0px;
}
<div class="container">
<h1 class="title">
This Is An Awesome Title
</h1>
</div>
Simple effect and works great as long as the H1 is one line. However, once you resize the screen and the H1 breaks to 2 lines, it seems that the behavior of the H1 changes? inline-block->block? If you inspect the H1 in devtools, it goes from having its "space" go from wrapping the text to full width when it breaks and the pseudo element is then pushed way out to the right of the screen instead of the right side of the text like it is when it is on one line.
I am all out of ideas on hacks around this, I've tried floats and flex to no avail.
Open to any suggestions on how to accomplish this, or maybe its a lost cause and I am stuck with changing font sizes and padding using media queries.
Thanks.
EDIT
Here are a few screenshots to further clarify what I am asking:
Text on one line: https://screencast.com/t/W83PxIck
Text when it breaks to two lines: https://screencast.com/t/Lx8xjHkrWx
Nope, that's the expected behavior. It is still inline-block. The right side of the block is the rightmost side of the text, not the right side of the final line.
If you're looking to place it immediately after the final line, you need to use display: inline, not inline-block.
You can view the boxes by using dev tools, which will clearly show you where they begin and end.
I would like to adjust the CSS code for the Fiore theme on Wordpress. My URL is theuniversalasian.wordpress.com. It is an upgraded premium wordpress account.
With the upgrade, I am able to edit the CSS, but a number of problems are happening. If you could help me with the code, I'd appreciate it!
I want to make a white background for the post texts. When I do that, it moves the date, comments, edit links on the left side. I would like those to stay up top near the post title ribbon. At the moment, the site does not show the changes I wanted because I keep fiddling with the code....
If possible, I'd like the white background for the text to have rounded corners....
The left column somehow loses the graphics....There should be a top cherry blossom graphic like the original theme (http://fioredemo.wordpress.com/), along with the rest of the ribbon image for the post titles.
I cannot paste the entire code here..., but hopefully you will know what I mean from the site...
For the first two, I'll work on the last now, you needed to locate the .entry-content class in your css file.
The first style I added was the background: #fff; which added the white background and then I added border-radius: 7px; which gives it rounded corners.
.entry-content {
color: #2b2b2b; /* changed to black font since you wanted a white background */
width: 300px;
padding: 10px;
border: 0 solid #000;
margin-left: 10%;
margin-bottom: 10px;
margin-top: 10px;
background: #fff;
border-radius: 7px;
}
For the third question, I am not 100% positive but since you removed the nav on your site I believe you removed the image as well. For some reason on the template page I can not find any styles when you inspect an element. The image is apart of the nav/header area so this is just my best guess.
EDIT: Moving the comment/date block around.
.entry-meta {
color: #333;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 1px;
position: absolute;
text-align: right;
text-transform: uppercase;
width: 150px;
top: 0;
left: 35%;
}
input field are not getting aligned and they flow out of the container. What causes that? Here is the code and page. I need the labels aligned left and input field all aligned too. Is it ok to give -ve margins??
the .para#info div is flowing out of the page. It is supposed to sit parallel with .para#news
You have overdone your CSS and have many unneeded properties.
Start by giving your label the following CSS properties, then style the inputs as you wish.
label {
width: 100px;
display: inline-block;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight: bold;
color: #555;
}
Check working example at http://jsfiddle.net/6Eyef/1/
Its ok if you use..
margin-left: -220px;
margin-top: -150px;
for info Div.
thank you.
I'm not sure if I understand your question correctly. But to align <input> elements with their labels, the <label> tags need to have to following CSS:
display: block;
float: left;
width: (a value)px;
And you need to add clear: left to the <input> elements
Edit: Hussein's answer is better