I was working on a quick and dirty project of mine and when it came to some of the buttons no matter what I did they would not work, I have tried to put them in an <a> tag but it messes up my CSS and isn't worth the extra trouble, anyone know what to do? (The YouTube URL is only there for testing purposes)
Here is my HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<header>
<input class="btn" type="button" value="Home" id="button1" onsubmit=""/>
<input class="btn" type="submit" value="Processors" id="button2" onsubmit="" />
<input class="btn" type="submit" value="Motherboards" id="button3" onsubmit"" />
<input class="btn" type="submit" value="Graphics Cards" id="button4" onsubmit="https://www.youtube.com" />
<input class="btn" type="submit" value="Power Supplys" id="button5" onsubmit="" />
<input class="btn" type="submit" value="Website Inquires" id="button6" onsubmit="" />
</header>
</div>
<h1 class="title"> Personal Computers Technology </h1>
<p><span class="paragraph"> Do you want to learn about computers? Do you not know where
to start? Well you have come to the right place! Here you will learn about the functionalities of a motherboard, what a processot is and what it does, how your graphics cards sends out video ouput. You will learn about what a power supoply does
and why they very important. Lastly you will learn about storage and what the difference between an SSD an HDD
</span></p>
<!-- Please try to avoid editing code under this line as much as possible-->
<div class="container">
<img class="child" src= "https://cdn.glitch.com/8282fc98-4236-406a-9a5e-f9535f41553b%2FPC.jpg?v=1604156880410" width="300" height="200">
</div>
<!--I beg you dont tuch the code above this comment line-->
<p><span class="secondParagraph">
We are here to support your learning journey on computer parts. As may have most likely alreasdy noticed at
the top of the webpage we have direct links to all of the other educational content. If you do have any inquires
feel free to leave us a notice and we will try to respond to it as fast as possible. Thank you and have a great learning experience.
</span></p>
<iframe width="350" height="250" class="video" src="https://cdn.glitch.com/8282fc98-4236-406a-9a5e-f9535f41553b%2FFROST%20Gaming%20PC%20-%20Time%20Lapse%20Build.mp4?v=1604766330602" type="video/mp4"></iframe>
</body>
</html>
And my CSS:
margin: 0;
}
body {
background-color: #e9e4dc;
}
.header {
height: 4.6rem;
width: 100%;
background-color: #555555;
border-bottom: 1px solid black;
font-size: 0;
padding-left: 0px;
margin-bottom: 25px;
}
.btn {
background-color: #555555;
padding: 26px;
padding-right: 45px;
padding-left: 45px;
border: none;
margin: 0;
font-size: 1.2rem;
color: #F5F5F5;
font-family: Garamond, serif;
}
.btn:hover {
background-color: #696969;
}
.btn:active {
outline: none;
border: none;
}
.btn:focus {
outline: none;
border: none;
}
.title {
margin-left: 385px;
margin-bottom: 55px;
font-size: 2.2rem;
font-family: Garamond, serif;
}
.child {
position: relative;
margin-top: -175px;
border-radius: 10px;
margin-left: 45px;
}
.container {
display: flex;
justify-content: center;
float: right;
margin-right: 35px;
}
.paragraph {
font-weight: normal;
font-size: 1.7rem;
margin-top: 0px;
margin-left: 0px;
font-family: Garamond, serif;
float: left;
padding-left: 20px;
padding-right: 350px;
position: relative;
}
.secondParagraph {
font-weight: normal;
font-size: 1.7rem;
margin-left: 375px;
font-family: Garamond, serif;
float: right;
display: inline;
margin-top: 45px;
margin-right: 100px;
position: relative;
}
.video {
width: 300px;
height: 200px;
outline: none;
border-radius: 10px;
margin-top: -165px;
margin-left: 20px;
}
I have copied what you have given for code and see what was wrong.
First off, I believe you are missing the first line in your .css file.
Second, I would change all of the
<input class="btn" type="button" value="Home" id="button1" onsubmit=""/>
to something like
<p class="btn">Yor Text Here</p>
and change the css for the btn to make it look like a button and how you wish. I recommend this website to help you with the styling.
Related
i have a form page and it contains few drop-downs, upload and input text fields(for demo i am showing only few elements). i have a change mode button after the attack type dropdown its functionality is not mentioned but while zooming in zoom out that change mode button not maintaining alignment with other elements.
I tried with margin-left in pixes, percentile, and position: absolute, fixed but not working
Please help me with this issue.
This is My HTML Code:
<html>
<head>
<style>
label {
display: inline-block;
margin-left: 30px;
width: 22%;
font-family: Helvetica;
font-weight: bold;
font-size: 12px;
padding: 5px;
}
#attackType {
width: 158px;
border: none;
height: 30px;
background-color: #A9A9A9BF;
border-radius: 2px;
}
#changeCustomPcapModeDiv {
margin-left: 550px;
height: 29px;
margin-top: -29px;
border: none;
border-radius: 3px;
background-color: #A9A9A9BF;
}
#customPcap {
width: 200px !important;
}
.error {
color: red;
}
#attackConfigBtn,
#cancelBtn {
width: 80px;
height: 30px;
padding-top: 4px;
border: none;
background-color: #A9A9A9BF;
border-radius: 3px;
}
#attackConfigBtn {
margin-left: 25%;
font-family: Helvetica;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
}
#cancelBtn {
width: 70px;
margin-left: 3%;
font-family: Helvetica;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<label>Attack Type:</label>
<select name="attackType" id="attackType">
<option value="attack_list">Attack List</option>
<option value="custom_pcap">Custom PCAP</option>
</select>
<button id="changeCustomPcapModeDiv" style="display: block;">Change Mode</button>
</div>
<div style="margin-top: 10px; display: block;" id="customDiv">
<label>Custom PCAP Uplaod: </label>
<input type="file" name="customPcap" id="customPcap" accept=".pcap" data-max-size="102400"><span id="customPcapErr" class="error" style="margin-left:35px;font-size:14px;"></span>
</div>
<input id="attackConfigBtn" type="button" value="Apply" title="Apply new configuration">
<button id="cancelBtn" onclick="window.location = 'index.php'" title="Ignore configurations changes">Cancel</button>
</body>
</html>
and these are the images of my Sample page:
Please help me since i am new to HTML
Thanks
Okay, so maybe I'm not searching properly but I can't seem to find exactly what I'm looking for.
I have a form, let's say something like this:
div.some_form {}
div.some_form>span {
font-weight: bold;
position: relative;
text-align: left;
}
div.some_form>form {
text-align: center;
font-size: 16px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
div.some_form>form>input.txtfield {
padding: 13px;
width: 25%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
<div class="some_form">
<form>
<span class="some_class">Some text</span>
<br>
<input type="text" class="txtfield" />
<input type="button" class="button" value="Submit" onclick="doSomething()" />
</form>
</div>
what I want it to do is pretty much keep the inputs centred (which I'm able to do), which is why everything is in a div, I used text-align: center to centre everything, but I want the span element to be stuck to the top left corner of the first input, which I can't seem to do properly.
I mean, I get it, but then once I resize the window, the span shoots off into space (i.e. the text field will expand at a lower rate than the span is, which is great because the text stays centred even with the button attached) and I can't seem to get it to just stick.
(also this seriously isn't homework, I'm just getting into CSS and this is really bothering me..)
any help is obviously very much appreciated!
Thanks in advance :)
Adding a display: block to your span will work. And remove the <br />. You have the class specification wrong. The <span> isn't a direct child there. So > doesn't work:
body {
text-align: center;
}
div.some_form span.some_class {
font-weight: bold;
position: relative;
text-align: left;
display: block;
padding: 0 4.5%;
}
div.some_form>form {
text-align: center;
font-size: 16px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
div.some_form>form>input.txtfield {
padding: 13px;
width: 45%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
div.some_form {
display: inline-block;
}
<div class="some_form">
<form>
<span class="some_class">Some text</span>
<input type="text" class="txtfield" />
<input type="button" class="button" value="Submit" onclick="doSomething()" />
</form>
</div>
Preview
Here the answer hope it can help you
.container{
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -150px;
}
.txtfield {
padding: 13px;
width: 25%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
<div class="some_form">
<form>
<div class="container">
<span class="some_class">Some text</span>
<div class="input_container">
<input type="text" class="txtfield" />
<input type="submit" class="button" value="Submit" onclick="doSomething()" />
</div>
</div>
</form>
</div>
So I will apologize in advance if this question has already been asked, but I will mention it anyway. Basically there is a problem with an HTML document that I have been working on. I set a rule for the links in the span tags for every different link, because I want them to have different text-decoration properties, and it doesn't seem to apply them. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title> MSCC Software </title>
<link type="text/css" rel="stylesheet" href="mscccss.css">
</head>
<body> <!-- I will do an early apology if there is any bad code -->
<div id="header">
<p id="topline"> MSCC Software </p>
<p id="bottomline"> www.mscc.com </p>
</div>
<div id="sidebar">
<span id="google"> Google </span>
<span id="example"> Example </span>
<span id="debt"> Debt </span>
</div>
<div id="content">
<p> Happy Holidays </p>
<img src="http://res.freestockphotos.biz/pictures/12/12626-illustration-of-a-decorated-christmas-tree-pv.png" />
<p> From MSCC! </p>
</div>
<p id="credit"> Created By PharellPharell </p>
</body>
</html>
Now my CSS:
body{
height: 970px;
background-color: rgba:(223,223,223,80%);
font-family: Verdana;
margin-top: 15px;
margin-bottom: 15px;
margin-right: 3%;
margin-left: 3%;
}
#header{
height: 12%;
border: solid red;
background-color: rgb(127,0,0);
border-radius: 25px;
text-align: center;
color: #FFFA7C;
margin-bottom: 15px;
}
#topline{
font-size: 30px;
margin-bottom: 0px;
}
#bottomline{
font-size: 20px;
}
#sidebar{
height: 75%;
width: 15%;
border: solid red;
border-radius: 25px;
background-color: rgb(127,0,0);
text-align: center;
padding-right: 25px;
display: inline-block;
float: left;
}
#google{
font-size: 25px;
color: #EC00BC;
text-decoration: none;
display: block;
padding-bottom: 10px;
}
#example{
font-size: 25px;
color: #EC00BC;
text-decoration: overline;
display: block;
padding-bottom: 10px;
}
#debt{
font-size: 25px;
color: rgb(7,239,20);
text-decoration: none;
}
#content{
height: 75%;
width: 77%;
background-color: rgba(0,119,31,0.9);
border: solid rgb(127,0,0);
border-radius: 25px;
color: rgb(127,0,0);
font-size: 72px;
text-align: center;
float: right;
}
img{
height: 300px;
}
#credit{
font-size: 40px;
color: rgb(127,0,0);
font-family: Arial;
padding-left: 550px;
}
So yeah, that is basically it. I can't figure out what to do about it, and if I'm making a stupid mistake, I apologize. Help would be appreciated for this,
Thanks so much!
BTW. Fun fact- PharellPharell is my GitHub username, you can find me on there if you want to look me up.
I think you should be targeting the a tags instead of just the span they are wrapped in. For example:
#google a{
text-decoration:none;
}
Another approach is to remove the text-decoration from all the links on the site, which will allow the more specific rules to take precedence.
a {
text-decoration: none;
}
HTML & CSS question: For this assignment we are not supposed to use floats, but instead only use block, inline-block, and inline. Even though I have set the side-bar div to inline block, and the main-content div to inline-block, and the width less then the wrapper width, It is not aligning left and right. Can anyone please help me understand what I need to fix.
I know this is a lot of code to put in here, but I am not sure what I need to put in, and what I don't. I looked around and tried to find an answer but if this question has already been asked and solved please reference me. Thanks.
Google drive of the html and css (sorry to have to send the whole file, I was not sure what it was so I decided to attach the whole html and css file.)
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Word Stream</title>
<meta name="description" content="Pay per click search marketing software offers a means for accomplishing two core requirments for PPC optimization"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<!-- Header (Logo and Nav) -->
<div id="header">
<div id="nav">
<ul>
<li>Products</li>
<li>|</li>
<li>Products</li>
<li>|</li>
<li>Blog</li>
<li>|</li>
<li>Support</li>
<li>|</li>
<li>AdWords Grader</li>
</ul>
<form id ="login">
<label>
<button class="button" type="button">Login</button>
</label>
</form>
</div>
<div id="logo">
<img src="logo.png" alt="Logo">
<span id="word">Word</span>
<span id="stream">Stream</span>
</div>
</div>
<!-- Main content section -->
<div id="main-page">
<div id="banner">
<h1>WordStream Internet Marketing Software</h1>
</div>
<!-- main side of page -->
<!-- Side bar (info and Advertisment) -->
<div id="side-bar">
<div id="side-bar-content">
<h1>Wordstream for PPC</h1>
<h2>Drive More Profits Through PPC!</h2>
<p>Get Started with <span class="blue">Wordstream</span>'s Powerful PPC Platform Today</p>
<form>
<label>
<button class="button1" type="button">SCHEDULE DEMO</button>
</label>
<label>
<button class="button2" type="button">FREE TRIAL</button>
</label>
</form>
<p class="center">(No Credit Card Required)</p>
</div>
<!-- side bar ad -->
<div id="side-bar-ad">
<div id="wrap-img-text">
<h3>How does your adWords performance measure up?</h3>
<p>Get a free, instant report with the WordStream Adwords Performance Grader</p>
<form>
<label>
<button class="graded" type="button">Get Graded Today</button>
</label>
</form>
</div>
<img class="img" src="left_content_ad1.png" alt="Oops, your browser isn't showing this image.">
</div>
</div>
<div id="handle">
<div id="upper-bar">
<img class="inline" src="home_button.png" alt="home">
<span class="blue">PPC</span>
<!-- contact info and phone pic -->
<div id="contact" class="inline">
<img class="inline phone" src="phone.png" alt="phone">
<!-- text only -->
<div class="inline">
<p class="top">
<span class="hours">Mon - Fri 9 a.m. - 5 p.m. (EST)</span>
<br>
<span class="number">855.967.3787</span>
<br>
<span class="int-number">International: +1.617.963.0555</span>
</p>
</div>
</div>
</div><br/>
<!-- main content starts here -->
<div id="main-content">
<h1>PPC - Achieve More Efficiant Pay-Per CLick (PPC) Marketing</h1>
<p><span class="bold">PPC</span>(pay-per click) search marketing software offers a means for accomplishing two core requirements for PPC optimization:</p>
<ul>
<li>
<span class="bold">PPC Automation</span>-While it would be impossible (and inadvisable!) to automate every aspect of pay-per-click advertising, automating away redundant, time-consuming tasks affords you a means of increasing productivity. Often, this means being able to produce an amount of work that would otherwise have been unachievable for you and your business.
</li>
<li>
<span class="bold">PPC Management</span>-PPC management refers to the maintenance and prioritizing of paid seach marketing tasks. Being able to oversee various aspects of your account while assigning each item on a seemingly endless to-do list an appropriate value can make or break an online ad campaign.
</li>
</ul>
<p>
WordStream's PPC software is specifically designed to aid in these two PPC search engine marketing areas. This page will show you both the processes the software is automating for you, and the best course of action to take where workflow is concerned.
</p>
<!-- Bordered *Trial* box with logo and button -->
<div id="trial-box">
<img src="content_ad.png" alt="ad">
<div class="text-button">
<h3>Drive More Profits Through PPC - Try Our Platform FREE</h3>
<p>Get instant access to WordStream's innovative <span class="bold"> Quality Score</span> and <span class="bold">Account Management</span> tools through our <span class="bold"> FREE 7-day Trial</span>. Risk Free, No Credit Card Required and No Automatic Signups.</p>
<form>
<label>
<button class="get-started" type="button">Get Started Today!</button>
</label>
</form>
</div>
</div>
<!-- under the trial box -->
<h2>Automation And Your PPC Search Campaign</h2>
<p>Another two lines of text that I really dont feel like copying. Soooo much text to copy, not worth it. Im just writing this instead to fill in the space.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#wrapper{
width: 1000px;
margin: 0px auto;
}
/*HEader things*/
#header{
width: auto;
position: relative;
height: 100px;
}
#logo{
display: block;
text-align: left;
position: absolute;
bottom: 0px;
}
#logo img{
vertical-align: text-bottom;
width: 50px;
}
#word{
color: grey;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#stream{
color: blue;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#nav{
display: block;
margin: 10px 30px;
position: absolute;
right: 0px;
}
#nav ul{
display: inline-block;
background-color: #F0F0F0;
border-radius: 5px;
padding: 0px 10px 5px;
padding-bottom: 7px;
}
#nav li{
display: inline-block;
font-size: 12px;
vertical-align: middle;
}
#login{
display: inline-block;
margin-left: 20px;
}
.button{
width: 60px;
height: 25px;
background-color: blue;
border-radius: 5px;
border: 0px;
color: white;
}
/*Banner right under header*/
#banner{
background-color: blue;
padding: 5px 10px;
margin: 15px 0px;
font-size: 10px;
box-shadow: 0px 50px 200px grey;
}
#banner h1{
color: white
}
/*sidebar*/
#side-bar{
display: inline-block;
width: 220px;
}
#side-bar-content{
border-bottom: 1px solid lightgrey;
margin-bottom: 10px;
padding-bottom: 10px;
}
#side-bar h1{
font-size: 15px;
color: blue;
}
#side-bar h2{
font-size: 12px;
color: darkred;
}
#side-bar p{
font-size: 11px;
}
.button1{
border: 0px;
background-color: blue;
color: white;
width: 220px;
padding: 3px 0px;
margin-bottom: 3px;
border-radius: 5px;
}
.button2{
border: 0px;
background-color: orange;
color: white;
width: 220px;
padding: 3px 0px;
border-radius: 5px;
}
.center{
text-align: center;
}
/*Bottom half of sidebar*/
#side-bar-ad{
position: relative;
}
#wrap-img-text{
position: absolute;
left: 0px;
top: 0px;
padding: 10px;
}
#wrap-img-text h3{
font-size: 15px;
padding: 5px;
color: blue;
}
#wrap-img-text p{
padding: 3px;
}
.graded{
width: 180px;
background-color: darkblue;
color: white;
border-radius: 10px;
margin: 5px;
}
.img{
width: 210px;
height: auto;
}
.blue {
color: blue;
}
#handle{
vertical-align: top; display: inline-block;
}
/*Under the panel (phone number etc)*/
#upper-bar{
display: inline-block;
vertical-align: top;
position: relative;
width: 720px;
height: 110px;
border-bottom: 1px solid lightgrey;
}
#upperbar hr{
position: absolute;
bottom: 0px;
}
.inline{
display: inline-block;
vertical-align: top;
}
#contact{
position: absolute;
height: 110px;
right: 0px;
top: 0px;
}
.phone{
height: 70%;
width: auto;
}
.number{
color: blue;
font-family: Impact, Charcoal, sans-serif;
font-size: 45px;
}
.int-number{
font-size: 15px;
}
/*main content section*/
#main-content{
display: inline-block;
width: 700px;
vertical-align: top;
}
#main-content li{
list-style-type: square;
margin-left: 20px;
margin-bottom: 5px
}
#main-content h1{
font-size: 23px;
color: blue;
margin-bottom: 5px;
margin-top: 15px;
}
#main-content p{
margin-bottom: 5px;
margin-top: 15px;
}
.bold{
font-weight: bold;
}
#trial-box{
border: 5px solid blue;
padding: 10px;
}
#trial-box img{
display: inline-block;
vertical-align: top;
}
.text-button{
display: inline-block;
width: 600px;
vertical-align: top;
}
h3{
color: blue;
}
.get-started{
background-color: limegreen;
color: white;
border-radius: 5px;
border: 0px;
width: 150px;
padding: 5px;
}
h2{
color: blue;
font-size: 17px;
margin-top: 10px;
}
Output:
Check out this Fiddle
EDIT:
Q:Why the code didn't work before?
A:
I'm looking to make an offline search page powered by Google. I am having a little trouble with the search button though, it just seems to do whatever it wants. I want it to be relative above the textarea on the left. I would like for it to stay in that corner of the textarea even when the textarea is expanded. (This webpage is not designed for multi-browser supported it is, designed for Firefox only.)
<style>
body{
background: url(bg.jpg);
background-size: cover;}
textarea{
display: block;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 12px;
color: #ffffff;
font-family:"Courier New", Courier, monospace;
font-size: 16px;
text-decoration: none;
cursor: poiner;
border: none;}
button{
background-color: #000000;
border-radius: 12px;
font-family: "Times New Roman", Times, serif;
font-size: 24px;
text-decoration: none;
cursor: poiner;
border: none;}
button:hover{
border: none;
background: #5B93F5;}
footer{
position: absolute;
bottom: 0px;
right: 0px;
text-align: right;
color: #FFFFFF;}
</style>
</head>
<body>
<div id="searchContainer">
<form id="searchForm" name="searchForm" onsubmit="onSearchSubmit(event)">
<button id="searchSubmit" type="submit" value="Search" title="Google Search">
<font color="blue">G</font><font color="red">o</font><font color="yellow">o</font><font color="blue">g</font><font color="green">l</font><font color="red">e</font>
</button>
<textarea id="searchText" type="text" name="q" maxlength="255" rows="3" cols="50" autocomplete="off" autofocus></textarea>
</form>
</div>
<footer>v5.0</footer>
</body>
</html>
Add following in your css code:
#searchContainer { text-align: center; }
#searchContainer > form { display: inline-block; text-align: left; }
it should resolve your issue.
For the code you have, you can add a padding to the container: JS Fiddle
Add this line to your CSS:
#searchContainer{padding: 2em; display: inline-block;}
For a little more style if you want them connected, you can adjust some border-radius' and margins of the button and text area: JS Fiddle 2