<div class="HeaderLink" id="Home">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDB1</title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
<body id="HeaderFive">
<div class="HeadPanelElement" lang="en" id="HeadPanel"> Blog
Videos
Home
Contact
About MDB1 </div>
</body>
</html>
</div>
#charset "utf-8";
/* CSS Document */
.HeadPanelElement{
position: absolute;
width: 10%;
left: -10%;
}
#HeadPanel{
left: 15%;
width: 100%;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
border: dashed;
border-color: #C00;
border-width: 2px;
font-size: 1em;
Intentions are for the page to layout like this
Why aren't the position attributes working?
quick to do ...
#HeadPanel
{
display: inline;
width: 100%;
}
.HeadPanelElement
{
width: 10%;
/* or
padding: 10px; */
}
the real factor here is the display: inline; which will layout the div in a side by side fashion.
You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.
position: absolute; will help you get that interesting layout.
For declarations like left and top to make any sense, you need to apply them to positioned elements:
#foo {
position:absolute;
top:10%;
left:25%;
}
Your elements don't appear to have be positioned as absolute or relative.
There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Foo Example</title>
<style type="text/css">
#foo {
position:absolute;
top:10%; left:10%;
background:yellow;
padding:10px 20px;
border:1px solid #000;
color:#000;
width:30%
}
</style>
</head>
<body>
<!-- all markup goes here -->
<div id="foo">Hello World</div>
<!-- all markup goes here -->
</body>
</html>
Online Demo: http://jsbin.com/efukol/edit
There are a few things going on here:
The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.
This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.
I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.
Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.
Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.
Now to get these things going across, you can go a few ways:
/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}
/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}
Related
This is my css code what should i add to reduce the size of the link to where its just the word is a clickable link?
<style>
ul {
list-style-type: none;
}
li {
float: center;
}
li a {
display: block;
color: Black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
text-decoration: underline;
background-color: #6CCFFFb1;
}
.active {
background-color: #6CCFFF ;
}
</style>
</head>
I've read some stuff but most code I've added hasn't worked or distorted the image of the webpage.
<!DOCTYPE html>
<head>
<title>Andis Place</title>
<link rel="stylesheet" type="text/css"href="stylesheet.css"/>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body style="font-family:Courier New;" bgcolor="White"
<head>
<h1 style="color:Orange;"> <center>Welcome to Andis Place</center></h1>
</head>
</body>
<body>
<p style="font-size:15px;">Enjoy… </p>
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:none">
<li class="external-link">
Soundcloud
</li>
<li class="external-link">
Shop
</li>
<li class="external-link">
Photos
</li>
<li class="external-link">
About Me
</li>
</ul>
</body>
<body>
</body>
</html>
This is my html code.
Move where you do your float.
Change your style from this:
ul {
list-style-type: none;
}
li {
float: center;
}
li a {
:
:
To this:
ul {
list-style-type: none;
float: center
}
li a {
display: block;
color: Black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
:
:
Notice that I removed the "li" style altogether... also remove the style application on the UL tag itself. The CSS is sufficient.
I would recommend that you spend some more time working on some html and css basics while you are trying to fix this problem. I see a lot of errors in your markup and your styles that, although they may not be related to this particular issue, do make it harder to isolate just this behavior that you want to modify. The Mozilla HTML introduction is a good place to start.
Particularly you want to make sure that your HTML document is structured correctly. Only one body tag, no display content in the head tag, proper sets of opening and closing tags, etc. Focusing on these fundamentals makes debugging your code a lot easier (for you and others).
You are also trying to set a few css properties with values that don't actually exist, such as float:center.
As for this particular behavior you are seeing, this happens because it is the default behavior for block level elements to fill their container 100%. So your list items are stretching all the way across the screen, and you have set your anchor elements display: block as well, so they are stretching all the way across the screen. Try removing display:block and text-align:center from the anchor elements and just setting text-align: center on the li instead. (It is not necessary to set display: block on an li because that is it's default value.
You can see a very simple example here in this codepen.
I created a beautiful faux legend for a box that surrounds some text: jsfiddle. However, my solution uses :before and :after pseudo classes, which won't work in IE 7 and IE 8. Bummer.
So I decided I would set out to try to define my own spans to use in the place of the :before and :after pseudo classes. Unfortunately, my solution seems to work for the :before replacement, but not the :after replacement: jsfiddle. Also, the contents of the box have been shifted upwards for some inexplicable reason.
Is it possible to accomplish what I am doing through CSS and HTML alone? I don't want to bring any Javascript or jQuery into the mix.
Thanks!
http://www.webdevout.net/test?01&raw:
<!doctype html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
background: #ff3366;
font: 16px serif;
}
fieldset {
border: 3px solid #ffc2d1;
}
legend {
background: url(http://img820.imageshack.us/img820/4242/spritearrowdown.png) no-repeat 3px 50%;
padding: 0 0 0 13px;
}
html > /**/ body
legend { /* if the way it looks in IE8 really bothers you: */
position: relative;
right: -13px;
}
</style>
</head>
<body>
<form action="foo">
<fieldset>
<legend>Model Forecast Guidance</legend>
Fieldset
</fieldset>
</form>
</body>
</html>
It goes without saying that I'm not having any issue with modern browsers. Here is my page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<body onload="initializeWidgets();">
<!-- ### Banner ### -->
<jsp:include page="part_banner.jsp"></jsp:include>
<!-- Extra space occurs here... -->
<!-- ### Filters and Table ### -->
<div class="G_overallContainer">
<div class="G_subContainer">
<div class="G_subContainerSection">
<h:outputText value="Filtering Options" styleClass="G_subContainerSectionHeader"/>
<!-- ...here... -->
<!-- ### Filter bar ### -->
<jsp:include page="part_filters.jsp"></jsp:include></div>
<!-- ...here... -->
<div class="G_subContainerSection">
<h:form id="tableForm">
<div class="table">
<h:dataTable value="#{tableDataBean.data}" var="data"
headerClass="tableHeaders"
rowClasses="oddRow,evenRow">
</h:dataTable></div>
<!-- ...and somewhere after here -->
</h:form></div></div>
<h:messages layout="table" style="color:red;" showSummary="true" showDetail="false"/></div>
</body>
</f:view>
</html>
Here is my css for the nested div containers:
body {
margin:0px;
border:none;
padding:0px;
width: 100%;
}
.G_overallContainer {
position: static;
display:block;
border:none;
padding: .25em;
border-width: 0;
border-style: none;
border-spacing: 0;
}
.G_subContainer {
display: block;
border: none;
padding: .25em;
margin:0;
border-style: none;
background-color: #0f2d65;
}
.G_subContainerSection {
display: block;
margin: .25em;
border:none;
}
.G_subContainerSectionHeader {
font-style: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
display: block;
padding: .5em;
background: url(../image/steel-blue.png) repeat-x;
color: #000000
}
It looks like there is about 10 to 15px extra space in between each of these elements in IE6. I am tempted to blame the div tags as I am aware that there are some IE6 bugs that cause issues like this due to extra white space within the divs, but the extra space only occurs after certain div tags like the two subContainerSections and after the banner which contains no divs. I have tried setting all margins to zero but that does not solve the problem. It is as if there is something BETWEEN the margin and the border of the offending elements...
What do you guys think?
edit:
Threw my DOCTYPE up there for clarification
Here is an extremely cut down version of my page: link. If you view it with IE6 you will see the separation of the "filters" header from the body.
If you could throw up an example on jsFiddle that would help a lot, but I do know that IE6 has problems with horizontal spacing that can be fixed by settings the elemnts zoom,
.myhorzel{
zoom:1;
}
<div class="HeaderLink" id="Home">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDB1</title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
<body id="HeaderFive">
<div class="HeadPanelElement" lang="en" id="HeadPanel"> Blog
Videos
Home
Contact
About MDB1 </div>
</body>
</html>
</div>
#charset "utf-8";
/* CSS Document */
.HeadPanelElement{
position: absolute;
width: 10%;
left: -10%;
}
#HeadPanel{
left: 15%;
width: 100%;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
border: dashed;
border-color: #C00;
border-width: 2px;
font-size: 1em;
Intentions are for the page to layout like this
Why aren't the position attributes working?
quick to do ...
#HeadPanel
{
display: inline;
width: 100%;
}
.HeadPanelElement
{
width: 10%;
/* or
padding: 10px; */
}
the real factor here is the display: inline; which will layout the div in a side by side fashion.
You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.
position: absolute; will help you get that interesting layout.
For declarations like left and top to make any sense, you need to apply them to positioned elements:
#foo {
position:absolute;
top:10%;
left:25%;
}
Your elements don't appear to have be positioned as absolute or relative.
There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Foo Example</title>
<style type="text/css">
#foo {
position:absolute;
top:10%; left:10%;
background:yellow;
padding:10px 20px;
border:1px solid #000;
color:#000;
width:30%
}
</style>
</head>
<body>
<!-- all markup goes here -->
<div id="foo">Hello World</div>
<!-- all markup goes here -->
</body>
</html>
Online Demo: http://jsbin.com/efukol/edit
There are a few things going on here:
The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.
This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.
I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.
Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.
Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.
Now to get these things going across, you can go a few ways:
/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}
/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}
I'm writing code in Stylish, a firefox plugin, to change the image that is showing up.
The image property doesn't have a div tag, so I have to use this:
img[src*="s_dschjungelplanet"]{
##########
}
So this will replace "s_dschjungelplanet" anywhere in the page, in a img src.
So my main problem is that I'm not sure HOW to tell it to replace the src="xxx".
Ta for replies
There is no easy way. I think you'd be better of with greasemonkey scripts, as with a simple such script you can change the url.
As far as I know, you can not change the url with css only. This was the closest I was able to come with css only:
img[src*="s_dschjungelplanet"]{
width:0;
height:70px;
padding-right:250px;
background:transparent url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) top left no-repeat;
}
You can try this:
img[src*="s_dschjungelplanet"]{
content: url("myfavorite.png");
}
Works in Chrome, not in Firefox...
img[src*="http://url-of-image-to-be-replaced.jpg"]{
background-image: url("https://url-of-image-you-want-to-display.jpg");
width:38px;
display:inline-block;
padding:38px 0 0 0;
height: 0px}
Change the width and padding to your specs. It's worked for me.
replace the img src
.image-replacement {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif)
no-repeat;
width: 180px;
height: 236px;
padding-left: 180px;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Image replaced with Image</h2>
<img class="image-replacement" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80" />
</body>
</html>