I'm having a difficult time resolving this issue I have.
Basically, I can't figure out why my logo image shows left and bottom 1px white.
As a test, I've placed that logo image on a blank page with black background to see if it doesn't have those white margins and it doesn't. It looks okay.
So, I believe that the problem is somewhere in div tags.
Here's how my code looks like:
HTML Code:
<div id="wrapper">
<div id="top_header">
<div id="logo"><img src="img/logo.jpg" align="left" alt="Logo"></div>
<div id="title">BlaBla <br>Blah</div>
<div id="contact"> E-mail: blabla#mydomain.tld<br> Phone: 0980980984324 </div>
</div>
<!-- ... rest of the code -->
CSS Code:
#wrapper {
margin: 0 auto;
width: 978px;
_height: 100%;
min-height: 100%;
}
#top_header {
padding-top: 12px;
/*padding-bottom: 5px; */
margin: 0;
overflow: hidden;
width: 978px;
background-color:#C50918;
display: block;
}
div#logo img {
float: left;
margin: 0;
padding: 0;
/*padding-bottom: 6px; */
overflow: hidden;
display: block;
}
#title {
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
vertical-align: middle;
color: #FFF;
text-decoration: none;
margin: 0;
padding-left: 20px;
display: block;
}
#contact {
background: url(../img/phone.jpg) no-repeat scroll left transparent;
float: right;
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: right;
color: #FFF;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
try
#logo {
border: none; }
also
and use border: none in the "div#logo img" , id.
check your image, this could have a white line at the edge.
Which browsers does this happen in?
Related
I just made my website header and now I'm trying to build the side bar, however instead of sticking to the left, it's being pushed to the right and I don't know why... but I guess it's because of the float elements that I added in the header? I've tried setting the margins to 0, floating it to the left, and nothing works.
Here's the code:
body {
font-size: 62.5%;
}
:root {
--color-primary: #b22222;
}
/* Box */
#box {
margin: 2% 20%;
}
/* Header */
#header {
background-color: var(--color-primary);
width: 100%;
height: 100px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.oldenhook_icon {
height: 90px;
width: 90px;
margin-left: 15px;
float: left;
}
.header_h1 {
color: #800000;
font-family: "Noto Sans Mono", monospace;
font-size: 2.5rem;
font-weight: 900;
display: inline-block;
margin-left: 30%;
margin-bottom: 0;
}
.flexbox {
display: flex;
flex-direction: row;
float: right;
list-style-type: none;
margin-right: 22%;
}
.list-item {
color: #fff;
padding-left: 5px;
text-decoration: none;
font-size: 12px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
}
/* Search box */
#searchbox {
top: 40px;
position: relative;
}
<div id="box">
<div id="header">
<i
><img
class="oldenhook_icon"
src="icons/icon2.png"
alt="The Oldenhook Icon"
/></i>
<div>
<h1 class="header_h1">[ oldenhook ]</h1>
<ul class="flexbox">
home
search
global
social net
invite
faq
logout
</ul>
</div>
<div id="searchbox">
<label for="email">Email:</label>
<input name="email" id="email" type="text">
<p>oifjqoifjq</p>
<p>ofijqofiqjf</p>
</div>
</div>
Your code is fine just remove float: right; from class flexbox in css
I think you can add position: absolute; to class .flexbox{}
This is my first html/css project. I tried to use nav and ul tags to put a Log in option on the top right corner over the image. When I do it shifts everything from the middle. I did google before posting but I haven't been successful. I am just wanting to know if I have to float it over or mess with the padding and margins? Here is the html markup`
<!DOCTYPE html>
<html>
<head>
<title>AudioPhile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Audio<img class="logo" src="https://image.ibb.co/n2A7gb/bar_diagram.png" alt=" folder with white music bars">Phile</h1>
<p>Create. Play. Share music anywhere, on any device with unlimited free storage.</p>
<input class="signup" type="email" id="myEmail" value="Type Your Email Here">
<a class="btn-1" href="#">Get Started</a>
<footer class="credits">© Natalie Pickrom</footer>
</div>
</div>
</section>
</body>
</html>`
The CSS:`#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito:200');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background:linear-gradient(0deg,rgba(64,64,64,0.8),rgba(64,64,64,0.8)),url(https://preview.ibb.co/jZbkZw/james_stamler_153487.jpg) no-repeat 95% 95% ;
background-size: cover;
display: table;
top:0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%
max-width: none;
}
.content {
max-width:500px;
margin: 0 auto;
text-align:center;
}
.content h1 {
font-family: "Archivo Narrow", Helvetica, sans-serif ;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 6em;
padding:0px;
margin:0px;
}
.content p {
font-family: Nunito, "Open Sans", sans-serif;
font-size: 1.253em;
color:#F9F3F4;
Paddding: 0px;
margin-top: 0px;
}
.signup {
border: 0px;
font-family: Nunito, "Open Sans", sans-serif;
letter-spacing: 2px;
color: rgba(128,128,128,0.7) ;
padding: 5px;
width: 67%;
}
.btn-1 {
border-radius:0px;
background-color: #008CBA;
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 3px 10px 4px;
width:50%;
}
.credits {
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 768px) {
.content h1 {
font-size:4em;
}
.btn-1 {
padding: 2px 10px 3px;
width: 25%;
}
p {
font-size: .5em;
}
}
`
Here is the JSfiddle https://jsfiddle.net/1ysegrd6/
Here is what I want to achieve. I want log in where they have home subscribe
I'm trying to align my input sections in the center of the div, with the labels left aligned on the left of the input. I can't seem to get the input sections to align to the left of each other, in the center of the div. Bear with me, I'm incredibly new to coding of any sort so my code might not be the best.
Here is my html and css thus far:
This is what I would like it to look like. Label on the left, input field in the center. IMG
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: medium;
font-weight: bold;
display: block;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
<body class="body">
<div class="othercomponent">Plot Name <input class="lpks-input"></div>
<div class="othercomponent">Other Name <input class="lpks-input"></div>
</body>
Here is a JSFiddle to show what I have now:
https://jsfiddle.net/h8vo2opv/
You can use width for div. And place <label> for your text in left section and put style float:left;
set width for label and input section also. check my code this will help you.
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width:100%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* font-size: medium; */
font-weight: bold;
display: block;
align-items: center;
background: wheat;
}
.othercomponent input {
width: 60%;
float:left;
}
.othercomponent lebel {
float: left;
width:30%;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
<body class="body">
<div class="othercomponent"><lebel>Plot Name </lebel><input class="lpks-input"></div>
<div class="othercomponent"><lebel>Other Name </lebel><input class="lpks-input"></div>
</body>
If i understood well :) you want them in center of white div :
HTML :
<body class="body">
<div class="othercomponent">
<span class="left">Plot Name </span> <span class="center"><input class="lpks-input"></span></div>
<div class="othercomponent">
<span class="left">Plot Name </span> <span class="center"> <input class="lpks-input"></span></div>
CSS:
.body {
background-color: #EDEDED;
}
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
text-align:center;
font-weight: normal;
display: block;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
.left{
float:left;
}
You can add a bit of markup and then style your form like a table. This will line up the inputs based on the label widths.
.form {
display: table;
}
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: medium;
font-weight: bold;
/* display: block; */
display: table-row;
}
.lpks-input {
/* width: 35%; */
display: inline-block;
padding-right: 5px;
}
label,
.input-container {
display: table-cell;
vertical-align: middle;
}
<body class="body">
<form>
<div class="othercomponent"><label for="input1">Plot Name</label><div class="input-container"><input id="input1" class="lpks-input"></div></div>
<div class="othercomponent"><label for="input2">Other Name</label><div class="input-container"><input id="input2" class="lpks-input"></div></div>
</form>
</body>
I have a div with a select box and 3 images.
I want to make this:
I have this:
So basically I am having trouble aligning the 3 images at the same height as the select box. I have tried several things and have no clue why it does not work.
Here is my HTML and CSS:
#lang_social {
width: 100%;
height: 60px;
background-color: #3CC;
display: table;
}
#language select {
height: 40px;
width: 200px;
background-color: #3FF;
border-color: #3FF;
display: inline-block;
vertical-align: middle;
color: #FFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 16px;
margin-left: 10%;
margin-top: 10px;
;
}
#twitter_conn img {
float: right;
display: inline-block;
vertical-align: middle;
position: absolute;
float: right;
}
#fb_conn {
float: right;
margin-top: 10px;
margin-right: 20%;
display: inline-block;
vertical-align: middle;
}
#linkedin_conn {
float: right;
margin-top: 10px;
margin-right: 10%;
display: inline-block;
vertical-align: middle;
}
<div id="lang_social">
<div id="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div>
<div id="twitter_conn">
<img src="http://www.placehold.it/32" onmouseover="this.src='http://www.placehold.it/32'" onmouseout="this.src='http://www.placehold.it/32'">
</div>
<div id="fb_conn">
<img src="http://www.placehold.it/32" onmouseover="this.src='http://www.placehold.it/32'" onmouseout="this.src='http://www.placehold.it/32'">
</div>
<div id="linked_conn">
<img src="http://www.placehold.it/32" onmouseover="this.src='http://www.placehold.it/32'" onmouseout="this.src='http://www.placehold.it/32'">
</div>
</div>
The general layout
To simplify things, let's create two separate divs that are each given 50% width on one line.
They can be marked up like this:
<div id="lang_social">
<div id="language"><!-- Select goes here --></div>
<div id="social"><!-- Icons go here --></div>
</div>
and positioned like this, each child div is given 50% width and will line up next to the other:
#lang_social > div {
display: inline-block;
width: 50%;
}
We now have two divs on one line:
Right align the icons
We want the social icons to be aligned from the right, that's easy now:
#social {
text-align: right;
}
Apply the colours and we get the finished result:
If you want, we can end the answer here, have a snippet:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#lang_social {
width: 100%;
background-color: #3CC;
line-height: 60px;
/*This Line height is the same as the height and will vertically center a single line*/
min-width: 340px;
}
#lang_social > div {
display: inline-block;
width: 50%;
padding: 0 10px;
}
img {
vertical-align: middle;/*Important to align in the middle*/
}
#social {
text-align: right;
}
#language select {
height: 40px;
width: 200px;
background-color: #3FF;
border-color: #3FF;
color: #FFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 16px;
}
<div id="lang_social">
<div id="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div><div id="social">
<img src="http://www.placehold.it/32/FF0000" />
<img src="http://www.placehold.it/32/FF9900" />
<img src="http://www.placehold.it/32/FF99CC" />
</div>
</div>
or we can go a little further below.
Note:
Each inline elements closing tag has no whitespace between it and the next inline elements opening tag, this prevents the gaps between inline elements. Example:
<div id="language">
Contents
</div><div id="social">
Contents
</div>
box-sizing: border-box incorporates padding and borders into the width and height.
Hover states for the social icons using CSS Sprites
If you want to, we can create a simple image hover state for each social image without javascript.
Instead of using <img>, we can use <a>, like so:
<div id="social">
<a class="icon facebook"></a>
<a class="icon twitter"></a>
<a class="icon linked"></a>
</div>
This allows us to create the normal and hover state with a CSS sprite. We can apply the background to the icon class:
.icon {
display: inline-block;
vertical-align: middle;
background: url(http://i.stack.imgur.com/1eIYU.png);
height: 32px;
width: 32px;
}
The background image looks like this:
Each coloured section should be changed with the social logo on a transparent background.
the top row of colours is used for the unhovered icon state. The bottom row is used for the hovered state.
Red = Facebook icon
Orange = Twitter icon
Pink = LinkedIn icon
Each icon section is 32px x 32px and each icon is positioned with background-position:
.facebook {
background-position: 0 0; /*x-axis | y-axis*/
}
.twitter {
background-position: -32px 0;
}
.linked {
background-position: -64px 0;
}
On hover, the background-position is changed to show a hover state:
.facebook:hover {
background-position: 0 -32px;
}
.twitter:hover {
background-position: -32px -32px;
}
.linked:hover {
background-position: -64px -32px;
}
Completed example
Note:
Each inline elements closing tag has no whitespace between it and the next inline elements opening tag, this prevents the gaps between inline elements.
box-sizing: border-box incorporates padding and borders into the width and height.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#lang_social {
width: 100%;
background-color: #3CC;
line-height: 60px;
/*This Line height is the same as the height and will vertically center a single line*/
min-width: 340px;
}
#lang_social > div {
display: inline-block;
width: 50%;
padding: 0 10px;
}
#social {
text-align: right;
}
#language select {
height: 40px;
width: 200px;
background-color: #3FF;
border-color: #3FF;
color: #FFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 16px;
}
.icon {
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px;
background: url(http://i.stack.imgur.com/1eIYU.png);
height: 32px;
width: 32px;
transition: background-position .3s
}
.facebook {
background-position: 0 0;
}
.twitter {
background-position: -32px 0;
}
.linked {
background-position: -64px 0;
}
.facebook:hover {
background-position: 0 -32px;
}
.twitter:hover {
background-position: -32px -32px;
}
.linked:hover {
background-position: -64px -32px;
}
<div id="lang_social">
<div id="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div><div id="social">
<a class="icon facebook"></a><a class="icon twitter"></a><a class="icon linked"></a>
</div>
</div>
I couldn't see your icons so i have used my own. you can substitute. I made your ids into classes and gave the lang_social an overall attr of vertical-align:middle to affect everything. I also floated the language left. Here is a fiddle
#lang_social {
width: 100%;
height: 60px;
background-color: #3CC;
display: table;
vertical-align:middle;
}
.language select {
height: 40px;
width: 200px;
background-color: #3FF;
border-color: #3FF;
display: inline-block;
vertical-align: middle;
color: #FFF;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 16px;
margin-left: 10%;
margin-top: 10px;
float:left;
}
.twitter_conn {
display:inline-block;
margin-top: 10px;
margin-right: 20px;
width:30px;
float:right;
}
.fb_conn {
margin-top: 10px;
margin-right: 20px;
display:inline-block;
width:30px;
float:right;
}
.linkedin_conn {
width:30px;
float:right;
margin-top: 10px;
margin-right: 20px;
display:inline-block;
}
img {
width:32px;
height:32px;
padding:4px;
}
<div id="lang_social">
<div class="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div>
<div class="linkedin_conn">
<img src="http://www.teratology.org/images/linkedin.png" onmouseover="this.src='http://www.teratology.org/images/linkedin.png'" onmouseout="this.src='http://www.teratology.org/images/linkedin.png">
</div>
<div class="fb_conn">
<img src="http://www.musicmatters.ie/images/fb3.png" onmouseover="this.src='http://www.musicmatters.ie/images/fb3.png'" onmouseout="this.src='http://www.musicmatters.ie/images/fb3.png'">
</div>
<div class="twitter_conn">
<img src="http://www.musicmatters.ie/images/twitter3.png" onmouseover="this.src='http://www.musicmatters.ie/images/twitter3.png" onmouseout="this.src='http://www.musicmatters.ie/images/twitter3.png'">
</div>
</div>
It's taken me a ridiculous amount of work to get this menu bar looking clean, which is a problem in and of itself. However, I think it's finally coming together. The problem I'm having now is three-fold.
Two questions:
When this is viewed full screen, the menu bar looks great, but as you close in the screen the "run" button drops to the bottom. What is causing this?
How come if I keep closing the window, the middle .toggle list is stacking on top of the "CodePlayer" logo? What do I need to do to make it so that when the window shrinks, the divs get to the point where they'd begin to overlap and stop?
Why is there a tiny bit of gap between the border-right and bottom-border in the middle section of my menu? I've tried 0px padding and it isn't working.
http://jsfiddle.net/ow5zq9fL/
/*-----------UNIVERSAL------------*/
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
/*-----------MENU BAR------------*/
#menuBar {
height: 40px;
background-color: gray;
max-width: 100%;
}
/*------LOGO, TOGGLES, BUTTON-----*/
#logo,
#buttonDiv,
#toggles {
vertical-align: middle;
display: inline-block;
width: 33%;
height: 18px;
}
/*-----------LOGO------------*/
#logo {
font-weight: bold;
font-size: 1em;
font-family: helvetica;
vertical-align: middle;
position: relative;
top: 12px;
left: 12px;
/* background-color: blue;
*/
}
/*-----------TOGGLES------------*/
.toggles {
text-align: center;
border: 1px solid black;
height: 20px;
position: relative;
top: -9px;
width: 300px;
left: 20px;
}
.toggles li {
list-style: none;
display: inline-block;
border-right: 1px solid black;
}
/*----------TOGGLES LIST----------*/
#resultList {
border-right: none;
}
/*-------------BUTTON------------*/
#buttonDiv {
text-align: right;
position: relative;
top: 8px;
right: 12px;
vertical-align: middle;
}
/*-----------BUTTON------------*/
#htmlList {
padding-right: 20px;
margin-left: -20px;
}
#cssList {
padding: 0 25px;
}
#jsList {
padding: 0 25px;
}
#resultList {
padding: 0 20px;
}
</style>
<div id="wrapper">
<div id="menuBar">
<div id="logo">CodePlayer</div>
<div id="toggles">
<ul class="toggles">
<li id="htmlList">HTML</li>
<li id="cssList">CSS</li>
<li id="jsList">JS</li>
<li id="resultList">Result</li>
</ul>
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
</div>
Try this. I added a wrapper and applied everything from #buttonDiv to .wrapper. Then I altered it so that it was centered.
New Code:
.wrapper {
text-align: right;
position: relative;
bottom: 12px;
right: 12px;
vertical-align: middle;
}
and
<div class="wrapper">
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
Add float left
#logo, #buttonDiv, #toggles {
...
float: left;
}
http://jsfiddle.net/ow5zq9fL/4/