Member Avatar for kemkoi

Allright, I've searched around for really long but I can't seem to get any solution... The thing I want is to make my link float to the right but it stops like 50 px from the end here's my HTML code

<ul id="fullylinked">
 </a>
 </li>
<li>
<style type="text/css">
<!--
A:link { COLOR: #400000; TEXT-DECORATION: none; font-weight: normal }
A:visited { COLOR: #400000; TEXT-DECORATION: none; font-weight: normal }
A:active { COLOR: #400000; TEXT-DECORATION: none }
A:hover { COLOR: red; TEXT-DECORATION: none; font-weight: none }
-->
</style>
<p><U><b><a href="http://www.fullylinked.com/">Fullylinked - Latest links from the web</a></b></U></p> 
</a>
</li>
</ul>

And here's my CSS code:

#underskiten ul#fullylinked{
	float:right;
	margin-right: 10px;
	position: relative;
	bottom: 140px;
}

Here's a screenshot of what it looks like in the browser:

So why is the link not floating to the right? I have no idea, please help!

  • 4 Contributors
  • 4 Replies
  • 185 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Brief diagnosis and a small, practical fix.

The layout problem is caused by invalid HTML plus conflicting CSS. The original markup contains stray/nested closing anchors and an inline <style> block inside the list; the stylesheet selector shown in replies used a wrapper id that does not exist (#underskiten), so rules never applied. Mixing float:right with position:relative and bottom:140px also produces odd gaps because the element is still participating in the flow while being shifted. As noted, move styles out of the list; as noted, make the selector match the actual HTML and avoid mixing float + relative offset.

A clean, minimal approach (float solution):

<ul id="partner-links">
  <li><a href="http://fullylinked.example/" rel="nofollow">Fullylinked - Latest links from the web</a></li>
</ul>

#partner-links {
  float: right;
  margin: 0 10px 0 0;
  list-style: none;
}
#partner-links li { display: inline-block; }
#partner-links a  { text-decoration: none; color: #400000; }

Alternative: position inside a positioned container if precise top/right placement is required:

.wrapper { position: relative; }
#partner-links { position: absolute; right: 10px; top: 20px; margin: 0; list-style: none; }

Quick troubleshooting checklist (use browser dev tools to inspect the computed box model):

  • Validate and fix the HTML: remove duplicate/stray </a> tags and nested anchors; place the anchor inside a single <li>.
  • Ensure the CSS selector matches the element (remove the missing #underskiten prefix or add the wrapper).
  • Remove bottom:140px from floated elements; use margins or absolute positioning instead.
  • Temporarily add an outline to see bounding boxes (for example #partner-links { outline:2px solid magenta; }) and check parent padding/right margin or any sibling floats that might be reserving ~50px.

Fixing the markup and then inspecting computed margins/padding will reveal the exact cause of the 50px gap.

Recommended Answers

All 4 Replies

Member Avatar for Arkinder

Please post the complete markup or a link to a test page, otherwise we're left to stab in the dark for problems.

The <u> and <b> tags are deprecated and shouldn't be used. Also, the style tag and CSS belongs in your head section.

Try decreasing the height value of 'Partners.'

Regards
Arkinder

Member Avatar for leakbali

Trying this,

<style type="text/css">
    <!--
    a:link { color: #400000; text-decoration: none; font-weight: normal}
    a:visited { color: #400000; text-decoration: none; font-weight: normal }
    a:active { color: #400000; text-decoration: none }
    a:hover { color: red; text-decoration: none; font-weight: none }
	
	ul#fullylinked{
    float:right;
    margin-right: 10px;
	bottom: 140px;
    }
    -->
    </style>

    <ul id="fullylinked">
    <li>
    <a href="">Fullylinked - Latest links from the web</a>
    </a>
    </li>
    </ul>

In the CSS you write, there is selector id named underskiten, which i don't find it in your html.

Don't use attribute position with value relative, because you already use attribute float with value right. it force the element to the right.

Don't use u, i, or b element, always write your page format with css style, for u you use

text-decoration : underline

, i element using

font-style : italic

, and b element using

font-weight : bold

Good luck

Member Avatar for RAICK

how to hyperlink a text and make spaces between it ?
like i want to to under line "daniweb.com" and want to show it in center of my page.
Thanks in advance

Member Avatar for Arkinder

how to hyperlink a text and make spaces between it ?
like i want to to under line "daniweb.com" and want to show it in center of my page.
Thanks in advance

Please do not hijack threads. If you have a question make another post. Here's an example. If you still can't figure it out, make another post and we'll be more than happy to help you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
     
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <style type="text/css">
                
                #centeredLink { margin: 0 auto;}

            </style>
        </head>
     
        <body>

            <div id="centeredLink">
                <a href="http://URL/">daniweb.com</a>
            </div>

        </body>
     
    </html>

Regards
Arkinder

Edited by Arkinder because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.