What am i doing wrong in this css/html?
Question
here is some code from the css
#linkheader/*Links bar for access to other parts of the website*/
{
width:900px;
border-radius:25px;
margin:20px 50px 0px 0px;
padding:5px;
border:1px dotted orange;
text-align:center;
float:right;
color:orange;
background-color:rgba(20,10,10,0.7);
}
.sourcelinkheader
{
width:1000px;
}
#content /*Material Container for Sources and Index*/
{
width:1000px;
margin:10px auto;
border:2px solid orange;
background-color:rgba(20,10,10,0.7);
}
html body
<body>
<div id="header">
<h1>Information and Image Sources</h1>
</div>
<div id="linkheader" class="sourcelinkheader">
<p>
<p><a href="index.html">Index</a> -
<a href="Verkhluti_1.html">Introduction</a> -
<a href="Verkhluti_1_katana.html">Nihontō</a> -
<a href="Verkhluti_1_zweihander.html">Great Sword</a> -
<a href="Verkhluti_1_gladius.html">Gladius</a> -
<a href="Verkhluti_1_european swords.html">European</a> -
<a href="Verkhluti_1_fencing.html">Fencing</a> -
<a href="Verkhluti_1_source.html">Sources</a>
</p>
</div>
<div id= "content">
<a href="http://en.wikipedia.org/wiki/Sword"><img src=http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Wikipedia_wordmark.svg/174px-Wikipedia_wordmark.svg.png alt="Wikipedia"></a>
<p><a href="http://www.weedhopper.org/">Metal Bakgrunnstextíll</a></p>
</div>
<div class= "footer">
</div>
</body>
My desired result is that the linkheader's width becomes 1000px and i want it to be located above "content" not inside of it.
What did i do wrong?
As requested, http://jsfiddle.net/zjd9d/
4 answers
solution1
3 2013-04-04 10:07:50
float:right;
在您的内容样式中添加上面的代码将修复此问题并获得我认为您需要的内容是一个示例http://jsfiddle.net/qbBk6/2/
solution2
1 2013-04-04 10:12:25
The width of the linkheader is defined twice, first through an id: #linkheader and then through a class .sourcelinkheader .
Even though width: 1000px; has been set on the second rule, the first one is more specific (id instead of class) so the first one applies (read more on specificity here: https://developer.mozilla.org/en-US/docs/CSS/Specificity )
solution3
0 2013-04-04 10:19:03
this is how i fixed it.
I changed my css code to this.
#linkheader/*Links bar for access to other parts of the website*/
{
width:900px;
border-radius:25px;
margin:20px 50px 0px 0px;
padding:5px;
border:1px dotted orange;
text-align:center;
float:right;
color:orange;
background-color:rgba(20,10,10,0.7);
}
#linkheader.sourcelinkheader
{
float:none;
margin: 10px auto;
width:1000px;
}
The thing that fixed it for me was changing
.sourcelinkheader
to
#linkheader.sourcelinkheader
and removing the float from it and using margin instead. (Since all windows were supposed to be centered.)
solution4
0 2013-04-04 10:49:29
Hey Rabcor you can easily achieve your desired result through simple css how i did it :
Just removed float:right and gave the width:1000; to your id #linkheader
and its working fine....
CSS
#linkheader
/*Links bar for access to other parts of the website*/
{
width:1000px;
border-radius:25px;
margin:20px 50px 0px 20px;
padding:5px;
border:1px dotted orange;
text-align:center;
color:orange;
background-color:rgba(20, 10, 10, 0.7);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.