CSS Text Wrapping issue and HTML setup of cohosts - html

Ok, I have HTML setup like so:
<div class="bullet">
<div style="float: left; padding-right: 1em;">
<img src="images/ofn_bullet.png" alt="OFN" style="max-width: 100%; border: none;" />
</div>
<div style="float: left;">
Cooperative Business Assistance Corporation<br />Camden, NJ
</div>
<br class="clear" />
</div>
There are a ton of these, listed on this page here: http://opportunityfinance.net/Test/2013conf/index.html They get listed 1 after the other, because, unfortunately I don't know how else to do this. Is there an easier way to do this for each Co-Host?? I've tried using a <ul> tag with the list-type-image being set, and having <li> tags for this (which was my first attempt), but I couldn't figure out how to get the image to resize as the page was resized, so I scrapped that attempt, and went with the following attempt above. But am now having other issues. Basically, both of these div tags have a float: left style which should work, however if you look at the pic below... doesn't work right when sizing it down:
Honestly, I don't know what to do, and I don't want to use a table. But I do need to align the text next to it so that it is in the middle of the image, if possible. Like the 2 lines should be vertically aligned in the middle vertical-align: middle, if possible. In any case, I need the text to stay on the right-hand side of the image at all times, even when the browser is resized down! Here is the CSS for what is being used:
.clear
{
clear: both;
}
div.bullet
{
display: block;
width: 100%;
text-align: left;
}
I'm wondering if there is a better setup solution for the Co-Hosts column, than what I am using. Keep in mind that the page needs to resize down (text and all) for smaller screen resolutions and cell phones. Can't have a horizontal scrollbar either.

You could have the cohosts as an unordered list. You could then set the image as a background image for each list item.
<ul class='cohosts'>
<li>The text</li>
<li>The text</li>
</ul>
Then set the css to something like this
.cohosts li {
padding-left: 20px; /* Whatever the with of the image */
background-image: url('images/ofn_bullet.png');
}

Try removing float: left; on .bullet (the text div)

Related

CSS hamburger menu doesn't transform correctly on a bigger screen

I have a CSS hamburger menu which should display on screens up to 525px big. After that size, the hamburger menu should transform into a normal menu, made out of 4 links, floated to the right of the page while the logo being floated to the left. Here's the complete code: https://codepen.io/Cilvako/pen/zjvBrE
<div class="nav">
<h1>Zero Gravity</h1>
<label for="toggle">&#9776</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
About Us
Contact
Blog
<span>Free Trial</span>
</div>
</div>
Although I make the containing div of the 4 links display: inline-block it still takes the whole width of the div, displaying under the h1 (logo).
How can I make the h1 and the menu (.menu) display next to eachother, having the same height? I'm really out of ideas.
Try this
CSS
#media only screen and (min-width: 525px)
.menu {
text-align: right;
display: inline-block;
float: right;
width: auto;
clear: none;
}
Actually, in this case, the culprit is clear: both along with width: 100% on .menu selector.
You should get rid of the width: 100% and you can use clear: right (that's where you should want to do the clearing).
I would recommend to drop the float entirely (remove float: left, clear: both and width: 100% from .menu and remove float: right from the media query .menu. It works this way nicely.
As a matter of fact, use float as a last resort or only if you are sure that it is the right use case. Float is tricky unless you understand it completely and in most cases there are better methods to achieve your goal.
Also I would recommend you to take a look at flexbox for layouting purposes as well as css grid. The latter only working in modern browsers right now (i think edge is still having problems, IE doesn't and will not be able to handle it ever).

Text not aligning with buttons when page size is small (phone width). Top of text aligning with center of button, not top

I have a simple setup with buttons and a description of what they do. It looks great when displayed on a full computer screen or a tablet, but gets misaligned once the screen becomes as small as a phone screen. It seems the top of the description paragraph is aligned with the center of the button, as opposed to the top of each element being aligned.
I have tried setting it up first as a table (tr/td) and then as divs/spans to act like a table, but have the same issue with each set up.
A picture of the problem is below, as displayed on chrome set to minimum size. Similar issues arise in other browsers.
I have also included a jsfiddle. You can recreate the issue by decreasing the bottom-right window to a small size (2-3 inches wide, like on a phone):
https://jsfiddle.net/f6fbkrg0/4/
HTML:
<div class="css-table">
<div class="css-tr">
<span class="css-td"><button class="admin-table-button" id="set-time-button" style="width:100%;height:100%">Set Time</button></span>
<p class="button-description">Syncs the time on the machine to the system time of this device</p>
</div>
<div class="css-tr">
<span class="css-td"><button class="admin-table-button" id="night-mode-button" style="width:100%;height:100%">Night Mode</button></span>
<p class="button-description">Toggle alternate color shceme for easy viewing in low-light conditions</p>
</div>
</div>
CSS:
.css-td {
display: table-cell;
padding: .5em 5px;
}
.css-table {
display: table
}
.css-tr {
display: table-row
}
.button-description {
padding-left: 25px;
vertical-align: middle
text-align:
}
.admin-table-button {
margin-top 0px;
}
Two things to watch:
Look at adding vertical-align: top; on your .css-td class
The <p> tag has default browser margins if you don't specify those yourself.
Try setting the top margin to 0 and see if that or a combination of both of these things does the trick for you.

Stretching <a> tags across a sidebar while vertically aligning its contents to the center

I want to put a bunch of clickable links in a sidebar with a hover effect that covers the entire width of the sidebar. Some of these links also include an image that needs to be aligned so that it's vertically centered in relation to the text. Here's what I currently have:
As you can see, the hover effect and the <a> tag don't cover the entire width of the sidebar yet. That's bad because of big link targets are easier to click. I've tried tinkering with horizontally stretched CSS-based table cells, but then the text parts didn't stay aligned properly.
What's the proper way to do it? ~I could post my current HTML if it's helpful, but I was planning to rewrite my markup based on this answer's solution anyway.~
Edit: here's the relevant HTML snippet.
<nav id="sidebar">
<ul>
<li>Home</li>
</ul>
<header>Recently Added</header>
<ul id="recents">
<li><img src="http://media.radiantstreamer.net/stations/q2music.png" alt="Artwork"> <span>Q2 Music</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtmoclassic.png" alt="Artwork"> <span>Mostly Classical</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtpitrios.png" alt="Artwork"> <span>Piano Trios</span></li>
</ul>
</nav>
Putting display: block; on the relevant links should make them full width. Or if it doesn't, display: block; width: 100%;. width: 100% on its own doesn't seem to be much use on inline elements.
…And some positioning to fix the alignment, e.g.
ul li a {
display:block;
text-decoration:none;
position:relative;
}
ul li a span {
position:absolute;
top:50%;
}
Have you tried position: absolute; width: 100% (or something like that) on your links? That should make it the parent's full width.
How I solved it
First I made my <a> tags render as a one-row CSS table by setting them to display: table and its children to display: table-cell. You'll need to add width: 100% to the table tag to make it stretch horizontally. But then the text didn't align properly:
Adding a width: 100% to <span> containing the text does the trick:
Uh oh... the 5 pixels of left padding on my links are causing spillover on the right. The fix was fairly easy: wrap the link tags in another <span> tag and adjust the CSS display rules so that the new <span> renders as a table. Bam!
Summary
I've prepared a minimally working HTML5-compliant example for the benefit of future readers.

Make a CSS header with all content vertical aligned

I'm pretty new to CSS and need some help.
I'm currently making a site with one header in the top 100% width with it's content following the 960grid system.
Here's how I've made it so far, HTML and CSS:
<div id="header">
<div id="header-inner">
/logo/
/nav/
/search/
</div>
</div>
and the css:
#header { background: red; }
#header-inner { margin: auto; padding: 25px 0; width: 940px; }
I've used a clear-fix on the header-inner, and everything was working just fine. By inserting the logo as an IMG, it'd make sure that there was 25px space between the top and bottom of the logo, that way "defining" the height of the header.
Even after inserting the navigation as UL/LI elements, it was still working, however later when I added a search input everything messed up. The form tag seemed to give it a invisible border around the input, making it use more height than "needed".
The search input was also larger, so it obviously formed a new height.
I just wanted to know if there's a smart and effective way to make the header instead? Without having to remove the padding from the header-inner and having to define a padding-top and bottom on every single element in the header-inner parent
you can do this by list
<ul>
<li>logo</li>
<li>nav</li>
<li>search</li>
</ul>
you can set the width of li

How to move an element down a litte bit in html

That sounds weird I know, but I am having trouble getting a piece of text to move down a tiny bit so it's centered on the tab it's on.
here's what it looks like:
I want buy to be centered vertically.
Here is the html:
<div class="row-2">
<ul>
<li>Buy</li>
</ul>
</div>
You can set the line height on the text, for example within the active class:
.active {
...
line-height: 2em;
....
}
<div class="row-2">
<ul>
<li><p style="margin-top: 10px;">Buy</p></li>
</ul>
Play with it
You can use vertical-align to move items vertically.
Example:
<div>This is an <span style="vertical-align: -20px;">example</span></div>
This will move the span containing the word 'example' downwards 20 pixels compared to the rest of the text.
The intended use for this property is to align elements of different height (e.g. images with different sizes) along a set line. vertical-align: top will for instance align all images on a line with the top of each image aligning with each other. vertical-align: middle will align all images so that the middle of the images align with each other, regardless of the height of each image.
You can see visual examples in this CodePen by Chris Coyier.
Hope that helps!
A simple way is to set line-height to the height of the element.
You can use the top margin-top and adjust the text or you could also use padding-top both would have similar visual effect in your case but actually both behave a bit differently.
Try it like this:
.row-2 ul li {
margin-top: 15px;
}
<style>
.row-2 UL LI A
{
margin-top: 10px; /* or whatever amount you need it to move down */
}
</style>
It's simple, just use:
<br />