First of all I'm using Django, and I've my CSS inside of my HTML file.
Here's what my situation looks like as of right now: I've finished setting a sidebar for the dashboard, aka the members area, and I want to offer users the option to show or hide the latter, just like most popular website nowadays do, including Youtube.
I've the following code in the body:
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
And the following one in the head
<style type="text/css">
.toggle-btn {
position:absolute;
left:230px;
top:20px;
}
.toggle-btn span {
display:block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
</style>
It is indeed supposed to look just like this , but nothing shows up next to the sidebar. If someone could point out what I might have done wrong, or missed doing, I would super appreciate it.
Related
I am trying to convert an existing element in my HTML page to a link, the element has additional css functions to scale it when you hover your mouse over it.
<!DOCTYPE html>
<html>
<head>
<style>
.lefthotbarbtn{
float:left;
padding:12px;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.lefthotbarbtn:hover{
float:left;
padding:12px 32px;
font-family:Verdana,sans-serif;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
.contactusbtn{
float:right;
padding:12px;
background-color:white;
border-radius:69px;
color:black;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.contactusbtn:hover{
float:right;
border-radius:0px;
padding:12px 24px;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
</style>
</head>
<body>
<div class="lefthotbarbtn">Home</div>
<div class="lefthotbarbtn">Who Are We?</div>
<div class="lefthotbarbtn">Products</div>
<div class="lefthotbarbtn">Help!</div>
<div class="contactusbtn">contact us</div>
</div>
</body>
</html>
I have tried various ways of converting each individual into a link without deleting existing information but whenever I did, the text would either disappear or move. What I want to be able to do is simply have the text as a link without changing the appearance of it and I can't figure out how.
Please mention the things you have tried in future.
I'll say a few things:
If all you want is to make them into link simply use the a link tag.
To me it seems like your building a header. Use nav with ul li with a. Keeps things clean and generally good practice.
If you want to go down this route you can can convert div to a and then use css to design the a however you like.
But If there is a problem with that try you can also do this (Not a good idea in general, why?):
<div class="lefthotbarbtn">Who Are We?</div>
I am designing a very basic webpage, with basic HTML and CSS.
So, I have designated a subpage for my "blog":jx-s-potato.glitch.me
On the page,by writing the following code:
<body>
<h1 id="title1"><u>The Blog</u></h1>
</body>
I expected "The Blog" to show up with an underline.However, only "The Blo" got underlined. I thought that this was a problem with my browser so I used Safari to view it.The problem remained.
Is there something wrong about my code? Please help!
A workaround would be to use some styling and mimic the underline.
I used Pseudo-element after here, but you can do whatever you like.
u{
position:relative;
text-decoration:none;
}
u:after{
content: '';
width: 100%;
height:2px;
background-color: black;
position:absolute;
left:0;
bottom:4px;
}
<h1 id="title1"><u>The Blog</u></h1>
I'm working on a Classifieds/Ads Page for a client using content from a specific Database. I'm close to get the look I'm looking for but now I have a problem. I don't want CSS Styles for the empty boxes to the available spaces.I just want the CSS Styles on the ones that will appear once the information arrive to the database and it's ready to show on the Classifieds/Ads page.
Is there a way to have a CSS style that only is applied when content is present?
This is my test page.
notice how I kind of cheated the CSS style so the blank boxes (spaces) show a text saying: "place your ad here!" but I really don't want those blank boxes there. Any help will be apreciate!
thanks in advance.
All you need to do is to find the parent div which does not have content on its header (for instance) using jQuery. Then you can set its display property to none. I have created a working example ****HERE****
HTML:
class="ad">
<h2>This is an ad</h2>
<p>this is the ad which has been added by the database</p>
</div>
<div class="ad">
<h2></h2>
<p></p>
</div>
CSS:
* {box-sizing: border-box;}
h2, p {margin:0; padding:0;}
.ad {
display: block;
float: left;
height:300px;
width:130px;
background: #999;
margin: 10px 20px;
padding: 5px;
}
jQuery:
$(".ad").each(function() {
if ($(this).find("h2").text() == "") {
$(this).css("display","none");
};
})
This seems more of a backend issue than a CSS one. Your php script shouldn't be outputting html for ads that don't exist.
This might be a very silly question but here goes nothing: is there any asp net control, ajax control toolkit or html/css tag to create something like a radiobuttonlist, horizontally aligned with all radiobuttons connected by a line or dotted line? I would have uploaded a picture but I lost all my reputation on a previous bounty and it seems I have to have at least 10 rep to upload an image.
Basically, I have a web form in which the user inputs some data and then that data has 4 steps: draft, completed, sent to approval, approved. I would like to have these 4 steps at the top of the page and based on the current status, check the appropriate status on that ribbon.
UPDATE:
A picture's worth a 1000 words so therefore this is what I need:
And also this control should be "controlled" in the code-behind.
You can easily make this with html/css.
<div class="bubble active"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>
And some basic css
.bubble
{
border-radius:50%;
height:40px;
width:40px;
background: #aaa;
display:inline-block;
margin:0 -3px;
}
.bubble.active
{
background:red;
}
.connector
{
display:inline-block;
height:3px;
width:10%;
background: #aaa;
vertical-align:middle;
margin-top:-30px;
}
Check out this fiddle. Just add/remove the active class to the bubbles at will. And you can also add a done class or something.
Given is the following page (SSCCE, just like we all like it):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
border:0;
margin:0;
padding:0;
}
body {
background:#BCD5E1;
font:.85em Verdana;
}
#flag_panel {
position:absolute;
right:15px;
top:20px;
}
#flag_panel img {
vertical-align:middle;
}
#flag_panel .selected_image {
border:solid 2px #444;
padding:5px;
}
</style>
</head>
<body>
<div id="flag_panel">
<a href="#">
<img src="ro.gif" />
</a>
<img class="selected_image" src="us.gif" />
</div>
</body>
</html>
This HTML file together with the 2 images can be found at the URL: image-problem.zip (1.6 KB)
The expected result is:
But the actual result is:
As you can see, there's a little underscore between the 2 images. And I can't figure out why.
I tried this code in Firefox v24 and in Chrome v31. So I'm pretty sure I'm the one missing something.
I noticed that this problem goes away in 2 situations:
if the <img class="selected_image"... comes before <a href="#"... (a.k.a. if they're swapped)
if the first image is NOT enclosed inside an achor tag (<a>).
The goal of this piece of code is to be able to switch languages between English and Romanian on a site that I own. So one of the images must always have that border around it and the other must always be clickable. But I want to be able to do this without that underscore appearing there (looks ugly / buggy).
Any ideas on how to solve this ? Thanks.
Put the a tag element and its content on one line, like: <img src="ro.gif" />
EDIT:
The text-decoration: none; approach still leaves you with a clickable white space.
Just use the below in your code
#flag_panel a {
text-decoration: none;
}
Because you are using, so white space is the issue there
<a href="#">
<img src="#" />
</a>
So that's nothing but default text-decoration
Generally you should use the below snippet in your CSS
a {
text-decoration: none; /* Gets rid of dirty default underline */
}
Note: The above is an element selector, will select all a elements
in the document, but this is a general approach so thought I should
share one..
Also, I just went through your profile and I saw that you are not that friendly with HTML and CSS, so here's a tip for you, use CSS Reset stylesheet, it will save your time when dealing with cross browser inconsistencies ... Or if you are not that worried about.. than use the below snippet in your CSS..
* {
margin: 0;
padding: 0;
outline: 0;
}
The above selector simply selects all the elements in your document and gets rid of all the default margin and padding of the elements which are applied by the browser default stylesheet.
I think your problem is with text-decoration property that for default is underline in a tags. Just add this to the CSS:
a {
text-decoration:none;
}
The demo http://jsfiddle.net/XF2qL/6/
I'm not sure but closing the outer div is missing?