I have seen this question many times but the answers never seem to work. I have a floating image next to my "h1" title and i can't remove the space between the items and the edge of the page.
I solved the problem for the left hand side by setting the body margin to 0 but the top still has this gap.
Descriptif image
#Logo
{
float: left;
border-right: solid;
border-bottom: solid;
}
#Title
{
font-size: 70px;
border-top: solid;
}
header
{
margin: 0;
}
body, html {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Site_Web_1.css">
<title></title>
</head>
<body>
<header>
<div id="Logo"><img src="images/Logo.png"></div>
<h1 id="Title">Evil Mouse Coding</h1>
</header>
</body>
</html>
Use margin-top: 0 in h1 css
#Title
{
font-size: 70px;
border-top: solid;
margin-top: 0;
}
Related
Ok so I'm trying to program a bar that appears at the top of the webpage. On that bar I want there to be a title, a button, and an input/search bar. My problem is that the input keeps overlapping the button in the top bar. Please note that the bar at the top is a div. Here is the link to the page with the bug: Link to the page.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Langmesh</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div id="topbardiv">
<h1 id="titletext">Langmesh</h1>
<button onclick="browse()" id="browsebutton">Browse</button>
<input type="text" id="searchbar" value="Search">
</div>
</body>
</html>
Here is the CSS code:
#titletext {
font-size: 50px;
font-family: "Brush Script MT", sans-serif;
}
#topbardiv {
background-color: darkorange;
text-align: center;
border: 10px solid lightgray;
}
#topbardiv h1,
#topbardiv button {
margin: 0px;
display: inline-block;
padding: 1em;
color: white;
-webkit-text-stroke: 1.5px #000000;
}
#browsebutton,
#searchbar {
height: 150px;
width: 100px;
font-size: 30px;
font-family: "Brush Script MT", sans-serif;
background-color: darkorange;
border: 0;
}
I have not added any Javascript yet.
If this is a stupid question with a simple answer and I'm just dumb, feel free to criticize me.
I tried using text a button and an input in the same div and used css to put them all right next to eachother and I expected that it would look like a bar at the top with a title a browse button and a search bar but instead the search bar and the browse button ended up overlapping.
I am using a Windows 10 OS and replit to program the page and a chrome web browser.
it's because you have set the width of the #browsebutton and #searchbar. Please unset it and it will work.
* {
margin: 0;
font-family: 'roboto';
}
.container {
text-align: center;
}
.container input {
border: none;
box-shadow: 0px 0px 2px;
height: 33px;
}
.container button {
border: none;
box-shadow: 0px 0px 2px;
height: 33px;
}
.container h1 {
}
.background_css {
width: 100%;
background: orange;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Langmesh</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container">
<div class="background_css">
<h1 id="titletext">Langmesh</h1>
<form method="POST" action="page.html" class="search_css">
<input type="search" placeholder="Search..."><button type="submit">Search</button>
</form>
</div>
</div>
</body>
</html>
After adding some hyperlinks to an Image, it has the underline but I couldn't find a way to remove it. First I tried text-decoration: none; but I noticed it only works for text, so the image looks like
this image
The "Claro" image has that underline that I cannot remove.
Here is the code:
* {
background-color: #eeeeee;
}
#parte1 {
background-color: #da291c;
}
#parte2 {
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3 {
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo {
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung {
background-color: #da291c;
}
#parte2-samsung {
background-color: white;
margin: 10px 480px 10px 0px;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Caracteristicas Claro</title>
</head>
<body>
<center>
<div id="parte1" class="container">
<a href="https://tiendaclaro.pe" title="Tienda Claro">
<img src="https://placehold.jp/200x100.png" alt="Claro" height="50" id="logo" />
</a>
</div>
</center>
<div id="parte2" class="container">
Inicio
Samsung
</div>
<div id="parte3">Aqui iran el equipo y sus caracteristicas</div>
</body>
</html>
How do I manage to erase that underline of the image and make the other "Inicio" and "Samsung" options to looks like normal text, instead of that purple or blue color?
What you're referring to as underline is not actually underline.
You've added this line in your CSS
* {
background-color: #eeeeee;
}
that means every HTML tag will have this background. so your image and parent <a> will also have this background color and since the image has a bottom margin this which makes a gap in parent <a> and this gap is filled with the defined background color.
so what you're seeing is a filled background color, not an underline or border.
if you set background-color:#colorname; within body element selector like.
body {
background-color:#colorname;
}
That means set background colour #colorname; of your body.
But When you will use this css property into universal selector like.
* {
background-color:#colorname;
}
that means set background color #colorname of all element of the web page.
I hope it is helpful for you.
* {}
body{
background-color: #eeeeee;
}
#parte1 {
background-color: #da291c;
}
#parte2 {
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3 {
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo {
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung {
background-color: #da291c;
}
#parte2-samsung {
background-color: white;
margin: 10px 480px 10px 0px;
}
a {
text-decoration: none;
}
Try adding the background-color: #eeeeee; property to the body tag instead of *
body{
background-color: #eeeeee;
}
#parte1{
background-color: #da291c;
}
#parte2{
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3{
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo{
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung{
background-color: #da291c;
}
#parte2-samsung{
background-color: white;
margin: 10px 480px 10px 0px;
}
a{
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Caracteristicas Claro</title>
</head>
<body>
<center>
<div id="parte1" class="container">
<img src="icons/LogoClaro.png" alt="Claro" height="50" id="logo">
</div>
</center>
<div id="parte2" class="container">
Inicio
Samsung
</div>
<div id="parte3">
Aqui iran el equipo y sus caracteristicas
</div>
</body>
</html>
body {
margin: 0;
}
.banner {
display: block;
margin: 0 auto;
}
.icon {
width: 50px;
height: 50px;
float: left;
}
.title {
font-size: 20px;
}
.desc {
padding-top: 7px;
}
.images {
padding-left: 580px;
}
.images img {
padding-right: 10px;
}
.images img:hover {
cursor: pointer;
}
.header_inner {
border: 1px solid black;
}
<!doctype html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="icon.jpg">
</head>
<body>
<div class="header">
<div class="header_inner">
<img class="banner" src="https://cdn.pixabay.com/photo/2021/09/12/07/58/banner-6617550__340.png">
<div class="images">
<img class="icon" src="https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fA%3D%3D&w=1000&q=80">
<p class="desc"><span class="title">Test</span><br>Test</p>
</div>
</div>
</div>
</body>
</html>
How to change border size to the border size of an image and the footer part of an image, because the border size is not the current size of the image, and I do not know how to fix it. How can I do that?
you mean something like this?
you can just apply border for your image.
if you want to put something between border and image you can give a padding to image
or position relative and absolute to something you want to put inside them.
i hope i got your problem right.
.img {
border: 5px solid black
}
<!doctype html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="icon.jpg">
</head>
<body>
<img class="img" src="https://www.gravatar.com/avatar/453426250a239cbb367afe61dca91a68?s=48&d=identicon&r=PG&f=1" />
</body>
</html>
Instead of
.header_inner {
border: 1px solid black;
}
do
.banner {
border: 1px solid black;
}
I am writing an HTML Document. I am trying to make no space between a p and a div. There were no error messages included.
I have already tried:
adding 0px margin, padding to the p element and div element
making no whitespace between them in the code
Code:
#IO-out {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings";
}
.t.normal {
color: white;
background-color: black;
}
html
<head>
<title>
ivyghostkit
</title>
<link rel="stylesheet" href="common.css" type="text/css">
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
<!-- p elements with class "pn" are added here using javascript -->
</div>
<p id="VoidKeyboard"></p>
</div>
<script src="g.core.js"></script>
</body>
</html>
For clarification, the problem is that noticeable space is inbetween #VoidKeyboard and all p elements in #IO-out.
Add this in your css file
p{
margin: 0;
padding: 0;
}
And add some text in your markup..
Here is the full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#IO-out {
width: 100%;
height: 100%;
/** make void keyboard work **/
margin: 0px;
padding: 0px;
}
p{
margin: 0;
padding: ;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings"; /** ;) **/
}
.t.normal {
color: white;
background-color: black;
}
</style>
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
p elements with class "pn" are added here using javascript
</div>
<p id="VoidKeyboard">Remove Spacing</p>
</div>
</body>
</html>
So, I'm making a website and in the navbar, I floated some of the links to the right. However, when I do this, the links leave the vertical center and drop downwards. When I apply padding though, nothing happens. I know there are other versions of this question on Stack Overflow, but I've tried the answers and they don't work. Here's my code
/* Start Variables */
:root {
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper {
width: 100%;
padding: 2% 10%;
box-shadow: 5px 10px 8px #888888;
}
.leftside {}
.rightside {
float: right;
}
.options {
text-decoration: none;
margin-bottom: 20%;
}
.linkhome {
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-bottom: 20%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Example | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Our Work
About Us
Our Food
Culture
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>
Any help is greatly appreciated
Thanks!
Make your .navbar-wrapper a flexbox.
.navbar-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}